import { useState } from "react";

// ─── THEMES ───────────────────────────────────────────────────────────────────
const THEMES = {
  cosmic: {
    label: "🌌 Cosmic / Space",
    coverGradient: "linear-gradient(160deg, #1a0a3a 0%, #2d1260 40%, #0d0820 100%)",
    coverSubtitle: "#a78bfa", coverAuthor: "#e8d5ff", coverPublisher: "#7c6fa0",
    coverRule: "linear-gradient(to right, transparent, #f0d080, transparent)",
    coverBorder: "rgba(167,139,250,0.2)",
    accent: "#6b3fa0", gold: "#c9993a",
    pageBg: "#fdf8ef", section: "#6b3fa0", border: "#d4b896",
    rule: "linear-gradient(to right, #c9993a, transparent)",
    dropCap: "#6b3fa0", emblem: "🌌", stars: true,
  },
  nature: {
    label: "🌿 Nature / Adventure",
    coverGradient: "linear-gradient(160deg, #0d2b1a 0%, #1a4a2e 45%, #0a1f10 100%)",
    coverSubtitle: "#6ee7b7", coverAuthor: "#d1fae5", coverPublisher: "#4a7c59",
    coverRule: "linear-gradient(to right, transparent, #fbbf24, transparent)",
    coverBorder: "rgba(110,231,183,0.2)",
    accent: "#166534", gold: "#b45309",
    pageBg: "#f7fdf4", section: "#166534", border: "#bbf7d0",
    rule: "linear-gradient(to right, #b45309, transparent)",
    dropCap: "#166534", emblem: "🌿", stars: false,
  },
  ocean: {
    label: "🌊 Ocean / Magic",
    coverGradient: "linear-gradient(160deg, #0c2340 0%, #0e4a6e 45%, #051523 100%)",
    coverSubtitle: "#38bdf8", coverAuthor: "#e0f2fe", coverPublisher: "#3b6b8a",
    coverRule: "linear-gradient(to right, transparent, #f0a050, transparent)",
    coverBorder: "rgba(125,211,252,0.2)",
    accent: "#0369a1", gold: "#ea7c2b",
    pageBg: "#f0f9ff", section: "#0369a1", border: "#bae6fd",
    rule: "linear-gradient(to right, #ea7c2b, transparent)",
    dropCap: "#0369a1", emblem: "🌊", stars: false,
  },
  fairytale: {
    label: "✨ Fairy Tale",
    coverGradient: "linear-gradient(160deg, #3b0764 0%, #6b21a8 45%, #1e0535 100%)",
    coverSubtitle: "#f472b6", coverAuthor: "#fce7f3", coverPublisher: "#9b5080",
    coverRule: "linear-gradient(to right, transparent, #fde68a, transparent)",
    coverBorder: "rgba(249,168,212,0.2)",
    accent: "#86198f", gold: "#d97706",
    pageBg: "#fdf4ff", section: "#86198f", border: "#f5d0fe",
    rule: "linear-gradient(to right, #d97706, transparent)",
    dropCap: "#86198f", emblem: "✨", stars: false,
  },
  adventure: {
    label: "⚔️ Adventure / Heroes",
    coverGradient: "linear-gradient(160deg, #1c0a00 0%, #431407 45%, #0f0500 100%)",
    coverSubtitle: "#fb923c", coverAuthor: "#fff7ed", coverPublisher: "#7c3a1a",
    coverRule: "linear-gradient(to right, transparent, #fbbf24, transparent)",
    coverBorder: "rgba(253,186,116,0.2)",
    accent: "#9a3412", gold: "#d97706",
    pageBg: "#fffbf5", section: "#9a3412", border: "#fed7aa",
    rule: "linear-gradient(to right, #d97706, transparent)",
    dropCap: "#9a3412", emblem: "⚔️", stars: false,
  },
  mystery: {
    label: "🔮 Mystery / Thriller",
    coverGradient: "linear-gradient(160deg, #0a0a14 0%, #1e1b4b 45%, #050508 100%)",
    coverSubtitle: "#818cf8", coverAuthor: "#e0e7ff", coverPublisher: "#4b4a7a",
    coverRule: "linear-gradient(to right, transparent, #c0c0c0, transparent)",
    coverBorder: "rgba(199,210,254,0.2)",
    accent: "#3730a3", gold: "#9ca3af",
    pageBg: "#f8f8fc", section: "#3730a3", border: "#c7d2fe",
    rule: "linear-gradient(to right, #9ca3af, transparent)",
    dropCap: "#3730a3", emblem: "🔮", stars: false,
  },
};

// ─── STRUCTURED PARSER ────────────────────────────────────────────────────────
function parseStructured(raw) {
  const lines = raw.split("\n").map(l => l.trim()).filter(Boolean);
  const book = { title:"", subtitle:"", author:"", publisher:"",
    characters:[], chapters:[], findIt:[], discussion:[], vocabulary:[], parentNote:"" };
  let mode = null, currentChapter = null, parentLines = [], headerDone = false;

  for (const line of lines) {
    const isSec = /^[✨📖🔍💬📝🌿]/.test(line) || /^(story|worksheet)$/i.test(line);
    if (isSec) headerDone = true;

    if (!headerDone) {
      if (!book.title) { book.title = line; continue; }
      if (!book.subtitle && !line.toLowerCase().startsWith("by ")) { book.subtitle = line; continue; }
      if (line.toLowerCase().startsWith("by ")) {
        const p = line.replace(/^by\s+/i,"").split("•").map(s=>s.trim());
        book.author = p[0]||""; book.publisher = p.slice(1).join(" • ")||""; continue;
      }
    }

    if (line.includes("MEET THE CHARACTERS")||line.startsWith("✨")) { mode="chars"; continue; }
    if (line.includes("THE STORY")||line.startsWith("📖")||/^story$/i.test(line)) { mode="story"; continue; }
    if (line.includes("FIND IT")||line.startsWith("🔍")) { mode="find"; continue; }
    if (line.includes("LET'S TALK")||line.startsWith("💬")) { mode="disc"; continue; }
    if (line.includes("VOCABULARY")||line.startsWith("📝")) { mode="vocab"; continue; }
    if (line.includes("PARENTS")||line.includes("EDUCATORS")||line.startsWith("🌿")) { mode="parent"; continue; }

    if (mode==="chars") { const m=line.match(/^([A-Za-z ]+)\s*[—–-]\s*(.+)/); if(m) book.characters.push({name:m[1].trim(),desc:m[2].trim()}); }
    if (mode==="story") { const c=line.match(/^Chapter\s+(\d+):\s*(.+)/i); if(c){currentChapter={number:c[1],title:c[2],body:""}; book.chapters.push(currentChapter);}else if(currentChapter){currentChapter.body+=(currentChapter.body?" ":"")+line;} }
    if (mode==="find") { const c=line.replace(/^[☐✓✔□]\s*/,"").trim(); if(c) book.findIt.push(c); }
    if (mode==="disc") { const m=line.match(/^\d+\.\s+(.+)/); if(m) book.discussion.push(m[1]); }
    if (mode==="vocab") { const m=line.match(/^([a-zA-Z]+)\s*[—–-]\s*(.+)/); if(m) book.vocabulary.push({word:m[1],def:m[2]}); }
    if (mode==="parent") parentLines.push(line);
  }
  book.parentNote = parentLines.join(" ");
  return book;
}

function isWellStructured(b) { return b.title && (b.chapters.length > 0 || b.characters.length > 0); }

// ─── AI PARSER ────────────────────────────────────────────────────────────────
async function parseWithAI(raw) {
  const res = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "claude-sonnet-4-6", max_tokens: 1000,
      messages: [{ role: "user", content: `Extract structured data from this children's story. Return ONLY valid JSON, no markdown.

Shape:
{"title":"","subtitle":"","author":"","publisher":"","characters":[{"name":"","desc":""}],"chapters":[{"number":"1","title":"","body":""}],"findIt":[],"discussion":[],"vocabulary":[{"word":"","def":""}],"parentNote":""}

Rules: if no chapters, wrap full narrative as Chapter 1. Keep body text complete. Empty arrays for missing sections.

Story:
${raw.slice(0,8000)}` }],
    }),
  });
  const data = await res.json();
  const text = data.content?.find(b=>b.type==="text")?.text||"{}";
  return JSON.parse(text.replace(/```json|```/g,"").trim());
}

// ─── HTML BUILDER ─────────────────────────────────────────────────────────────
function buildHTML(book, theme, mode) {
  const t = THEMES[theme];
  const isPrint = mode === "print";
  const esc = s => String(s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");

  const stars = t.stars ? `<div class="cover-stars"></div>` : "";

  const charCards = book.characters.map(c=>`
    <div class="char-card">
      <div class="char-name">${esc(c.name)}</div>
      <div class="char-desc">${esc(c.desc)}</div>
    </div>`).join("");

  const chapters = book.chapters.map(ch=>`
    <div class="chapter-block">
      <div class="chapter-label">Chapter ${esc(ch.number)}</div>
      <h2 class="chapter-title">${esc(ch.title)}</h2>
      <div class="chapter-rule"></div>
      <p class="chapter-body">${esc(ch.body)}</p>
    </div>`).join("");

  const findGrid = book.findIt.map(item=>
    `<div class="find-item"><span class="find-box">☐</span><span>${esc(item)}</span></div>`
  ).join("");

  const discItems = book.discussion.map((q,i)=>
    `<div class="disc-item"><span class="disc-num">${i+1}.</span><span>${esc(q)}</span></div>`
  ).join("");

  const vocabItems = book.vocabulary.map(v=>
    `<div class="vocab-item"><span class="vocab-word">${esc(v.word)}</span><span class="vocab-def">${esc(v.def)}</span></div>`
  ).join("");

  return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${esc(book.title)}</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<style>
/* ── SHARED ── */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Lora',Georgia,serif;color:#2d1f3d;background:${isPrint?"white":"#1a1028"};}
.book{max-width:${isPrint?"100%":"750px"};margin:0 auto;}

/* ── SCREEN-ONLY page wrappers ── */
${!isPrint?`
.page{
  min-height:100vh;padding:72px 80px;
  border-bottom:1px solid ${t.border};
  position:relative;background:${t.pageBg};
}
.page::before{
  content:'';position:absolute;left:60px;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,${t.border} 10%,${t.border} 90%,transparent);
  opacity:0.35;
}
`:""}

/* ── PRINT layout ── */
${isPrint?`
@page{size:8.5in 11in;margin:0.75in 0.875in;}
body{-webkit-print-color-adjust:exact;print-color-adjust:exact;}

/* Cover fills exactly one letter page */
.cover-wrap{
  height:9.5in; /* 11in - 0.75in top - 0.75in bottom */
  page-break-after:always;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:${t.coverGradient};
  padding:1in 1.25in;
  position:relative;overflow:hidden;
}

/* Characters, back-matter: natural flow, no forced breaks */
.interior-page{
  padding:0.5in 0;
  page-break-inside:auto;
}

/* Each chapter starts on its own page */
.chapter-block{
  page-break-before:always;
  padding:0;
}
/* ...except the very first one — let it follow characters naturally */
.chapter-block:first-of-type{
  page-break-before:always;
}

/* Don't orphan section headers */
.section-header{page-break-after:avoid;break-after:avoid;}
.chapter-label{page-break-after:avoid;break-after:avoid;}
.chapter-title{page-break-after:avoid;break-after:avoid;}
.chapter-rule{page-break-after:avoid;break-after:avoid;}

/* Keep small elements together */
.char-card{page-break-inside:avoid;break-inside:avoid;}
.find-item{page-break-inside:avoid;break-inside:avoid;}
.disc-item{page-break-inside:avoid;break-inside:avoid;}
.vocab-item{page-break-inside:avoid;break-inside:avoid;}

/* Prevent widows and orphans in body text */
.chapter-body{orphans:3;widows:3;}
`:""}

/* ── COVER (shared) ── */
${!isPrint?`
.cover-wrap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:100vh;padding:80px 60px;
  background:${t.coverGradient};position:relative;overflow:hidden;
}
`:""}
.cover-wrap::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%,rgba(167,139,250,0.12) 0%,transparent 50%),
  radial-gradient(circle at 80% 70%,rgba(201,153,58,0.10) 0%,transparent 50%);}
.cover-stars{position:absolute;inset:0;
  background-image:
  radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,0.8) 0%,transparent 100%),
  radial-gradient(1px 1px at 25% 40%,rgba(255,255,255,0.6) 0%,transparent 100%),
  radial-gradient(1.5px 1.5px at 40% 10%,rgba(255,255,255,0.9) 0%,transparent 100%),
  radial-gradient(1px 1px at 55% 55%,rgba(255,255,255,0.7) 0%,transparent 100%),
  radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,0.8) 0%,transparent 100%),
  radial-gradient(1.5px 1.5px at 85% 45%,rgba(255,255,255,0.9) 0%,transparent 100%),
  radial-gradient(1px 1px at 15% 75%,rgba(255,255,255,0.6) 0%,transparent 100%),
  radial-gradient(1.5px 1.5px at 5% 50%,rgba(255,255,255,0.7) 0%,transparent 100%);}
.cover-emblem{font-size:${isPrint?"52pt":"60px"};margin-bottom:${isPrint?".35in":"22px"};position:relative;z-index:1;}
.cover-title{font-family:'Playfair Display',serif;font-size:${isPrint?"36pt":"44px"};font-weight:900;
  color:#fff;line-height:1.2;margin-bottom:${isPrint?".15in":"12px"};position:relative;z-index:1;
  text-shadow:0 0 40px rgba(167,139,250,0.4);}
.cover-subtitle{font-family:'Lora',serif;font-style:italic;font-size:${isPrint?"15pt":"17px"};
  color:${t.coverSubtitle};margin-bottom:${isPrint?".45in":"36px"};position:relative;z-index:1;}
.cover-rule{width:${isPrint?"1.5in":"100px"};height:1px;background:${t.coverRule};
  margin:0 auto ${isPrint?".35in":"28px"};position:relative;z-index:1;}
.cover-author{font-family:'Lora',serif;font-size:${isPrint?"14pt":"15px"};color:${t.coverAuthor};
  position:relative;z-index:1;letter-spacing:.05em;}
.cover-publisher{font-size:${isPrint?"10pt":"12px"};color:${t.coverPublisher};
  margin-top:${isPrint?".1in":"6px"};position:relative;z-index:1;
  letter-spacing:.1em;text-transform:uppercase;}
.cover-border{position:absolute;inset:${isPrint?".25in":"16px"};
  border:1px solid ${t.coverBorder};border-radius:2px;pointer-events:none;z-index:1;}

/* ── INTERIOR SHARED ── */
.section-header{display:flex;align-items:center;gap:12px;margin-bottom:${isPrint?".3in":"28px"};}
.section-icon{font-size:${isPrint?"18pt":"22px"};}
.section-title{font-family:'Playfair Display',serif;font-size:${isPrint?"17pt":"20px"};
  font-weight:700;color:${t.section};letter-spacing:.04em;}

.char-card{margin-bottom:${isPrint?".15in":"16px"};padding:${isPrint?".13in .17in":"14px 18px"};
  border-left:3px solid ${t.gold};background:rgba(107,63,160,0.05);border-radius:0 6px 6px 0;}
.char-name{font-family:'Playfair Display',serif;font-size:${isPrint?"13pt":"16px"};
  font-weight:700;color:${t.section};margin-bottom:${isPrint?".05in":"5px"};}
.char-desc{font-size:${isPrint?"11pt":"13.5px"};line-height:1.7;color:#2d1f3d;}

.chapter-label{font-family:'Lora',serif;font-size:${isPrint?"8.5pt":"10.5px"};color:#7a6080;
  letter-spacing:.25em;text-transform:uppercase;margin-bottom:${isPrint?".07in":"7px"};}
.chapter-title{font-family:'Playfair Display',serif;font-size:${isPrint?"22pt":"28px"};
  font-weight:900;color:#1a1028;line-height:1.2;margin-bottom:${isPrint?".04in":"4px"};}
.chapter-rule{width:${isPrint?".6in":"50px"};height:2px;background:${t.rule};
  margin:${isPrint?".15in 0 .2in":"16px 0 24px"};}
.chapter-body{font-size:${isPrint?"12pt":"15px"};line-height:${isPrint?"1.85":"1.9"};
  color:#2d1f3d;text-align:justify;hyphens:auto;}
.chapter-body::first-letter{font-family:'Playfair Display',serif;font-size:${isPrint?"46pt":"50px"};
  font-weight:900;color:${t.dropCap};float:left;line-height:.8;
  margin:${isPrint?".05in .06in 0 0":"6px 7px 0 0"};}

.find-grid{display:grid;grid-template-columns:1fr 1fr;gap:${isPrint?".1in":"10px"};}
.find-item{display:flex;align-items:flex-start;gap:8px;padding:${isPrint?".09in .11in":"9px 11px"};
  background:rgba(107,63,160,0.05);border-radius:5px;border:1px solid rgba(107,63,160,0.1);
  font-size:${isPrint?"11pt":"13px"};line-height:1.5;color:#2d1f3d;}
.find-box{color:${t.gold};font-size:${isPrint?"14pt":"17px"};line-height:1;flex-shrink:0;margin-top:1px;}

.disc-item{display:flex;gap:12px;align-items:flex-start;padding:${isPrint?".13in 0":"13px 0"};
  border-bottom:1px solid rgba(107,63,160,0.1);font-size:${isPrint?"11pt":"13.5px"};line-height:1.7;color:#2d1f3d;}
.disc-item:last-child{border-bottom:none;}
.disc-num{font-family:'Playfair Display',serif;font-size:${isPrint?"15pt":"17px"};
  font-weight:700;color:${t.gold};min-width:24px;flex-shrink:0;}

.vocab-item{display:flex;gap:16px;align-items:baseline;padding:${isPrint?".09in 0":"9px 0"};
  border-bottom:1px dotted ${t.border};font-size:${isPrint?"11pt":"13.5px"};line-height:1.6;}
.vocab-item:last-child{border-bottom:none;}
.vocab-word{font-family:'Playfair Display',serif;font-weight:700;color:${t.section};
  min-width:${isPrint?"1.5in":"115px"};flex-shrink:0;font-size:${isPrint?"12pt":"14px"};}
.vocab-def{color:#2d1f3d;}

.parent-note{font-size:${isPrint?"11.5pt":"14px"};line-height:1.9;color:#2d1f3d;}

/* Section divider for print back-matter */
${isPrint?`.section-divider{margin:${isPrint?".35in 0":""};border-top:1px solid ${t.border};}`:""}
</style>
${isPrint?`<script>window.onload=()=>setTimeout(()=>window.print(),900);<\/script>`:""}
<script defer src="https://analytics.shecreates.dev/script.js" data-website-id="38eff9c5-75a1-4f90-8a4f-64fcbc3f4e79"></script>
</head>
<body>
<div class="book">

  <!-- COVER -->
  <div class="cover-wrap">
    ${stars}
    <div class="cover-border"></div>
    <div class="cover-emblem">${t.emblem}</div>
    <h1 class="cover-title">${esc(book.title)}</h1>
    ${book.subtitle?`<p class="cover-subtitle">${esc(book.subtitle)}</p>`:""}
    <div class="cover-rule"></div>
    <div class="cover-author">by ${esc(book.author)}</div>
    ${book.publisher?`<div class="cover-publisher">${esc(book.publisher)}</div>`:""}
  </div>

  <!-- CHARACTERS -->
  ${book.characters.length?`
  <div class="${isPrint?"interior-page":"page"}">
    <div class="section-header"><span class="section-icon">✨</span><span class="section-title">Meet the Characters</span></div>
    ${charCards}
  </div>`:""}

  <!-- CHAPTERS: each gets page-break-before in print -->
  ${isPrint
    ? `<div class="interior-page">${chapters}</div>`
    : book.chapters.map(ch=>`
      <div class="page">
        <div class="chapter-label">Chapter ${esc(ch.number)}</div>
        <h2 class="chapter-title">${esc(ch.title)}</h2>
        <div class="chapter-rule"></div>
        <p class="chapter-body">${esc(ch.body)}</p>
      </div>`).join("")
  }

  <!-- BACK MATTER: flows naturally in print, separate pages on screen -->
  ${book.findIt.length?`
  <div class="${isPrint?"interior-page":"page"}">
    ${isPrint&&(book.characters.length||book.chapters.length)?`<div class="section-divider"></div>`:""}
    <div class="section-header"><span class="section-icon">🔍</span><span class="section-title">Find It!</span></div>
    <div class="find-grid">${findGrid}</div>
  </div>`:""}

  ${book.discussion.length?`
  <div class="${isPrint?"interior-page":"page"}">
    ${isPrint?`<div class="section-divider"></div>`:""}
    <div class="section-header"><span class="section-icon">💬</span><span class="section-title">Let's Talk</span></div>
    ${discItems}
  </div>`:""}

  ${book.vocabulary.length?`
  <div class="${isPrint?"interior-page":"page"}">
    ${isPrint?`<div class="section-divider"></div>`:""}
    <div class="section-header"><span class="section-icon">📝</span><span class="section-title">Vocabulary Builder</span></div>
    ${vocabItems}
  </div>`:""}

  ${book.parentNote?`
  <div class="${isPrint?"interior-page":"page"}">
    ${isPrint?`<div class="section-divider"></div>`:""}
    <div class="section-header"><span class="section-icon">🌿</span><span class="section-title">For Parents &amp; Educators</span></div>
    <p class="parent-note">${esc(book.parentNote)}</p>
  </div>`:""}

</div>
</body>
</html>`;
}

// ─── UTILS ────────────────────────────────────────────────────────────────────
function download(html, filename) {
  const blob = new Blob([html], { type:"text/html;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href=url; a.download=filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a); URL.revokeObjectURL(url);
}

function printWindow(html) {
  const w = window.open("","_blank");
  if (!w) { alert("Allow popups to use Print / Save PDF."); return; }
  w.document.write(html);
  w.document.close();
}

// ─── APP ──────────────────────────────────────────────────────────────────────
export default function App() {
  const [raw, setRaw]       = useState("");
  const [theme, setTheme]   = useState("cosmic");
  const [status, setStatus] = useState(null);
  const [bookTitle, setBookTitle] = useState("");
  const [cached, setCached] = useState(null); // parsed book cache

  const T = THEMES[theme];

  async function resolveBook() {
    let book = parseStructured(raw);
    let usedAI = false;
    if (!isWellStructured(book)) {
      book = await parseWithAI(raw);
      usedAI = true;
    }
    setCached(book);
    return { book, usedAI };
  }

  async function handleDownload() {
    if (!raw.trim()) return;
    setStatus("parsing");
    try {
      const { book, usedAI } = await resolveBook();
      const html = buildHTML(book, theme, "screen");
      const slug = (book.title||"ebook").toLowerCase().replace(/[^a-z0-9]+/g,"-");
      download(html, `${slug}.html`);
      setBookTitle(book.title);
      setStatus(usedAI?"ai":"ok");
    } catch { setStatus("error"); }
  }

  async function handlePrint() {
    if (!raw.trim()) return;
    setStatus("parsing");
    try {
      const book = cached || (await resolveBook()).book;
      const usedAI = !cached && !isWellStructured(parseStructured(raw));
      const html = buildHTML(book, theme, "print");
      printWindow(html);
      setBookTitle(book.title);
      setStatus(usedAI?"ai":"ok");
    } catch { setStatus("error"); }
  }

  const loading = status === "parsing";
  const ready   = raw.trim().length > 0;

  const Btn = ({ onClick, label, variant }) => (
    <button onClick={onClick} disabled={!ready || loading} style={{
      flex:1, padding:"14px 10px",
      background: !ready ? "rgba(255,255,255,0.03)"
        : variant==="primary" ? "linear-gradient(135deg,#6b3fa0,#3b1a6e)"
        : "rgba(255,255,255,0.07)",
      border:`1px solid ${!ready?"rgba(167,139,250,0.08)":"rgba(167,139,250,0.28)"}`,
      borderRadius:10,
      color: !ready ? "#333" : variant==="primary" ? "#fff" : "#c4b5fd",
      fontFamily:"'Playfair Display',serif", fontSize:14.5, fontWeight:700,
      cursor: !ready||loading ? "default" : "pointer",
      boxShadow: ready&&variant==="primary" ? "0 0 28px rgba(107,63,160,0.4)" : "none",
      opacity: loading ? 0.6 : 1, transition:"all .2s",
    }}>{loading ? "⏳ Parsing..." : label}</button>
  );

  return (
    <div style={{
      minHeight:"100vh",
      background:"radial-gradient(ellipse at 25% 20%,#1a0838 0%,#06040f 75%)",
      display:"flex", flexDirection:"column", alignItems:"center",
      padding:"44px 20px",
      fontFamily:"'Lora',Georgia,serif", color:"#e8d5ff",
    }}>
      <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Lora:ital,wght@0,400;1,400&display=swap" rel="stylesheet"/>

      <div style={{width:"100%",maxWidth:700}}>

        {/* Header */}
        <div style={{textAlign:"center",marginBottom:34}}>
          <div style={{fontSize:44,marginBottom:10}}>📚</div>
          <h1 style={{
            fontFamily:"'Playfair Display',serif",fontSize:30,fontWeight:900,margin:0,
            background:"linear-gradient(135deg,#e8d5ff,#c4b5fd,#f0d080)",
            WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",
          }}>eBook Generator</h1>
          <p style={{marginTop:8,color:"#5b4070",fontSize:11,letterSpacing:"0.18em",textTransform:"uppercase"}}>
            Kaleidoscope Kids Books · Rooted In Hope Therapy
          </p>
        </div>

        {/* Theme grid */}
        <div style={{marginBottom:20}}>
          <div style={{fontSize:10.5,color:"#7c6fa0",letterSpacing:"0.18em",textTransform:"uppercase",marginBottom:10,fontWeight:600}}>
            Book Theme / Genre
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8}}>
            {Object.entries(THEMES).map(([key,th])=>(
              <button key={key} onClick={()=>{ setTheme(key); setCached(null); }} style={{
                padding:"10px 8px",
                background: theme===key?"rgba(167,139,250,0.18)":"rgba(255,255,255,0.03)",
                border: theme===key?"1px solid rgba(167,139,250,0.5)":"1px solid rgba(167,139,250,0.1)",
                borderRadius:8,cursor:"pointer",
                color: theme===key?"#e8d5ff":"#6b5080",
                fontFamily:"'Lora',serif",fontSize:12.5,lineHeight:1.3,
                textAlign:"center",transition:"all .2s",
                boxShadow: theme===key?"0 0 14px rgba(107,63,160,0.2)":"none",
              }}>
                <div style={{fontSize:18,marginBottom:4}}>{th.label.split(" ")[0]}</div>
                <div style={{fontSize:11}}>{th.label.split(" ").slice(1).join(" ")}</div>
              </button>
            ))}
          </div>
          {/* Live color strip */}
          <div style={{marginTop:10,height:5,borderRadius:4,background:T.coverGradient,opacity:0.75}}/>
        </div>

        {/* Textarea */}
        <textarea
          value={raw}
          onChange={e=>{ setRaw(e.target.value); setStatus(null); setCached(null); }}
          placeholder={"Paste your story here — structured or plain text.\n\nStructured format (instant parse):\n  Title / Subtitle / by Author • Publisher\n  ✨ MEET THE CHARACTERS  →  Name — Description\n  📖 THE STORY  →  Chapter 1: Title\n  🔍 FIND IT / 💬 LET'S TALK / 📝 VOCABULARY / 🌿 FOR PARENTS\n\nPlain / unstructured text also works — AI extracts the structure."}
          style={{
            width:"100%",minHeight:300,padding:"18px 20px",
            background:"rgba(255,255,255,0.04)",
            border:"1px solid rgba(167,139,250,0.18)",
            borderRadius:10,color:"#d4c5f0",
            fontFamily:"'Lora',Georgia,serif",fontSize:13.5,lineHeight:1.75,
            resize:"vertical",outline:"none",boxSizing:"border-box",
          }}
        />

        {/* Buttons */}
        <div style={{display:"flex",gap:10,marginTop:12}}>
          <Btn onClick={handleDownload} label="⬇ Download eBook (.html)" variant="primary"/>
          <Btn onClick={handlePrint}    label="🖨 Print / Save PDF"       variant="secondary"/>
        </div>

        {/* PDF tip */}
        <div style={{marginTop:10,fontSize:11.5,color:"#4a3560",textAlign:"center",lineHeight:1.5}}>
          🖨 Print opens a new tab → use <strong style={{color:"#6b5080"}}>browser Print dialog → Save as PDF</strong> · Letter 8.5×11 · Chapters won't be cut mid-page
        </div>

        {/* Status */}
        {status==="ok" && (
          <div style={{marginTop:14,padding:"13px 18px",background:"rgba(34,197,94,0.08)",border:"1px solid rgba(34,197,94,0.22)",borderRadius:9,color:"#86efac",fontSize:13.5,textAlign:"center"}}>
            ✓ <strong>"{bookTitle}"</strong> is ready. Open the HTML in any browser, or use the PDF tab to print.
          </div>
        )}
        {status==="ai" && (
          <div style={{marginTop:14,padding:"13px 18px",background:"rgba(251,191,36,0.07)",border:"1px solid rgba(251,191,36,0.22)",borderRadius:9,color:"#fde68a",fontSize:13.5,textAlign:"center"}}>
            🤖 Unstructured story detected — AI extracted the structure. <strong>"{bookTitle}"</strong> is ready!
          </div>
        )}
        {status==="error" && (
          <div style={{marginTop:14,padding:"13px 18px",background:"rgba(239,68,68,0.08)",border:"1px solid rgba(239,68,68,0.22)",borderRadius:9,color:"#fca5a5",fontSize:13.5,textAlign:"center"}}>
            Something went wrong. Check your text or internet connection and try again.
          </div>
        )}

        {/* Format guide */}
        <details style={{marginTop:26}}>
          <summary style={{
            background:"rgba(107,63,160,0.07)",border:"1px solid rgba(167,139,250,0.12)",
            borderRadius:10,padding:"12px 18px",cursor:"pointer",
            fontFamily:"'Playfair Display',serif",color:"#9b6fd8",
            fontSize:12.5,fontWeight:700,letterSpacing:"0.12em",textTransform:"uppercase",listStyle:"none",
          }}>📋 Format Guide &amp; Tips</summary>
          <div style={{background:"rgba(107,63,160,0.04)",border:"1px solid rgba(167,139,250,0.09)",borderTop:"none",borderRadius:"0 0 10px 10px",padding:"16px 20px"}}>
            <div style={{color:"#6b5080",fontSize:12,lineHeight:1.65,marginBottom:12}}>
              <strong style={{color:"#a78bfa"}}>Structured stories</strong> parse instantly with no AI call.<br/>
              <strong style={{color:"#f0d080"}}>Unstructured / plain text</strong> is sent to AI for extraction.<br/>
              <strong style={{color:"#86efac"}}>PDF printing:</strong> Cover = 1 full page · Each chapter starts fresh · Back matter flows to avoid cuts.
            </div>
            <table style={{width:"100%",borderCollapse:"collapse"}}>
              {[["Title","First line"],["Subtitle","Second line (optional)"],["Author / Publisher","by Firstname Lastname • Publisher"],
                ["Characters","✨ MEET THE CHARACTERS → Name — Description"],["Story","📖 THE STORY → Chapter 1: Title"],
                ["Find It","🔍 FIND IT → ☐ item"],["Discussion","💬 LET'S TALK → 1. Question"],
                ["Vocabulary","📝 VOCABULARY BUILDER → word — definition"],["Parent note","🌿 FOR PARENTS & EDUCATORS → prose"],
              ].map(([l,d])=>(
                <tr key={l}>
                  <td style={{padding:"4px 10px 4px 0",color:"#9b6fd8",fontWeight:600,fontSize:11.5,whiteSpace:"nowrap",verticalAlign:"top"}}>{l}</td>
                  <td style={{padding:"4px 0",color:"#6b5080",fontSize:11.5,lineHeight:1.5}}>{d}</td>
                </tr>
              ))}
            </table>
          </div>
        </details>

      </div>
    </div>
  );
}