import React, { useState, useEffect, useRef } from 'react';
import { 
  FileText, Plus, History, Settings, User, ChevronRight, 
  Sparkles, Code, MessageSquare, Briefcase, Download, 
  Copy, Check, AlertCircle, ArrowLeft, Trash2, Cloud,
  Sun, Moon
} from 'lucide-react';

// Firebase Imports
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, doc, setDoc, onSnapshot, deleteDoc } from 'firebase/firestore';

// --- UTILITIES & API ---

const apiKey = ""; // Provided by execution environment

// Firebase Setup
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// Exponential backoff fetcher for Gemini API
const fetchWithRetry = async (url, options, maxRetries = 5) => {
  let delays = [1000, 2000, 4000, 8000, 16000];
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url, options);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      await new Promise(res => setTimeout(res, delays[i]));
    }
  }
};

const generatePRDWithAI = async (formData) => {
  const systemPrompt = `You are an expert Product Manager and Software Architect. Your job is to transform raw software ideas into structured, engineering-ready Product Requirements Documents (PRDs).
  
  Follow these rules:
  1. Output ONLY in Markdown format.
  2. Be highly specific and technical, avoiding fluff.
  3. You MUST include exactly these sections:
     - 1. Overview (Problem Statement & Core Value)
     - 2. Target Audience
     - 3. MVP Feature Scope (Bullet points of core features)
     - 4. User Flow (Step-by-step)
     - 5. System Architecture (Mermaid Sequence Diagram using \`\`\`mermaid)
     - 6. Database Schema (Mermaid ERD using \`\`\`mermaid)
     - 7. Technical & Design Constraints
  4. Write the PRD in the requested language.`;

  const userPrompt = `
  Please generate a PRD based on the following input:
  - Product Name: ${formData.productName || 'Untitled Project'}
  - Raw Idea: ${formData.rawIdea}
  - Target User: ${formData.targetUser || 'General users'}
  - Platform: ${formData.platform}
  - Scope Level: ${formData.scopeLevel}
  - Preferred Language: ${formData.language}
  - Detail Level: ${formData.detailLevel}
  `;

  const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
  
  const payload = {
    contents: [{ parts: [{ text: userPrompt }] }],
    systemInstruction: { parts: [{ text: systemPrompt }] }
  };

  const data = await fetchWithRetry(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });

  return data.candidates?.[0]?.content?.parts?.[0]?.text || "Generation failed. Please try again.";
};

// Dynamic Script Loader
const loadScript = (src, globalVar) => {
  return new Promise((resolve, reject) => {
    if (window[globalVar]) return resolve(window[globalVar]);
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(window[globalVar]);
    script.onerror = reject;
    document.head.appendChild(script);
  });
};

// --- GLOBAL STYLES (Roboto Font) ---
const GlobalStyles = () => (
  <style dangerouslySetInnerHTML={{__html: `
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
    
    * {
      font-family: 'Roboto', sans-serif;
    }
    
    /* Smooth scrolling and text rendering */
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* Custom Scrollbar for elegant look */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: transparent; 
    }
    ::-webkit-scrollbar-thumb {
      background: #475569; 
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #10b981; /* Tailwind emerald-500 for dark mode cohesion */
    }
  `}} />
);

// --- COMPONENTS ---

const Button = ({ children, variant = 'primary', className = '', isLoading, icon: Icon, ...props }) => {
  const baseStyle = "inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
  const variants = {
    // Light mode uses orange, Dark mode uses emerald
    primary: "bg-orange-600 text-white hover:bg-orange-700 focus:ring-orange-500 shadow-sm dark:bg-emerald-600 dark:hover:bg-emerald-500 dark:text-white dark:focus:ring-emerald-500",
    secondary: "bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-orange-500 shadow-sm dark:bg-slate-800 dark:text-slate-200 dark:border-emerald-800/50 dark:hover:bg-slate-700 dark:focus:ring-emerald-500",
    ghost: "text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100",
    danger: "bg-red-50 text-red-600 hover:bg-red-100 focus:ring-red-500 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50 dark:focus:ring-red-500"
  };

  return (
    <button className={`${baseStyle} ${variants[variant]} ${className}`} disabled={isLoading || props.disabled} {...props}>
      {isLoading ? (
        <svg className="animate-spin h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      ) : Icon ? <Icon size={16} /> : null}
      {children}
    </button>
  );
};

const Input = ({ label, id, error, className = '', ...props }) => (
  <div className={`space-y-1.5 ${className}`}>
    {label && <label htmlFor={id} className="block text-sm font-medium text-slate-700 dark:text-slate-300">{label}</label>}
    <input
      id={id}
      className={`block w-full px-3 py-2 text-sm rounded-lg border bg-white dark:bg-slate-900/80 dark:text-slate-100 ${error ? 'border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-500/50 dark:focus:border-red-500 dark:focus:ring-red-500' : 'border-slate-300 dark:border-emerald-800/50 focus:border-orange-500 dark:focus:border-emerald-500 focus:ring-orange-500 dark:focus:ring-emerald-500'} shadow-sm transition-colors`}
      {...props}
    />
    {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
  </div>
);

const Textarea = ({ label, id, error, className = '', ...props }) => (
  <div className={`space-y-1.5 ${className}`}>
    {label && <label htmlFor={id} className="block text-sm font-medium text-slate-700 dark:text-slate-300">{label}</label>}
    <textarea
      id={id}
      className={`block w-full px-3 py-2 text-sm rounded-lg border bg-white dark:bg-slate-900/80 dark:text-slate-100 ${error ? 'border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-500/50 dark:focus:border-red-500 dark:focus:ring-red-500' : 'border-slate-300 dark:border-emerald-800/50 focus:border-orange-500 dark:focus:border-emerald-500 focus:ring-orange-500 dark:focus:ring-emerald-500'} shadow-sm transition-colors min-h-[100px] resize-y`}
      {...props}
    />
    {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
  </div>
);

const Select = ({ label, id, options, error, className = '', ...props }) => (
  <div className={`space-y-1.5 ${className}`}>
    {label && <label htmlFor={id} className="block text-sm font-medium text-slate-700 dark:text-slate-300">{label}</label>}
    <select
      id={id}
      className={`block w-full px-3 py-2 text-sm rounded-lg border bg-white dark:bg-slate-900/80 dark:text-slate-100 ${error ? 'border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-500/50 dark:focus:border-red-500 dark:focus:ring-red-500' : 'border-slate-300 dark:border-emerald-800/50 focus:border-orange-500 dark:focus:border-emerald-500 focus:ring-orange-500 dark:focus:ring-emerald-500'} shadow-sm transition-colors`}
      {...props}
    >
      {options.map(opt => (
        <option key={opt.value} value={opt.value}>{opt.label}</option>
      ))}
    </select>
  </div>
);

const Toast = ({ message, type = 'success', onClose }) => {
  useEffect(() => {
    const timer = setTimeout(onClose, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className={`fixed bottom-4 right-4 flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg text-sm font-medium animate-in slide-in-from-bottom-5 fade-in duration-300 z-50 ${
      type === 'success' ? 'bg-orange-600 dark:bg-emerald-600 text-white' : 'bg-red-600 text-white'
    }`}>
      {type === 'success' ? <Check size={16} /> : <AlertCircle size={16} />}
      {message}
    </div>
  );
};

// Markdown Renderer with Mermaid support
const MarkdownRenderer = ({ content, theme }) => {
  const containerRef = useRef(null);
  const [html, setHtml] = useState('');

  useEffect(() => {
    let isMounted = true;

    const renderContent = async () => {
      try {
        const marked = await loadScript('https://cdn.jsdelivr.net/npm/marked/marked.min.js', 'marked');
        await loadScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js', 'mermaid');
        
        if (window.mermaid) {
          window.mermaid.initialize({ 
            startOnLoad: false, 
            theme: theme === 'dark' ? 'dark' : 'neutral', 
            securityLevel: 'loose' 
          });
        }

        if (!isMounted) return;

        const rawHtml = marked.parse(content);
        setHtml(rawHtml);

      } catch (err) {
        console.error("Failed to render markdown", err);
        setHtml(`<p class="text-red-500">Error rendering content.</p><pre>${content}</pre>`);
      }
    };

    renderContent();
    return () => { isMounted = false; };
  }, [content, theme]);

  useEffect(() => {
    if (html && window.mermaid && containerRef.current) {
      const codeBlocks = containerRef.current.querySelectorAll('code.language-mermaid');
      codeBlocks.forEach((block, index) => {
        const source = block.textContent;
        const div = document.createElement('div');
        div.className = 'mermaid my-6 flex justify-center bg-slate-50 dark:bg-slate-900/50 p-4 rounded-xl border border-slate-100 dark:border-slate-800 overflow-x-auto';
        div.id = `mermaid-${Date.now()}-${index}`;
        div.textContent = source;
        
        const pre = block.parentNode;
        pre.parentNode.replaceChild(div, pre);
      });

      try {
        window.mermaid.run({ querySelector: '.mermaid' });
      } catch (e) {
        console.warn("Mermaid parsing error:", e);
      }
    }
  }, [html]);

  return (
    <div 
      ref={containerRef}
      className="prose prose-slate dark:prose-invert prose-orange dark:prose-emerald prose-sm sm:prose-base max-w-none prose-headings:font-semibold prose-a:text-orange-600 dark:prose-a:text-emerald-500 hover:prose-a:text-orange-500 dark:hover:prose-a:text-emerald-400 prose-pre:bg-slate-800 dark:prose-pre:bg-slate-950 prose-pre:text-slate-50 transition-colors duration-300"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
};


// --- MAIN APP COMPONENT ---

export default function App() {
  const [theme, setTheme] = useState('dark');
  const [currentView, setCurrentView] = useState('home');
  const [projects, setProjects] = useState([]);
  const [activeProject, setActiveProject] = useState(null);
  const [user, setUser] = useState(null);
  const [toast, setToast] = useState(null);

  const showToast = (message, type = 'success') => setToast({ message, type });
  const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark');

  const navigate = (view, project = null) => {
    if (project) setActiveProject(project);
    setCurrentView(view);
  };

  // Firebase Auth Init
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Auth error:", error);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // Firebase Data Sync
  useEffect(() => {
    if (!user) return;
    
    const projectsRef = collection(db, 'artifacts', appId, 'users', user.uid, 'projects');
    const unsubscribe = onSnapshot(projectsRef, (snapshot) => {
      const loadedProjects = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      loadedProjects.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
      setProjects(loadedProjects);
    }, (error) => {
      console.error("Firestore sync error:", error);
      showToast("Gagal sinkronisasi dari Cloud.", "error");
    });
    
    return () => unsubscribe();
  }, [user]);

  // Handlers for Firestore Operations
  const handleAddProject = async (project) => {
    setProjects(prev => [project, ...prev]);
    navigate('editor', project);

    if (!user) return;
    try {
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'projects', project.id), project);
    } catch (err) {
      console.error(err);
      showToast("Gagal menyimpan ke Cloud.", "error");
    }
  };

  const handleUpdateProject = async (updatedProject) => {
    setActiveProject(updatedProject);
    setProjects(prev => prev.map(p => p.id === updatedProject.id ? updatedProject : p));
    showToast("PRD berhasil disimpan!");

    if (!user) return;
    try {
      await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'projects', updatedProject.id), updatedProject, { merge: true });
    } catch (err) {
      console.error(err);
      showToast("Gagal update ke Cloud.", "error");
    }
  };

  const handleDeleteProject = async (id) => {
    setProjects(prev => prev.filter(p => p.id !== id));
    showToast("Project dihapus.");

    if (!user) return;
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'projects', id));
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className={`${theme === 'dark' ? 'dark' : ''}`}>
      <GlobalStyles />
      {/* UPDATE: Background Hitam Solid di Dark Mode */}
      <div className="min-h-screen bg-slate-50 dark:bg-black flex flex-col text-slate-900 dark:text-slate-100 transition-colors duration-500">
        
        {/* Navbar */}
        <header className="sticky top-0 z-10 bg-white/80 dark:bg-black/60 backdrop-blur-md border-b border-slate-200 dark:border-emerald-900/50 transition-colors duration-500">
          <div className="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
            <div 
              className="flex items-center gap-2 cursor-pointer group"
              onClick={() => navigate('home')}
            >
              <div className="bg-orange-600 dark:bg-emerald-500 text-white p-1.5 rounded-lg group-hover:bg-orange-700 dark:group-hover:bg-emerald-400 transition-colors shadow-sm dark:shadow-emerald-900/50">
                <Sparkles size={20} />
              </div>
              <span className="font-bold text-lg tracking-tight text-slate-900 dark:text-slate-100">
                NgodingPakeAI<span className="text-orange-600 dark:text-emerald-500">.prd</span>
              </span>
            </div>
            
            <nav className="flex items-center gap-4">
              <button 
                onClick={() => navigate('projects')}
                className="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-emerald-400 flex items-center gap-1.5 transition-colors"
              >
                <History size={16} />
                <span className="hidden sm:inline">Workspace</span>
              </button>
              
              <div className="w-px h-6 bg-slate-200 dark:bg-emerald-900/50 mx-1"></div>
              
              {/* Theme Toggle */}
              <button 
                onClick={toggleTheme}
                className="flex items-center justify-center w-8 h-8 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-emerald-400 dark:hover:bg-slate-700 transition-colors"
                title="Toggle Theme"
              >
                {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
              </button>

              <button className="flex items-center justify-center w-8 h-8 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700 transition-colors">
                <User size={16} />
              </button>
            </nav>
          </div>
        </header>

        {/* Main Content Area */}
        <main className="flex-1 max-w-5xl w-full mx-auto p-4 md:p-8">
          {currentView === 'home' && <HomeActionHub onNavigate={navigate} />}
          {currentView === 'wizard' && (
            <PRDWizard 
              onGenerate={handleAddProject} 
              onCancel={() => navigate('home')}
              showToast={showToast}
            />
          )}
          {currentView === 'editor' && activeProject && (
            <PRDEditor 
              key={activeProject.id}
              project={activeProject} 
              onBack={() => navigate('projects')}
              onSave={handleUpdateProject}
              showToast={showToast}
              theme={theme}
            />
          )}
          {currentView === 'projects' && (
            <ProjectWorkspace 
              projects={projects} 
              onOpen={(project) => navigate('editor', project)}
              onNew={() => navigate('wizard')}
              onDelete={handleDeleteProject}
            />
          )}
        </main>

        {/* Footer */}
        <footer className="bg-white/50 dark:bg-black/40 border-t border-slate-200 dark:border-emerald-900/30 mt-auto backdrop-blur-sm">
          <div className="max-w-5xl mx-auto px-4 py-6 flex flex-col sm:flex-row items-center justify-between text-sm text-slate-500 dark:text-slate-400">
            <p>© 2026 NgodingPakeAI. Built for Indonesian Builders.</p>
            <div className="flex items-center gap-4 mt-4 sm:mt-0">
              <a href="#" className="hover:text-slate-900 dark:hover:text-emerald-400 transition-colors">Terms</a>
              <a href="#" className="hover:text-slate-900 dark:hover:text-emerald-400 transition-colors">Privacy</a>
            </div>
          </div>
        </footer>

        {/* Toast Notifications */}
        {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
      </div>
    </div>
  );
}

// --- SUBVIEWS ---

function HomeActionHub({ onNavigate }) {
  return (
    <div className="max-w-3xl mx-auto mt-8 md:mt-16 animate-in slide-in-from-bottom-4 fade-in duration-500">
      <div className="text-center mb-12">
        <h1 className="text-4xl md:text-5xl font-extrabold text-slate-900 dark:text-emerald-50 tracking-tight mb-4 drop-shadow-sm">
          Mau bikin apa hari ini?
        </h1>
        <p className="text-lg text-slate-600 dark:text-emerald-100/70 max-w-xl mx-auto">
          Ubah ide mentah aplikasi kamu menjadi Product Requirements Document (PRD) yang elegan, terstruktur, dan siap dikerjakan.
        </p>
      </div>

      <div className="grid md:grid-cols-2 gap-6">
        <button 
          onClick={() => onNavigate('wizard')}
          className="group relative flex flex-col items-start p-6 md:p-8 bg-white dark:bg-neutral-950 dark:backdrop-blur-md border border-slate-200 dark:border-emerald-800/40 rounded-2xl shadow-sm hover:shadow-md hover:border-orange-300 dark:hover:border-emerald-500 transition-all text-left overflow-hidden"
        >
          <div className="absolute top-0 right-0 w-32 h-32 bg-orange-50 dark:bg-emerald-900/20 rounded-bl-full -mr-16 -mt-16 transition-transform group-hover:scale-110"></div>
          <div className="bg-orange-100 dark:bg-emerald-900/50 text-orange-700 dark:text-emerald-400 p-3 rounded-xl mb-6 relative z-10 shadow-inner">
            <FileText size={28} />
          </div>
          <h2 className="text-xl font-bold text-slate-900 dark:text-emerald-50 mb-2 relative z-10">Bikin PRD Baru</h2>
          <p className="text-slate-600 dark:text-slate-400 mb-6 relative z-10 leading-relaxed">
            Mulai dari ide singkat, dapatkan struktur lengkap dari flow, fitur MVP, hingga skema database.
          </p>
          <div className="flex items-center gap-2 text-orange-600 dark:text-emerald-400 font-medium mt-auto relative z-10 group-hover:gap-3 transition-all">
            Mulai Generate <ChevronRight size={18} />
          </div>
        </button>

        <div className="flex flex-col gap-6">
          <button 
            onClick={() => onNavigate('projects')}
            className="group flex items-start gap-4 p-6 bg-white dark:bg-neutral-950 dark:backdrop-blur-md border border-slate-200 dark:border-emerald-800/40 rounded-2xl shadow-sm hover:shadow-md hover:border-slate-300 dark:hover:border-emerald-600/50 transition-all text-left"
          >
            <div className="bg-slate-100 dark:bg-black text-slate-600 dark:text-emerald-400 p-2.5 rounded-lg group-hover:bg-slate-200 dark:group-hover:bg-neutral-900 transition-colors">
              <History size={22} />
            </div>
            <div>
              <h3 className="font-bold text-slate-900 dark:text-slate-100 mb-1">Workspace Project</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">Lanjutkan atau edit PRD yang sudah pernah kamu buat sebelumnya.</p>
            </div>
          </button>

          <a 
            href="#"
            className="group flex items-start gap-4 p-6 bg-white dark:bg-neutral-950 dark:backdrop-blur-md border border-slate-200 dark:border-emerald-800/40 rounded-2xl shadow-sm hover:shadow-md hover:border-slate-300 dark:hover:border-emerald-600/50 transition-all text-left"
          >
            <div className="bg-orange-50 dark:bg-emerald-900/30 text-orange-600 dark:text-emerald-400 p-2.5 rounded-lg group-hover:bg-orange-100 dark:group-hover:bg-emerald-900/60 transition-colors">
              <MessageSquare size={22} />
            </div>
            <div>
              <h3 className="font-bold text-slate-900 dark:text-slate-100 mb-1">Tanya Komunitas</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">Bingung validasi ide? Diskusi bareng sesama indie hacker Indonesia.</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  );
}

function PRDWizard({ onGenerate, onCancel, showToast }) {
  const [isGenerating, setIsGenerating] = useState(false);
  const [formData, setFormData] = useState({
    rawIdea: '',
    productName: '',
    targetUser: '',
    platform: 'web',
    scopeLevel: 'standard_mvp',
    language: 'id',
    detailLevel: 'standard'
  });

  const handleChange = (e) => {
    const { id, value } = e.target;
    setFormData(prev => ({ ...prev, [id]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (formData.rawIdea.length < 20) {
      showToast("Ide terlalu singkat, minimal 20 karakter.", 'error');
      return;
    }

    setIsGenerating(true);
    try {
      const prdMarkdown = await generatePRDWithAI(formData);
      
      const newProject = {
        id: crypto.randomUUID(),
        title: formData.productName || 'Untitled Project',
        brief: formData.rawIdea,
        prdMarkdown,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString()
      };
      
      await onGenerate(newProject);
    } catch (error) {
      console.error(error);
      showToast("Gagal men-generate PRD. Silakan coba lagi.", 'error');
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto bg-white dark:bg-black dark:backdrop-blur-xl rounded-2xl shadow-xl border border-slate-200 dark:border-emerald-800/50 overflow-hidden animate-in fade-in duration-300">
      <div className="px-6 py-5 border-b border-slate-100 dark:border-emerald-900/50 bg-slate-50/50 dark:bg-neutral-950 flex items-center justify-between">
        <div>
          <h2 className="text-lg font-bold text-slate-900 dark:text-emerald-50">Project Brief</h2>
          <p className="text-sm text-slate-500 dark:text-slate-400">Ceritakan idemu, AI akan merapikannya.</p>
        </div>
        <button onClick={onCancel} className="text-slate-400 hover:text-slate-600 dark:hover:text-emerald-400 p-2 transition-colors">
          <ArrowLeft size={20} />
        </button>
      </div>

      <form onSubmit={handleSubmit} className="p-6 space-y-6">
        <Textarea
          id="rawIdea"
          label="Ide Aplikasi (Raw Idea) *"
          placeholder="Contoh: Bikin aplikasi kasir buat warung kopi. Bisa catat stok, fitur scan barcode pakai kamera HP, dan laporan harian lewat WhatsApp..."
          required
          rows={4}
          value={formData.rawIdea}
          onChange={handleChange}
        />

        <div className="grid md:grid-cols-2 gap-6">
          <Input
            id="productName"
            label="Nama Produk (Opsional)"
            placeholder="KopiKasir"
            value={formData.productName}
            onChange={handleChange}
          />
          <Input
            id="targetUser"
            label="Target User (Opsional)"
            placeholder="Pemilik warkop, kasir"
            value={formData.targetUser}
            onChange={handleChange}
          />
        </div>

        <div className="grid md:grid-cols-2 gap-6">
          <Select
            id="platform"
            label="Platform Utama"
            value={formData.platform}
            onChange={handleChange}
            options={[
              { value: 'web', label: 'Web Application' },
              { value: 'mobile_ios', label: 'Mobile App (iOS)' },
              { value: 'mobile_android', label: 'Mobile App (Android)' },
              { value: 'cross_platform', label: 'Cross Platform (Web + Mobile)' },
              { value: 'desktop', label: 'Desktop App' }
            ]}
          />
          <Select
            id="scopeLevel"
            label="Scope Development"
            value={formData.scopeLevel}
            onChange={handleChange}
            options={[
              { value: 'small_mvp', label: 'Small MVP (Core feature only)' },
              { value: 'standard_mvp', label: 'Standard MVP' },
              { value: 'full_product', label: 'Full Scale Product' }
            ]}
          />
        </div>

        <div className="p-4 bg-orange-50/50 dark:bg-emerald-900/10 rounded-xl border border-orange-100 dark:border-emerald-800/30 space-y-4">
          <h3 className="text-sm font-semibold text-orange-900 dark:text-emerald-500 flex items-center gap-2">
            <Settings size={16} /> Advanced Output Settings
          </h3>
          <div className="grid md:grid-cols-2 gap-4">
            <Select
              id="language"
              label="Bahasa PRD"
              value={formData.language}
              onChange={handleChange}
              options={[
                { value: 'id', label: 'Bahasa Indonesia' },
                { value: 'en', label: 'English' }
              ]}
            />
            <Select
              id="detailLevel"
              label="Tingkat Detail"
              value={formData.detailLevel}
              onChange={handleChange}
              options={[
                { value: 'concise', label: 'Singkat & Padat' },
                { value: 'standard', label: 'Standard' },
                { value: 'comprehensive', label: 'Sangat Detail' }
              ]}
            />
          </div>
        </div>

        <div className="pt-4 border-t border-slate-100 dark:border-emerald-900/50 flex items-center justify-end gap-3">
          <Button type="button" variant="ghost" onClick={onCancel}>Batal</Button>
          <Button type="submit" variant="primary" icon={Sparkles} isLoading={isGenerating}>
            {isGenerating ? 'Meracik PRD...' : 'Generate PRD'}
          </Button>
        </div>
      </form>
    </div>
  );
}

function PRDEditor({ project, onBack, onSave, showToast, theme }) {
  const [activeTab, setActiveTab] = useState('preview'); 
  const [markdown, setMarkdown] = useState(project.prdMarkdown);
  const [hasChanges, setHasChanges] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    setMarkdown(project.prdMarkdown);
    setHasChanges(false);
  }, [project.id]);

  useEffect(() => {
    setHasChanges(markdown !== project.prdMarkdown);
  }, [markdown, project.prdMarkdown]);

  const handleCopy = async () => {
    try {
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(markdown);
        showToast("Markdown disalin ke clipboard!");
      } else {
        throw new Error("Clipboard API not available");
      }
    } catch (err) {
      try {
        const textArea = document.createElement("textarea");
        textArea.value = markdown;
        textArea.style.top = "0";
        textArea.style.left = "0";
        textArea.style.position = "fixed";
        textArea.style.opacity = "0";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        
        const successful = document.execCommand('copy');
        document.body.removeChild(textArea);
        
        if (successful) showToast("Markdown disalin ke clipboard!");
        else showToast("Gagal menyalin teks. Silakan copy manual.", "error");
      } catch (fallbackErr) {
        showToast("Gagal menyalin teks. Silakan copy manual.", "error");
      }
    }
  };

  const handleExport = () => {
    const blob = new Blob([markdown], { type: 'text/markdown' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${project.title.replace(/\s+/g, '-').toLowerCase()}-prd.md`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast("File .md berhasil diunduh.");
  };

  const handleSave = async () => {
    setIsSaving(true);
    await onSave({
      ...project,
      prdMarkdown: markdown,
      updatedAt: new Date().toISOString()
    });
    setHasChanges(false);
    setIsSaving(false);
  };

  return (
    <div className="h-[calc(100vh-8rem)] flex flex-col bg-white dark:bg-black dark:backdrop-blur-xl rounded-2xl shadow-xl border border-slate-200 dark:border-emerald-800/50 overflow-hidden animate-in fade-in">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 border-b border-slate-200 dark:border-emerald-900/50 bg-slate-50 dark:bg-neutral-950">
        <div className="flex items-center gap-3 w-full sm:w-auto">
          <button onClick={onBack} className="p-2 text-slate-500 hover:bg-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-emerald-400 rounded-lg transition-colors shrink-0">
            <ArrowLeft size={18} />
          </button>
          <div className="flex-1 min-w-0">
            <h2 className="font-bold text-slate-900 dark:text-emerald-50 truncate" title={project.title}>{project.title}</h2>
            <div className="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 mt-1">
              <span>Terakhir update: {new Date(project.updatedAt).toLocaleTimeString()}</span>
              <span className="flex items-center gap-1 text-orange-600 dark:text-emerald-400 bg-orange-50 dark:bg-emerald-900/30 px-2 py-0.5 rounded-full border border-orange-100 dark:border-emerald-800/50"><Cloud size={12} /> Tersimpan di Cloud</span>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0 hide-scrollbar">
          <div className="flex bg-slate-200/60 dark:bg-black p-1 rounded-lg shrink-0 border border-slate-300 dark:border-neutral-800">
            <button 
              onClick={() => setActiveTab('preview')}
              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${activeTab === 'preview' ? 'bg-white dark:bg-emerald-900/40 text-orange-700 dark:text-emerald-400 shadow-sm' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'}`}
            >
              Preview
            </button>
            <button 
              onClick={() => setActiveTab('edit')}
              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors flex items-center gap-1.5 ${activeTab === 'edit' ? 'bg-white dark:bg-emerald-900/40 text-orange-700 dark:text-emerald-400 shadow-sm' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'}`}
            >
              <Code size={14} /> Edit Source
            </button>
          </div>
          
          <div className="w-px h-6 bg-slate-300 dark:bg-slate-700 mx-1 shrink-0"></div>

          <Button variant="ghost" className="shrink-0 !px-2" onClick={handleCopy} title="Copy Markdown">
            <Copy size={16} />
          </Button>
          <Button variant="ghost" className="shrink-0 !px-2" onClick={handleExport} title="Download .md">
            <Download size={16} />
          </Button>
          <Button 
            variant="primary" 
            className={`shrink-0 ${!hasChanges && 'opacity-50'}`}
            onClick={handleSave} 
            disabled={!hasChanges || isSaving}
            isLoading={isSaving}
          >
            Save Changes
          </Button>
        </div>
      </div>

      <div className="flex-1 overflow-auto relative bg-white dark:bg-black">
        {activeTab === 'preview' ? (
          <div className="p-6 md:p-10 max-w-4xl mx-auto">
            <MarkdownRenderer content={markdown} theme={theme} />
          </div>
        ) : (
          <textarea
            className="w-full h-full p-6 font-mono text-sm bg-slate-900 dark:bg-black text-slate-100 focus:outline-none resize-none leading-relaxed"
            value={markdown}
            onChange={(e) => setMarkdown(e.target.value)}
            spellCheck="false"
          />
        )}
      </div>
    </div>
  );
}

function ProjectWorkspace({ projects, onOpen, onNew, onDelete }) {
  return (
    <div className="animate-in fade-in duration-300">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-8 gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 dark:text-emerald-50">Workspace Project</h1>
          <p className="text-slate-500 dark:text-slate-400">Kelola dan lihat daftar dokumen PRD yang pernah kamu buat (Tersinkronisasi ke Cloud).</p>
        </div>
        <Button variant="primary" icon={Plus} onClick={onNew}>Project Baru</Button>
      </div>

      {projects.length === 0 ? (
        <div className="text-center py-20 bg-white dark:bg-neutral-950 border border-slate-200 dark:border-emerald-800/30 border-dashed rounded-2xl">
          <div className="bg-slate-50 dark:bg-black text-slate-400 dark:text-emerald-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <Briefcase size={28} />
          </div>
          <h3 className="text-lg font-medium text-slate-900 dark:text-slate-200 mb-1">Belum ada project</h3>
          <p className="text-slate-500 dark:text-slate-400 mb-6 max-w-sm mx-auto text-sm">
            Kamu belum membuat PRD apapun. Mulai ceritakan ide aplikasimu dan biarkan AI menyusunnya.
          </p>
          <Button variant="secondary" onClick={onNew}>Bikin PRD Pertamamu</Button>
        </div>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {projects.map(project => (
            <div 
              key={project.id} 
              className="bg-white dark:bg-neutral-950 dark:backdrop-blur-sm border border-slate-200 dark:border-emerald-800/40 rounded-xl p-5 hover:shadow-md hover:border-orange-400 dark:hover:border-emerald-500 transition-all flex flex-col group cursor-pointer"
              onClick={() => onOpen(project)}
            >
              <div className="flex justify-between items-start mb-3">
                <div className="bg-orange-50 dark:bg-emerald-900/30 text-orange-600 dark:text-emerald-500 p-2 rounded-lg">
                  <FileText size={20} />
                </div>
                <button 
                  onClick={(e) => { e.stopPropagation(); onDelete(project.id); }}
                  className="text-slate-400 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity p-1"
                  title="Hapus"
                >
                  <Trash2 size={16} />
                </button>
              </div>
              <h3 className="font-bold text-slate-900 dark:text-slate-100 truncate mb-1" title={project.title}>{project.title}</h3>
              <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2 mb-4 flex-1">
                {project.brief}
              </p>
              <div className="text-xs text-slate-400 dark:text-slate-500 pt-3 border-t border-slate-100 dark:border-emerald-900/30 flex items-center justify-between">
                <span>{new Date(project.updatedAt).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })}</span>
                <span className="text-orange-600 dark:text-emerald-500 font-medium group-hover:translate-x-1 transition-transform">Buka &rarr;</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}