/* ========================================================================
   pages-prompts.jsx — Claude Design + Codex Prompt Packs
   ====================================================================== */

const CLAUDE_PROMPT_BODY = `<span class="com">// Claude Design — Renoo full dashboard</span>
<span class="kw">role</span>:    senior product designer, calm-premium fintech sensibility
<span class="kw">audience</span>: UK homeowners and small builders, mobile-first
<span class="kw">scope</span>:   one full desktop dashboard frame + one mobile frame

<span class="kw">do</span>:
  - lead with a <span class="str">"Rooms"</span> grid, not a calendar
  - foreground the Quote Checker inbox at the top right
  - use the brand palette tokens from <span class="id">renoo.brand.v1</span>
  - keep all type in <span class="id">Söhne</span> + <span class="id">JetBrains Mono</span> for receipts
  - default copy from <span class="id">renoo.copy.dashboard.v3</span>

<span class="kw">don't</span>:
  - introduce stock SaaS sidebars
  - use emoji
  - generate hero illustrations — placeholder slots only

<span class="kw">deliver</span>:
  one HTML file, two artboards, design tokens panel,
  inline notes on three decisions you made.`;

const CODEX_PROMPT_BODY = `<span class="com">// Codex — Renoo frontend build · Next.js + Tailwind</span>
<span class="kw">goal</span>:    ship the Renoo marketing site (renoo.app) using the existing
        brand tokens and the landing-page copy pack v3.

<span class="kw">stack</span>:
  - <span class="id">next@15</span> · app router · server components by default
  - <span class="id">tailwindcss@4</span> · CSS variables for tokens
  - <span class="id">shadcn/ui</span> for forms + dialog · everything else hand-rolled
  - <span class="id">contentlayer</span> for the blog ideas

<span class="kw">tasks</span>:
  1. scaffold app router + <span class="str">/marketing</span> route group
  2. wire <span class="id">renoo.brand.v1</span> tokens into <span class="str">tailwind.config.ts</span>
  3. build <span class="str">&lt;Hero/&gt;</span>, <span class="str">&lt;Features/&gt;</span>, <span class="str">&lt;FAQ/&gt;</span>, <span class="str">&lt;CTA/&gt;</span> from the copy pack
  4. seo: title, meta, og image, FAQPage schema
  5. ship a Storybook story per section

<span class="kw">rules</span>:
  - no client components unless required for interaction
  - no animation libraries — CSS transitions only
  - use the Renoo brand voice exactly: no emoji, no exclamation marks`;

function PromptCard({ p, kind, onCopy }) {
  return (
    <button onClick={onCopy} className="card" style={{ padding: 0, textAlign: "left", width: "100%", transition: "box-shadow .14s, transform .14s" }}
      onMouseEnter={e => { e.currentTarget.style.boxShadow = "var(--shadow-lg)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
      onMouseLeave={e => { e.currentTarget.style.boxShadow = "var(--shadow-sm)"; e.currentTarget.style.transform = "none"; }}
    >
      <div className="card-pad-lg">
        <div className="row-between" style={{ alignItems: "flex-start" }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: "var(--fg)", display: "grid", placeItems: "center" }}>
            <Icon name={kind === "claude" ? "sparkle" : "code"} size={18} color="var(--yellow)" stroke={2.2} />
          </div>
          <Pill icon="dot">{p.target || p.stack}</Pill>
        </div>
        <div className="fw-8 mt-12" style={{ fontSize: 15, letterSpacing: "-0.01em" }}>{p.name}</div>
        <div className="muted text-xs mt-4" style={{ minHeight: 36, lineHeight: 1.45 }}>{p.purpose || `Spec prompt for ${p.stack}.`}</div>
        <div className="hr mt-16 mb-12" />
        <div className="row-between text-xs muted">
          <span>{p.words ? `${p.words} words` : `${p.lines} lines`}</span>
          <span className="row gap-4 fw-7" style={{ color: "var(--fg)" }}><Icon name="copy" size={12} stroke={2.2} /> Copy</span>
        </div>
      </div>
    </button>
  );
}

function PromptsPreview({ kind = "claude" }) {
  return (
    <Card padding="lg">
      <div className="row-between mb-12">
        <Pill variant="dark"><Icon name={kind === "claude" ? "sparkle" : "code"} size={11} stroke={2.2} />{kind === "claude" ? "Claude Design" : "Codex"} prompt</Pill>
        <Pill>Quality 94</Pill>
      </div>
      <div className="fw-8 mb-8" style={{ fontSize: 15 }}>{kind === "claude" ? "Full app dashboard" : "Frontend build · Next.js + Tailwind"}</div>
      <div className="code-block" style={{ maxHeight: 220, overflow: "hidden", position: "relative" }}>
        <div dangerouslySetInnerHTML={{ __html: (kind === "claude" ? CLAUDE_PROMPT_BODY : CODEX_PROMPT_BODY).split("\n").slice(0, 9).join("\n") }} />
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 60, background: "linear-gradient(to bottom, transparent, var(--fg))" }} />
      </div>
    </Card>
  );
}

function PromptPackPage({ kind = "claude" }) {
  const { showToast, go } = React.useContext(AppCtx);
  const prompts = kind === "claude" ? CLAUDE_PROMPTS : CODEX_PROMPTS;
  const [picked, setPicked] = React.useState(0);
  const body = kind === "claude" ? CLAUDE_PROMPT_BODY : CODEX_PROMPT_BODY;

  return (
    <div className="page">
      <PackHeader
        eyebrow={`Generated · Renoo`}
        title={kind === "claude" ? "Claude Design" : "Codex Prompt"}
        hl={kind === "claude" ? "Prompts" : "Pack"}
        icon={kind === "claude" ? "sparkle" : "code"}
        sub={kind === "claude"
          ? "Ready-to-paste Claude Design prompts for dashboards, landing pages, social, app store screenshots, brand systems."
          : "Spec-style Codex prompts for full app implementation, frontend, backend, API routes, QA and production cleanup."}
        actions={<>
          <Btn variant="secondary" icon="refresh" onClick={() => showToast("Regenerating prompts…")}>Regenerate</Btn>
          <Btn variant="primary" icon="download" onClick={() => go("exports")}>Export pack</Btn>
        </>}
      />

      <div className="grid grid-4 mb-24">
        <StatTile label="Prompts" value={String(prompts.length)} icon={kind === "claude" ? "sparkle" : "code"} />
        <StatTile label={kind === "claude" ? "Total words" : "Total lines"} value={String(prompts.reduce((a, p) => a + (kind === "claude" ? p.words : p.lines), 0))} icon="doc" />
        <StatTile label="Brand-locked" value="✓ v3" icon="shield" />
        <StatTile label="Avg. quality" value="93" icon="star" delta="+5" />
      </div>

      <div className="grid grid-3 gap-16 mb-24">
        {prompts.map((p, i) => (
          <PromptCard key={p.name} p={p} kind={kind}
            onCopy={() => { setPicked(i); showToast("Prompt copied to clipboard"); try { navigator.clipboard.writeText(`Prompt: ${p.name}`); } catch(e) {} }} />
        ))}
      </div>

      <Card padding="none">
        <div className="card-head">
          <div>
            <div className="card-title">{prompts[picked].name}</div>
            <div className="card-sub">{kind === "claude" ? `Claude Design · ${prompts[picked].words} words` : `Codex · ${prompts[picked].stack} · ${prompts[picked].lines} lines`}</div>
          </div>
          <div className="row gap-6">
            <Btn size="sm" variant="ghost" icon="refresh">Regenerate</Btn>
            <Btn size="sm" variant="ghost" icon="sparkle">Improve</Btn>
            <Btn size="sm" variant="secondary" icon="copy" onClick={() => { showToast("Prompt copied to clipboard"); try { navigator.clipboard.writeText("[prompt body]"); } catch(e) {} }}>Copy</Btn>
            <Btn size="sm" variant="primary" icon="external">Open in {kind === "claude" ? "Claude" : "Codex"}</Btn>
          </div>
        </div>
        <div className="card-pad-lg">
          <div className="code-block">
            <div dangerouslySetInnerHTML={{ __html: body }} />
          </div>
        </div>
      </Card>
    </div>
  );
}

function ClaudePromptsPage() { return <PromptPackPage kind="claude" />; }
function CodexPromptsPage()  { return <PromptPackPage kind="codex"  />; }

Object.assign(window, { PromptPackPage, ClaudePromptsPage, CodexPromptsPage, PromptsPreview, CLAUDE_PROMPT_BODY, CODEX_PROMPT_BODY });