// screens/workflows.jsx — Engineering Workflow Intelligence

function ScreenWorkflows({ filters }) {
  const [hover, setHover] = React.useState(null);
  const [view, setView] = React.useState('strands'); // 'strands' | 'list'
  const [rankFilter, setRankFilter] = React.useState('all');

  const flows = WORKFLOWS.filter(f => rankFilter === 'all' ? true : f.rank === rankFilter);
  const totalSessions = WORKFLOWS.reduce((s, f) => s + f.sessions, 0);
  const wasteSessions = WORKFLOWS.filter(f => f.rank === 'waste').reduce((s, f) => s + f.sessions, 0);
  const wastePct = Math.round((wasteSessions / totalSessions) * 100);

  return (
    <div className="page">
      <PageHead
        eyebrow="02 / Workflow intelligence"
        title='<em>23%</em> of AI sessions <br/>land in a waste pattern.'
        sub="Atlas reconstructs the order in which engineers chain AI actions. Six dominant patterns explain 86% of activity. Two of them are productive. One is expensive."
        meta={<>
          <div className="big">6,785</div>
          <div>workflow sessions · 30d</div>
          <div style={{marginTop:6}}>auto-detected · 14 patterns</div>
          <div>showing top 6 by volume</div>
        </>}
      />

      <Card eye="Atlas signature view" title="Workflow strands" sub="Each strand is a recurring sequence of AI actions taken by engineers across the org. Thickness shows volume; rust = waste, green = good, oxblood = best." right={
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <Seg value={rankFilter} options={[{v:'all',l:'All'},{v:'best',l:'Best'},{v:'good',l:'Good'},{v:'waste',l:'Waste'}]} onChange={setRankFilter} />
        </div>
      }>
        <div style={{position:'relative'}}>
          <WorkflowStrands flows={flows} onHover={(f) => setHover(f)} />
          {hover && (
            <div className="callout" style={{position:'absolute', right:12, top:12, maxWidth:280}}>
              <b>{hover.label}</b>
              <div className="mono" style={{fontSize:11,color:'var(--ink-3)',marginBottom:6}}>{hover.sessions.toLocaleString()} sessions</div>
              <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:'4px 14px',fontSize:11}}>
                <span style={{color:'var(--ink-3)'}}>Merge rate</span><span className="mono tabnum">{Math.round(hover.merge_rate*100)}%</span>
                <span style={{color:'var(--ink-3)'}}>Defect rate</span><span className="mono tabnum">{(hover.defect_rate*100).toFixed(1)}%</span>
                <span style={{color:'var(--ink-3)'}}>Cost index</span><span className="mono tabnum">{hover.cost_idx.toFixed(2)}×</span>
                <span style={{color:'var(--ink-3)'}}>Velocity</span><span className="mono tabnum">{hover.velocity_idx.toFixed(2)}×</span>
              </div>
            </div>
          )}
        </div>
        <div style={{display:'flex',gap:18,marginTop:14,flexWrap:'wrap',fontSize:11.5,color:'var(--ink-3)',fontFamily:'var(--mono)',letterSpacing:'.04em'}}>
          <span><span style={{display:'inline-block',width:14,height:3,background:'var(--accent)',marginRight:6,verticalAlign:'middle'}} />Best</span>
          <span><span style={{display:'inline-block',width:14,height:3,background:'var(--cat-2)',marginRight:6,verticalAlign:'middle'}} />Good</span>
          <span><span style={{display:'inline-block',width:14,height:3,background:'#a23a2a',opacity:.55,marginRight:6,verticalAlign:'middle'}} />Waste</span>
          <span style={{marginLeft:'auto'}}>strand thickness ∝ volume</span>
        </div>
      </Card>

      <Section label="Pattern detail" title="Which workflows pay off, which leak time.">
        <div className="grid g-12">
          {flows.slice(0, 4).map((f) => {
            const k = f.rank === 'best' ? 'acc' : f.rank === 'good' ? 'ok' : 'warn';
            return (
              <Card key={f.id} className="col-6" eye={`Pattern · ${f.rank.toUpperCase()}`} title={f.label}
                    right={<Tag kind={k}>{f.rank}</Tag>}>
                <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:14,flexWrap:'wrap'}}>
                  {f.stages.map((s, i) => (
                    <React.Fragment key={i}>
                      <span className="mono" style={{fontSize:11, padding:'4px 8px', background:'var(--bg-inset)', color:'var(--ink-2)'}}>{s}</span>
                      {i < f.stages.length - 1 && <span style={{color:'var(--ink-4)'}}>→</span>}
                    </React.Fragment>
                  ))}
                </div>
                <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
                  <div>
                    <div className="eyebrow">Sessions</div>
                    <div style={{fontFamily:'var(--sans)', fontWeight:600,fontSize:28,letterSpacing:'-0.01em'}}>{f.sessions.toLocaleString()}</div>
                  </div>
                  <div>
                    <div className="eyebrow">Merge</div>
                    <div style={{fontFamily:'var(--sans)', fontWeight:600,fontSize:28,letterSpacing:'-0.01em'}}>{Math.round(f.merge_rate*100)}<span style={{fontSize:14,color:'var(--ink-3)'}}>%</span></div>
                  </div>
                  <div>
                    <div className="eyebrow">Cost idx</div>
                    <div style={{fontFamily:'var(--sans)', fontWeight:600,fontSize:28,letterSpacing:'-0.01em', color: f.cost_idx > 1.5 ? '#a23a2a' : 'var(--ink)'}}>{f.cost_idx.toFixed(2)}<span style={{fontSize:14,color:'var(--ink-3)'}}>×</span></div>
                  </div>
                  <div>
                    <div className="eyebrow">Velocity</div>
                    <div style={{fontFamily:'var(--sans)', fontWeight:600,fontSize:28,letterSpacing:'-0.01em', color: f.velocity_idx > 1.2 ? 'var(--accent)' : 'var(--ink)'}}>{f.velocity_idx.toFixed(2)}<span style={{fontSize:14,color:'var(--ink-3)'}}>×</span></div>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      </Section>

      <Section label="Findings" title="What Atlas <em>recommends</em> next.">
        <Card>
          <div style={{display:'flex',flexDirection:'column'}}>
            {[
              { tag: 'amplify', tk: 'ok', t: 'Promote "Architecture → Generation → Tests" to Mobile and Payments', s: 'Best-performing pattern is heavily concentrated in Platform + Web. Mobile would gain ~0.8 PRs/day if 60% of code-gen sessions adopted it.' },
              { tag: 'kill', tk: 'warn', t: 'Detect and short-circuit "Rewrite spiral" sessions', s: '287 sessions ended in abandon after ≥3 generations. Median spend $4.10 per spiral. Atlas can interrupt at the second generation when entropy crosses 0.8.' },
              { tag: 'observe', tk: 'acc', t: 'Debug-loop pattern is more expensive than it looks', s: '942 sessions, 2.4× cost index, 18% defect rate. Recommend pairing with test-gen earlier in the chain.' },
            ].map((f, i) => (
              <div key={i} style={{display:'grid', gridTemplateColumns:'120px 1fr auto', gap:24, alignItems:'baseline', padding:'18px 0', borderTop: i ? '1px solid var(--rule)' : '0'}}>
                <Tag kind={f.tk}>{f.tag}</Tag>
                <div>
                  <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:20, letterSpacing:'-0.01em'}}>{f.t}</div>
                  <div style={{color:'var(--ink-3)', fontSize:13, marginTop:6, maxWidth:'62ch'}}>{f.s}</div>
                </div>
                <button className="chip">Investigate <span className="k">↗</span></button>
              </div>
            ))}
          </div>
        </Card>
      </Section>
    </div>
  );
}

window.ScreenWorkflows = ScreenWorkflows;