// Arcade theme — hidden Street Fighter-inspired mode.
// Activation paths:
//  • Konami code: ↑ ↑ ↓ ↓ ← → ← → B A
//  • URL param:   ?mode=arcade  or  #arcade
//  • Logo taps:   7 rapid taps on the ClarionVote logo within 3s
// Persists in localStorage. Footer joystick icon toggles back to Clean.

const KONAMI = ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown",
                "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a"];

const ARCADE_KEY = "cv-arcade";

function ArcadeMode() {
  const [on, setOn] = React.useState(() => {
    if (typeof localStorage === "undefined") return false;
    const stored = localStorage.getItem(ARCADE_KEY) === "1";
    const urlMatch = /[?#&]mode=arcade/.test(window.location.href);
    return stored || urlMatch;
  });
  const [introOn, setIntroOn] = React.useState(false);
  const seq = React.useRef([]);
  const tapState = React.useRef({ count: 0, first: 0 });

  // Activate / deactivate body class
  React.useEffect(() => {
    document.body.classList.toggle("cv-arcade", on);
    if (on) localStorage.setItem(ARCADE_KEY, "1");
    else localStorage.removeItem(ARCADE_KEY);
  }, [on]);

  const activate = React.useCallback((withSplash = true) => {
    if (on) return;
    setOn(true);
    if (withSplash) {
      setIntroOn(true);
      setTimeout(() => setIntroOn(false), 2800);
    }
  }, [on]);

  // Konami listener
  React.useEffect(() => {
    const onKey = (e) => {
      const k = e.key === "B" ? "b" : e.key === "A" ? "a" : e.key;
      seq.current.push(k);
      if (seq.current.length > KONAMI.length) seq.current.shift();
      if (seq.current.length === KONAMI.length && seq.current.every((x, i) => x === KONAMI[i])) {
        activate(true);
        seq.current = [];
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [activate]);

  // Logo tap listener (7 taps in 3s)
  React.useEffect(() => {
    const onClick = (e) => {
      if (!e.target.closest(".cv-logo")) return;
      const now = Date.now();
      if (now - tapState.current.first > 3000) {
        tapState.current.first = now;
        tapState.current.count = 1;
      } else {
        tapState.current.count++;
      }
      if (tapState.current.count >= 7) {
        activate(true);
        tapState.current = { count: 0, first: 0 };
      }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, [activate]);

  // Footer toggle button (visible only when arcade is on)
  React.useEffect(() => {
    if (!on) return;
    // Insert a toggle button into the footer bottom row, if not already present
    const target = document.querySelector(".cv-app-ft-bottom");
    if (!target || target.querySelector(".cv-arcade-toggle")) return;
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "cv-arcade-toggle";
    btn.title = "Switch back to Clean";
    btn.innerHTML = "<span aria-hidden='true'>◉</span> ARCADE MODE · Switch back";
    btn.onclick = () => setOn(false);
    target.appendChild(btn);
    return () => { if (btn.parentNode) btn.parentNode.removeChild(btn); };
  }, [on]);

  return introOn ? ReactDOM.createPortal(<ArcadeIntro/>, document.body) : null;
}

function ArcadeIntro() {
  return (
    <div className="cv-arcade-splash">
      <div className="cv-arcade-splash-grid" aria-hidden="true"/>
      <div className="cv-arcade-splash-c">
        <div className="cv-arcade-splash-l1">INSERT COIN</div>
        <div className="cv-arcade-splash-l2">CLARION<span className="cv-arcade-splash-em">VOTE</span></div>
        <div className="cv-arcade-splash-l3">ARCADE MODE</div>
        <div className="cv-arcade-splash-blink">PLAYER ONE · READY</div>
      </div>
    </div>
  );
}

Object.assign(window, { ArcadeMode });