/* ============================================================
   B1 — "Capsule theater": overlay xem lại phiên, nhúng trong
   màn Lưu phiên (bấm "Xem lại toàn bộ"). Không còn là 1 màn
   nav riêng — header/hành động (chia sẻ/tải/xoá) do màn Lưu
   phiên sở hữu.
   ============================================================ */
const TOTAL_SEC = 41 * 60;
function fmt(sec) { const m = Math.floor(sec / 60), s = Math.floor(sec % 60); return `${m}:${String(s).padStart(2, '0')}`; }

function CapsuleScreen({ particle = 'Bụi trầm', onClose = () => {} }) {
  const flyRef = useRef(null);
  const danmuRef = useRef(null);
  const [playing, setPlaying] = useState(false);
  const [pos, setPos] = useState(0.18 * TOTAL_SEC);
  const [rate, setRate] = useState(1);
  const [vol, setVol] = useState(55);

  useInterval(() => {
    setPos(p => { const n = p + rate; return n >= TOTAL_SEC ? (setPlaying(false), TOTAL_SEC) : n; });
  }, playing ? 1000 : null);

  const speed = rate === 0.5 ? 'chậm' : rate === 2 ? 'nhanh' : 'vừa';
  useInterval(() => {
    if (flyRef.current) flyRef.current.launch(EMOJI_FLAT[Math.floor(Math.random() * EMOJI_FLAT.length)]);
  }, playing ? 2600 / rate : null);

  return (
    <div className="b1-screen" style={{ position: 'absolute', inset: 0, zIndex: 96 }}>
      <StripedImg label="ẢNH NỀN · ĐANG PHÁT LẠI" style={{ position: 'absolute', inset: 0 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(27,42,69,.82) 0%, rgba(27,42,69,.2) 28%, rgba(27,42,69,.3) 60%, rgba(27,42,69,.95) 100%)' }} />

      <MoteLayer variant={particle} />
      <FlyingLayer ref={flyRef} zIndex={4} />
      <DanmuLayer ref={danmuRef} speed={playing ? speed : 'tắt'} zIndex={5} band={[18, 50]} />

      <button onClick={onClose} aria-label="Đóng" style={{
        position: 'absolute', top: 52, right: 20, zIndex: 25, width: 36, height: 36, borderRadius: '50%', cursor: 'pointer',
        background: 'var(--ink-glass)', backdropFilter: 'blur(10px)', border: '1px solid var(--ink-line)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 2l10 10M12 2L2 12" stroke="var(--cream)" strokeWidth="1.6" strokeLinecap="round"/></svg>
      </button>

      {!playing && (
        <button onClick={() => setPlaying(true)} style={{
          position: 'absolute', top: '46%', left: '50%', transform: 'translate(-50%,-50%)', zIndex: 15,
          width: 74, height: 74, borderRadius: '50%', cursor: 'pointer',
          background: 'var(--ink-glass)', backdropFilter: 'blur(12px)', border: '1px solid var(--gold-dim)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 10px 30px -10px rgba(0,0,0,.6)',
        }}>
          <svg width="26" height="26" viewBox="0 0 26 26"><path d="M8 5l13 8-13 8z" fill="var(--gold)" /></svg>
        </button>
      )}

      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 25, padding: '20px 20px 30px',
        background: 'linear-gradient(180deg, transparent, rgba(21,30,48,.6) 30%)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <span className="b1-mono" style={{ fontSize: 10.5, color: 'var(--gold)', width: 38 }}>{fmt(pos)}</span>
          <div style={{ flex: 1 }}>
            <B1Range value={pos} min={0} max={TOTAL_SEC} onChange={setPos} />
          </div>
          <span className="b1-mono" style={{ fontSize: 10.5, color: 'var(--cream-dim)', width: 38, textAlign: 'right' }}>{fmt(TOTAL_SEC)}</span>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <button onClick={() => setPlaying(p => !p)} style={{
            width: 46, height: 46, borderRadius: '50%', cursor: 'pointer', flexShrink: 0,
            background: 'var(--gold)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {playing
              ? <svg width="16" height="16" viewBox="0 0 16 16"><rect x="3.5" y="2.5" width="3.4" height="11" rx="1" fill="#1B1408"/><rect x="9.1" y="2.5" width="3.4" height="11" rx="1" fill="#1B1408"/></svg>
              : <svg width="16" height="16" viewBox="0 0 16 16"><path d="M4 2.5l9 5.5-9 5.5z" fill="#1B1408"/></svg>}
          </button>

          <div style={{ flex: 1 }}>
            <B1Segment small accent="var(--ink-line)"
              options={[{k:0.5,label:'0.5×'},{k:1,label:'1×'},{k:2,label:'2×'}]}
              value={rate} onChange={setRate} />
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 7, width: 96, flexShrink: 0 }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}><path d="M3 6h2.2L8.5 3.3v9.4L5.2 10H3z" fill="var(--cream-dim)"/><path d="M10.5 6.2a2.6 2.6 0 0 1 0 3.6" stroke="var(--cream-dim)" strokeWidth="1.2" strokeLinecap="round"/></svg>
            <B1Range value={vol} onChange={setVol} />
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CapsuleScreen });