"use client";

import { useCallback, useEffect, useState } from "react";
import type { MediaType } from "@/lib/types";
import { playBootSequence } from "@/lib/bootAudio";
import { ArcadeBoot } from "./ArcadeBoot";
import { CartridgeBoot } from "./CartridgeBoot";
import { DiscBoot } from "./DiscBoot";
import { HandheldBoot } from "./HandheldBoot";

export function BootTheater({
  media,
  label,
  accent,
  onDone,
  skipDelayMs = 500,
}: {
  media: MediaType;
  label: string;
  accent: string;
  onDone: () => void;
  skipDelayMs?: number;
}) {
  const [canSkip, setCanSkip] = useState(false);
  const [done, setDone] = useState(false);
  const [muted, setMuted] = useState(false);

  const finish = useCallback(() => {
    if (done) return;
    setDone(true);
    onDone();
  }, [done, onDone]);

  useEffect(() => {
    const t = window.setTimeout(() => setCanSkip(true), skipDelayMs);
    return () => window.clearTimeout(t);
  }, [skipDelayMs]);

  useEffect(() => {
    if (muted) return;
    const stop = playBootSequence(media);
    return () => stop();
  }, [media, muted]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (!canSkip) return;
      if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        finish();
      }
      if (e.key.toLowerCase() === "m") {
        setMuted((v) => !v);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [canSkip, finish]);

  const props = { label, accent, onComplete: finish };

  return (
    <>
      {media === "cartridge" && <CartridgeBoot {...props} />}
      {media === "disc" && <DiscBoot {...props} />}
      {media === "handheld" && <HandheldBoot {...props} />}
      {media === "arcade" && <ArcadeBoot {...props} />}
      <div className="fixed bottom-6 right-6 z-50 flex gap-2">
        <button
          type="button"
          onClick={() => setMuted((v) => !v)}
          className="btn-ghost bg-black/50"
          aria-pressed={muted}
        >
          {muted ? "Unmute" : "Mute"}
        </button>
        {canSkip && (
          <button
            type="button"
            onClick={finish}
            className="btn-ghost bg-black/50"
          >
            Skip
          </button>
        )}
      </div>
    </>
  );
}