"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";

export function ArcadeBoot({
  label,
  accent,
  onComplete,
}: {
  label: string;
  accent: string;
  onComplete: () => void;
}) {
  const root = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      const tl = gsap.timeline({
        onComplete,
        defaults: { ease: "power2.inOut" },
      });
      gsap.set(".coin", { y: -100, opacity: 0 });
      gsap.set(".marquee", { opacity: 0.3 });
      gsap.set(".start-btn", { scale: 1 });

      tl.to(".coin", { y: 0, opacity: 1, duration: 0.35 })
        .to(".coin", { y: 48, opacity: 0, duration: 0.25, ease: "power3.in" })
        .to(".marquee", { opacity: 1, duration: 0.2 })
        .to(".start-btn", { scale: 0.9, duration: 0.1 })
        .to(".start-btn", { scale: 1, duration: 0.15 })
        .to(".cabinet-flash", { opacity: 0.25, duration: 0.1 })
        .to(".cabinet-flash", { opacity: 0, duration: 0.35 })
        .to({}, { duration: 0.25 });
    }, root);
    return () => ctx.revert();
  }, [onComplete]);

  return (
    <div ref={root} className="boot-stage">
      <div className="cabinet-flash absolute inset-0 bg-accent" style={{ opacity: 0 }} />
      <div className="relative flex w-[min(92vw,320px)] flex-col items-center">
        <div
          className="marquee w-full border border-white/15 px-4 py-3 text-center"
          style={{ background: `linear-gradient(90deg, #111, ${accent}55, #111)` }}
        >
          <p className="font-display text-[0.65rem] tracking-[0.25em] text-foreground uppercase">
            {label}
          </p>
        </div>
        <div className="mt-0 w-[90%] border border-t-0 border-white/10 bg-[#161b23] p-4">
          <div className="aspect-video border border-white/10 bg-black/80" />
          <div className="relative mt-6 flex items-center justify-center gap-8">
            <div className="relative h-16 w-10 overflow-hidden rounded-sm border border-white/15 bg-[#222]">
              <div className="coin absolute left-1/2 top-2 h-6 w-6 -translate-x-1/2 rounded-full border-2 border-accent bg-[#f5d76e]" />
            </div>
            <div className="start-btn h-12 w-12 rounded-full border-4 border-accent-hot bg-accent shadow-[0_0_20px_var(--glow)]" />
          </div>
        </div>
        <p className="mt-8 font-display text-[0.55rem] tracking-[0.25em] text-muted uppercase">
          Insert coin…
        </p>
      </div>
    </div>
  );
}