// Screen: Demo video player (TTS narration from test prose)

const DEMO_CAPTIONS = [
  { start:0.00, end:0.16, text:"Michel logs in as a club secretary using his Isyfoot credentials.", step:1 },
  { start:0.16, end:0.38, text:"He navigates to matchday 14 and opens the squad assignment panel for OL versus Marseille.", step:2 },
  { start:0.38, end:0.78, text:"One by one, he assigns jersey numbers to all eighteen players — ten for Traoré, seven for Mercier, and so on until the roster is complete.", step:3 },
  { start:0.78, end:1.00, text:"He submits the match-sheet to the LFP, and a homologation receipt appears confirming the squad with an official timestamp.", step:4 },
];

function ScreenVideo({ onBack }) {
  const [t, setT] = useState(0.22);
  const [playing, setPlaying] = useState(true);
  const [voice, setVoice] = useState('elevenlabs-bria');
  const [showTranscript, setShowTranscript] = useState(true);

  useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setT(v => v + 0.004 > 1 ? 0 : v + 0.004), 80);
    return () => clearInterval(id);
  }, [playing]);

  const active = DEMO_CAPTIONS.find(c => t >= c.start && t < c.end) || DEMO_CAPTIONS[0];
  const dur = 86; // seconds
  const fmt = (s) => `${String(Math.floor(s/60)).padStart(2,'0')}:${String(Math.floor(s%60)).padStart(2,'0')}`;

  return (
    <>
      <Crumb path={[{label:'Isyfoot workspace', onClick:onBack}, {label:'Tests', onClick:onBack}, {label:'Submit match-sheet · J14'}, {label:'Demo'}]}
        right={<><span>86s · 1080p</span><span className="ft-mono" style={{color:'var(--accent)'}}>render · complete</span></>}/>
      <div className="ft-scroll">
        <div className="ft-screen ft-fadein" style={{maxWidth:1100}}>
          <div className="ft-pagehead">
            <div className="row">
              <div>
                <div className="kicker">Demo · rendered from test prose</div>
                <h1>Ready to drop into Slack.</h1>
                <p>Same execution, TTS narration from the approved prose. Tests outlive any single recording — narration re-renders whenever you update the test.</p>
              </div>
              <div style={{display:'flex', gap:10}}>
                <button className="ft-btn ft-btn--secondary"><IconDownload size={13}/> Save mp4</button>
                <button className="ft-btn ft-btn--primary"><IconShare size={13}/> Share to Slack</button>
              </div>
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:20}}>
            {/* Player */}
            <div style={{background:'var(--surface)', border:'1px solid var(--border)', borderRadius:12, overflow:'hidden'}}>
              {/* Video surface */}
              <div style={{aspectRatio:'16/9', background:'linear-gradient(180deg, #0a0d12, #0c1015)', position:'relative', overflow:'hidden'}}>
                {/* Fake screen content shifting with time */}
                <div style={{position:'absolute', inset:0, opacity: 0.6 + Math.sin(t*20)*0.05}}>
                  <div style={{position:'absolute', top:0, left:0, right:0, height:26, background:'#14181e', display:'flex', alignItems:'center', padding:'0 14px', gap:8}}>
                    <span style={{width:9, height:9, borderRadius:'50%', background:'#ff5f57'}}/>
                    <span style={{width:9, height:9, borderRadius:'50%', background:'#febc2e'}}/>
                    <span style={{width:9, height:9, borderRadius:'50%', background:'#28c840'}}/>
                    <span className="ft-mono" style={{marginLeft:12, fontSize:10, color:'var(--text-muted)'}}>isyfoot.lfp.fr/clubs/ol/fixtures/j14</span>
                  </div>
                  <div style={{position:'absolute', top:26, left:0, bottom:0, width:140, background:'#0f141b', borderRight:'1px solid var(--border)', padding:'20px 16px'}}>
                    <div style={{fontFamily:'var(--sans)', fontSize:13, fontWeight:500, color:'#d4b254', letterSpacing:'0.1em', marginBottom:14}}>ISYFOOT</div>
                    {['Licences','Mutations','Feuille','Sécurité','F&B'].map((l,i) => (
                      <div key={l} style={{padding:'6px 0', fontSize:11, color: i===2 ? '#d4b254' : 'var(--text-muted)'}}>{l}</div>
                    ))}
                  </div>
                  <div style={{position:'absolute', top:26, left:140, right:0, bottom:0, padding:'26px 32px'}}>
                    <div style={{fontSize:18, color:'var(--text-primary)', fontWeight:500, marginBottom:8}}>OL vs Olympique de Marseille · J14</div>
                    <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--text-muted)', letterSpacing:'0.1em', marginBottom:20}}>AFFECTATION DES NUMÉROS</div>
                    <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:6}}>
                      {Array.from({length:18}).map((_,i) => {
                        const filled = i < Math.floor(t * 18);
                        return <div key={i} style={{height:22, background: filled ? 'rgba(212,178,84,0.12)' : '#0f141b', border:`1px solid ${filled ? 'rgba(212,178,84,0.4)' : 'var(--border)'}`, borderRadius:4, display:'flex', alignItems:'center', padding:'0 6px', fontSize:10, color: filled ? '#d4b254' : 'var(--text-muted)', fontFamily:'var(--mono)'}}>
                          {filled ? `#${i+1}` : '—'}
                        </div>;
                      })}
                    </div>
                  </div>
                </div>

                {/* Click ripples — simulated click spots */}
                {playing && (
                  <div style={{position:'absolute', top: `${30 + (t*100)%40}%`, left: `${20 + (t*200)%60}%`, width:32, height:32, borderRadius:'50%', border:'2px solid var(--accent)', opacity: 0.6, transform:'translate(-50%,-50%)', transition:'all 400ms linear'}}/>
                )}

                {/* Caption */}
                {showTranscript && (
                  <div style={{position:'absolute', bottom:72, left:'50%', transform:'translateX(-50%)', maxWidth:'78%', padding:'12px 18px', background:'rgba(7,9,12,0.82)', backdropFilter:'blur(12px)', border:'1px solid var(--border)', borderRadius:10, textAlign:'center'}}>
                    <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.2em', color:'var(--accent)', textTransform:'uppercase', marginBottom:4}}>Step {active.step} · TTS narration</div>
                    <div style={{fontSize:14, color:'var(--text-primary)', lineHeight:1.5, letterSpacing:'-0.005em'}}>{active.text}</div>
                  </div>
                )}

                {/* Top overlay badge */}
                <div style={{position:'absolute', top:40, right:18, padding:'6px 12px', background:'rgba(7,9,12,0.7)', backdropFilter:'blur(8px)', border:'1px solid var(--border)', borderRadius:100, display:'flex', gap:6, alignItems:'center'}}>
                  <span className="ft-mono" style={{fontSize:9, letterSpacing:'0.16em', color:'var(--text-primary)', textTransform:'uppercase'}}>FinalTake · Isyfoot</span>
                </div>
              </div>

              {/* Controls */}
              <div style={{padding:'14px 18px', borderTop:'1px solid var(--border)', display:'flex', gap:14, alignItems:'center'}}>
                <button onClick={() => setPlaying(!playing)}
                  style={{width:36, height:36, borderRadius:'50%', background:'var(--accent)', border:'none', color:'var(--bg)', cursor:'pointer', display:'grid', placeItems:'center'}}>
                  {playing ? <IconPause size={14}/> : <IconPlay size={14}/>}
                </button>
                <span className="ft-mono" style={{fontSize:11, color:'var(--text-secondary)'}}>{fmt(t*dur)} / {fmt(dur)}</span>
                <div style={{flex:1, height:4, background:'var(--border)', borderRadius:2, position:'relative', cursor:'pointer'}}
                  onClick={e => {
                    const rect = e.currentTarget.getBoundingClientRect();
                    setT((e.clientX - rect.left) / rect.width);
                  }}>
                  {/* Step markers */}
                  {DEMO_CAPTIONS.map((c,i) => (
                    <div key={i} style={{position:'absolute', left:`${c.start*100}%`, top:-2, bottom:-2, width:1, background:'var(--text-muted)', opacity:0.5}}/>
                  ))}
                  <div style={{height:'100%', width:`${t*100}%`, background:'var(--accent)', borderRadius:2, boxShadow:'0 0 6px var(--accent-glow)'}}/>
                  <div style={{position:'absolute', left:`calc(${t*100}% - 6px)`, top:-4, width:12, height:12, borderRadius:'50%', background:'var(--accent)', boxShadow:'0 0 10px var(--accent-glow)'}}/>
                </div>
                <button className="ft-btn ft-btn--ghost" style={{height:28, padding:'0 10px', fontSize:11}} onClick={() => setShowTranscript(!showTranscript)}>CC</button>
              </div>
            </div>

            {/* Sidebar: script + voice */}
            <div style={{display:'flex', flexDirection:'column', gap:12, minHeight:0}}>
              <div className="ft-panel" style={{padding:16}}>
                <div className="ft-panel-hd" style={{marginBottom:10}}>
                  <h3 style={{fontSize:13}}>Voice</h3>
                  <span className="ft-tag ft-tag--accent ft-mono" style={{fontSize:9}}>tts · remote</span>
                </div>
                <div style={{display:'flex', flexDirection:'column', gap:6}}>
                  {[
                    ['elevenlabs-bria','Bria · EN · warm, mid-range','✓'],
                    ['elevenlabs-rachel','Rachel · EN · narrator',''],
                    ['openai-alloy','Alloy · EN · neutral',''],
                    ['kokoro-local','Kokoro · EN · local, free',''],
                  ].map(([id,label,mark]) => (
                    <div key={id} onClick={() => setVoice(id)}
                      style={{display:'flex', gap:10, padding:'8px 10px', borderRadius:6, cursor:'pointer',
                        background: voice === id ? 'var(--accent-dim)' : 'transparent',
                        border:'1px solid', borderColor: voice === id ? 'var(--accent)' : 'transparent'}}>
                      <span style={{width:6, height:6, borderRadius:'50%', background: voice === id ? 'var(--accent)' : 'var(--text-muted)', marginTop:6, flexShrink:0}}/>
                      <div style={{flex:1}}>
                        <div style={{fontSize:12, color: voice === id ? 'var(--text-primary)' : 'var(--text-secondary)'}}>{label}</div>
                      </div>
                    </div>
                  ))}
                </div>
                <button className="ft-btn ft-btn--secondary" style={{width:'100%', marginTop:10, height:30, fontSize:12}}>
                  <IconRefresh size={11}/> Re-render with this voice
                </button>
              </div>

              <div className="ft-panel" style={{padding:16, flex:1, minHeight:0, display:'flex', flexDirection:'column'}}>
                <div className="ft-panel-hd" style={{marginBottom:10}}>
                  <h3 style={{fontSize:13}}>Narration script</h3>
                  <span className="ft-mono" style={{fontSize:9, color:'var(--text-muted)', letterSpacing:'0.12em'}}>from test prose</span>
                </div>
                <div className="ft-scroll ft-scroll-thin" style={{flex:1, minHeight:0, paddingRight:4}}>
                  {DEMO_CAPTIONS.map((c,i) => {
                    const isActive = t >= c.start && t < c.end;
                    return (
                      <div key={i} onClick={() => setT(c.start + 0.01)}
                        style={{padding:'10px 12px', marginBottom:4, borderRadius:6, cursor:'pointer',
                          background: isActive ? 'var(--accent-dim)' : 'var(--bg2)',
                          borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent'}}>
                        <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.14em', color: isActive ? 'var(--accent)' : 'var(--text-muted)', marginBottom:3}}>
                          STEP {c.step} · {fmt(c.start*dur)}
                        </div>
                        <div style={{fontSize:12, color: isActive ? 'var(--text-primary)' : 'var(--text-tertiary)', lineHeight:1.5}}>{c.text}</div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.ScreenVideo = ScreenVideo;