// Screen: New test — URL entry + record start
function ScreenNewTest({ onStartRecording, onBack }) {
  const [url, setUrl] = useState('https://staging.isyfoot.lfp.fr/dashboard');
  const [title, setTitle] = useState('Submit match-sheet · J14');
  const [ready, setReady] = useState(false);
  const [mic, setMic] = useState(0);

  // Fake mic level
  useEffect(() => {
    if (!ready) return;
    const id = setInterval(() => setMic(0.2 + Math.random() * 0.6), 120);
    return () => clearInterval(id);
  }, [ready]);

  return (
    <>
      <Crumb path={[{label:'Isyfoot workspace', onClick:onBack}, {label:'Tests', onClick:onBack}, {label:'New'}]}
        right={<><span>Browser · not launched</span><span>Mic · ready</span></>}/>
      <div className="ft-scroll">
        <div className="ft-screen ft-fadein" style={{maxWidth:880}}>
          <div className="ft-pagehead">
            <div className="kicker">Record a flow</div>
            <h1>Point FinalTake at Isyfoot. Talk as you click.</h1>
            <p>A headed browser will open. Narrate normally — "logging in as Michel, selecting OL squad, submitting 18 numbers." FinalTake captures actions and voice; distillation produces a test.</p>
          </div>

          <div className="ft-panel" style={{marginBottom:16}}>
            <div className="ft-panel-hd">
              <h3>Target</h3>
              <span className="ft-tag ft-tag--muted ft-mono">isyfoot · staging</span>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'2fr 3fr', gap:16}}>
              <label className="ft-label">
                <span className="lbl">Test title</span>
                <input className="ft-input" value={title} onChange={e => setTitle(e.target.value)}/>
                <span className="hint">Used for filenames. Rename anytime.</span>
              </label>
              <label className="ft-label">
                <span className="lbl">Starting URL</span>
                <input className="ft-input ft-input--mono" value={url} onChange={e => setUrl(e.target.value)}/>
                <span className="hint">Playwright opens here. Cookies/storage isolated per test.</span>
              </label>
            </div>
          </div>

          <div className="ft-panel" style={{marginBottom:16}}>
            <div className="ft-panel-hd">
              <h3>Pre-flight</h3>
              <span className="ft-tag ft-tag--accent ft-tag--dot ft-mono">all systems go</span>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12}}>
              {[
                ['Microphone','MacBook Pro Microphone','ok', <IconMic size={12}/>],
                ['Transcription','Whisper-medium · local','ok', <IconSparkle size={12}/>],
                ['Browser','Chromium 134 · bundled','ok', <IconLink size={12}/>],
                ['Trace capture','Full · DOM + net + console','ok', <IconFlag size={12}/>],
                ['TTS for demo','ElevenLabs · cloud','warn', <IconFilm size={12}/>],
                ['Workspace','writable · 42GB free','ok', <IconFolder size={12}/>],
              ].map(([k,v,tone,ico]) => (
                <div key={k} style={{padding:'12px 14px', background:'var(--bg2)', border:'1px solid var(--border)', borderRadius:8, display:'flex', gap:10, alignItems:'flex-start'}}>
                  <span style={{color: tone==='warn' ? 'var(--phen-glory)' : 'var(--accent)', marginTop:1}}>{ico}</span>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--text-muted)'}}>{k}</div>
                    <div style={{fontSize:12, color:'var(--text-secondary)', marginTop:3, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{v}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{display:'flex', gap:12, padding:'20px 24px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:12, alignItems:'center', marginBottom:16}}>
            <div style={{width:44, height:44, borderRadius:'50%', background:'var(--accent-dim)', border:'1px solid var(--accent)', display:'grid', placeItems:'center', color:'var(--accent)', position:'relative'}}>
              <IconMic size={18}/>
              {ready && (
                <div style={{position:'absolute', inset:-6, border:'1px solid var(--accent)', borderRadius:'50%', opacity: mic, transform:`scale(${1 + mic*0.3})`, transition:'all 120ms linear'}}/>
              )}
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:13, color:'var(--text-primary)', fontWeight:500}}>{ready ? 'Mic live — input level ok' : 'Test microphone'}</div>
              <div className="ft-mono" style={{fontSize:10, letterSpacing:'0.08em', color:'var(--text-muted)', marginTop:3}}>
                {ready ? 'Say: "logging into Isyfoot as Michel Dupont, club secretary"' : 'Click to sample 5 seconds and verify capture works'}
              </div>
            </div>
            <button className="ft-btn ft-btn--secondary" onClick={() => setReady(!ready)}>
              {ready ? 'Stop test' : 'Test mic'}
            </button>
          </div>

          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div className="ft-mono" style={{fontSize:10, letterSpacing:'0.14em', color:'var(--text-muted)'}}>
              ⌘⏎ &nbsp; to start · recordings are private until you approve the distilled test
            </div>
            <div style={{display:'flex', gap:10}}>
              <button className="ft-btn ft-btn--ghost" onClick={onBack}>Cancel</button>
              <button className="ft-btn ft-btn--record ft-btn--lg" onClick={onStartRecording}>
                Launch browser &amp; record
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.ScreenNewTest = ScreenNewTest;