import { useState, useCallback, useRef, useEffect } from "react";

const THEMES = {
  minimal: {
    name: "Minimal", icon: "◻",
    bg: "#ffffff", text: "#111111", accent: "#111111",
    sub: "#777777", cardBg: "#f9f9f9", border: "#e0e0e0",
    font: "'Playfair Display', Georgia, serif", bodyFont: "Georgia, serif",
    gradient: "linear-gradient(135deg,#f5f5f5,#ffffff)",
  },
  corporate: {
    name: "Corporate", icon: "🏛",
    bg: "#0f2744", text: "#ffffff", accent: "#f0a832",
    sub: "#a8c4e0", cardBg: "#162f52", border: "#1e3d6a",
    font: "'Cormorant Garamond', 'Times New Roman', serif", bodyFont: "'Times New Roman', serif",
    gradient: "linear-gradient(135deg,#0f2744,#1a3a5c)",
  },
  creative: {
    name: "Creative", icon: "🎨",
    bg: "#1a0533", text: "#ffffff", accent: "#ff6ec7",
    sub: "#c084fc", cardBg: "#2d0f52", border: "#4a1a7a",
    font: "'Bebas Neue', Impact, sans-serif", bodyFont: "Arial, sans-serif",
    gradient: "linear-gradient(135deg,#1a0533,#3d0f6b)",
  },
  educational: {
    name: "Educational", icon: "📚",
    bg: "#fef9ee", text: "#1a1a1a", accent: "#d97706",
    sub: "#6b7280", cardBg: "#fff8e1", border: "#fde68a",
    font: "'Merriweather', Georgia, serif", bodyFont: "Georgia, serif",
    gradient: "linear-gradient(135deg,#fef9ee,#fff8e1)",
  },
  tech: {
    name: "Tech", icon: "⬡",
    bg: "#0d1117", text: "#e6edf3", accent: "#58a6ff",
    sub: "#3fb950", cardBg: "#161b22", border: "#30363d",
    font: "'Share Tech Mono', 'Courier New', monospace", bodyFont: "'Courier New', monospace",
    gradient: "linear-gradient(135deg,#0d1117,#161b22)",
  },
  startup: {
    name: "Startup", icon: "🚀",
    bg: "#ff4d4d", text: "#ffffff", accent: "#ffcd3c",
    sub: "#ffa0a0", cardBg: "#e03d3d", border: "#cc2c2c",
    font: "'Righteous', Arial Black, sans-serif", bodyFont: "Arial, sans-serif",
    gradient: "linear-gradient(135deg,#ff4d4d,#ff7043)",
  },
};

const LAYOUT_TYPES = ["title","bullets","two-col","quote","stats","visual","section"];

function SlideRenderer({ slide, theme, idx, total }) {
  const t = THEMES[theme];
  const base = {
    width:"100%", height:"100%", background: t.gradient,
    fontFamily: t.bodyFont, color: t.text,
    padding: "0", display:"flex", flexDirection:"column",
    position:"relative", overflow:"hidden", boxSizing:"border-box",
  };

  const Deco = () => (
    <div style={{position:"absolute",top:0,left:0,right:0,bottom:0,pointerEvents:"none",overflow:"hidden"}}>
      {theme==="tech" && <>
        <div style={{position:"absolute",top:-60,right:-60,width:200,height:200,border:`2px solid ${t.accent}22`,borderRadius:"50%"}}/>
        <div style={{position:"absolute",bottom:-80,left:-40,width:250,height:250,border:`2px solid ${t.sub}22`,borderRadius:"50%"}}/>
        <div style={{position:"absolute",top:"30%",left:0,right:0,height:"1px",background:`${t.accent}11`}}/>
      </>}
      {theme==="creative" && <>
        <div style={{position:"absolute",top:-80,right:-80,width:300,height:300,background:`radial-gradient(circle,${t.accent}33,transparent)`,borderRadius:"50%"}}/>
        <div style={{position:"absolute",bottom:-60,left:-40,width:200,height:200,background:`radial-gradient(circle,${t.sub}22,transparent)`,borderRadius:"50%"}}/>
      </>}
      {theme==="startup" && <>
        <div style={{position:"absolute",top:-40,right:-40,width:180,height:180,background:`${t.accent}44`,borderRadius:"50%",transform:"rotate(20deg)"}}/>
        <div style={{position:"absolute",bottom:0,left:0,right:0,height:6,background:t.accent}}/>
      </>}
      {theme==="minimal" && <div style={{position:"absolute",left:40,top:0,bottom:0,width:3,background:`${t.accent}11`}}/>}
      {theme==="corporate" && <>
        <div style={{position:"absolute",top:0,left:0,right:0,height:4,background:t.accent}}/>
        <div style={{position:"absolute",bottom:0,left:0,right:0,height:2,background:`${t.accent}66`}}/>
      </>}
      <div style={{position:"absolute",bottom:16,right:20,fontSize:11,opacity:0.35,fontFamily:"monospace"}}>{idx+1} / {total}</div>
    </div>
  );

  if (slide.type === "title") return (
    <div style={{...base, alignItems:"center", justifyContent:"center", textAlign:"center", padding:40}}>
      <Deco/>
      {slide.icon && <div style={{fontSize:52,marginBottom:16,filter:"drop-shadow(0 4px 8px rgba(0,0,0,0.3))"}}>{slide.icon}</div>}
      <h1 style={{fontFamily:t.font,fontSize:"clamp(22px,4vw,40px)",fontWeight:700,margin:"0 0 16px",lineHeight:1.1,letterSpacing:theme==="tech"?"2px":theme==="creative"?"4px":"0",textTransform:theme==="creative"||theme==="startup"?"uppercase":"none",color:t.text}}>{slide.title}</h1>
      {slide.subtitle && <p style={{fontSize:"clamp(12px,2vw,18px)",color:t.sub,margin:"0 0 24px",lineHeight:1.5,maxWidth:480}}>{slide.subtitle}</p>}
      {slide.badge && <div style={{display:"inline-block",background:t.accent,color:t.bg,padding:"6px 20px",borderRadius:999,fontSize:12,fontWeight:700,letterSpacing:1,textTransform:"uppercase"}}>{slide.badge}</div>}
    </div>
  );

  if (slide.type === "section") return (
    <div style={{...base, alignItems:"flex-start", justifyContent:"center", padding:"40px 48px"}}>
      <Deco/>
      <div style={{width:48,height:4,background:t.accent,marginBottom:20,borderRadius:2}}/>
      <h2 style={{fontFamily:t.font,fontSize:"clamp(24px,4vw,38px)",fontWeight:700,margin:0,color:t.text,maxWidth:"70%"}}>{slide.title}</h2>
      {slide.subtitle && <p style={{fontSize:15,color:t.sub,marginTop:16,maxWidth:400}}>{slide.subtitle}</p>}
    </div>
  );

  if (slide.type === "bullets") return (
    <div style={{...base, padding:"36px 48px"}}>
      <Deco/>
      <h2 style={{fontFamily:t.font,fontSize:"clamp(18px,3vw,28px)",fontWeight:700,margin:"0 0 24px",color:t.accent,borderBottom:`1px solid ${t.border}`,paddingBottom:12}}>{slide.title}</h2>
      <div style={{flex:1,display:"flex",flexDirection:"column",gap:12,overflowY:"auto"}}>
        {(slide.bullets||[]).map((b,i) => (
          <div key={i} style={{display:"flex",alignItems:"flex-start",gap:12,padding:"10px 14px",background:t.cardBg,borderRadius:8,border:`1px solid ${t.border}`}}>
            <div style={{width:6,height:6,background:t.accent,borderRadius:"50%",marginTop:7,flexShrink:0}}/>
            <span style={{fontSize:"clamp(11px,1.8vw,15px)",lineHeight:1.5,color:t.text}}>{b}</span>
          </div>
        ))}
      </div>
    </div>
  );

  if (slide.type === "two-col") return (
    <div style={{...base, padding:"36px 40px"}}>
      <Deco/>
      <h2 style={{fontFamily:t.font,fontSize:"clamp(16px,2.5vw,24px)",fontWeight:700,margin:"0 0 20px",color:t.accent}}>{slide.title}</h2>
      <div style={{flex:1,display:"grid",gridTemplateColumns:"1fr 1fr",gap:20}}>
        {[slide.col1,slide.col2].map((col,ci) => col && (
          <div key={ci} style={{background:t.cardBg,border:`1px solid ${t.border}`,borderRadius:10,padding:16}}>
            <h3 style={{fontFamily:t.font,fontSize:14,fontWeight:700,color:t.accent,margin:"0 0 10px",textTransform:"uppercase",letterSpacing:1}}>{col.heading}</h3>
            {(col.points||[]).map((p,i) => <p key={i} style={{fontSize:"clamp(10px,1.5vw,13px)",color:t.sub,margin:"0 0 6px",lineHeight:1.4}}>• {p}</p>)}
          </div>
        ))}
      </div>
    </div>
  );

  if (slide.type === "quote") return (
    <div style={{...base, alignItems:"center", justifyContent:"center", padding:40, textAlign:"center"}}>
      <Deco/>
      <div style={{fontSize:60,color:t.accent,lineHeight:1,marginBottom:8,opacity:0.6,fontFamily:"Georgia,serif"}}>"</div>
      <blockquote style={{fontFamily:t.font,fontSize:"clamp(14px,2.5vw,22px)",fontStyle:"italic",margin:"0 0 24px",lineHeight:1.6,color:t.text,maxWidth:520}}>{slide.quote}</blockquote>
      <div style={{width:40,height:2,background:t.accent,margin:"0 auto 12px"}}/>
      {slide.author && <p style={{fontSize:13,color:t.sub,margin:0,letterSpacing:1}}>— {slide.author}</p>}
    </div>
  );

  if (slide.type === "stats") return (
    <div style={{...base, padding:"36px 40px"}}>
      <Deco/>
      <h2 style={{fontFamily:t.font,fontSize:"clamp(16px,2.5vw,24px)",fontWeight:700,margin:"0 0 24px",color:t.accent}}>{slide.title}</h2>
      <div style={{flex:1,display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(120px,1fr))",gap:16,alignContent:"start"}}>
        {(slide.stats||[]).map((s,i) => (
          <div key={i} style={{background:t.cardBg,border:`1px solid ${t.border}`,borderRadius:12,padding:"20px 16px",textAlign:"center"}}>
            <div style={{fontSize:"clamp(24px,4vw,40px)",fontWeight:800,color:t.accent,fontFamily:t.font,lineHeight:1}}>{s.value}</div>
            <div style={{fontSize:"clamp(9px,1.5vw,12px)",color:t.sub,marginTop:8,textTransform:"uppercase",letterSpacing:1}}>{s.label}</div>
          </div>
        ))}
      </div>
      {slide.note && <p style={{fontSize:12,color:t.sub,marginTop:16,textAlign:"center"}}>{slide.note}</p>}
    </div>
  );

  if (slide.type === "visual") return (
    <div style={{...base, padding:"36px 40px"}}>
      <Deco/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24,height:"100%"}}>
        <div style={{display:"flex",flexDirection:"column",justifyContent:"center"}}>
          <h2 style={{fontFamily:t.font,fontSize:"clamp(16px,2.5vw,26px)",fontWeight:700,margin:"0 0 16px",color:t.accent,lineHeight:1.2}}>{slide.title}</h2>
          <p style={{fontSize:"clamp(10px,1.5vw,14px)",color:t.sub,lineHeight:1.6,margin:0}}>{slide.body}</p>
          {slide.cta && <div style={{marginTop:20,display:"inline-block",background:t.accent,color:t.bg,padding:"8px 20px",borderRadius:999,fontSize:12,fontWeight:700,width:"fit-content"}}>{slide.cta}</div>}
        </div>
        <div style={{background:t.cardBg,border:`1px solid ${t.border}`,borderRadius:12,display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",gap:8}}>
          <div style={{fontSize:56}}>{slide.icon||"🖼"}</div>
          {slide.caption && <p style={{fontSize:11,color:t.sub,textAlign:"center",padding:"0 16px"}}>{slide.caption}</p>}
        </div>
      </div>
    </div>
  );

  return (
    <div style={{...base, alignItems:"center", justifyContent:"center", padding:40}}>
      <Deco/>
      <h2 style={{fontFamily:t.font,fontSize:22,color:t.text}}>{slide.title}</h2>
    </div>
  );
}

const SLIDE_COUNT_OPTIONS = [8,10,12,15,18,20];

export default function App() {
  const [dark, setDark] = useState(false);
  const [topic, setTopic] = useState("");
  const [keywords, setKeywords] = useState("");
  const [theme, setTheme] = useState("corporate");
  const [slideCount, setSlideCount] = useState(12);
  const [slides, setSlides] = useState([]);
  const [current, setCurrent] = useState(0);
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState("");
  const [error, setError] = useState("");
  const [editingSlide, setEditingSlide] = useState(null);
  const [tab, setTab] = useState("create"); // create | preview | edit
  const [exportMsg, setExportMsg] = useState("");
  const previewRef = useRef(null);

  const nm = dark
    ? { bg:"#1a1e2e", surface:"#222840", shadow1:"rgba(0,0,0,0.5)", shadow2:"rgba(255,255,255,0.03)", text:"#e2e8f0", sub:"#94a3b8", border:"#2d3560", accent:"#6ee7b7", inputBg:"#1a1e2e" }
    : { bg:"#dde3f0", surface:"#e8eef8", shadow1:"rgba(175,185,210,0.8)", shadow2:"rgba(255,255,255,0.9)", text:"#1e2a3b", sub:"#5a6a80", border:"#cdd5e8", accent:"#3b82f6", inputBg:"#dde3f0" };

  const neumBox = (inset=false) => ({
    background: nm.surface,
    borderRadius: 16,
    boxShadow: inset
      ? `inset 4px 4px 10px ${nm.shadow1}, inset -4px -4px 10px ${nm.shadow2}`
      : `8px 8px 20px ${nm.shadow1}, -6px -6px 16px ${nm.shadow2}`,
  });

  const neumBtn = (active=false) => ({
    ...neumBox(active),
    border: "none", cursor:"pointer", outline:"none",
    color: active ? nm.accent : nm.text,
    transition:"all 0.2s ease", fontWeight:600,
  });

  async function generate() {
    if (!topic.trim()) { setError("Please enter a topic first!"); return; }
    setError(""); setSlides([]); setLoading(true); setStatus("Thinking about your presentation…"); setCurrent(0);

    const systemPrompt = `You are an expert presentation designer. Generate a complete, compelling slide deck as JSON. Return ONLY valid JSON, no markdown, no explanation.

The JSON must be: { "slides": [...] }

Each slide must have: { "id": number, "type": string, "title": string, ...type-specific fields }

Slide types and their fields:
- "title": title, subtitle, badge (optional), icon (emoji)
- "section": title, subtitle
- "bullets": title, bullets (array of strings, 3-5 items)
- "two-col": title, col1: {heading, points[]}, col2: {heading, points[]}
- "quote": quote, author
- "stats": title, stats: [{value, label}] (3-4 stats), note (optional)
- "visual": title, body, icon (emoji), caption, cta (optional)

Rules:
- Start with a "title" slide
- End with a "section" slide as conclusion/call-to-action
- Include at least 1 "stats" slide, 1 "quote" slide, 1 "two-col" slide
- Make content specific, insightful, and professional for the ${theme} style
- Vary slide types, avoid repetition
- Total slides: exactly ${slideCount}`;

    const userMsg = `Create a ${slideCount}-slide presentation about: "${topic}".
Keywords/focus: ${keywords || "general overview"}.
Style: ${THEMES[theme].name}.
Make it engaging, specific, and data-driven where possible.`;

    try {
      setStatus("Calling AI to generate your slides…");
      const res = await fetch("https://api.anthropic.com/v1/messages", {
        method:"POST",
        headers:{ "Content-Type":"application/json" },
        body: JSON.stringify({
          model:"claude-sonnet-4-20250514",
          max_tokens:4000,
          system: systemPrompt,
          messages:[{role:"user",content:userMsg}],
        }),
      });
      if (!res.ok) throw new Error(`API error ${res.status}`);
      const data = await res.json();
      const raw = data.content?.[0]?.text || "";
      let parsed;
      try {
        const clean = raw.replace(/```json|```/g,"").trim();
        parsed = JSON.parse(clean);
      } catch(e) {
        const match = raw.match(/\{[\s\S]*\}/);
        if (match) parsed = JSON.parse(match[0]);
        else throw new Error("Could not parse response as JSON");
      }
      setSlides(parsed.slides || []);
      setStatus("");
      setTab("preview");
    } catch(e) {
      setError("Generation failed: " + e.message);
      setStatus("");
    } finally {
      setLoading(false);
    }
  }

  function doExport(type) {
    setExportMsg(`${type} export initiated! In a full deployment this would generate a real ${type} file.`);
    setTimeout(() => setExportMsg(""), 3500);
  }

  function shuffleTheme() {
    const keys = Object.keys(THEMES);
    const next = keys[(keys.indexOf(theme)+1) % keys.length];
    setTheme(next);
  }

  const s = nm;

  return (
    <div style={{minHeight:"100vh", background:s.bg, color:s.text, fontFamily:"'Segoe UI',system-ui,sans-serif", transition:"all 0.3s"}}>
      <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Righteous&family=Share+Tech+Mono&family=Bebas+Neue&family=Merriweather:wght@400;700&family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet"/>

      {/* Header */}
      <header style={{...neumBox(false), margin:"20px 20px 0", padding:"14px 24px", borderRadius:20, display:"flex", alignItems:"center", justifyContent:"space-between"}}>
        <div style={{display:"flex",alignItems:"center",gap:12}}>
          <div style={{width:38,height:38,borderRadius:10,background:`linear-gradient(135deg,${s.accent},#8b5cf6)`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:20}}>⬡</div>
          <div>
            <div style={{fontWeight:800,fontSize:18,letterSpacing:"-0.5px",background:`linear-gradient(135deg,${s.accent},#8b5cf6)`,WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent"}}>SlideForge</div>
            <div style={{fontSize:11,color:s.sub,marginTop:-2}}>AI Presentation Generator</div>
          </div>
        </div>
        <div style={{display:"flex",gap:10,alignItems:"center"}}>
          {["create","preview","edit"].map(t2 => (
            <button key={t2} onClick={() => setTab(t2)}
              style={{...neumBtn(tab===t2), padding:"8px 18px", borderRadius:12, fontSize:13, textTransform:"capitalize", opacity: t2==="preview"&&slides.length===0 ? 0.4 : 1}}>
              {t2==="create"?"✦ Create":t2==="preview"?"▶ Preview":"✎ Edit"}
            </button>
          ))}
          <button onClick={() => setDark(d=>!d)} style={{...neumBtn(false), width:40, height:40, borderRadius:12, fontSize:18, display:"flex", alignItems:"center", justifyContent:"center"}}>
            {dark ? "☀" : "◑"}
          </button>
        </div>
      </header>

      <div style={{display:"grid", gridTemplateColumns: tab==="preview" ? "280px 1fr" : tab==="edit" ? "320px 1fr" : "360px 1fr", gap:20, padding:20, minHeight:"calc(100vh - 90px)"}}>

        {/* Left Panel */}
        <div style={{display:"flex",flexDirection:"column",gap:16}}>

          {/* Input Card */}
          <div style={{...neumBox(false), padding:20, borderRadius:20}}>
            <div style={{fontSize:11,fontWeight:700,letterSpacing:2,color:s.accent,marginBottom:14,textTransform:"uppercase"}}>✦ Presentation Topic</div>
            <div style={{...neumBox(true), borderRadius:12, overflow:"hidden"}}>
              <textarea value={topic} onChange={e=>setTopic(e.target.value)}
                placeholder="e.g., The Future of Artificial Intelligence in Healthcare, Climate Change Solutions, Our Q4 Growth Strategy…"
                style={{width:"100%",minHeight:90,background:"transparent",border:"none",outline:"none",padding:14,color:s.text,fontSize:14,resize:"vertical",fontFamily:"inherit",boxSizing:"border-box",lineHeight:1.5}}/>
            </div>
            <div style={{fontSize:11,fontWeight:700,letterSpacing:2,color:s.sub,margin:"14px 0 8px",textTransform:"uppercase"}}>Keywords (optional)</div>
            <div style={{...neumBox(true), borderRadius:12}}>
              <input value={keywords} onChange={e=>setKeywords(e.target.value)}
                placeholder="innovation, data, growth, 2025…"
                style={{width:"100%",background:"transparent",border:"none",outline:"none",padding:"12px 14px",color:s.text,fontSize:13,fontFamily:"inherit",boxSizing:"border-box"}}/>
            </div>
          </div>

          {/* Theme Selector */}
          <div style={{...neumBox(false), padding:20, borderRadius:20}}>
            <div style={{fontSize:11,fontWeight:700,letterSpacing:2,color:s.accent,marginBottom:14,textTransform:"uppercase"}}>⬡ Slide Style</div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
              {Object.entries(THEMES).map(([key,th]) => (
                <button key={key} onClick={()=>setTheme(key)}
                  style={{...neumBtn(theme===key), padding:"10px 8px", borderRadius:12, fontSize:12, display:"flex", flexDirection:"column", alignItems:"center", gap:4}}>
                  <span style={{fontSize:22}}>{th.icon}</span>
                  <span>{th.name}</span>
                </button>
              ))}
            </div>
          </div>

          {/* Slide Count */}
          <div style={{...neumBox(false), padding:20, borderRadius:20}}>
            <div style={{fontSize:11,fontWeight:700,letterSpacing:2,color:s.accent,marginBottom:14,textTransform:"uppercase"}}>⊞ Number of Slides</div>
            <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
              {SLIDE_COUNT_OPTIONS.map(n => (
                <button key={n} onClick={()=>setSlideCount(n)}
                  style={{...neumBtn(slideCount===n), padding:"8px 14px", borderRadius:10, fontSize:13, flex:"1 0 auto"}}>
                  {n}
                </button>
              ))}
            </div>
          </div>

          {/* Generate Button */}
          {error && <div style={{background:"#fef2f2",border:"1px solid #fca5a5",borderRadius:12,padding:"12px 16px",fontSize:13,color:"#dc2626"}}>{error}</div>}
          <button onClick={generate} disabled={loading}
            style={{padding:"18px 24px", borderRadius:16, border:"none", cursor:loading?"not-allowed":"pointer",
              background:loading?s.surface:`linear-gradient(135deg,${s.accent},#8b5cf6)`,
              color: loading?s.sub:"#fff", fontWeight:800, fontSize:15, letterSpacing:0.5,
              boxShadow: loading?"none":`0 8px 24px ${s.accent}55`,
              transition:"all 0.3s", transform: loading?"none":"translateY(0)",
              opacity: loading ? 0.7 : 1}}>
            {loading ? `⟳ ${status||"Generating…"}` : "✦ Generate Presentation"}
          </button>

          {/* Export */}
          {slides.length > 0 && (
            <div style={{...neumBox(false), padding:20, borderRadius:20}}>
              <div style={{fontSize:11,fontWeight:700,letterSpacing:2,color:s.accent,marginBottom:14,textTransform:"uppercase"}}>↓ Export</div>
              <div style={{display:"flex",flexDirection:"column",gap:8}}>
                {[["PPTX","📊"],["PDF","📄"],["Link","🔗"]].map(([t3,ic]) => (
                  <button key={t3} onClick={()=>doExport(t3)}
                    style={{...neumBtn(false), padding:"12px 16px", borderRadius:12, fontSize:13, display:"flex", alignItems:"center", gap:8}}>
                    <span>{ic}</span> Export as {t3}
                  </button>
                ))}
              </div>
              {exportMsg && <div style={{marginTop:10,fontSize:12,color:s.accent,padding:"8px 12px",background:`${s.accent}11`,borderRadius:8}}>{exportMsg}</div>}
              <button onClick={shuffleTheme}
                style={{...neumBtn(false), marginTop:10, padding:"10px 16px", borderRadius:12, fontSize:13, width:"100%", display:"flex", alignItems:"center", justifyContent:"center", gap:8}}>
                ⟳ Switch to {THEMES[Object.keys(THEMES)[(Object.keys(THEMES).indexOf(theme)+1)%Object.keys(THEMES).length]].name} Theme
              </button>
            </div>
          )}
        </div>

        {/* Right Panel: Preview */}
        <div style={{display:"flex",flexDirection:"column",gap:16}}>

          {slides.length === 0 && !loading && (
            <div style={{...neumBox(false), borderRadius:20, flex:1, display:"flex", alignItems:"center", justifyContent:"center", flexDirection:"column", gap:16, padding:40, minHeight:400}}>
              <div style={{fontSize:72, opacity:0.15}}>⬡</div>
              <div style={{fontSize:18,fontWeight:700,color:s.sub}}>Your slides will appear here</div>
              <div style={{fontSize:14,color:s.sub,textAlign:"center",maxWidth:300}}>Enter a topic, choose a style, and hit Generate to create your AI-powered deck</div>
            </div>
          )}

          {loading && (
            <div style={{...neumBox(false), borderRadius:20, flex:1, display:"flex", alignItems:"center", justifyContent:"center", flexDirection:"column", gap:16, minHeight:400}}>
              <div style={{fontSize:48, animation:"spin 1.5s linear infinite"}}>⟳</div>
              <div style={{fontWeight:700,color:s.text}}>{status}</div>
              <div style={{display:"flex",gap:6}}>
                {[0,1,2].map(i => <div key={i} style={{width:8,height:8,borderRadius:"50%",background:s.accent,opacity:0.3+i*0.35}}/>)}
              </div>
              <style>{`@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`}</style>
            </div>
          )}

          {slides.length > 0 && (
            <>
              {/* Main Slide Preview */}
              <div style={{...neumBox(true), borderRadius:20, padding:16}}>
                <div style={{aspectRatio:"16/9", width:"100%", borderRadius:14, overflow:"hidden", position:"relative", background: THEMES[theme].bg}}>
                  {slides[current] && <SlideRenderer slide={slides[current]} theme={theme} idx={current} total={slides.length}/>}
                </div>
                {/* Navigation */}
                <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:14}}>
                  <button onClick={()=>setCurrent(c=>Math.max(0,c-1))} disabled={current===0}
                    style={{...neumBtn(false), padding:"10px 20px", borderRadius:12, fontSize:14, opacity:current===0?0.3:1}}>← Prev</button>
                  <div style={{fontSize:13,color:s.sub, textAlign:"center"}}>
                    <strong style={{color:s.text}}>{current+1}</strong> of <strong style={{color:s.text}}>{slides.length}</strong>
                    <div style={{fontSize:11,marginTop:2,textTransform:"capitalize"}}>{slides[current]?.type} slide</div>
                  </div>
                  <button onClick={()=>setCurrent(c=>Math.min(slides.length-1,c+1))} disabled={current===slides.length-1}
                    style={{...neumBtn(false), padding:"10px 20px", borderRadius:12, fontSize:14, opacity:current===slides.length-1?0.3:1}}>Next →</button>
                </div>
              </div>

              {/* Thumbnail Strip */}
              <div style={{...neumBox(false), borderRadius:20, padding:16}}>
                <div style={{fontSize:11,fontWeight:700,letterSpacing:2,color:s.accent,marginBottom:12,textTransform:"uppercase"}}>All Slides</div>
                <div style={{display:"flex",gap:10,overflowX:"auto",paddingBottom:8}}>
                  {slides.map((sl,i) => (
                    <button key={sl.id||i} onClick={()=>setCurrent(i)}
                      style={{flexShrink:0, width:120, background:THEMES[theme].bg, border: i===current ? `2px solid ${s.accent}` : `2px solid transparent`,
                        borderRadius:8, cursor:"pointer", overflow:"hidden", transition:"all 0.2s",
                        boxShadow: i===current ? `0 4px 14px ${s.accent}44` : "none",
                        outline:"none", padding:0}}>
                      <div style={{aspectRatio:"16/9",overflow:"hidden",position:"relative",pointerEvents:"none"}}>
                        <div style={{transform:"scale(0.28)",transformOrigin:"top left",width:"357%",height:"357%",pointerEvents:"none"}}>
                          <SlideRenderer slide={sl} theme={theme} idx={i} total={slides.length}/>
                        </div>
                      </div>
                      <div style={{padding:"4px 6px",fontSize:9,color:s.sub,background:s.surface,textTransform:"capitalize"}}>{sl.type}</div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Quick Edit Panel (when edit tab) */}
              {tab === "edit" && slides[current] && (
                <div style={{...neumBox(false), borderRadius:20, padding:20}}>
                  <div style={{fontSize:11,fontWeight:700,letterSpacing:2,color:s.accent,marginBottom:14,textTransform:"uppercase"}}>✎ Edit Slide {current+1}</div>
                  <div style={{fontSize:11,color:s.sub,marginBottom:8}}>Title</div>
                  <div style={{...neumBox(true), borderRadius:10, marginBottom:12}}>
                    <input value={slides[current].title||""} onChange={e=>{
                      const updated = [...slides];
                      updated[current] = {...updated[current], title: e.target.value};
                      setSlides(updated);
                    }} style={{width:"100%",background:"transparent",border:"none",outline:"none",padding:"10px 14px",color:s.text,fontSize:14,fontFamily:"inherit",boxSizing:"border-box"}}/>
                  </div>
                  {slides[current].subtitle !== undefined && <>
                    <div style={{fontSize:11,color:s.sub,marginBottom:8}}>Subtitle</div>
                    <div style={{...neumBox(true), borderRadius:10, marginBottom:12}}>
                      <input value={slides[current].subtitle||""} onChange={e=>{
                        const updated = [...slides];
                        updated[current] = {...updated[current], subtitle: e.target.value};
                        setSlides(updated);
                      }} style={{width:"100%",background:"transparent",border:"none",outline:"none",padding:"10px 14px",color:s.text,fontSize:14,fontFamily:"inherit",boxSizing:"border-box"}}/>
                    </div>
                  </>}
                  {slides[current].type === "bullets" && (
                    <>
                      <div style={{fontSize:11,color:s.sub,marginBottom:8}}>Bullet Points</div>
                      {(slides[current].bullets||[]).map((b,bi) => (
                        <div key={bi} style={{...neumBox(true), borderRadius:10, marginBottom:8, display:"flex", alignItems:"center"}}>
                          <span style={{padding:"0 12px",color:s.accent,fontSize:16}}>•</span>
                          <input value={b} onChange={e=>{
                            const updated = [...slides];
                            const bullets = [...(updated[current].bullets||[])];
                            bullets[bi] = e.target.value;
                            updated[current] = {...updated[current], bullets};
                            setSlides(updated);
                          }} style={{flex:1,background:"transparent",border:"none",outline:"none",padding:"10px 4px 10px 0",color:s.text,fontSize:13,fontFamily:"inherit"}}/>
                        </div>
                      ))}
                    </>
                  )}
                  {slides[current].type === "stats" && (
                    <>
                      <div style={{fontSize:11,color:s.sub,marginBottom:8}}>Statistics</div>
                      {(slides[current].stats||[]).map((st,si) => (
                        <div key={si} style={{display:"flex",gap:8,marginBottom:8}}>
                          <div style={{...neumBox(true), borderRadius:10, flex:1}}>
                            <input value={st.value} onChange={e=>{
                              const updated = [...slides];
                              const stats = [...(updated[current].stats||[])];
                              stats[si] = {...stats[si], value: e.target.value};
                              updated[current] = {...updated[current], stats};
                              setSlides(updated);
                            }} style={{width:"100%",background:"transparent",border:"none",outline:"none",padding:"8px 12px",color:s.accent,fontSize:16,fontWeight:700,fontFamily:"inherit",boxSizing:"border-box"}}/>
                          </div>
                          <div style={{...neumBox(true), borderRadius:10, flex:2}}>
                            <input value={st.label} onChange={e=>{
                              const updated = [...slides];
                              const stats = [...(updated[current].stats||[])];
                              stats[si] = {...stats[si], label: e.target.value};
                              updated[current] = {...updated[current], stats};
                              setSlides(updated);
                            }} style={{width:"100%",background:"transparent",border:"none",outline:"none",padding:"8px 12px",color:s.sub,fontSize:12,fontFamily:"inherit",boxSizing:"border-box"}}/>
                          </div>
                        </div>
                      ))}
                    </>
                  )}
                  <div style={{display:"flex",gap:8,marginTop:8}}>
                    <button onClick={()=>{ const a=[...slides]; a.splice(current,1); setSlides(a); setCurrent(Math.min(current,a.length-1)); }}
                      style={{...neumBtn(false), padding:"8px 16px", borderRadius:10, fontSize:12, flex:1, color:"#ef4444"}}>✗ Delete Slide</button>
                    <button onClick={()=>{ const dup={...slides[current],id:Date.now()}; const a=[...slides]; a.splice(current+1,0,dup); setSlides(a); }}
                      style={{...neumBtn(false), padding:"8px 16px", borderRadius:10, fontSize:12, flex:1}}>⊕ Duplicate</button>
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}