// screens/efficiency.jsx — AI Efficiency Score & ROI

function ScreenEfficiency({ filters }) {
  const rows = EFFICIENCY.map(r => ({...r, name: TEAMS.find(t => t.id === r.team).name}))
                          .sort((a,b) => b.score - a.score);
  const orgScore = Math.round(rows.reduce((s,r)=>s+r.score,0) / rows.length);

  return (
    <div className="page">
      <PageHead
        eyebrow="04 / Efficiency & ROI"
        title='Org efficiency score: <em>69</em> / 100.'
        sub="Outcome-weighted score combines delivery speed, quality, retention, cost, and rework. Atlas refuses to translate this into &ldquo;hours saved&rdquo;. The number is comparative, not absolute."
        meta={<>
          <div className="big">$18,420</div>
          <div>AI spend · this month</div>
          <div style={{marginTop:6}}>+7.6% vs prior month</div>
          <div>$2.42 per merged PR</div>
        </>}
      />

      <div className="grid g-12">
        <Card className="col-5" eye="Composite score" title="How the number is built"
              sub="Five components, equally weighted. A team needs all five above 60 to be considered AI-effective.">
          <div className="bigstat" style={{paddingTop:8}}>
            <div className="num"><em>{orgScore}</em></div>
            <div className="denom" style={{marginTop:6}}>org composite · vs 58 last month</div>
            <div className="copy">
              "Team Alpha is high efficiency, low waste, high merge quality. Team Beta burns tokens without delivering."
            </div>
          </div>
          <div style={{marginTop:24}}>
            <div className="eyebrow" style={{marginBottom:10}}>Component breakdown · org</div>
            <ScoreRibbon row={{
              delivery: Math.round(rows.reduce((s,r)=>s+r.delivery,0)/rows.length),
              quality:  Math.round(rows.reduce((s,r)=>s+r.quality,0)/rows.length),
              retention:Math.round(rows.reduce((s,r)=>s+r.retention,0)/rows.length),
              cost:     Math.round(rows.reduce((s,r)=>s+r.cost,0)/rows.length),
              rework:   Math.round(rows.reduce((s,r)=>s+r.rework,0)/rows.length),
            }} />
          </div>
        </Card>

        <Card className="col-7" eye="Spend" title="Where the money went"
              sub="Allocation across tools and teams, this month. Click a tool to filter cohort.">
          <div className="grid g-3" style={{marginBottom:24}}>
            <div>
              <div className="eyebrow">Monthly</div>
              <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:48, letterSpacing:'-0.02em', lineHeight:1}}>$18.4<span style={{fontSize:22, color:'var(--ink-3)'}}>k</span></div>
              <div className="mono" style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>annualized · $221k</div>
            </div>
            <div>
              <div className="eyebrow">Per engineer</div>
              <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:48, letterSpacing:'-0.02em', lineHeight:1}}>$188</div>
              <div className="mono" style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>per active · per month</div>
            </div>
            <div>
              <div className="eyebrow">Per merged PR</div>
              <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:48, letterSpacing:'-0.02em', lineHeight:1, color:'var(--accent)'}}>$2.42</div>
              <div className="mono" style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>down from $3.18</div>
            </div>
          </div>
          <div className="eyebrow" style={{marginBottom:8}}>Allocation by tool</div>
          {(() => {
            const total = TOOL_METRICS.reduce((s,m)=>s+m.share,0);
            return (
              <div style={{display:'flex',height:14, width:'100%', background:'var(--bg-inset)'}}>
                {TOOL_METRICS.map(m => {
                  const tt = TOOLS.find(x => x.id === m.tool);
                  return <div key={m.tool} title={`${tt.name} · ${Math.round(m.share*100)}%`} style={{width:`${(m.share/total)*100}%`, background:tt.color}} />;
                })}
              </div>
            );
          })()}
          <div style={{display:'flex',gap:14,flexWrap:'wrap',marginTop:12}}>
            {TOOL_METRICS.map(m => {
              const tt = TOOLS.find(x => x.id === m.tool);
              return (
                <div key={m.tool} style={{display:'flex',alignItems:'center',gap:8,fontSize:12}}>
                  <span style={{width:8,height:8,background:tt.color,display:'inline-block'}} />
                  <span style={{color:'var(--ink-2)'}}>{tt.name}</span>
                  <span className="mono tabnum" style={{color:'var(--ink-3)'}}>{Math.round(m.share*100)}%</span>
                </div>
              );
            })}
          </div>
        </Card>
      </div>

      <Section label="By team" title="The leaderboard <em>and</em> the watch list.">
        <Card eye="Efficiency score · all teams"
              sub="Sorted high → low. Score below 50 highlighted for intervention.">
          <div style={{display:'flex',flexDirection:'column'}}>
            {rows.map((r, i) => (
              <div key={r.team} style={{display:'grid', gridTemplateColumns:'30px 200px 1fr 80px', gap:24, alignItems:'center', padding:'18px 0', borderTop: i ? '1px solid var(--rule)' : '0'}}>
                <div className="mono" style={{fontSize:11, color:'var(--ink-4)', letterSpacing:'.06em'}}>{String(i+1).padStart(2,'0')}</div>
                <div>
                  <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:22, letterSpacing:'-0.01em'}}>{r.name}</div>
                  <div className="mono" style={{fontSize:10.5, color:'var(--ink-3)', letterSpacing:'.06em', textTransform:'uppercase'}}>{r.team}</div>
                </div>
                <ScoreRibbon row={r} />
                <div style={{textAlign:'right'}}>
                  <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:42, lineHeight:1, color: r.score < 50 ? '#a23a2a' : r.score >= 80 ? 'var(--accent)' : 'var(--ink)', fontStyle: r.score >= 80 ? 'italic' : 'normal'}}>{r.score}</div>
                  <div className="mono" style={{fontSize:10, color:'var(--ink-3)', letterSpacing:'.06em', marginTop:2}}>/ 100</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </Section>

      <Section label="ROI position" title="What we will <em>not</em> tell the CFO.">
        <div className="grid g-12">
          <Card className="col-7" eye="Refusal" title="Atlas will not invent &ldquo;hours saved.&rdquo;"
                sub="Most tools convert token usage into a fictitious savings number. We do not. Below is what we will report instead.">
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, marginTop:8}}>
              {[
                ['PR review cycle time', '−42%', '5.4 → 3.1 days median'],
                ['Test coverage on AI-touched files', '+18 pp', '61% → 79%'],
                ['Defect rate on AI-assisted PRs', '−0.3 pp', 'within noise. monitoring.'],
                ['Onboarding ramp · new hires', '−6 days', 'time to first merged PR'],
              ].map(([k, v, sub], i) => (
                <div key={i} style={{padding:'16px 0', borderTop:'1px solid var(--rule)'}}>
                  <div className="eyebrow">{k}</div>
                  <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:34, letterSpacing:'-0.015em', lineHeight:1, marginTop:4, color: v.startsWith('−') ? 'var(--accent)' : v.startsWith('+') ? '#2c6f4d' : 'var(--ink)'}}>{v}</div>
                  <div className="mono" style={{fontSize:11, color:'var(--ink-3)', marginTop:6}}>{sub}</div>
                </div>
              ))}
            </div>
          </Card>

          <Card className="col-5" eye="Governance" title="Safe rollout posture"
                sub="Compliance is positioned as enabler of AI adoption, not its brake.">
            <div style={{display:'flex',flexDirection:'column',gap:14, marginTop:6}}>
              {[
                ['Approved models', 'Enforced', 'ok', '4 in policy · 1 deprecated'],
                ['Secret detection', 'Active', 'ok', '0 leakages · 30d'],
                ['PII detection', 'Active', 'ok', '12 redactions · 30d'],
                ['Shadow AI', 'Detected', 'warn', '2 unmanaged sessions · payments'],
                ['Audit log retention', '13 mo', 'ok', 'meets MAS guidance'],
              ].map(([k,v,kind,sub], i) => (
                <div key={i} style={{display:'grid', gridTemplateColumns:'1fr auto', gap:14, alignItems:'baseline', padding:'10px 0', borderTop:i?'1px solid var(--rule)':'0'}}>
                  <div>
                    <div style={{fontSize:14, color:'var(--ink-2)'}}>{k}</div>
                    <div className="mono" style={{fontSize:10.5, color:'var(--ink-3)', marginTop:2}}>{sub}</div>
                  </div>
                  <Tag kind={kind === 'ok' ? 'ok' : 'warn'}>{v}</Tag>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </Section>
    </div>
  );
}

window.ScreenEfficiency = ScreenEfficiency;