// Screen: Review UI — three-way linked editor
// Transcript (left) ↔ Timeline (center) ↔ Test document (right)

const TRANSCRIPT = [
  { id:'t0', t:'00:02', text:'Logging in as Michel Dupont, club secretary.', step:'s1' },
  { id:'t1', t:'00:09', text:'Opening the match fixtures, selecting journée fourteen.', step:'s2' },
  { id:'t2', t:'00:18', text:'This is the OL versus Marseille fixture — opening the squad panel.', step:'s2' },
  { id:'t3', t:'00:26', text:'Assigning number ten to Traoré, number seven to Mercier…', step:'s3' },
  { id:'t4', t:'00:48', text:'I\'ve now placed all eighteen. Confirming the roster.', step:'s3' },
  { id:'t5', t:'00:58', text:'I expect a homologation receipt to appear after submit.', step:'s4' },
  { id:'t6', t:'01:04', text:'Clicking submit to LFP.', step:'s4' },
  { id:'t7', t:'01:12', text:'Receipt visible — "FDM homologuée" — with LFP timestamp.', step:'s4' },
];

const TIMELINE = [
  { id:'a0', t:0.02,  kind:'nav',    label:'goto isyfoot.lfp.fr/login', step:'s1' },
  { id:'a1', t:0.05,  kind:'input',  label:'fill [name=email]', step:'s1' },
  { id:'a2', t:0.07,  kind:'click',  label:'click "Se connecter"', step:'s1' },
  { id:'a3', t:0.10,  kind:'nav',    label:'redirect → /dashboard', step:'s1' },
  { id:'a4', t:0.15,  kind:'click',  label:'click nav "Feuille de match"', step:'s2' },
  { id:'a5', t:0.21,  kind:'click',  label:'click fixture card "J14 OL-OM"', step:'s2' },
  { id:'a6', t:0.28,  kind:'click',  label:'click "Affecter numéros"', step:'s2' },
  { id:'a7', t:0.34,  kind:'input',  label:'type #10 for Traoré', step:'s3' },
  { id:'a8', t:0.40,  kind:'input',  label:'type #7 for Mercier', step:'s3' },
  { id:'a9', t:0.60,  kind:'input',  label:'… 16 more assignments …', step:'s3' },
  { id:'a10', t:0.78, kind:'click',  label:'click "Confirmer roster"', step:'s3' },
  { id:'a11', t:0.86, kind:'click',  label:'click "Soumettre à la LFP"', step:'s4' },
  { id:'a12', t:0.92, kind:'assert', label:'waitFor "FDM homologuée"', step:'s4' },
];

const STEPS = [
  { id:'s1', intent:'setup',     prose:'Michel logs in as a club secretary with Isyfoot credentials.',
    ref:'login-as-role@v3', reused:true, params:{role:'club_secretary'}, verifs:[] },
  { id:'s2', intent:'action',    prose:'Navigates to the J14 fixture and opens the squad assignment panel for OL vs OM.',
    ref:null, reused:false, new:true, proposed:'open-fixture-squad-panel@v1',
    verifs:[{kind:'visible_with_text', text:'Affectation des numéros', desc:'squad panel is visible'}] },
  { id:'s3', intent:'action',    prose:'Assigns jersey numbers to all eighteen players and confirms the roster.',
    ref:null, reused:false, new:true, proposed:'assign-squad-numbers@v1',
    params:{count:18}, verifs:[{kind:'count_equals', selector:'.roster-row.assigned', value:18, desc:'eighteen rows are marked assigned'}] },
  { id:'s4', intent:'assertion', prose:'Submits the match-sheet to the LFP and expects a homologation receipt with an LFP timestamp.',
    ref:null, reused:false, new:true, proposed:'submit-fdm-to-lfp@v1',
    verifs:[
      {kind:'visible_with_text', text:'FDM homologuée', desc:'receipt text appears'},
      {kind:'matches_pattern', selector:'[data-testid=lfp-timestamp]', value:'\\d{2}:\\d{2}:\\d{2}', desc:'receipt has LFP timestamp'},
    ]},
];

function KindChip({ kind }) {
  const map = {
    nav:['#7bb5ff','nav'], click:['#d4b254','click'], input:['var(--accent)','input'], assert:['#b78cff','assert']
  };
  const [c,l] = map[kind] || ['var(--text-muted)', kind];
  return <span className="ft-mono" style={{fontSize:9, letterSpacing:'0.16em', textTransform:'uppercase', color:c, padding:'1px 6px', border:`1px solid ${c}`, borderRadius:4, opacity:0.85}}>{l}</span>;
}

function IntentChip({ intent }) {
  const map = { setup:['#7bb5ff','setup'], action:['var(--accent)','action'], assertion:['#b78cff','assertion'] };
  const [c,l] = map[intent] || ['var(--text-muted)', intent];
  return <span className="ft-mono" style={{fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', color:c, padding:'2px 8px', background: `color-mix(in oklab, ${c} 14%, transparent)`, borderRadius:100}}>{l}</span>;
}

function ScreenReview({ onApprove, onBack }) {
  const [focus, setFocus] = useState('s2'); // focused step id
  const [nlOpen, setNlOpen] = useState(false);
  const [nlVal, setNlVal] = useState('');

  const inFocus = (sid) => sid === focus;

  return (
    <>
      <Crumb path={[{label:'Isyfoot workspace', onClick:onBack}, {label:'Tests', onClick:onBack}, {label:'Submit match-sheet · J14'}, {label:'Review'}]}
        right={<>
          <span>Draft · not saved</span>
          <span className="ft-tag ft-tag--accent ft-mono" style={{fontSize:9}}>3 new steps · 1 reused</span>
        </>}/>

      <div style={{flex:1, minHeight:0, display:'flex', flexDirection:'column'}}>
        {/* Review header */}
        <div style={{padding:'20px 32px 16px', borderBottom:'1px solid var(--border)', display:'flex', gap:20, alignItems:'flex-end', background:'var(--bg)'}}>
          <div>
            <div className="ft-mono" style={{fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--text-muted)'}}>Review · draft test</div>
            <h2 style={{margin:'4px 0 0', fontSize:24, fontWeight:500, letterSpacing:'-0.02em', color:'var(--text-primary)'}}>Submit match-sheet · J14</h2>
          </div>
          <div style={{display:'flex', gap:6, marginLeft:'auto'}}>
            <button className="ft-btn ft-btn--ghost" onClick={() => setNlOpen(!nlOpen)}>
              <IconWand size={12}/> NL edit
            </button>
            <button className="ft-btn ft-btn--secondary"><IconPlay size={12}/> Dry run</button>
            <button className="ft-btn ft-btn--primary" onClick={onApprove}>
              <IconCheck size={14}/> Approve &amp; save
            </button>
          </div>
        </div>

        {/* NL accelerator */}
        {nlOpen && (
          <div className="ft-fadein" style={{padding:'12px 32px', background:'var(--accent-dim)', borderBottom:'1px solid var(--accent)', display:'flex', gap:10, alignItems:'center'}}>
            <IconWand size={14} style={{color:'var(--accent)'}}/>
            <input className="ft-input" value={nlVal} onChange={e => setNlVal(e.target.value)}
              placeholder='e.g. "add verification that the receipt PDF filename starts with FDM-"'
              style={{background:'var(--bg2)', height:34, fontSize:13}}/>
            <button className="ft-btn ft-btn--primary" style={{height:34}} disabled={!nlVal}>Apply</button>
            <button className="ft-btn ft-btn--ghost" style={{height:34}} onClick={() => setNlOpen(false)}>×</button>
          </div>
        )}

        {/* 3-way grid */}
        <div style={{flex:1, minHeight:0, display:'grid', gridTemplateColumns:'340px 220px 1fr'}}>
          {/* Transcript */}
          <div style={{borderRight:'1px solid var(--border)', display:'flex', flexDirection:'column', minHeight:0, background:'var(--bg)'}}>
            <div style={{padding:'12px 16px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', gap:8}}>
              <span className="ft-mono" style={{fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--text-muted)'}}>Transcript</span>
              <span style={{marginLeft:'auto'}} className="ft-mono ft-tag ft-tag--muted" style={{fontSize:9, padding:'2px 8px', background:'transparent', border:'1px solid var(--border)', color:'var(--text-muted)', borderRadius:100, fontFamily:'var(--mono)', letterSpacing:'0.12em'}}>1m 24s · whisper</span>
            </div>
            <div className="ft-scroll ft-scroll-thin" style={{flex:1, padding:'8px 4px'}}>
              {TRANSCRIPT.map(l => (
                <div key={l.id} onClick={() => setFocus(l.step)}
                  style={{padding:'10px 12px', margin:'0 4px 2px', borderRadius:6, cursor:'pointer',
                    background: inFocus(l.step) ? 'var(--accent-dim)' : 'transparent',
                    borderLeft: inFocus(l.step) ? '2px solid var(--accent)' : '2px solid transparent',
                    transition:'all 160ms var(--motion-ease-organic)'}}>
                  <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.14em', color: inFocus(l.step) ? 'var(--accent)' : 'var(--text-muted)'}}>{l.t}</div>
                  <div style={{fontSize:12.5, color: inFocus(l.step) ? 'var(--text-primary)' : 'var(--text-tertiary)', lineHeight:1.55, marginTop:2}}>{l.text}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Timeline */}
          <div style={{borderRight:'1px solid var(--border)', display:'flex', flexDirection:'column', minHeight:0, background:'var(--bg2)'}}>
            <div style={{padding:'12px 14px', borderBottom:'1px solid var(--border)'}}>
              <span className="ft-mono" style={{fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--text-muted)'}}>Timeline</span>
            </div>
            <div className="ft-scroll ft-scroll-thin" style={{flex:1, padding:'8px 0'}}>
              {TIMELINE.map(a => (
                <div key={a.id} onClick={() => setFocus(a.step)}
                  style={{padding:'6px 14px', cursor:'pointer', display:'flex', gap:8, alignItems:'flex-start',
                    background: inFocus(a.step) ? 'var(--accent-dim)' : 'transparent',
                    borderLeft: inFocus(a.step) ? '2px solid var(--accent)' : '2px solid transparent',
                    transition:'all 160ms var(--motion-ease-organic)'}}>
                  <span className="ft-mono" style={{fontSize:9, color:'var(--text-muted)', minWidth:28, paddingTop:2}}>{(a.t*84).toFixed(0).padStart(2,'0')}s</span>
                  <div style={{flex:1, minWidth:0}}>
                    <KindChip kind={a.kind}/>
                    <div className="ft-mono" style={{fontSize:10.5, color: inFocus(a.step) ? 'var(--text-primary)' : 'var(--text-tertiary)', marginTop:3, lineHeight:1.5, wordBreak:'break-word'}}>{a.label}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Test document */}
          <div style={{display:'flex', flexDirection:'column', minHeight:0, background:'var(--bg)'}}>
            <div style={{padding:'12px 20px', borderBottom:'1px solid var(--border)', display:'flex', gap:8, alignItems:'center'}}>
              <span className="ft-mono" style={{fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--text-muted)'}}>Test document</span>
              <span className="ft-mono" style={{fontSize:9, letterSpacing:'0.12em', color:'var(--text-tertiary)', marginLeft:8}}>submit-matchsheet-j14.yaml</span>
              <span style={{marginLeft:'auto'}} className="ft-tag ft-tag--muted ft-mono" >4 steps · 3 verifications</span>
            </div>
            <div className="ft-scroll ft-scroll-thin" style={{flex:1, padding:'20px 28px 40px'}}>
              {STEPS.map((s, i) => (
                <div key={s.id} onClick={() => setFocus(s.id)}
                  style={{padding:'16px 18px 18px', marginBottom:10, borderRadius:10,
                    background: inFocus(s.id) ? 'var(--surface)' : 'transparent',
                    border:'1px solid', borderColor: inFocus(s.id) ? 'var(--accent)' : 'var(--border)',
                    cursor:'pointer', transition:'all 200ms var(--motion-ease-organic)',
                    boxShadow: inFocus(s.id) ? 'var(--glow-primary)' : 'none'}}>
                  <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.1em'}}>STEP {i+1}</span>
                    <IntentChip intent={s.intent}/>
                    {s.reused && <span className="ft-tag ft-tag--accent ft-mono" style={{fontSize:9}}><IconLink size={10}/> reused · {s.ref}</span>}
                    {s.new && <span className="ft-tag ft-tag--warn ft-mono" style={{fontSize:9}}><IconSparkle size={10}/> new · {s.proposed}</span>}
                    <span style={{marginLeft:'auto', display:'flex', gap:6}}>
                      <button className="ft-btn ft-btn--ghost" style={{height:24, padding:'0 8px', fontSize:11}}>edit</button>
                      <button className="ft-btn ft-btn--ghost" style={{height:24, padding:'0 8px', fontSize:11}}>···</button>
                    </span>
                  </div>
                  <div style={{fontSize:15, color:'var(--text-primary)', lineHeight:1.55, letterSpacing:'-0.005em', marginBottom:12}}>
                    {s.prose}
                  </div>
                  {s.params && Object.keys(s.params).length > 0 && (
                    <div style={{display:'flex', gap:6, flexWrap:'wrap', marginBottom:10}}>
                      {Object.entries(s.params).map(([k,v]) => (
                        <span key={k} className="ft-mono" style={{fontSize:11, padding:'3px 8px', background:'var(--bg2)', border:'1px solid var(--border)', borderRadius:4, color:'var(--text-secondary)'}}>
                          <span style={{color:'var(--text-muted)'}}>@{k}:</span> {String(v)}
                        </span>
                      ))}
                    </div>
                  )}
                  {s.verifs.length > 0 && (
                    <div style={{borderTop:'1px dashed var(--border)', paddingTop:10, marginTop:4}}>
                      <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--text-muted)', marginBottom:6}}>Expectations</div>
                      {s.verifs.map((v,j) => (
                        <div key={j} style={{display:'flex', gap:8, alignItems:'flex-start', marginBottom:4}}>
                          <span style={{color:'var(--accent)', marginTop:2}}><IconCheck size={11}/></span>
                          <div style={{flex:1}}>
                            <div style={{fontSize:12.5, color:'var(--text-secondary)'}}>{v.desc}</div>
                            <div className="ft-mono" style={{fontSize:10, color:'var(--text-muted)', marginTop:2, letterSpacing:'0.05em'}}>
                              dom · {v.kind}{v.text ? ` · "${v.text}"` : v.value ? ` · ${v.value}` : ''}
                            </div>
                          </div>
                        </div>
                      ))}
                      <button className="ft-btn ft-btn--ghost" style={{height:24, padding:'0 8px', fontSize:11, marginTop:6}}>
                        <IconPlus size={10}/> add expectation
                      </button>
                    </div>
                  )}
                </div>
              ))}

              <button className="ft-btn ft-btn--secondary" style={{width:'100%', height:44, borderStyle:'dashed'}}>
                <IconPlus size={12}/> Insert step
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.ScreenReview = ScreenReview;