// Screen: Tests list / workspace home
const SAMPLE_TESTS = [
  { id:'t1', title:'Player licensing — happy path', desc:'Admin uploads a contract, homologates a player, confirms licence active.', steps:8, last:'passed', lastAge:'2h', dur:'34s', runs:12, demo:true },
  { id:'t2', title:'Match-sheet submission — 72h deadline', desc:'Club secretary submits squad numbers, generates physical match sheet.', steps:11, last:'passed', lastAge:'1d', dur:'58s', runs:7, demo:true },
  { id:'t3', title:'Post-match security report', desc:'Enter incident report, attach evidence, submit before daily fine.', steps:6, last:'failed', lastAge:'3h', dur:'41s', runs:9, demo:false, fail:'Selector drift · tier-0 caught 2/3' },
  { id:'t4', title:'Player transfer (mutation) flow', desc:'Originating club approves, destination club accepts, LFP validates.', steps:14, last:'passed', lastAge:'6h', dur:'1m 22s', runs:4, demo:true },
  { id:'t5', title:'F&B match-day metrics upload', desc:'Stadium ops uploads F&B figures with reference spreadsheet.', steps:5, last:'drift', lastAge:'1d', dur:'22s', runs:3, demo:false, fail:'Visual fallback proposed — review' },
  { id:'t6', title:'Medical certificate attachment', desc:'Attach PDF to player, verify preview and checksum.', steps:7, last:'passed', lastAge:'4d', dur:'29s', runs:6, demo:true },
];

function TestRow({ t, onOpen }) {
  const statusColor = t.last === 'passed' ? 'ok' : t.last === 'failed' ? 'fail' : 'warn';
  const statusLabel = t.last === 'passed' ? 'Passed' : t.last === 'failed' ? 'Failed' : 'Drift · review';
  return (
    <div onClick={onOpen}
      style={{display:'grid', gridTemplateColumns:'1fr 140px 120px 120px 80px', gap:24, alignItems:'center',
        padding:'16px 20px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:10,
        cursor:'pointer', transition:'border-color 180ms var(--motion-ease-organic)'}}
      onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
      onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
      <div>
        <div style={{display:'flex', gap:10, alignItems:'center', marginBottom:4}}>
          <span className={`ft-dot ft-dot--${statusColor}`}/>
          <span style={{fontSize:14.5, fontWeight:500, color:'var(--text-primary)', letterSpacing:'-0.01em'}}>{t.title}</span>
          {t.demo && <span className="ft-tag ft-tag--accent ft-mono" style={{fontSize:9}}>demo ready</span>}
        </div>
        <div style={{fontSize:12.5, color:'var(--text-tertiary)', lineHeight:1.5}}>{t.fail || t.desc}</div>
      </div>
      <div className="ft-mono" style={{fontSize:11, color:'var(--text-muted)', letterSpacing:'0.08em'}}>
        <div style={{color: t.last === 'failed' ? '#e87878' : t.last === 'drift' ? 'var(--phen-glory)' : 'var(--accent)'}}>{statusLabel.toUpperCase()}</div>
        <div style={{marginTop:3}}>{t.lastAge} ago</div>
      </div>
      <div className="ft-mono" style={{fontSize:11, color:'var(--text-tertiary)'}}>{t.steps} steps</div>
      <div className="ft-mono" style={{fontSize:11, color:'var(--text-tertiary)'}}>{t.dur} · {t.runs}×</div>
      <div style={{textAlign:'right'}}><IconChevron size={12} /></div>
    </div>
  );
}

function ScreenTests({ onNew, onOpenTest, onOpenReport }) {
  return (
    <>
      <Crumb path={[{label:'Isyfoot workspace'}, {label:'Tests'}]}
        right={<><span className="ok">Pipeline · idle</span><span>127 evt/min</span><span>v0.3.2</span></>}/>
      <div className="ft-scroll">
        <div className="ft-screen ft-fadein">
          <div className="ft-pagehead">
            <div className="row">
              <div>
                <div className="kicker">Tests · Isyfoot</div>
                <h1>Six tests. Four demos shareable.</h1>
                <p>Every recording produces a test and a demo clip. Open one to review its steps, or record a new flow.</p>
              </div>
              <div style={{display:'flex', gap:10}}>
                <button className="ft-btn ft-btn--secondary"><IconSearch size={12}/> Search</button>
                <button className="ft-btn ft-btn--primary ft-btn--lg" onClick={onNew}><IconPlus size={14}/> New test</button>
              </div>
            </div>
          </div>

          {/* Summary strip */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:24}}>
            {[
              ['Pass rate','84%','12 of last 14 runs','ok'],
              ['Coverage','6 flows','core compliance paths','ok'],
              ['Drift','1 test','visual fallback pending','warn'],
              ['Step library','47','4 reused cross-test','ok'],
            ].map(([k,v,sub,tone]) => (
              <div key={k} style={{padding:'14px 16px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:10}}>
                <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--text-muted)'}}>{k}</div>
                <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:4}}>
                  <div style={{fontSize:22, fontWeight:500, letterSpacing:'-0.02em', color: tone==='warn' ? 'var(--phen-glory)' : 'var(--text-primary)'}}>{v}</div>
                </div>
                <div className="ft-mono" style={{fontSize:10, color:'var(--text-tertiary)', letterSpacing:'0.04em', marginTop:4}}>{sub}</div>
              </div>
            ))}
          </div>

          {/* Column headers */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 140px 120px 120px 80px', gap:24, padding:'0 20px 10px', fontFamily:'var(--mono)', fontSize:9, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--text-muted)'}}>
            <span>Test</span><span>Last run</span><span>Length</span><span>Duration</span><span></span>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {SAMPLE_TESTS.map(t => <TestRow key={t.id} t={t} onOpen={() => t.last === 'failed' ? onOpenReport() : onOpenTest(t)}/>)}
          </div>
        </div>
      </div>
    </>
  );
}

window.ScreenTests = ScreenTests;