// screens/adoption.jsx — AI Adoption (executive overview)

function ScreenAdoption({ filters }) {
  const total = 98;
  const last = ADOPTION_SERIES[ADOPTION_SERIES.length - 1];
  const first = ADOPTION_SERIES[0];
  const growth = Math.round(((last - first) / first) * 100);
  const teamRows = TEAM_ADOPTION.map(r => {
    const team = TEAMS.find(t => t.id === r.team);
    return { ...r, name: team.name, size: team.size, lead: team.lead, pct: Math.round((r.active / team.size) * 100) };
  }).sort((a, b) => b.pct - a.pct);

  return (
    <div className="page">
      <PageHead
        eyebrow="01 / Adoption"
        title='<em>87</em> of 142 engineers <br/>used AI this week.'
        sub="Adoption has compounded for eighteen consecutive weeks. Growth is concentrated in Platform and Web. Payments and Security remain below the activation threshold."
        meta={<>
          <div className="big">+177%</div>
          <div>vs week 1 baseline</div>
          <div style={{marginTop:6}}>last refresh · 11m ago</div>
          <div>data window · 18 weeks</div>
        </>}
      />

      {/* Big hero band */}
      <div className="grid g-12">
        <Card className="col-7" eye="Weekly active engineers" title="Adoption is compounding, not plateauing" sub="Curve shows weekly active engineers using any sanctioned AI tool. Baseline marked at week 1.">
          <AdoptionRibbon data={ADOPTION_SERIES} total={total + 44} />
        </Card>

        <Card className="col-5" eye="Today" title="Right now" sub="Live signal across the organization, last five minutes.">
          <Metric label="Active sessions" value="34" delta="↑ 6 vs avg" kind="up" />
          <Metric label="PRs in review" value="11" delta="3 AI-assisted" />
          <Metric label="Most-used tool" value="Cursor" delta="61% of sessions" />
          <Metric label="Tokens · last hour" value="4.2M" delta="under daily budget" kind="up" em />
        </Card>
      </div>

      {/* Section: by team */}
      <Section label="By team" title="Adoption is <em>uneven</em>. Two squads carry it." >
        <Card eye="Active engineers / total" title=" "
              right={<div className="seg seg-tiny">
                <Seg value="active" options={[{v:'active',l:'Active'},{v:'prs',l:'AI-PRs'},{v:'score',l:'Score'}]} onChange={()=>{}} />
              </div>}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{width:'28%'}}>Team</th>
                <th style={{width:'14%'}}>Lead</th>
                <th>Active / total</th>
                <th className="num">AI-assisted PRs</th>
                <th className="num">Adoption</th>
                <th className="num">7-day Δ</th>
              </tr>
            </thead>
            <tbody>
              {teamRows.map((r, i) => {
                const trend = [4, 5, 6, 6, 8, 9, 11, 12, r.active];
                return (
                  <tr key={r.team}>
                    <td>
                      <div className="name">{r.name}</div>
                      <div className="sub mono">{r.team}</div>
                    </td>
                    <td className="mono" style={{color:'var(--ink-3)'}}>{r.lead}</td>
                    <td>
                      <div style={{display:'flex',alignItems:'center',gap:12}}>
                        <div style={{width:200}}><Bar pct={r.pct} accent={r.pct >= 70} /></div>
                        <span className="mono tabnum" style={{fontSize:11.5}}>{r.active}/{r.size}</span>
                      </div>
                    </td>
                    <td className="num mono tabnum">{r.prs}</td>
                    <td className="num mono tabnum" style={{color: r.pct >= 70 ? 'var(--accent)' : r.pct < 50 ? '#a23a2a' : 'var(--ink-2)'}}>{r.pct}%</td>
                    <td className="num"><div style={{width:80, marginLeft:'auto'}}><Sparkline data={trend} h={24} accent={r.pct >= 70} fill={false} /></div></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      </Section>

      {/* Section: usage mix */}
      <Section label="Usage" title="<em>Where</em> the AI work happens.">
        <div className="grid g-12">
          <Card className="col-5" eye="Use case classification" title="What engineers ask AI to do" sub="Inferred from prompt + diff signals across 12,545 sessions this period.">
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, alignItems:'center'}}>
              <UseCaseDonut rows={USE_CASES} />
              <div style={{display:'flex',flexDirection:'column',gap:6}}>
                {USE_CASES.map((u, i) => (
                  <div key={u.name} style={{display:'flex',alignItems:'center',gap:8,fontSize:12}}>
                    <span style={{width:8,height:8,background:`var(--cat-${(i%6)+1})`,display:'inline-block'}} />
                    <span style={{flex:1, color:'var(--ink-2)'}}>{u.name}</span>
                    <span className="mono tabnum" style={{color:'var(--ink-3)'}}>{u.share}%</span>
                  </div>
                ))}
              </div>
            </div>
          </Card>

          <Card className="col-7" eye="Coverage of SDLC" title="AI touch on the merge pipeline" sub="Share of merged work where AI assistance was detected at each stage.">
            <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:14, marginTop:4}}>
              {[
                {label:'Discovery', pct:34},
                {label:'Code', pct:71},
                {label:'Tests', pct:48},
                {label:'Review', pct:62},
                {label:'Docs', pct:22},
              ].map((s) => (
                <div key={s.label} style={{display:'flex',flexDirection:'column',gap:8,padding:'14px 0',borderTop:'1px solid var(--rule)'}}>
                  <div className="eyebrow">{s.label}</div>
                  <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:36, lineHeight:1, letterSpacing:'-0.01em'}}>{s.pct}<span style={{fontSize:18,color:'var(--ink-3)'}}>%</span></div>
                  <div style={{height:60, position:'relative', background:'var(--bg-inset)'}}>
                    <div style={{position:'absolute', left:0, right:0, bottom:0, height:`${s.pct}%`, background: s.pct>=60?'var(--accent)':'var(--ink-2)', opacity: s.pct>=60?0.85:0.5}} />
                  </div>
                </div>
              ))}
            </div>
            <div style={{marginTop:18,display:'flex',gap:8,flexWrap:'wrap'}}>
              <Tag kind="acc">Code coverage strong</Tag>
              <Tag kind="warn">Docs coverage low</Tag>
              <Tag>2 stages instrumented this week</Tag>
            </div>
          </Card>
        </div>
      </Section>

      {/* Footer band — answers */}
      <Section label="What this answers" title="Questions an engineering leader should be asking.">
        <div className="grid g-3">
          {[
            { q: 'Which teams aren\u2019t adopting?', a: 'Security (38%), Payments (52%) below activation threshold. See workflow trace.' },
            { q: 'Is adoption growing or stagnating?', a: 'Compounding at +6.2% per week. No plateau in last 6 weeks.' },
            { q: 'Which leaders drive adoption?', a: 'Tan (Platform), Chen (Web), Okafor (Data). All ran internal demo workshops.' },
          ].map((c, i) => (
            <Card key={i} eye={`Q.0${i+1}`} title={c.q}>
              <div style={{color:'var(--ink-2)', fontSize:14, lineHeight:1.55, fontFamily:'var(--sans)', fontWeight:600}}>{c.a}</div>
            </Card>
          ))}
        </div>
      </Section>
    </div>
  );
}

window.ScreenAdoption = ScreenAdoption;