/* Briefs (Module C) — generate a complete creator brief from a
   product + hook + format, seeded by the Learning Loop. */
const Screen_Briefs = ({ product, go }) => {
  const p = MITA.products.find((x) => x.id === product) || MITA.products[0];
  const [hook, setHook] = React.useState(MITA.hooks[0]);
  const [format, setFormat] = React.useState(MITA.formats[0]);
  const [generated, setGenerated] = React.useState(true);
  const [busy, setBusy] = React.useState(false);

  const seed = MITA.insights.find((i) => i.feedsInto.includes('Brief'));

  const shots = [
    'Cold-open on the hook line — face to camera, no intro.',
    `Screen-record ${p.name} generating the plan (3–4s).`,
    'React to the result — genuine, unscripted beat.',
    'Quick demo of one exercise / meal card in-app.',
    'End-card: app name + “link in bio”, hold 1.5s.',
  ];
  const checklist = ['9:16, 1080×1920, 15–30s', 'Hook spoken in first 2 seconds', `${p.name} logo lockup on end-card`, 'Captions burned in', 'CTA: “link in bio”', 'Usage rights incl. paid-ad reuse'];

  const generate = () => { setBusy(true); setGenerated(false); setTimeout(() => { setBusy(false); setGenerated(true); toastSafe('Brief generated', `${p.name} · ${format}`); }, 850); };

  return (
    <div className="mt-page">
      <ScreenHead
        eyebrow="Produce · Module C · Brief Generation Engine"
        question="What should this creator film?"
        sub="A complete brief — concept, hook options, shot list, script and a deliverable checklist — generated from the product, a hook and a format, and seeded by what the Learning Loop already knows wins."
      />

      <div className="mt-grid mt-grid--2 mt-fade" style={{ gridTemplateColumns: '340px 1fr', alignItems: 'start' }}>
        {/* Controls */}
        <Card><CardBody>
          <p className="mt-eyebrow">Generate a brief</p>
          <div className="mt-stack" style={{ gap: 'var(--space-sm)', marginTop: 'var(--space-2xs)' }}>
            <Field label="Product"><div className="mt-cluster" style={{ padding: '8px 0' }}><ProductChip id={p.id} mono /></div></Field>
            <Field label="Hook"><NativeSelect value={hook} onChange={(e) => setHook(e.target.value)}>{MITA.hooks.map((h) => <option key={h}>{h}</option>)}</NativeSelect></Field>
            <Field label="Format"><NativeSelect value={format} onChange={(e) => setFormat(e.target.value)}>{MITA.formats.map((f) => <option key={f}>{f}</option>)}</NativeSelect></Field>
            <Button leadingIcon={I.bolt} loading={busy} onClick={generate}>Generate brief</Button>
          </div>
          {seed && (
            <div style={{ marginTop: 'var(--space-md)' }}>
              <Alert variant="info" title="Seeded by the Learning Loop">{seed.statement}</Alert>
            </div>
          )}
        </CardBody></Card>

        {/* Output */}
        {busy ? (
          <Card><CardBody><SkeletonText lines={6} /><div style={{ height: 12 }} /><SkeletonText lines={5} /></CardBody></Card>
        ) : generated ? (
          <Card className="mt-fade"><CardBody>
            <div className="mt-spread" style={{ marginBottom: 'var(--space-sm)' }}>
              <div className="mt-cluster"><Badge status="success" tone="soft" dot>Ready to send</Badge><span className="mt-tag">BR-{Math.abs(hashCode(hook + format)) % 900 + 100}</span></div>
              <div className="mt-cluster"><Button size="sm" variant="secondary">Edit</Button><Button size="sm" onClick={() => toastSafe('Brief delivered', 'Sent to creator with examples')}>Approve & send</Button></div>
            </div>

            <H4 style={{ marginTop: 0 }}>{hook}</H4>
            <p className="mt-sub">{format} for <b>{p.name}</b> — {p.niche}. Goal: stop the scroll in 2 seconds, show the product doing the work, drive an install.</p>

            <div className="mt-grid mt-grid--2" style={{ marginTop: 'var(--space-md)', gap: 'var(--space-lg)' }}>
              <div>
                <p className="mt-eyebrow">Hook options</p>
                <ul className="mt-checklist">
                  {[hook, 'Alt: “I let an app plan my whole week”', 'Alt: “POV: no more guessing at the gym”'].map((h, i) => (
                    <li key={i}>{I.bolt}<span>{h}</span></li>
                  ))}
                </ul>
                <p className="mt-eyebrow" style={{ marginTop: 'var(--space-md)' }}>Shot list</p>
                <ol className="mt-shotlist">{shots.map((s, i) => <li key={i}>{s}</li>)}</ol>
              </div>
              <div>
                <p className="mt-eyebrow">Script / talking points</p>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.6, color: 'var(--fg-default)', background: 'var(--bg-subtle)', padding: 'var(--space-sm)', borderRadius: 'var(--radius-md)' }}>
                  “{hook}. I stopped planning workouts myself and let {p.name} do it. Watch — I tell it my goal, and it builds the whole week. {"{"}beat{"}"} …that's it. Link in bio.”
                </p>
                <p className="mt-eyebrow" style={{ marginTop: 'var(--space-md)' }}>Deliverable checklist</p>
                <ul className="mt-checklist">{checklist.map((c, i) => <li key={i}>{I.check}<span>{c}</span></li>)}</ul>
              </div>
            </div>
          </CardBody></Card>
        ) : (
          <Card><CardBody><Empty icon={I.briefs} title="No brief yet" primary={<Button size="sm" onClick={generate}>Generate brief</Button>}>Pick a hook and format, then generate a complete, on-brand brief.</Empty></CardBody></Card>
        )}
      </div>
    </div>
  );
};
function hashCode(s) { let h = 0; for (let i = 0; i < s.length; i++) { h = (h << 5) - h + s.charCodeAt(i); h |= 0; } return h; }
window.Screen_Briefs = Screen_Briefs;