/* Performance Intelligence (Module F) — outputs to outcomes, attributed
   to creative, creator, account and hook. */
const Screen_Performance = ({ product, go }) => {
  const { fmt, kpi } = MITA;
  const [range, setRange] = React.useState('8w');

  const creatorCols = [
    { key: 'name', header: 'Creator', sticky: true, sortable: true, cell: (r) => (
      <span className="mt-cluster" style={{ gap: 10 }}><Avatar initials={r.initials} gradient={r.gradient} size="sm" /><b style={{ fontSize: 13 }}>{r.name}</b></span>) },
    { key: 'posts', header: 'Posts', align: 'right', sortable: true, cell: (r) => <span className="mono">{r.posts}</span> },
    { key: 'views', header: 'Views', align: 'right', sortable: true, cell: (r) => <span className="mono">{fmt.k(r.views)}</span> },
    { key: 'installs', header: 'Installs', align: 'right', sortable: true, cell: (r) => <span className="mono">{fmt.n(r.installs)}</span> },
    { key: 'subs', header: 'Subs', align: 'right', sortable: true, cell: (r) => <span className="mono" style={{ color: 'var(--primary-700)', fontWeight: 600 }}>{fmt.n(r.subs)}</span> },
  ];

  return (
    <div className="mt-page">
      <ScreenHead
        eyebrow="Measure & Learn · Module F · Performance Intelligence Layer"
        question="What actually drove installs and subscriptions?"
        sub="Platform and app metrics stitched together and attributed — best-effort, and explicit about it — to the asset, creator, account and hook behind every conversion."
        actions={<Button variant="secondary" size="sm">Export report</Button>}
      />

      <div className="mt-grid mt-grid--kpi mt-fade" style={{ marginBottom: 'var(--space-lg)' }}>
        <Kpi label="Attributed conversions" value={fmt.n(kpi.northStar)} delta="+22%" help="Installs + subscriptions traced to a specific asset/creator/account." />
        <Kpi label="Blended CAC" value={`$${kpi.cac}`} dir="down" delta="−$1.10" help="Total creator + compute + media spend ÷ attributed installs." />
        <Kpi label="Cost / video" value={`$${kpi.costPerVideo}`} dir="down" delta="−$6" />
        <Kpi label="Conversions / $" value={kpi.convPerDollar} delta="+0.02" />
        <Kpi label="Attribution coverage" value="82%" help="Share of posts with a usable tracked link, promo code or UTM. Platform privacy limits the rest." />
      </div>

      <div className="mt-grid mt-grid--2 mt-fade" style={{ gridTemplateColumns: '1fr 1.2fr' }}>
        <ChartFrame title="Where does the funnel leak?" description="Production → conversion, this period">
          <FunnelChart height={240} data={MITA.funnel} y={{ format: fmt.compact }} />
        </ChartFrame>
        <ChartFrame title="Are installs and subs growing?" description="Weekly, attributed"
          ranges={['4w', '8w', '12w']} range={range} onRangeChange={setRange}>
          <AreaChart height={240} x={{ key: 'x' }} y={{ format: fmt.compact }} data={MITA.series}
            series={[{ key: 'installs', label: 'Installs', color: 's1' }, { key: 'subs', label: 'Subscriptions', color: 's2' }]} />
        </ChartFrame>
      </div>

      <div className="mt-section">
        <SectionH title="Which hooks convert?" sub="attribution by hook" />
        <ChartFrame title="Installs by hook" description="Every hook traces to the assets, creators and accounts that used it" className="mt-fade">
          <div className="mt-hookbar">
            {(() => { const max = Math.max.apply(null, MITA.attrByHook.map((h) => h.installs).concat([1]));
              return MITA.attrByHook.map((h) => (
                <div className="mt-hookbar__row" key={h.hook}>
                  <div className="mt-hookbar__top">
                    <span className="mt-hookbar__label">“{h.hook}”</span>
                    <span className="mt-hookbar__val">{fmt.n(h.installs)} installs · {h.posts} posts</span>
                  </div>
                  <div className="mt-bar"><span className="mt-bar__fill" style={{ width: (h.installs / max * 100) + '%' }} /></div>
                </div>
              )); })()}
          </div>
        </ChartFrame>
      </div>

      <div className="mt-section">
        <SectionH title="Which creators drive growth?" sub="attribution leaderboard" />
        <Card className="mt-fade"><CardBody>
          <DataTable columns={creatorCols} data={MITA.attrByCreator} rowKey="id"
            summary={`Top ${MITA.attrByCreator.length} creators by attributed conversions`} />
        </CardBody></Card>
      </div>
    </div>
  );
};
window.Screen_Performance = Screen_Performance;