/* ========================================================================
   pages-system.jsx — Export Centre + Settings
   ====================================================================== */

/* ---------------------------------------------------------------- EXPORTS */
function ExportsPage() {
  const { showToast, generatedSet } = React.useContext(AppCtx);
  const [selected, setSelected] = React.useState(() => new Set([...generatedSet]));
  const [format, setFormat] = React.useState("zip");
  const [exporting, setExporting] = React.useState(false);

  const toggle = (id) => setSelected(s => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
  const total = PACK_TYPES.filter(p => selected.has(p.id)).length;

  const run = () => {
    setExporting(true);
    setTimeout(() => { setExporting(false); showToast(`✓  Export ready · renoo-launch-pack-${format}.${format === "zip" ? "zip" : format}`); }, 1600);
  };

  const formats = [
    { id: "md",   label: "Markdown",      icon: "md",   sub: "All copy as .md files", size: "1.2 MB" },
    { id: "pdf",  label: "PDF",           icon: "pdf",  sub: "Brand-formatted report", size: "4.8 MB" },
    { id: "csv",  label: "CSV Calendar",  icon: "csv",  sub: "30-day calendar + ad sets", size: "112 KB" },
    { id: "json", label: "JSON",          icon: "json", sub: "Full project tree as data", size: "640 KB" },
    { id: "zip",  label: "ZIP",           icon: "zip",  sub: "Everything, foldered", size: "8.4 MB", featured: true },
  ];

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <div className="page-eyebrow">Renoo · 8 packs ready</div>
          <h1 className="page-title">Export <span className="hl">Centre</span></h1>
          <p className="page-sub">Choose what to export, pick a format, download. ZIP exports include the full folder structure your team expects.</p>
        </div>
        <div className="row gap-8">
          <Btn variant="ghost" icon="history">Export history</Btn>
          <Btn variant="primary" icon="download" onClick={run} disabled={total === 0 || exporting}>
            {exporting ? "Packaging…" : `Export ${total} ${total === 1 ? "pack" : "packs"}`}
          </Btn>
        </div>
      </div>

      <div className="grid mb-24" style={{ gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr)", gap: 20 }}>
        {/* Pack selection */}
        <Card title={`Select packs (${total} of ${PACK_TYPES.length})`} sub="Tick everything you want included" padding="none"
          action={<div className="row gap-6">
            <Btn size="sm" variant="ghost" onClick={() => setSelected(new Set(PACK_TYPES.map(p => p.id)))}>Select all</Btn>
            <Btn size="sm" variant="ghost" onClick={() => setSelected(new Set())}>Clear</Btn>
          </div>}
        >
          <div>
            {PACK_TYPES.map((p, i) => {
              const has = generatedSet.has(p.id);
              const on = selected.has(p.id);
              return (
                <button key={p.id} disabled={!has} onClick={() => toggle(p.id)}
                  style={{
                    display: "grid", gridTemplateColumns: "auto 38px 1fr auto", gap: 12, alignItems: "center",
                    width: "100%", textAlign: "left", padding: "12px 18px",
                    borderTop: i === 0 ? 0 : "1px solid var(--border)",
                    background: on ? "var(--yellow-soft)" : "var(--surface)",
                    cursor: has ? "pointer" : "not-allowed",
                    opacity: has ? 1 : 0.45,
                  }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 5,
                    background: on ? "var(--fg)" : "var(--surface)",
                    border: "1.5px solid " + (on ? "var(--fg)" : "var(--border-strong)"),
                    display: "grid", placeItems: "center", flex: "none",
                  }}>{on && <Icon name="check" size={11} stroke={3} color="var(--yellow)" />}</span>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: "var(--yellow)", display: "grid", placeItems: "center", flex: "none" }}>
                    <Icon name={p.icon} size={16} color="var(--yellow-ink)" stroke={2.2} />
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div className="row gap-8" style={{ flexWrap: "wrap" }}>
                      <span className="fw-7" style={{ fontSize: 14 }}>{p.name}</span>
                      {!has && <Pill variant="amber">Not generated</Pill>}
                      {has && <Pill icon="dot">{p.items}</Pill>}
                    </div>
                    <div className="muted text-xs mt-4" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.desc}</div>
                  </div>
                  <div className="muted text-xs mono fw-7">{has ? "v3" : "—"}</div>
                </button>
              );
            })}
          </div>
        </Card>

        {/* Format chooser */}
        <div className="col gap-16">
          <Card title="Format" padding="lg">
            <div className="col gap-8">
              {formats.map(f => (
                <button key={f.id} onClick={() => setFormat(f.id)} className="row gap-12"
                  style={{
                    padding: 12, border: "1px solid " + (format === f.id ? "var(--fg)" : "var(--border)"), borderRadius: 10,
                    background: format === f.id ? "var(--yellow-soft)" : "var(--surface)", width: "100%", textAlign: "left",
                    boxShadow: format === f.id ? "0 0 0 3px var(--yellow)" : "none",
                  }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: format === f.id ? "var(--fg)" : "var(--surface-2)", display: "grid", placeItems: "center", flex: "none" }}>
                    <Icon name={f.icon} size={16} color={format === f.id ? "var(--yellow)" : "var(--fg)"} stroke={2.2} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="row gap-8" style={{ flexWrap: "wrap" }}>
                      <span className="fw-8 text-sm">{f.label}</span>
                      {f.featured && <Pill variant="yellow">Recommended</Pill>}
                    </div>
                    <div className="muted text-xs mt-4">{f.sub} · ~{f.size}</div>
                  </div>
                  {format === f.id && <Icon name="check_circle" size={16} color="var(--fg)" />}
                </button>
              ))}
            </div>
          </Card>

          <Card title="Export summary" padding="lg">
            <div className="col gap-10">
              <div className="row-between text-sm"><span className="muted">Packs included</span><span className="fw-8">{total}</span></div>
              <div className="row-between text-sm"><span className="muted">Format</span><span className="fw-8 uppercase">{format}</span></div>
              <div className="row-between text-sm"><span className="muted">Estimated size</span><span className="fw-8">{formats.find(f => f.id === format)?.size || "—"}</span></div>
              <div className="row-between text-sm"><span className="muted">Brand-checked</span><span className="fw-8" style={{ color: "oklch(0.45 0.16 150)" }}>✓ Yes</span></div>
            </div>
            <div className="hr mt-16 mb-12" />
            <Btn variant="primary" icon="download" style={{ width: "100%" }} onClick={run} disabled={total === 0 || exporting}>
              {exporting ? "Packaging…" : `Export to ${format.toUpperCase()}`}
            </Btn>
            {exporting && <div className="gen-bar mt-12"><span /></div>}
          </Card>
        </div>
      </div>

      <div className="grid mb-24" style={{ gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 20 }}>
        {/* ZIP preview */}
        <Card padding="lg" title="ZIP folder preview" sub="Exactly what your team will see"
          action={<Pill variant="dark"><Icon name="zip" size={11} stroke={2.2} />renoo-launch-pack-v1.zip</Pill>}>
          <div style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 10, padding: 16, overflowX: "auto" }}>
            <ZipTree />
          </div>
        </Card>

        {/* Export history */}
        <Card title="Export history" sub="Last 5 exports" padding="none">
          <div>
            {[
              { id: 1, n: "renoo-launch-pack-v1.zip", f: "ZIP",  size: "8.4 MB", when: "Just now",   status: "ready" },
              { id: 2, n: "renoo-social-30d.csv",     f: "CSV",  size: "112 KB", when: "Yesterday",  status: "ready" },
              { id: 3, n: "renoo-press-kit.pdf",      f: "PDF",  size: "4.8 MB", when: "2 days ago", status: "ready" },
              { id: 4, n: "wayfound-update.zip",      f: "ZIP",  size: "2.1 MB", when: "5 days ago", status: "ready" },
              { id: 5, n: "renoo-app-store.md",       f: "MD",   size: "32 KB",  when: "Last week",  status: "expired" },
            ].map((e, i) => (
              <div key={e.id} className="row gap-12" style={{ padding: "12px 18px", borderTop: i === 0 ? 0 : "1px solid var(--border)" }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--surface-2)", display: "grid", placeItems: "center", flex: "none" }}>
                  <Icon name={e.f.toLowerCase()} size={14} stroke={2.2} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="fw-7 text-sm" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{e.n}</div>
                  <div className="muted text-xs mt-4">{e.f} · {e.size} · {e.when}</div>
                </div>
                {e.status === "ready"
                  ? <Btn size="sm" variant="ghost" icon="download" onClick={() => showToast("Downloading…")}>Download</Btn>
                  : <Pill variant="amber">Expired</Pill>}
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- SETTINGS */
function SettingsPage() {
  const { showToast } = React.useContext(AppCtx);
  const [tab, setTab] = React.useState("ai");
  const [toggles, setToggles] = React.useState({
    streaming: true,
    brand: true,
    auto: false,
    emoji: false,
    tg: true,
    locale: true,
  });
  const set = (k, v) => setToggles(s => ({ ...s, [k]: v }));

  const tabs = [
    { id: "ai",      label: "AI model" },
    { id: "tone",    label: "Default tone" },
    { id: "export",  label: "Export preferences" },
    { id: "storage", label: "Storage" },
    { id: "personal",label: "Personal" },
    { id: "defaults",label: "Project defaults" },
  ];

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <div className="page-eyebrow">Workspace · Jamie Chen</div>
          <h1 className="page-title">Settings</h1>
          <p className="page-sub">Private workspace. Every setting applies across all your projects unless overridden per-project.</p>
        </div>
        <Btn variant="primary" icon="check" onClick={() => showToast("Settings saved")}>Save changes</Btn>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "220px minmax(0,1fr)", gap: 20 }}>
        {/* side tabs */}
        <div className="card" style={{ padding: 8, height: "max-content" }}>
          <div className="col" style={{ gap: 2 }}>
            {tabs.map(t => (
              <button key={t.id} onClick={() => setTab(t.id)}
                className="row gap-10"
                style={{
                  padding: "9px 10px", borderRadius: 8, width: "100%", textAlign: "left",
                  background: tab === t.id ? "var(--yellow)" : "transparent",
                  fontWeight: 700, fontSize: 13, color: tab === t.id ? "var(--yellow-ink)" : "var(--fg)",
                }}>
                <Icon name={
                  t.id === "ai" ? "brain" : t.id === "tone" ? "type" : t.id === "export" ? "download"
                  : t.id === "storage" ? "package" : t.id === "personal" ? "user" : "settings"
                } size={14} stroke={2} />
                <span>{t.label}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="col gap-16">
          {tab === "ai" && (
            <>
              <Card title="AI model" sub="Default model used for every generation" padding="lg">
                <div className="grid grid-3 gap-12">
                  {[
                    { id: "haiku", n: "Claude Haiku 4.5", s: "Fast · for drafts & iteration", t: "Default", a: true },
                    { id: "sonnet", n: "Claude Sonnet 4.5", s: "Balanced · default for launch packs", t: "Recommended" },
                    { id: "opus", n: "Claude Opus 4.5",  s: "Deepest reasoning · for press + voice", t: "Slow" },
                  ].map(m => (
                    <div key={m.id} className="card" style={{ padding: 14, borderColor: m.a ? "var(--fg)" : "var(--border)", boxShadow: m.a ? "0 0 0 3px var(--yellow)" : "var(--shadow-sm)" }}>
                      <div className="row-between"><Pill variant={m.a ? "yellow" : "default"}>{m.t}</Pill>{m.a && <Icon name="check_circle" size={16} color="var(--fg)" />}</div>
                      <div className="fw-8 mt-12">{m.n}</div>
                      <div className="muted text-xs mt-4">{m.s}</div>
                    </div>
                  ))}
                </div>
                <div className="hr mt-20 mb-16" />
                <ToggleRow label="Streaming responses" sub="See output as it generates" checked={toggles.streaming} onChange={v => set("streaming", v)} />
                <ToggleRow label="Brand-pack guardrails" sub="Hard-stop generations that break brand rules" checked={toggles.brand} onChange={v => set("brand", v)} />
                <ToggleRow label="Auto-improve on low quality" sub="Re-run if quality score < 70" checked={toggles.auto} onChange={v => set("auto", v)} />
              </Card>

              <Card title="API key" sub="Bring your own Anthropic key — private to this workspace" padding="lg">
                <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) auto", gap: 8 }}>
                  <div className="input-with-icon"><Icon name="lock" className="ico" /><input className="input" type="password" defaultValue="sk-ant-•••••••••••••••••••••••••••••••••" /></div>
                  <Btn variant="secondary" icon="check">Verify</Btn>
                </div>
                <div className="muted text-xs mt-12">Last used 12 min ago · current spend this month £14.20.</div>
              </Card>
            </>
          )}

          {tab === "tone" && (
            <Card title="Default tone of voice" sub="Used as the starting point for every new project" padding="lg">
              <Field label="Default tone">
                <select className="select" defaultValue="Calm + Practical"><option>Calm + Practical</option><option>Founder / personal</option><option>Punchy launch energy</option><option>Educational</option><option>Premium / minimal</option></select>
              </Field>
              <div className="mt-16"><Field label="Banned phrases" sub="Comma-separated. AI will never use these.">
                <input className="input" defaultValue="seamless, game-changer, revolutionary, leverage, synergy" />
              </Field></div>
              <div className="mt-16"><Field label="Preferred phrases" sub="Words AI should reach for first.">
                <input className="input" defaultValue="calm, mobile-first, lightly premium, free for your first room" />
              </Field></div>
              <div className="hr mt-20 mb-12" />
              <ToggleRow label="Never use emoji" sub="Hard rule across every pack" checked={!toggles.emoji} onChange={v => set("emoji", !v)} />
              <ToggleRow label="UK English by default" checked={toggles.locale} onChange={v => set("locale", v)} />
            </Card>
          )}

          {tab === "export" && (
            <Card title="Export preferences" padding="lg">
              <Field label="Default format">
                <div className="row gap-6" style={{ flexWrap: "wrap" }}>
                  {["Markdown", "PDF", "CSV", "JSON", "ZIP"].map((f, i) => (
                    <button key={f} className={"chip" + (i === 4 ? " active chip-yellow" : "")}>{f}</button>
                  ))}
                </div>
              </Field>
              <div className="mt-16"><Field label="ZIP folder structure" sub="How packs are organised in the export">
                <select className="select" defaultValue="By pack type"><option>By pack type</option><option>By platform</option><option>Flat (no folders)</option></select>
              </Field></div>
              <div className="mt-16"><Field label="Filename pattern">
                <input className="input mono" defaultValue="{project}-{pack}-v{version}" />
              </Field></div>
              <div className="hr mt-20 mb-12" />
              <ToggleRow label="Include source brand pack" sub="Bundle the brand guidelines PDF in every ZIP" checked />
              <ToggleRow label="Include AI metadata" sub="Quality scores + version notes attached to each file" checked />
              <ToggleRow label="Auto-download after generation" sub="Skip the Export Centre when a pack finishes" />
            </Card>
          )}

          {tab === "storage" && (
            <Card title="Storage" sub="6 projects · 1.4 GB used" padding="lg">
              <div className="meter"><span style={{ width: "12%", background: "var(--yellow)" }} /></div>
              <div className="muted text-xs mt-8 fw-7">1.4 GB of 12 GB</div>
              <div className="hr mt-20 mb-12" />
              <div className="col gap-12">
                {[
                  { p: "Renoo", s: "642 MB" },
                  { p: "Wayfound", s: "318 MB" },
                  { p: "Sprout Studio", s: "186 MB" },
                  { p: "Ferment", s: "112 MB" },
                  { p: "Loopnest", s: "84 MB" },
                  { p: "Tideboard", s: "62 MB" },
                ].map(s => (
                  <div key={s.p} className="row-between text-sm">
                    <span className="fw-6">{s.p}</span>
                    <span className="muted mono">{s.s}</span>
                  </div>
                ))}
              </div>
              <div className="hr mt-20 mb-12" />
              <ToggleRow label="Keep generation history forever" sub="Off = auto-delete versions after 90 days" checked={toggles.tg} onChange={v => set("tg", v)} />
            </Card>
          )}

          {tab === "personal" && (
            <Card title="Personal · private workspace" sub="BoltKit is for you. Nothing is shared." padding="lg">
              <div className="row gap-16 mb-16">
                <div className="avatar-circle" style={{ width: 64, height: 64, fontSize: 24, borderRadius: 16 }}>JC</div>
                <div>
                  <div className="fw-8" style={{ fontSize: 16 }}>Jamie Chen</div>
                  <div className="muted text-xs mt-4">jamie@boltkit.studio · single-seat workspace</div>
                </div>
              </div>
              <Field label="Display name"><input className="input" defaultValue="Jamie Chen" /></Field>
              <div className="mt-16"><Field label="Founder bio" sub="Used in founder-tone generations.">
                <textarea className="textarea" defaultValue="I build small software on weekends. Renoo is my third app — calm tools for messy real-world projects." />
              </Field></div>
              <div className="hr mt-20 mb-12" />
              <ToggleRow label="Private mode" sub="Nothing leaves your workspace · no telemetry" checked />
              <ToggleRow label="Local-first storage" sub="Cache outputs in browser before sync" checked />
            </Card>
          )}

          {tab === "defaults" && (
            <Card title="Default project settings" sub="New projects inherit these unless overridden" padding="lg">
              <Field label="Default audience">
                <select className="select" defaultValue="Founders & first-time users"><option>Founders & first-time users</option><option>Consumers (UK)</option><option>SMB</option></select>
              </Field>
              <div className="mt-16"><Field label="Default platforms">
                <div className="chip-row">
                  {["Instagram", "TikTok", "Reels", "YT Shorts", "LinkedIn"].map((p, i) => (
                    <button key={p} className={"chip" + (i < 4 ? " active chip-yellow" : "")}>{p}</button>
                  ))}
                </div>
              </Field></div>
              <div className="mt-16"><Field label="Default variants per asset">
                <select className="select" defaultValue="3"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
              </Field></div>
              <div className="hr mt-20 mb-12" />
              <ToggleRow label="Always run AI analysis on new URLs" sub="On project creation" checked />
              <ToggleRow label="Auto-generate Full Launch Pack" sub="Trigger after first AI analysis completes" />
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ExportsPage, SettingsPage });