// Screen: First-run setup (pick folder, mic permission)
function ScreenSetup({ onComplete }) {
  const [stage, setStage] = useState(0); // 0 welcome, 1 folder, 2 mic
  const [folder, setFolder] = useState('');
  const [mic, setMic] = useState('idle'); // idle | requested | granted

  const pick = () => setFolder('~/Documents/FinalTake/isyfoot-lfp');

  return (
    <div className="ft-screen ft-fadein" style={{maxWidth:720, paddingTop:72}}>
      <div className="ft-pagehead">
        <div className="kicker">FinalTake · first-run</div>
        <h1>Two things, then we record.</h1>
        <p>One recording produces a test, a demo video, and a step in your library. No accounts, no cloud. Everything lives in the folder you pick.</p>
      </div>

      {/* Progress rail */}
      <div style={{display:'flex', gap:4, marginBottom:32}}>
        {[0,1,2].map(i => (
          <div key={i} style={{height:2, flex:1, background: i <= stage ? 'var(--accent)' : 'var(--border)', boxShadow: i <= stage ? '0 0 6px var(--accent-glow)' : 'none', transition:'all 280ms var(--motion-ease-calm)'}}/>
        ))}
      </div>

      {stage === 0 && (
        <div className="ft-panel ft-fadein">
          <div className="ft-panel-hd">
            <h3>Welcome, Michel.</h3>
            <span className="ft-tag ft-mono">LFP · Isyfoot</span>
          </div>
          <p style={{color:'var(--text-tertiary)', fontSize:14, lineHeight:1.7, margin:'0 0 20px'}}>
            You'll narrate a flow while clicking through Isyfoot. FinalTake distills that into a reusable test and a shareable demo clip — two outputs, one recording.
          </p>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12, marginBottom:24}}>
            {[
              ['01','Pick a workspace','A local folder for tests, steps, and runs.'],
              ['02','Grant microphone','Narration is canonical. Silent falls back to degraded.'],
              ['03','Record your first','Click, talk, stop. Under ten minutes end-to-end.'],
            ].map(([n,t,d]) => (
              <div key={n} style={{padding:'14px 14px 16px', border:'1px solid var(--border)', borderRadius:8, background:'var(--bg2)'}}>
                <div className="ft-mono" style={{fontSize:10, letterSpacing:'0.18em', color:'var(--accent)', opacity:0.7}}>{n}</div>
                <div style={{fontSize:13, fontWeight:500, color:'var(--text-primary)', margin:'6px 0 4px'}}>{t}</div>
                <div style={{fontSize:12, color:'var(--text-tertiary)', lineHeight:1.5}}>{d}</div>
              </div>
            ))}
          </div>
          <div style={{display:'flex', justifyContent:'flex-end'}}>
            <button className="ft-btn ft-btn--primary" onClick={() => setStage(1)}>
              Begin <IconChevron size={12}/>
            </button>
          </div>
        </div>
      )}

      {stage === 1 && (
        <div className="ft-panel ft-fadein">
          <div className="ft-panel-hd">
            <h3>Pick a workspace folder</h3>
            <span className="ft-tag ft-tag--muted ft-mono">step · 2 of 3</span>
          </div>
          <p style={{color:'var(--text-tertiary)', fontSize:14, margin:'0 0 20px', lineHeight:1.7}}>
            Tests, steps, runs, and demo videos live here. Not in your code repo — FinalTake owns its own source of truth. Export to Playwright later if you want CI.
          </p>
          <label className="ft-label">
            <span className="lbl">Workspace path</span>
            <div style={{display:'flex', gap:8}}>
              <input className="ft-input ft-input--mono" value={folder} readOnly placeholder="/Users/michel/Documents/…"/>
              <button className="ft-btn ft-btn--secondary" onClick={pick}>
                <IconFolder size={13}/> Choose…
              </button>
            </div>
            <span className="hint">{folder ? '✓ Folder is empty. Ready to initialize.' : 'Finder dialog will open. Pick or create an empty directory.'}</span>
          </label>
          <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
            <button className="ft-btn ft-btn--ghost" onClick={() => setStage(0)}>Back</button>
            <button className="ft-btn ft-btn--primary" disabled={!folder} onClick={() => setStage(2)}>
              Continue <IconChevron size={12}/>
            </button>
          </div>
        </div>
      )}

      {stage === 2 && (
        <div className="ft-panel ft-fadein">
          <div className="ft-panel-hd">
            <h3>Grant microphone access</h3>
            <span className="ft-tag ft-tag--muted ft-mono">step · 3 of 3</span>
          </div>
          <p style={{color:'var(--text-tertiary)', fontSize:14, margin:'0 0 20px', lineHeight:1.7}}>
            Narration turns verification inference from a hard AI problem into a tractable extraction problem. <strong style={{color:'var(--text-secondary)'}}>Audio never leaves your machine</strong> except for transcription (local Whisper by default).
          </p>
          <div style={{display:'flex', gap:16, padding:20, border:'1px solid var(--border)', borderRadius:8, background:'var(--bg2)', alignItems:'center'}}>
            <div style={{width:56, height:56, borderRadius:'50%', background: mic === 'granted' ? 'var(--accent-dim)' : 'var(--surface2)', border:'1px solid', borderColor: mic === 'granted' ? 'var(--accent)' : 'var(--border)', display:'grid', placeItems:'center', color: mic === 'granted' ? 'var(--accent)' : 'var(--text-muted)', flexShrink:0, boxShadow: mic === 'granted' ? 'var(--glow-primary)' : 'none'}}>
              <IconMic size={22}/>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:14, fontWeight:500, color:'var(--text-primary)'}}>
                {mic === 'idle' && 'Microphone — not requested'}
                {mic === 'requested' && 'Waiting for macOS…'}
                {mic === 'granted' && 'Microphone granted — MacBook Pro Microphone'}
              </div>
              <div className="ft-mono" style={{fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:4}}>
                {mic === 'granted' ? 'System · revokable in Preferences' : 'Explicit · revokable any time'}
              </div>
            </div>
            {mic !== 'granted' && (
              <button className="ft-btn ft-btn--primary" onClick={() => { setMic('requested'); setTimeout(() => setMic('granted'), 700); }}>
                Request access
              </button>
            )}
            {mic === 'granted' && (
              <span className="ft-tag ft-tag--accent ft-tag--dot">Granted</span>
            )}
          </div>
          <div style={{display:'flex', justifyContent:'space-between', marginTop:24}}>
            <button className="ft-btn ft-btn--ghost" onClick={() => setStage(1)}>Back</button>
            <button className="ft-btn ft-btn--primary" disabled={mic !== 'granted'} onClick={() => onComplete(folder)}>
              Enter workspace <IconChevron size={12}/>
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

window.ScreenSetup = ScreenSetup;