/* Creative Learning Loop (Module G) — the moat. Turns accumulated data
   into improving recommendations and a reusable asset library. */
const Screen_Learning = ({ product, go }) => {
  const { fmt } = MITA;
  const feedsTone = { Discovery: 'info', Brief: 'success', Publishing: 'warning' };
  const library = MITA.assets.filter((a) => a.qa === 'pass').slice(0, 8);

  return (
    <div className="mt-page">
      <ScreenHead
        eyebrow="Measure & Learn · Module G · Creative Learning Loop"
        question="What did we learn — and where does it go next?"
        sub="Every campaign's data becomes a recommendation. Winning hooks, formats, personas and accounts feed back into Discovery, Briefing and Publishing — this is the compounding moat, not the raw clip."
      />

      <div className="mt-grid mt-grid--kpi mt-fade" style={{ marginBottom: 'var(--space-lg)' }}>
        <Kpi label="Hook win-rate trend" value="+31%" delta="8-week" help="Improvement in install-rate of top hooks versus the roster baseline." />
        <Kpi label="Assets reused" value={`${MITA.kpi.reuseRate}%`} delta="+5 pts" />
        <Kpi label="Recommendation acceptance" value="74%" help="Share of surfaced recommendations an operator accepts — a proxy for model trust." />
        <Kpi label="Lift vs baseline" value="2.1×" help="Measured lift on campaigns that used loop recommendations versus those that didn't." />
      </div>

      {/* Flywheel restatement */}
      <Card className="mt-fade" style={{ marginBottom: 'var(--space-lg)' }}><CardBody>
        <div className="mt-spread" style={{ flexWrap: 'wrap', gap: 'var(--space-sm)' }}>
          <div className="mt-flywheel">
            {['Discovery', 'Brief', 'Publishing'].map((n, i) => (
              <React.Fragment key={n}>
                <span className="mt-fly__node" style={{ background: 'var(--primary-50)', color: 'var(--primary-700)', borderColor: 'var(--primary-200)' }}>{n}</span>
                <span className="mt-fly__arrow">→</span>
              </React.Fragment>
            ))}
            <span className="mt-fly__node" style={{ background: 'var(--admiral-navy)', color: 'var(--fg-on-dark)', borderColor: 'transparent' }}>Learning Loop</span>
            <span className="mt-fly__arrow">↺</span>
          </div>
          <span className="mt-sub" style={{ fontSize: 13 }}>Recommendations flow back into the front of the system.</span>
        </div>
      </CardBody></Card>

      {/* Recommendations */}
      <div className="mt-section" style={{ marginTop: 0 }}>
        <SectionH title="What should we do next?" sub="explainable, traceable to evidence" />
        <div className="mt-grid mt-grid--2 mt-cards-equal mt-fade">
          {MITA.insights.map((ins) => {
            const p = MITA.products.find((x) => x.id === ins.product);
            return (
              <Card key={ins.id} interactive><CardBody>
                <div className="mt-spread" style={{ marginBottom: 'var(--space-2xs)' }}>
                  <div className="mt-cluster"><Badge status="info" tone="outline" size="sm">{ins.type}</Badge>{p && <span className="mt-tag">{p.name}</span>}</div>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--fg-muted)' }}>conf {Math.round(ins.confidence * 100)}%</span>
                </div>
                <p style={{ fontSize: 15, fontWeight: 500, color: 'var(--fg-strong)', margin: '4px 0 var(--space-sm)' }}>{ins.statement}</p>
                <div className="mt-bar" style={{ marginBottom: 'var(--space-sm)' }}><span className="mt-bar__fill" style={{ width: (ins.confidence * 100) + '%' }} /></div>
                <div className="mt-spread mt-rec__foot">
                  <div className="mt-cluster" style={{ gap: 6 }}>
                    <span className="mt-muted" style={{ fontSize: 12 }}>Feeds into:</span>
                    {ins.feedsInto.map((f) => <Badge key={f} status={feedsTone[f] || 'neutral'} tone="soft" size="sm">{f}</Badge>)}
                  </div>
                  <div className="mt-cluster" style={{ gap: 6 }}>
                    <Button size="sm" variant="ghost">Override</Button>
                    <Button size="sm" onClick={(e) => { toastSafe('Recommendation accepted', ins.type); if (window.adButtonSuccess) window.adButtonSuccess(e.currentTarget, { label: 'Applied' }); }}>Accept</Button>
                  </div>
                </div>
              </CardBody></Card>
            );
          })}
        </div>
      </div>

      {/* Winning hooks */}
      <div className="mt-section">
        <SectionH title="Which hooks are winning?" sub="ranked by attributed installs" />
        <Card className="mt-fade"><CardBody className="mt-rows">
          {MITA.attrByHook.slice(0, 6).map((h, i) => (
            <div className="mt-row" key={h.hook}>
              <span className="mono" style={{ width: 22, color: 'var(--primary-600)', fontWeight: 600 }}>{i + 1}</span>
              <div className="mt-row__main">
                <p className="mt-row__title">“{h.hook}”</p>
                <p className="mt-row__meta mono">{h.posts} posts · {fmt.n(h.installs)} installs · {fmt.n(h.subs)} subs</p>
              </div>
              {i === 0 && <Badge status="success" tone="soft" dot>Top hook</Badge>}
            </div>
          ))}
        </CardBody></Card>
      </div>

      {/* Reusable asset library */}
      <div className="mt-section">
        <SectionH title="Reusable asset library" sub="tagged, retrievable, repurposable" action={<Button variant="ghost" size="sm">Open library</Button>} />
        <div className="mt-grid mt-grid--4 mt-fade">
          {library.map((a) => {
            const cr = MITA.creatorById[a.creator];
            return (
              <Card key={a.id} interactive><CardBody>
                <div style={{ aspectRatio: '9/16', maxHeight: 130, background: 'var(--admiral-gradient-primary)', borderRadius: 'var(--radius-md)', display: 'grid', placeItems: 'center', color: 'var(--fg-on-dark)', marginBottom: 'var(--space-2xs)', padding: 8, textAlign: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12 }}>“{a.hook}”</span>
                </div>
                <div className="mt-cluster" style={{ gap: 6, marginBottom: 6 }}>
                  {cr && <Avatar initials={cr.initials} gradient={cr.gradient} size="sm" />}
                  <span className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{a.id}</span>
                </div>
                {a.reuse && <Badge status={a.reuse.includes('ad') ? 'warning' : 'success'} tone="soft" size="sm">{a.reuse}</Badge>}
              </CardBody></Card>
            );
          })}
        </div>
      </div>
    </div>
  );
};
window.Screen_Learning = Screen_Learning;