// Screen: Recording overlay widget (floating, with fake Isyfoot behind)
// Renders a faux Chromium window in the background + the always-on-top widget.

const NARRATION_LINES = [
  "Logging in as Michel Dupont, club secretary…",
  "Selecting the J14 fixture against Olympique Lyonnais…",
  "Opening the squad assignment panel…",
  "Submitting jersey number 10 for Demba Traoré…",
  "Adding number 7 for Jean-Luc Mercier…",
  "Confirming eighteen players are selected…",
  "I expect a homologation receipt to appear…",
  "Clicking submit to LFP…",
];

function MicWave({ level }) {
  const bars = 22;
  return (
    <div style={{display:'flex', gap:2, alignItems:'center', height:24}}>
      {Array.from({length:bars}).map((_, i) => {
        const h = 4 + Math.abs(Math.sin((i + level*20) * 0.7)) * (8 + level*14);
        return <span key={i} style={{width:2, height:h, background:'var(--accent)', borderRadius:2, boxShadow:'0 0 4px var(--accent-glow)', opacity: 0.5 + 0.5*(h/20)}}/>;
      })}
    </div>
  );
}

function ChromiumFrame({ time }) {
  // Faux Isyfoot UI in the background — hint of LFP product
  return (
    <div style={{position:'absolute', inset:'32px 60px', background:'#0c1015', border:'1px solid var(--border)', borderRadius:10, overflow:'hidden', display:'flex', flexDirection:'column', opacity:0.85, pointerEvents:'none'}}>
      {/* Browser chrome */}
      <div style={{height:32, background:'#14181e', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', padding:'0 12px', gap:8}}>
        <div style={{display:'flex', gap:6}}>
          <span style={{width:10, height:10, borderRadius:'50%', background:'#ff5f57'}}/>
          <span style={{width:10, height:10, borderRadius:'50%', background:'#febc2e'}}/>
          <span style={{width:10, height:10, borderRadius:'50%', background:'#28c840'}}/>
        </div>
        <div style={{marginLeft:12, padding:'3px 10px', background:'#0c1015', border:'1px solid var(--border)', borderRadius:6, fontFamily:'var(--mono)', fontSize:10, color:'var(--text-muted)'}}>
          isyfoot.lfp.fr/clubs/ol/fixtures/j14/squad
        </div>
        <span className="ft-tag ft-tag--live ft-mono" style={{marginLeft:'auto', fontSize:9}}>rec · {time}</span>
      </div>
      {/* Fake LFP/Isyfoot layout */}
      <div style={{flex:1, display:'flex'}}>
        <div style={{width:200, background:'#0f141b', borderRight:'1px solid var(--border)', padding:'16px 14px'}}>
          <div style={{fontFamily:'var(--sans)', fontSize:11, fontWeight:500, color:'#d4b254', letterSpacing:'0.1em', marginBottom:14}}>ISYFOOT · LFP</div>
          {['Tableau de bord','Licences joueurs','Mutations','Feuille de match','Rapport sécurité','F&B stadium'].map((l,i) => (
            <div key={l} style={{padding:'7px 0', fontSize:11, color: i===3 ? '#d4b254' : 'var(--text-tertiary)', display:'flex', alignItems:'center', gap:8}}>
              <span style={{width:4, height:4, borderRadius:'50%', background: i===3 ? '#d4b254' : 'var(--text-muted)'}}/>
              {l}
            </div>
          ))}
        </div>
        <div style={{flex:1, padding:'18px 22px'}}>
          <div style={{fontFamily:'var(--sans)', fontSize:18, color:'var(--text-primary)', fontWeight:500, marginBottom:4}}>OL vs Olympique de Marseille · J14</div>
          <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--text-muted)', letterSpacing:'0.1em', marginBottom:16}}>DIMANCHE 26 AVRIL · 21H00 · GROUPAMA STADIUM</div>
          <div style={{fontFamily:'var(--sans)', fontSize:12, color:'var(--text-secondary)', marginBottom:10, letterSpacing:'0.06em'}}>AFFECTATION DES NUMÉROS · 72H AVANT</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:6}}>
            {['Lopes','Tagliafico','Caleta-Car','Lovren','Maitland-Niles','Tolisso','Caqueret','Cherki','Lacazette','Baldé','Nuamah','Mangala','Barcola','Kumbedi','Matić','Perri','Cissé','Sarr'].map((n,i) => (
              <div key={n} style={{padding:'8px 10px', background: i<12 ? 'rgba(212,178,84,0.08)' : '#0f141b', border:'1px solid var(--border)', borderRadius:6, fontSize:11, color:'var(--text-secondary)', display:'flex', justifyContent:'space-between'}}>
                <span>{n}</span>
                <span className="ft-mono" style={{color: i<12 ? '#d4b254' : 'var(--text-muted)'}}>{i<12 ? i+1 : '—'}</span>
              </div>
            ))}
          </div>
          <div style={{marginTop:20, padding:'10px 14px', background:'rgba(212,178,84,0.06)', border:'1px solid rgba(212,178,84,0.2)', borderRadius:6, fontSize:11, color:'#d4b254', fontFamily:'var(--mono)', letterSpacing:'0.08em'}}>
            ⓘ 12 / 18 AFFECTÉS · DÉLAI 47H 23MIN
          </div>
        </div>
      </div>
    </div>
  );
}

function ScreenRecording({ onStop, onCancel }) {
  const [elapsed, setElapsed] = useState(0);
  const [lineIdx, setLineIdx] = useState(0);
  const [level, setLevel] = useState(0.4);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setElapsed(e => e + 1), 1000);
    return () => clearInterval(id);
  }, [paused]);

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setLevel(0.2 + Math.random() * 0.7), 110);
    return () => clearInterval(id);
  }, [paused]);

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setLineIdx(i => (i + 1) % NARRATION_LINES.length), 2600);
    return () => clearInterval(id);
  }, [paused]);

  const fmt = (s) => `${String(Math.floor(s/60)).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`;

  return (
    <div style={{position:'relative', flex:1, minHeight:0, background:'#07090c', overflow:'hidden'}}>
      <ChromiumFrame time={fmt(elapsed)}/>

      {/* Floating recording widget */}
      <div style={{position:'absolute', right:36, top:64, width:320,
        background:'rgba(14,18,24,0.94)', backdropFilter:'blur(20px)',
        border:'1px solid var(--accent)', borderRadius:12, padding:16,
        boxShadow:'0 30px 60px rgba(0,0,0,0.6), 0 0 24px var(--accent-glow)',
        animation:'ft-fadein 400ms var(--motion-ease-organic)'}}>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
          <span className="ft-dot ft-dot--fail" style={{animation:'ft-pulse 1.4s ease-in-out infinite'}}/>
          <span className="ft-mono" style={{fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', color:'#e85454'}}>Recording</span>
          <span className="ft-mono" style={{fontSize:20, color:'var(--text-primary)', marginLeft:'auto', letterSpacing:'0.02em'}}>{fmt(elapsed)}</span>
        </div>

        <div style={{padding:'10px 12px', background:'var(--bg2)', border:'1px solid var(--border)', borderRadius:8, marginBottom:12}}>
          <div style={{display:'flex', gap:10, alignItems:'center'}}>
            <span style={{color:'var(--accent)'}}><IconMic size={14}/></span>
            <MicWave level={level}/>
            <span className="ft-mono" style={{fontSize:10, color:'var(--text-muted)', marginLeft:'auto'}}>-{Math.round(18 - level*12)}dB</span>
          </div>
        </div>

        {/* Live transcription preview */}
        <div style={{padding:'10px 12px', background:'var(--bg2)', border:'1px solid var(--border)', borderRadius:8, marginBottom:12, minHeight:48}}>
          <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--text-muted)', marginBottom:6}}>Live transcript · whisper</div>
          <div style={{fontSize:12, color:'var(--text-secondary)', fontStyle:'italic', lineHeight:1.5}}>
            "{NARRATION_LINES[lineIdx]}"<span style={{color:'var(--accent)', opacity: paused ? 0 : 1}}>▍</span>
          </div>
        </div>

        {/* Stats */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:6, marginBottom:14}}>
          {[['Actions', 24 + Math.floor(elapsed*1.2)],['Snapshots', 8 + Math.floor(elapsed*0.4)],['Words', 67 + elapsed*3]].map(([k,v]) => (
            <div key={k} style={{padding:'6px 8px', background:'var(--bg2)', borderRadius:6}}>
              <div className="ft-mono" style={{fontSize:8, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--text-muted)'}}>{k}</div>
              <div className="ft-mono" style={{fontSize:14, color:'var(--text-primary)', marginTop:2}}>{v}</div>
            </div>
          ))}
        </div>

        {/* Controls */}
        <div style={{display:'flex', gap:8}}>
          <button className="ft-btn ft-btn--secondary" onClick={() => setPaused(!paused)} style={{flex:1, height:32, fontSize:12}}>
            {paused ? <><IconPlay size={11}/> Resume</> : <><IconPause size={11}/> Pause</>}
          </button>
          <button className="ft-btn ft-btn--record" onClick={onStop} style={{flex:1, height:32, fontSize:12}}>
            Stop
          </button>
        </div>

        <div className="ft-mono" style={{fontSize:9, letterSpacing:'0.14em', color:'var(--text-muted)', marginTop:10, textAlign:'center'}}>
          ⌘⇧⎋ stop · ⌘⇧. cancel · widget drags freely
        </div>
      </div>

      {/* Bottom bar */}
      <div style={{position:'absolute', bottom:20, left:60, right:60, display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 16px', background:'rgba(14,18,24,0.85)', backdropFilter:'blur(12px)', border:'1px solid var(--border)', borderRadius:8}}>
        <div className="ft-mono" style={{fontSize:10, letterSpacing:'0.14em', color:'var(--text-muted)'}}>
          RECORDING IS PRIVATE · VIDEO + AUDIO SAVED INCREMENTALLY · CRASH-SAFE
        </div>
        <button className="ft-btn ft-btn--ghost" onClick={onCancel} style={{height:28, fontSize:11}}>Discard</button>
      </div>
    </div>
  );
}

window.ScreenRecording = ScreenRecording;