import { useEffect, useRef } from "react";
import { Button } from "@/components/ui/button";
import { ARENA_META, TUNNEL_META, type ArenaId } from "@/lib/stadium-scoring";

export function TunnelWalk({ arena, onDone }: { arena: ArenaId; onDone: () => void }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const doneRef = useRef(false);
  const onDoneRef = useRef(onDone);
  onDoneRef.current = onDone;
  const meta = ARENA_META[arena];
  const tunnel = TUNNEL_META[arena];

  function finish() {
    if (doneRef.current) return;
    doneRef.current = true;
    onDoneRef.current();
  }

  useEffect(() => {
    doneRef.current = false;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (reduce.matches) {
      finish();
      return;
    }
    const node = videoRef.current;
    const play = () => {
      node?.play().catch(() => {
        /* still + skip still work */
      });
    };
    play();
    // Enter the field ourselves. Do NOT hook `ended` — the preview host treats
    // media end as "show over" and bounces back to the Super Admin desk.
    const failsafe = window.setTimeout(finish, 8000);
    return () => window.clearTimeout(failsafe);
  }, [arena]);

  return (
    <div className="stadium-tunnel" data-arena={arena}>
      <img className="stadium-tunnel-still" src={tunnel.still} alt="" />
      <video
        key={tunnel.video}
        ref={videoRef}
        src={tunnel.video}
        poster={tunnel.still}
        muted
        playsInline
        autoPlay
        loop
        preload="auto"
      />
      <div className="stadium-tunnel-ribs" aria-hidden />
      <div className="stadium-tunnel-copy">
        <p className="text-[11px] font-medium tracking-[0.22em] text-primary uppercase">{tunnel.kicker}</p>
        <h1 className="mt-2 max-w-xl font-display text-3xl text-sidebar-foreground sm:text-5xl">{meta.name}</h1>
        <p className="mt-3 max-w-lg text-sm text-sidebar-muted sm:text-base">{tunnel.line}</p>
        <div className="mt-6 flex flex-wrap gap-2">
          <Button onClick={finish}>Enter the field</Button>
          <Button variant="outline" className="border-sidebar-border bg-transparent text-sidebar-foreground" onClick={finish}>
            Skip tunnel
          </Button>
        </div>
      </div>
    </div>
  );
}