// screens/tools.jsx — AI Tool Effectiveness Comparison

function ScreenTools({ filters }) {
  const [accentTool, setAccentTool] = React.useState('claude-code');
  const tools = TOOLS;
  const metrics = TOOL_METRICS;
  const t = tools.find(x => x.id === accentTool);
  const m = metrics.find(x => x.tool === accentTool);

  return (
    <div className="page">
      <PageHead
        eyebrow="03 / Tool effectiveness"
        title='Five tools. <em>One</em> earns its cost.'
        sub="Atlas pairs each AI session to its outcome — merge, retention, defect, cost — and compares tools on the dimensions a CTO actually buys for. The dot you want is in the rust zone."
        meta={<>
          <div className="big">$2.42</div>
          <div>blended cost / merged PR</div>
          <div style={{marginTop:6}}>5 tools tracked · 1 unmanaged</div>
          <div>14,545 sessions · 30d</div>
        </>}
      />

      <div className="grid g-12">
        <Card className="col-7" eye="Cost vs outcome" title="Where each tool lands"
              sub="Bubble size is active users. The ideal zone is high merge acceptance at low cost-per-PR.">
          <ToolScatter tools={tools} metrics={metrics} accentTool={accentTool} />
          <div style={{display:'flex',gap:6,flexWrap:'wrap',marginTop:14}}>
            {tools.map(tt => (
              <button key={tt.id} className="chip" data-active={accentTool===tt.id ? 'true' : undefined} onClick={() => setAccentTool(tt.id)}>
                <span style={{display:'inline-block',width:8,height:8,background:tt.color,marginRight:6}} />
                {tt.name}
              </button>
            ))}
          </div>
        </Card>

        <Card className="col-5" eye={`Tool · ${t.vendor}`} title={t.name}
              sub="Outcome-weighted profile, last 30 days." right={<Tag kind="acc">selected</Tag>}>
          <Metric label="Active users" value={m.users} delta={`${Math.round(m.share*100)}% of org seats`} />
          <Metric label="Merge acceptance" value={`${Math.round(m.merge*100)}%`} delta={m.merge > 0.8 ? 'above org median' : 'at or below median'} kind={m.merge > 0.8 ? 'up' : 'down'} em={m.merge > 0.8} />
          <Metric label="Code retention · 14d" value={`${Math.round(m.retention*100)}%`} delta="of generated lines still in tree" />
          <Metric label="Velocity index" value={`${m.velocity.toFixed(2)}×`} delta="vs baseline engineer" />
          <Metric label="Cost / merged PR" value={`$${m.cost_per_pr.toFixed(2)}`} delta={m.cost_per_pr < 2 ? 'efficient' : 'monitor'} kind={m.cost_per_pr < 2 ? 'up' : 'down'} />
        </Card>
      </div>

      <Section label="Head-to-head" title="Outcome dimensions, side by side." >
        <Card eye="Compare across the buying criteria">
          <div style={{overflowX:'auto'}}>
          <table className="tbl" style={{minWidth:760}}>
            <thead>
              <tr>
                <th>Tool</th>
                <th className="num">Users</th>
                <th>Merge accept.</th>
                <th>Retention</th>
                <th>Velocity</th>
                <th className="num">Cost / PR</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {metrics.map(mm => {
                const tt = tools.find(x => x.id === mm.tool);
                const isAcc = mm.tool === accentTool;
                return (
                  <tr key={mm.tool} onClick={() => setAccentTool(mm.tool)} style={{cursor:'default', background: isAcc ? 'var(--bg-inset)' : 'transparent'}}>
                    <td>
                      <div style={{display:'flex',alignItems:'center',gap:10}}>
                        <span style={{width:10,height:10,background:tt.color,display:'inline-block'}} />
                        <div>
                          <div className="name">{tt.name}</div>
                          <div className="sub mono">{tt.vendor}</div>
                        </div>
                      </div>
                    </td>
                    <td className="num mono tabnum">{mm.users}</td>
                    <td>
                      <div style={{display:'flex',alignItems:'center',gap:10}}>
                        <div style={{width:120}}><Bar pct={mm.merge*100} accent={mm.merge >= 0.8} /></div>
                        <span className="mono tabnum" style={{fontSize:11.5}}>{Math.round(mm.merge*100)}%</span>
                      </div>
                    </td>
                    <td>
                      <div style={{display:'flex',alignItems:'center',gap:10}}>
                        <div style={{width:120}}><Bar pct={mm.retention*100} accent={mm.retention >= 0.75} /></div>
                        <span className="mono tabnum" style={{fontSize:11.5}}>{Math.round(mm.retention*100)}%</span>
                      </div>
                    </td>
                    <td>
                      <span className="mono tabnum" style={{color: mm.velocity > 1.2 ? 'var(--accent)' : mm.velocity < 1 ? '#a23a2a' : 'var(--ink-2)', fontSize:13}}>
                        {mm.velocity.toFixed(2)}×
                      </span>
                    </td>
                    <td className="num mono tabnum" style={{color: mm.cost_per_pr < 1.5 ? 'var(--ink)' : mm.cost_per_pr > 3 ? '#a23a2a' : 'var(--ink-2)'}}>${mm.cost_per_pr.toFixed(2)}</td>
                    <td className="num"><span className="kbd">→</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          </div>
        </Card>
      </Section>

      <Section label="Tool overlap" title="Where two tools serve the same engineer.">
        <div className="grid g-12">
          <Card className="col-7" eye="Co-usage matrix" title="% of engineers using both tools"
                sub="Cells are symmetric. High overlap is a procurement signal — one of the two can usually be retired without measurable outcome loss.">
            <OverlapMatrix tools={tools} overlap={TOOL_OVERLAP} />
          </Card>

          <Card className="col-5" eye="Optimization engine" title="Where the budget leaks"
                sub="Atlas surfaces concrete moves the AI budget will respond to.">
            <div style={{display:'flex',flexDirection:'column'}}>
              {OPTIMIZATIONS.map((o, i) => (
                <div key={i} style={{padding:'16px 0', borderTop: i ? '1px solid var(--rule)' : '0'}}>
                  <div style={{display:'flex',justifyContent:'space-between',gap:12,alignItems:'baseline',marginBottom:6}}>
                    <Tag kind={o.severity === 'high' ? 'acc' : o.severity === 'risk' ? 'warn' : 'ok'}>{o.severity}</Tag>
                    <span className="mono tabnum" style={{fontSize:12, color: o.severity === 'risk' ? '#a23a2a' : 'var(--accent)', letterSpacing:0}}>{o.saving}</span>
                  </div>
                  <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:18, lineHeight:1.2, letterSpacing:'-0.01em'}}>{o.title}</div>
                  <div style={{color:'var(--ink-3)', fontSize:12.5, marginTop:6, lineHeight:1.5}}>{o.rationale}</div>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </Section>
    </div>
  );
}

window.ScreenTools = ScreenTools;