"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import type { Game } from "@/lib/types";
import { playUi } from "@/lib/consoleUiAudio";
import { MuteChip } from "./MuteChip";

export function ArcadeShell({ games }: { games: Game[] }) {
  const [focus, setFocus] = useState(0);
  const [blink, setBlink] = useState(true);
  const focusRef = useRef<HTMLAnchorElement | null>(null);

  useEffect(() => {
    const id = window.setInterval(() => setBlink((b) => !b), 500);
    return () => window.clearInterval(id);
  }, []);

  useEffect(() => {
    focusRef.current?.scrollIntoView({ block: "nearest", behavior: "smooth" });
  }, [focus]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (!games.length) return;
      const cols = Math.max(1, Math.min(4, Math.floor(window.innerWidth / 160)));
      if (e.key === "ArrowRight") {
        e.preventDefault();
        playUi("arcade", "move");
        setFocus((f) => (f + 1) % games.length);
      }
      if (e.key === "ArrowLeft") {
        e.preventDefault();
        playUi("arcade", "move");
        setFocus((f) => (f - 1 + games.length) % games.length);
      }
      if (e.key === "ArrowDown") {
        e.preventDefault();
        playUi("arcade", "move");
        setFocus((f) => Math.min(games.length - 1, f + cols));
      }
      if (e.key === "ArrowUp") {
        e.preventDefault();
        playUi("arcade", "move");
        setFocus((f) => Math.max(0, f - cols));
      }
      if (e.key === "Enter") {
        e.preventDefault();
        playUi("arcade", "confirm");
        window.location.href = `/play/${games[focus].slug}`;
      }
      if (e.key === "Escape") {
        playUi("arcade", "back");
        window.location.href = "/setup/ui";
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [focus, games]);

  return (
    <div className="arcade-shell">
      <div className="arcade-marquee">ARCADE</div>
      <div className="arcade-cab">
        <header className="arcade-head">
          <div className="arcade-head-links">
            <Link href="/setup/ui" onClick={() => playUi("arcade", "back")}>
              ← UI
            </Link>
            <Link href="/profiles" onClick={() => playUi("arcade", "confirm")}>
              Profiles
            </Link>
            <Link href="/settings" onClick={() => playUi("arcade", "confirm")}>
              Settings
            </Link>
          </div>
          <span className={blink ? "is-blink" : ""}>INSERT COIN</span>
          <MuteChip />
        </header>
        <div className="arcade-glass">
          {games.length === 0 ? (
            <div className="arcade-empty">
              <p>NO GAMES</p>
              <Link href="/load">LOAD ROM</Link>
            </div>
          ) : (
            <div className="arcade-grid">
              {games.map((g, i) => (
                <Link
                  key={g.slug}
                  ref={i === focus ? focusRef : undefined}
                  href={`/play/${g.slug}`}
                  className={`arcade-tile${i === focus ? " is-focus" : ""}`}
                  onMouseEnter={() => {
                    if (i !== focus) {
                      playUi("arcade", "move");
                      setFocus(i);
                    }
                  }}
                  onClick={() => playUi("arcade", "confirm")}
                >
                  {g.cover ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={g.cover} alt="" />
                  ) : (
                    <span>{g.title}</span>
                  )}
                  <p>{g.title}</p>
                </Link>
              ))}
            </div>
          )}
        </div>
        <div className="arcade-panel" aria-hidden>
          <div className="arcade-stick" />
          <div className="arcade-buttons">
            <i />
            <i />
            <i />
          </div>
        </div>
      </div>
    </div>
  );
}