// flippy-boot.jsx — higher quality tactical boot intro

const BootSequence = ({ onDone, skip }) => {
  const [lines, setLines] = useState([]);
  const [progress, setProgress] = useState(0);
  const [exit, setExit] = useState(false);

  const script = useMemo(() => ([
    { tag: "BOOT", body: "Establishing secure psycho-comm channel." },
    { tag: "LINK", body: "Solana mainnet handshake complete." },
    { tag: "AUTH", body: "Operative clearance verified." },
    { tag: "GPS",  body: "Locating nearest psycho. Range: 0m." },
    { tag: "INTEL", body: "Decrypting Flippy payload." },
    { tag: "WARN", warn: true, body: "Subject is unhinged. Recommended action: join." },
    { tag: "SCAN", body: "Target acquired. Mascot is grinning." },
    { tag: "LOCK", body: "LOCK ON. Welcome to the army." },
  ]), []);

  useEffect(() => {
    if (skip) { setExit(true); setTimeout(onDone, 200); return; }
    let i = 0;
    const interval = setInterval(() => {
      if (i >= script.length) {
        clearInterval(interval);
        setProgress(100);
        setTimeout(() => setExit(true), 420);
        setTimeout(() => onDone(), 1020);
        return;
      }
      setLines((prev) => [...prev, script[i]]);
      setProgress(Math.round(((i + 1) / script.length) * 100));
      i++;
    }, 260);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const handler = (e) => {
      if (e.key === "Escape" || e.key === "Enter") {
        setExit(true);
        setTimeout(onDone, 360);
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []);

  return (
    <div
      className={`boot ${exit ? "exit" : ""}`}
      onClick={() => { setExit(true); setTimeout(onDone, 360); }}
    >
      <div className="scan" />
      <div className="boot-inner">
        <div className="header">
          <span><span className="blink" style={{ color: "var(--blood)" }}>●</span> CHANNEL FLP-666</span>
          <span>NODE 17.426 · SOLANA</span>
          <span className="blink">REC</span>
        </div>

        <div className="title-row">
          <img src="assets/flippy/15_gear_emblem.png" alt="" className="em" />
          <div>
            <h1>FLIPPY COMMAND</h1>
            <div className="sub">UNHINGED RECRUITMENT TERMINAL // V1.0</div>
          </div>
        </div>

        {lines.filter(Boolean).map((l, i) => (
          <div key={i} className={`line ${l.warn ? "warn" : ""} ${l.kill ? "kill" : ""}`}>
            <span className="tag">[{l.tag}]</span>
            <span className="body">{l.body}</span>
            <span className="ok">OK</span>
          </div>
        ))}

        <div className="progress" style={{ "--w": progress + "%" }} />
        <div className="progress-row">
          <span>HOLD ESC / CLICK TO BYPASS</span>
          <span>{progress}% // PSYCHO LEVEL</span>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { BootSequence });