// boot.jsx — original boot sequence: BIOS-style → init lines → confirm dialog
// All text is original. No Microsoft trade dress.

const BIOS_LINES = [
  { type: 'hdr', text: 'DOOMER BIOS v0.4.20  (c) RESTART CORE' },
  { type: 'kv', k: 'CPU',     v: 'Wojak Pentium-MMX @ 3.50am' },
  { type: 'kv', k: 'MEMORY',  v: '640K OK ........ trauma cache enabled' },
  { type: 'kv', k: 'DISPLAY', v: 'CRT 14" / 60Hz / scanline' },
  { type: 'kv', k: 'STATUS',  v: 'broke / divorced / online' },
  { type: 'spacer' },
  { type: 'plain', text: 'Detecting drives ...' },
  { type: 'plain', text: '> Drive A: empty (kids took it)' },
  { type: 'plain', text: '> Drive C: 4.3% remaining' },
  { type: 'plain', text: '> Drive X: ...rugged' , cls: 'red' },
  { type: 'spacer' },
  { type: 'plain', text: 'Loading wallet.dll ...........', cls: 'dim' },
  { type: 'plain', text: 'WARN: balance below dignity threshold', cls: 'amber' },
  { type: 'plain', text: 'Mounting cope.sys ............ OK', cls: 'green' },
  { type: 'spacer' },
  { type: 'plain', text: 'Press [ENTER] to RESTART your life.', cls: 'amber' },
];

function BootSequence({ onComplete, onSkip }) {
  const [step, setStep] = React.useState(0); // 0..N typing, then confirm
  const [showConfirm, setShowConfirm] = React.useState(false);
  const [exiting, setExiting] = React.useState(false);
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    if (done || exiting) return;
    if (step >= BIOS_LINES.length) {
      const t = setTimeout(() => setShowConfirm(true), 250);
      return () => clearTimeout(t);
    }
    const line = BIOS_LINES[step];
    const delay = line.type === 'spacer' ? 60 : (line.type === 'hdr' ? 220 : 90 + Math.random() * 110);
    const t = setTimeout(() => setStep((s) => s + 1), delay);
    return () => clearTimeout(t);
  }, [step, done, exiting]);

  // Trigger the CRT power-off collapse, then reveal the site underneath.
  // The 0.85s duration here matches the crtPowerOff keyframe in styles.css.
  const triggerComplete = React.useCallback(() => {
    if (exiting) return;
    setShowConfirm(false);
    setExiting(true);
    setTimeout(() => {
      setDone(true);
      onComplete();
    }, 850);
  }, [exiting, onComplete]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') { setDone(true); onSkip && onSkip(); }
      if (e.key === 'Enter' && showConfirm) { triggerComplete(); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [showConfirm, triggerComplete, onSkip]);

  if (done) return null;

  return (
    <div className={`boot ${exiting ? 'boot-exiting' : ''}`} data-noncommentable="">
      <div className="boot-screen">
        <div className="boot-bios">
          {BIOS_LINES.slice(0, step).map((ln, i) => {
            if (ln.type === 'spacer') return <div key={i} className="boot-line">&nbsp;</div>;
            if (ln.type === 'hdr') return <div key={i} className="hdr">{ln.text}</div>;
            if (ln.type === 'kv') return (
              <div key={i} className="row boot-line">
                <span className="dim">{ln.k.padEnd(8, ' ')}</span>
                <span>{ln.v}</span>
              </div>
            );
            return <div key={i} className={`boot-line ${ln.cls || ''}`}>{ln.text}</div>;
          })}
          {step < BIOS_LINES.length && <span className="boot-cursor"></span>}
        </div>
        <div style={{ marginTop: 18, fontSize: 14, color: 'var(--ink-faint)', textAlign: 'right' }}>
          [ESC] skip
        </div>
      </div>

      {showConfirm && (
        <div className="confirm-shell">
          <div className="dlg confirm-dlg">
            <div className="dlg-bar">
              <span>SYSTEM PROMPT</span>
              <button className="dlg-x" onClick={onSkip} aria-label="close">X</button>
            </div>
            <div className="dlg-body" style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14 }}>
              <div style={{ width: 36, height: 36, background: 'oklch(0.5 0.18 25)', border: '2px solid oklch(0.1 0 0)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Press Start 2P', monospace", fontSize: 18, color: 'oklch(0.95 0 0)' }}>!</div>
              <div>
                <div style={{ marginBottom: 8 }}>Are you sure you want to RESTART your life?</div>
                <div style={{ fontSize: 14, color: 'oklch(0.35 0 0)' }}>This action cannot be undone. (Probably.)</div>
              </div>
            </div>
            <div className="dlg-actions">
              <button className="dlg-btn primary" onClick={triggerComplete}>YES</button>
              <button className="dlg-btn" onClick={onSkip}>no</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.BootSequence = BootSequence;