/* Boot sequence component */

const BOOT_ASCII = `
     ██╗██╗  ██╗ ██████╗
     ██║██║ ██╔╝██╔════╝
     ██║█████╔╝ ██║
██   ██║██╔═██╗ ██║
╚█████╔╝██║  ██╗╚██████╗
 ╚════╝ ╚═╝  ╚═╝ ╚═════╝
`.trim();

const BOOT_STEPS = [
  { t: 60,  cls: "dim",  text: "[0.000000] BIOS v5.01 — JKC-OS Boot Loader" },
  { t: 80,  cls: "dim",  text: "[0.004212] CPU: Fullstack Core i9 · 12 years cache" },
  { t: 80,  cls: "dim",  text: "[0.008741] Memory: 256GB projects detected" },
  { t: 120, cls: "dim",  text: "[0.012003] Loading /usr/bin/curiosity .............. OK" },
  { t: 80,  cls: "dim",  text: "[0.017890] Loading /etc/coffee.conf ................. OK" },
  { t: 80,  cls: "warn", text: "[0.022113] warn: motivation.service throttled (post-lunch)" },
  { t: 80,  cls: "dim",  text: "[0.026778] mount /dev/brain ........................ READY" },
  { t: 100, cls: "",     text: "[0.031223] NET: establishing uplink to INTERNET ..... OK" },
  { t: 80,  cls: "dim",  text: "[0.035918] git remote: origin set" },
  { t: 80,  cls: "err",  text: "[0.039001] panic: imposter_syndrome.ko (ignored)" },
  { t: 100, cls: "",     text: "[0.043119] starting JKC.portfolio v5.0 ............ DONE" },
];

function Boot({ onDone }) {
  const [lines, setLines] = React.useState([]);
  const [progress, setProgress] = React.useState(0);
  const [fade, setFade] = React.useState(false);
  const [finalMsg, setFinalMsg] = React.useState(false);

  React.useEffect(() => {
    let cancelled = false;
    let acc = 600;
    BOOT_STEPS.forEach((step, i) => {
      acc += step.t;
      setTimeout(() => {
        if (cancelled) return;
        setLines(prev => [...prev, step]);
        setProgress(Math.round(((i + 1) / BOOT_STEPS.length) * 100));
      }, acc);
    });
    const totalTime = acc + 400;
    setTimeout(() => { if (!cancelled) setFinalMsg(true); }, totalTime);
    setTimeout(() => { if (!cancelled) setFade(true); }, totalTime + 800);
    setTimeout(() => { if (!cancelled) onDone(); }, totalTime + 1400);
    return () => { cancelled = true; };
  }, []);

  return (
    <div className={"boot" + (fade ? " boot-fadeout" : "")}>
      <div className="boot-inner">
        <pre className="boot-ascii">{BOOT_ASCII}</pre>
        <div className="boot-line dim">╔══════════════════════════════════════════════╗</div>
        <div className="boot-line dim">║ JKC Operating System — Developer Edition v5  ║</div>
        <div className="boot-line dim">╚══════════════════════════════════════════════╝</div>
        <div style={{ height: 14 }} />
        {lines.map((l, i) => (
          <div key={i} className={"boot-line " + (l.cls || "")}>{l.text}</div>
        ))}
        {finalMsg && (
          <>
            <div style={{ height: 10 }} />
            <div className="boot-line">&gt; welcome, visitor.</div>
            <div className="boot-line boot-cursor">&gt; opening portfolio</div>
          </>
        )}
        <div className="boot-progress">
          <div className="boot-bar">
            <div className="boot-bar-fill" style={{ width: progress + "%" }} />
          </div>
          <div style={{ fontFamily: "var(--font-crt)", fontSize: 20, minWidth: 48 }}>{progress}%</div>
        </div>
      </div>
    </div>
  );
}

window.Boot = Boot;