// Record screen — live teleprompter + camera composition
function ScreenRecord({ state, set, nav }) {
  const [recState, setRecState] = React.useState('idle'); // idle | recording | paused
  const [time, setTime] = React.useState(0);
  const [slideIdx, setSlideIdx] = React.useState(0);
  const [showGuides, setShowGuides] = React.useState(false);
  const [frontCam, setFrontCam] = React.useState(true);

  React.useEffect(() => {
    if (recState !== 'recording') return;
    const t = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(t);
  }, [recState]);

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

  const startStop = () => {
    if (recState === 'idle') setRecState('recording');
    else {
      setRecState('idle');
      setTimeout(() => nav.go('edit'), 400);
    }
  };
  const pauseResume = () => setRecState(recState === 'recording' ? 'paused' : 'recording');

  const nextSlide = () => setSlideIdx(Math.min(slides.length-1, slideIdx+1));
  const prevSlide = () => setSlideIdx(Math.max(0, slideIdx-1));

  return (
    <div style={{position:'relative', height:'100%', background:'#000', overflow:'hidden', display:'flex', flexDirection:'column'}}>
      {/* Camera mock background */}
      <CameraBackground frontCam={frontCam} />

      {/* Grid guides */}
      {showGuides && (
        <div style={{position:'absolute', inset:0, pointerEvents:'none', zIndex:5}}>
          {[1,2].map(i => <div key={'v'+i} style={{position:'absolute', top:0, bottom:0, left:`${i*33.33}%`, width:1, background:'rgba(255,255,255,0.15)'}}/>)}
          {[1,2].map(i => <div key={'h'+i} style={{position:'absolute', left:0, right:0, top:`${i*33.33}%`, height:1, background:'rgba(255,255,255,0.15)'}}/>)}
        </div>
      )}

      {/* Composition — slide content overlays */}
      {state.composition === 'cameraSlide' && (
        <div style={{position:'absolute', left:20, right:20, bottom:200, zIndex:6}}>
          <div style={{
            background:'rgba(10,12,16,0.75)', backdropFilter:'blur(14px) saturate(160%)',
            border:'1px solid rgba(255,255,255,0.1)', borderRadius:16, padding:'16px 18px',
            boxShadow:'0 20px 50px -20px rgba(0,0,0,0.8)',
          }}>
            <SlideBodyText slide={slide} />
          </div>
        </div>
      )}
      {state.composition === 'slideCamera' && (
        <>
          {/* Solid slide background */}
          <div style={{position:'absolute', inset:0, background:'linear-gradient(160deg, #152028, #0a0d10)', zIndex:2}}>
            <div style={{
              position:'absolute', top:'22%', left:'8%', right:'8%',
              color:'#fff', textAlign:'center',
            }}>
              <SlideBodyText slide={slide} large />
            </div>
          </div>
          {/* PiP camera */}
          <div style={{
            position:'absolute', top:80, right:16, zIndex:7,
            width:108, height:140, borderRadius: 18,
            overflow:'hidden', border:'2px solid rgba(255,255,255,0.9)',
            boxShadow:'0 12px 30px -12px rgba(0,0,0,0.7)'
          }}>
            <CameraBackground frontCam={frontCam} small />
          </div>
        </>
      )}

      {/* TOP BAR */}
      <div style={{position:'absolute', top:0, left:0, right:0, zIndex:20, padding:'54px 14px 10px',
        background:'linear-gradient(to bottom, rgba(0,0,0,0.55), transparent)'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <button onClick={()=>nav.go('prepare')} style={{
            width:38, height:38, borderRadius:999,
            background:'rgba(0,0,0,0.45)', backdropFilter:'blur(10px)',
            color:'#fff', display:'inline-flex', alignItems:'center', justifyContent:'center',
            border:'1px solid rgba(255,255,255,0.12)'
          }}><I.close/></button>

          {/* Recording state pill */}
          <div style={{
            display:'flex', alignItems:'center', gap:8,
            padding:'7px 12px', borderRadius:999,
            background: recState === 'recording' ? 'rgba(255,77,94,0.18)' : 'rgba(0,0,0,0.45)',
            backdropFilter:'blur(10px)',
            border: '1px solid '+ (recState === 'recording' ? 'rgba(255,77,94,0.55)' : 'rgba(255,255,255,0.12)'),
          }}>
            {recState === 'recording' && (
              <div style={{width:8, height:8, borderRadius:'50%', background:'var(--rec)', animation:'pulse-rec 1.4s ease-in-out infinite'}}/>
            )}
            {recState === 'paused' && (
              <div style={{width:8, height:8, borderRadius:'50%', background:'var(--amber)'}}/>
            )}
            {recState === 'idle' && (
              <div style={{width:8, height:8, borderRadius:'50%', background:'rgba(255,255,255,0.35)'}}/>
            )}
            <span style={{fontSize:13, fontWeight:700, color:'#fff', fontFamily:'ui-monospace, "SF Mono", monospace', letterSpacing:0.5}}>
              {fmt(time)}
            </span>
            {recState === 'recording' && <Waveform bars={10} height={12} color="#fff"/>}
          </div>

          {/* Right cluster */}
          <div style={{display:'flex', gap:6}}>
            <TopIcon onClick={()=>setShowGuides(!showGuides)} active={showGuides}><I.grid/></TopIcon>
            <TopIcon onClick={()=>setFrontCam(!frontCam)}><I.flip/></TopIcon>
          </div>
        </div>
      </div>

      {/* TELEPROMPTER (only in cameraOnly mode) */}
      {state.composition === 'cameraOnly' && (
        <div style={{position:'absolute', top:'22%', left:16, right:16, zIndex:6}}>
          <div style={{
            background:'rgba(0,0,0,0.55)', backdropFilter:'blur(14px)',
            border:'1px solid rgba(255,255,255,0.1)', borderRadius:14,
            padding:'16px 18px',
          }}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
              <Pill color="#fff">SLIDE {String(slideIdx+1).padStart(2,'0')} / {String(slides.length).padStart(2,'0')}</Pill>
              {slide.lang === 'ja' && <Pill color="var(--accent)">FURIGANA</Pill>}
            </div>
            <SlideBodyText slide={slide} />
          </div>
        </div>
      )}

      {/* Slide dots */}
      <div style={{position:'absolute', bottom:196, left:0, right:0, zIndex:8, display:'flex', justifyContent:'center', gap:4}}>
        {slides.map((_,i) => (
          <div key={i} style={{
            width: i===slideIdx ? 20 : 6, height:6, borderRadius:3,
            background: i===slideIdx ? '#fff' : 'rgba(255,255,255,0.35)',
            transition:'all .25s',
          }}/>
        ))}
      </div>

      {/* BOTTOM CONTROL DECK */}
      <div style={{position:'absolute', bottom:0, left:0, right:0, zIndex:20,
        padding:'18px 16px 36px',
        background:'linear-gradient(to top, rgba(0,0,0,0.75), transparent)'}}>

        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:14}}>
          {/* Prev slide */}
          <button onClick={prevSlide} disabled={slideIdx===0} style={{
            width:54, height:54, borderRadius:999,
            background:'rgba(0,0,0,0.45)', backdropFilter:'blur(14px)',
            border:'1px solid rgba(255,255,255,0.12)',
            color: slideIdx===0 ? 'rgba(255,255,255,0.25)' : '#fff',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
          }}><I.back/></button>

          {/* Record button */}
          <button onClick={startStop} style={{
            width: 78, height: 78, borderRadius:999,
            background:'rgba(255,255,255,0.1)', border:'3px solid rgba(255,255,255,0.95)',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
            position:'relative',
          }}>
            <div style={{
              width: recState==='idle' ? 58 : 28,
              height: recState==='idle' ? 58 : 28,
              borderRadius: recState==='idle' ? 999 : 6,
              background:'var(--rec)',
              boxShadow: recState==='recording' ? '0 0 20px rgba(255,77,94,0.6)' : 'none',
              transition:'all .25s cubic-bezier(0.22,1,0.36,1)',
            }}/>
          </button>

          {/* Pause / Next-slide */}
          {recState === 'idle' ? (
            <button onClick={nextSlide} disabled={slideIdx===slides.length-1} style={{
              width:54, height:54, borderRadius:999,
              background:'rgba(0,0,0,0.45)', backdropFilter:'blur(14px)',
              border:'1px solid rgba(255,255,255,0.12)',
              color: slideIdx===slides.length-1 ? 'rgba(255,255,255,0.25)' : '#fff',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
            }}><I.chevR/></button>
          ) : (
            <button onClick={pauseResume} style={{
              width:54, height:54, borderRadius:999,
              background: recState === 'paused' ? 'var(--amber)' : 'rgba(0,0,0,0.45)',
              backdropFilter:'blur(14px)',
              border:'1px solid rgba(255,255,255,0.14)',
              color: recState === 'paused' ? '#000' : '#fff',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
            }}>
              {recState === 'recording' ? <I.pause/> : <I.play/>}
            </button>
          )}
        </div>

        {/* Hint */}
        <div style={{textAlign:'center', fontSize:11, color:'rgba(255,255,255,0.55)', marginTop:12, letterSpacing:0.3}}>
          {recState === 'idle' && 'Tap to record · Swipe teleprompter to advance slide'}
          {recState === 'recording' && <span>Recording · Tap <b style={{color:'#fff'}}>●</b> to stop</span>}
          {recState === 'paused' && 'Paused · Tap play to resume'}
        </div>
      </div>
    </div>
  );
}

function TopIcon({ children, onClick, active }) {
  return (
    <button onClick={onClick} style={{
      width:38, height:38, borderRadius:999,
      background: active ? 'var(--accent)' : 'rgba(0,0,0,0.45)',
      backdropFilter:'blur(10px)',
      border:'1px solid '+ (active ? 'var(--accent)' : 'rgba(255,255,255,0.12)'),
      color: active ? '#001013' : '#fff',
      display:'inline-flex', alignItems:'center', justifyContent:'center',
    }}>{children}</button>
  );
}

function SlideBodyText({ slide, large }) {
  const sz = large ? 30 : 20;
  const ruby = slide.lang === 'ja' || (slide.lang === 'auto' && /[\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff]/.test(slide.text));
  if (ruby && slide.text) {
    return <div style={{color:'#fff', textAlign: large?'center':'left'}}>
      <RubyText pairs={[
        {b:'今日', r:'きょう'}, {b:'は', r:''}, {b:'新', r:'あたら'}, {b:'しい', r:''},
        {b:'単語', r:'たんご'}, {b:'を', r:''}, {b:'勉強', r:'べんきょう'}, {b:'します', r:''},
      ]} baseSize={sz} />
    </div>;
  }
  return <div style={{
    color:'#fff', fontSize:sz, fontWeight:600, lineHeight:1.3, letterSpacing:-0.3,
    textAlign: large ? 'center' : 'left',
    textWrap: 'pretty',
  }}>{slide.text || 'Your script appears here.'}</div>;
}

// Camera mock — muted gradient with subtle scene
function CameraBackground({ frontCam, small }) {
  // Vary the tone slightly for front vs back so flip feels real
  const bg = frontCam
    ? 'radial-gradient(circle at 45% 40%, #3a4a4e 0%, #1a2024 55%, #0a0d0f 100%)'
    : 'radial-gradient(circle at 55% 60%, #4a3a3a 0%, #1e1a18 55%, #0c0a09 100%)';
  return (
    <div style={{position:'absolute', inset:0, zIndex:1, background: bg, overflow:'hidden'}}>
      {/* subtle silhouette */}
      <div style={{
        position:'absolute', bottom:-20, left:'50%', transform:'translateX(-50%)',
        width: small ? 80 : 260, height: small ? 120 : 340,
        borderRadius:'50%', background:'radial-gradient(circle, rgba(0,0,0,0.55), transparent 70%)',
        filter:'blur(12px)',
      }}/>
      {/* head silhouette */}
      <div style={{
        position:'absolute', bottom: small ? 24 : '32%', left:'50%', transform:'translateX(-50%)',
        width: small ? 42 : 120, height: small ? 42 : 120,
        borderRadius:'50%', background: frontCam ? 'rgba(60,70,74,0.9)' : 'rgba(74,60,52,0.9)',
        boxShadow:'0 0 60px rgba(0,0,0,0.4)',
      }}/>
      {!small && (
        <div style={{
          position:'absolute', top:54, right:10, fontSize:9,
          fontFamily:'ui-monospace, "SF Mono", monospace',
          color:'rgba(255,255,255,0.25)', letterSpacing:1.5,
        }}>{frontCam ? 'CAM · FRONT' : 'CAM · BACK'} · 1080×1920</div>
      )}
    </div>
  );
}

Object.assign(window, { ScreenRecord });