// Screen: Test run report (illustrated, skimmable)

const REPORT_STEPS = [
  { id:'r1', title:'Login as club secretary', intent:'setup', dur:'2.1s', status:'pass',
    prose:'Michel logs in as a club secretary with Isyfoot credentials.',
    verifs:[{ok:true, text:'dashboard visible'}],
    shot:{bg:'#0f141b', elements:'login'}, net:3, actions:4 },
  { id:'r2', title:'Open J14 squad panel', intent:'action', dur:'4.8s', status:'pass',
    prose:'Navigates to the J14 fixture and opens the squad assignment panel for OL vs OM.',
    verifs:[{ok:true, text:'"Affectation des numéros" visible'}],
    shot:{bg:'#0c1015', elements:'fixture'}, net:7, actions:3 },
  { id:'r3', title:'Assign eighteen jersey numbers', intent:'action', dur:'18.3s', status:'pass',
    prose:'Assigns jersey numbers to all eighteen players and confirms the roster.',
    verifs:[{ok:true, text:'18 rows marked assigned'}],
    shot:{bg:'#0c1015', elements:'roster'}, net:19, actions:37 },
  { id:'r4', title:'Submit to LFP & verify receipt', intent:'assertion', dur:'7.2s', status:'pass',
    prose:'Submits the match-sheet to the LFP and expects a homologation receipt with timestamp.',
    verifs:[
      {ok:true, text:'"FDM homologuée" appeared'},
      {ok:true, text:'LFP timestamp matches HH:MM:SS'},
    ],
    shot:{bg:'#0f141b', elements:'receipt'}, net:4, actions:2 },
];

function MiniScreenshot({ kind }) {
  // Abstract placeholder screenshot — not a real Isyfoot rendering
  return (
    <div style={{aspectRatio:'16/10', background:'#0a0d12', border:'1px solid var(--border)', borderRadius:8, overflow:'hidden', position:'relative'}}>
      <div style={{position:'absolute', top:0, left:0, right:0, height:18, background:'#14181e', display:'flex', alignItems:'center', padding:'0 6px', gap:4}}>
        <span style={{width:5, height:5, borderRadius:'50%', background:'#ff5f57'}}/>
        <span style={{width:5, height:5, borderRadius:'50%', background:'#febc2e'}}/>
        <span style={{width:5, height:5, borderRadius:'50%', background:'#28c840'}}/>
        <span className="ft-mono" style={{marginLeft:8, fontSize:7, color:'var(--text-muted)', letterSpacing:'0.08em'}}>isyfoot.lfp.fr</span>
      </div>
      <div style={{position:'absolute', top:20, left:0, bottom:0, width:50, background:'#0f141b', borderRight:'1px solid var(--border)', padding:'8px 6px'}}>
        {[0,1,2,3,4,5].map(i => <div key={i} style={{height:3, background: i===3 ? '#d4b254' : '#2a2e34', marginBottom:5, borderRadius:1}}/>)}
      </div>
      <div style={{position:'absolute', top:22, left:52, right:6, bottom:6}}>
        {kind === 'login' && (
          <div style={{padding:'20px 30px'}}>
            <div style={{height:8, width:80, background:'#d4b254', opacity:0.6, borderRadius:2, marginBottom:10}}/>
            <div style={{height:16, background:'#1a1f27', border:'1px solid #2a2e34', borderRadius:3, marginBottom:6}}/>
            <div style={{height:16, background:'#1a1f27', border:'1px solid #2a2e34', borderRadius:3, marginBottom:10}}/>
            <div style={{height:16, width:70, background:'#d4b254', opacity:0.5, borderRadius:3}}/>
          </div>
        )}
        {kind === 'fixture' && (
          <div style={{padding:'10px 14px'}}>
            <div style={{height:6, width:70, background:'#d4b254', opacity:0.7, marginBottom:8, borderRadius:1}}/>
            <div style={{height:3, width:100, background:'#3a3f47', marginBottom:12, borderRadius:1}}/>
            <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:3}}>
              {Array.from({length:12}).map((_,i) => <div key={i} style={{height:14, background: i<6 ? 'rgba(212,178,84,0.15)' : '#1a1f27', border:'1px solid #2a2e34', borderRadius:2}}/>)}
            </div>
          </div>
        )}
        {kind === 'roster' && (
          <div style={{padding:'10px 14px'}}>
            <div style={{height:4, width:60, background:'#d4b254', opacity:0.6, marginBottom:6, borderRadius:1}}/>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:3}}>
              {Array.from({length:18}).map((_,i) => (
                <div key={i} style={{height:10, background:'rgba(212,178,84,0.2)', border:'1px solid rgba(212,178,84,0.4)', borderRadius:2, display:'flex', alignItems:'center', paddingLeft:3}}>
                  <span style={{width:6, height:2, background:'#d4b254'}}/>
                </div>
              ))}
            </div>
          </div>
        )}
        {kind === 'receipt' && (
          <div style={{padding:'20px 30px'}}>
            <div style={{height:18, background:'rgba(0, 245, 255, 0.1)', border:'1px solid var(--accent)', borderRadius:3, marginBottom:8, display:'flex', alignItems:'center', padding:'0 6px'}}>
              <span style={{width:4, height:4, borderRadius:'50%', background:'var(--accent)', marginRight:4}}/>
              <span style={{height:3, flex:1, background:'var(--accent)', opacity:0.7, borderRadius:1}}/>
            </div>
            <div style={{height:3, width:'70%', background:'#3a3f47', borderRadius:1, marginBottom:3}}/>
            <div style={{height:3, width:'50%', background:'#3a3f47', borderRadius:1}}/>
          </div>
        )}
      </div>
    </div>
  );
}

function ScreenReport({ onWatchDemo, onBack }) {
  return (
    <>
      <Crumb path={[{label:'Isyfoot workspace', onClick:onBack}, {label:'Tests', onClick:onBack}, {label:'Submit match-sheet · J14'}, {label:'Run #13'}]}
        right={<><span>Run · 32.4s</span><span className="ft-mono" style={{color:'var(--accent)'}}>all passed</span></>}/>
      <div className="ft-scroll">
        <div className="ft-screen ft-fadein" style={{maxWidth:1080}}>
          {/* Top summary — the 10-second answer */}
          <div style={{padding:'28px 32px', background:'var(--surface)', border:'1px solid var(--border)', borderLeft:'3px solid var(--accent)', borderRadius:12, marginBottom:28}}>
            <div style={{display:'flex', gap:32, alignItems:'center'}}>
              <div style={{width:56, height:56, borderRadius:14, background:'var(--accent-dim)', border:'1px solid var(--accent)', display:'grid', placeItems:'center', color:'var(--accent)', boxShadow:'var(--glow-primary)', flexShrink:0}}>
                <IconCheck size={28}/>
              </div>
              <div style={{flex:1}}>
                <div className="ft-mono" style={{fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--accent)'}}>Run #13 · just now</div>
                <div style={{fontSize:26, fontWeight:500, color:'var(--text-primary)', letterSpacing:'-0.02em', marginTop:4}}>4 of 4 steps passed · 3 of 3 expectations met</div>
                <div style={{fontSize:13, color:'var(--text-tertiary)', marginTop:4}}>No drift vs. run #12 · 33 network calls · 46 Playwright actions · Chromium 134 headless</div>
              </div>
              <div style={{display:'flex', gap:8}}>
                <button className="ft-btn ft-btn--secondary"><IconRefresh size={12}/> Re-run</button>
                <button className="ft-btn ft-btn--secondary"><IconDownload size={12}/> Trace</button>
                <button className="ft-btn ft-btn--primary" onClick={onWatchDemo}><IconFilm size={13}/> Watch demo</button>
              </div>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:12, marginTop:24}}>
              {[
                ['Duration','32.4s','under budget'],
                ['Δ last run','+0.3s','within noise'],
                ['Visual diff','0 px','pixel-identical'],
                ['Step reuse','1 / 4','login-as-role@v3'],
                ['Artifacts','4','trace · video · pdf · yaml'],
              ].map(([k,v,sub]) => (
                <div key={k} style={{padding:'10px 14px', background:'var(--bg2)', border:'1px solid var(--border)', borderRadius:8}}>
                  <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--text-muted)'}}>{k}</div>
                  <div style={{fontSize:18, fontWeight:500, color:'var(--text-primary)', letterSpacing:'-0.02em', marginTop:3}}>{v}</div>
                  <div className="ft-mono" style={{fontSize:10, color:'var(--text-tertiary)', letterSpacing:'0.04em', marginTop:2}}>{sub}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Step-by-step narrative */}
          <div className="kicker ft-mono" style={{fontSize:10, letterSpacing:'0.22em', color:'var(--text-muted)', marginBottom:14, textTransform:'uppercase'}}>What was tested</div>
          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            {REPORT_STEPS.map((s, i) => (
              <div key={s.id} style={{display:'grid', gridTemplateColumns:'300px 1fr', gap:20, padding:'18px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:12, alignItems:'flex-start'}}>
                <div>
                  <MiniScreenshot kind={s.shot.elements}/>
                  <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:8, display:'flex', justifyContent:'space-between'}}>
                    <span>evidence · step {i+1}</span>
                    <span>{s.net} net · {s.actions} acts</span>
                  </div>
                </div>
                <div>
                  <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:10, flexWrap:'wrap'}}>
                    <span className="ft-mono" style={{fontSize:10, color:'var(--text-muted)', letterSpacing:'0.14em'}}>STEP {i+1}</span>
                    <span className="ft-tag ft-tag--accent ft-tag--dot ft-mono" style={{fontSize:9}}>PASS · {s.dur}</span>
                    <span className="ft-tag ft-mono ft-tag--muted" style={{fontSize:9}}>{s.intent}</span>
                  </div>
                  <div style={{fontSize:17, fontWeight:500, color:'var(--text-primary)', letterSpacing:'-0.01em', marginBottom:6}}>
                    {s.title}
                  </div>
                  <div style={{fontSize:13.5, color:'var(--text-tertiary)', lineHeight:1.6, marginBottom:14, maxWidth:'60ch'}}>
                    {s.prose}
                  </div>
                  <div style={{borderTop:'1px dashed var(--border)', paddingTop:10}}>
                    {s.verifs.map((v,j) => (
                      <div key={j} style={{display:'flex', gap:8, alignItems:'center', marginBottom:4}}>
                        <span style={{color: v.ok ? 'var(--accent)' : '#e85454'}}><IconCheck size={12}/></span>
                        <span style={{fontSize:13, color:'var(--text-secondary)'}}>{v.text}</span>
                        <span className="ft-mono" style={{fontSize:10, color:'var(--text-muted)', marginLeft:'auto', letterSpacing:'0.08em'}}>{v.ok ? '✓ passed' : 'failed'}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Footer summary */}
          <div style={{marginTop:28, padding:'18px 22px', background:'var(--bg2)', border:'1px solid var(--border)', borderRadius:10, display:'flex', gap:16, alignItems:'center'}}>
            <IconSparkle size={16} style={{color:'var(--accent)'}}/>
            <div style={{flex:1, fontSize:13, color:'var(--text-secondary)', lineHeight:1.5}}>
              <strong style={{color:'var(--text-primary)'}}>Demo clip rendered in parallel.</strong> Same execution, TTS narration read from test prose. Drag into Slack when you're ready.
            </div>
            <button className="ft-btn ft-btn--secondary" onClick={onWatchDemo}>Open demo →</button>
          </div>
        </div>
      </div>
    </>
  );
}

window.ScreenReport = ScreenReport;