"use client";

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

export function DiscBoot({
  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(".tray", { y: 70 });
      gsap.set(".disc", { y: -120, opacity: 0, scale: 0.85 });
      gsap.set(".laser", { opacity: 0 });

      tl.to(".tray", { y: 0, duration: 0.45 })
        .to(".disc", { y: 0, opacity: 1, scale: 1, duration: 0.5 })
        .to(".tray", { y: 70, duration: 0.4 })
        .to(".laser", { opacity: 0.9, duration: 0.2 })
        .to(".disc-spin", {
          rotation: 720,
          duration: 1.1,
          ease: "power1.in",
        })
        .to({}, { duration: 0.2 });
    }, root);
    return () => ctx.revert();
  }, [onComplete]);

  return (
    <div ref={root} className="boot-stage">
      <div className="relative flex w-[min(92vw,440px)] flex-col items-center">
        <div className="relative h-56 w-56 overflow-hidden rounded-full border border-white/15 bg-[#151a22] shadow-2xl">
          <div
            className="disc disc-spin absolute inset-6 rounded-full border border-white/20"
            style={{
              background: `conic-gradient(from 40deg, ${accent}, #222 35%, ${accent}88, #111 70%, ${accent})`,
            }}
          >
            <div className="absolute inset-[38%] rounded-full bg-[#0b0d10] border border-white/20" />
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="font-display max-w-[50%] text-center text-[0.4rem] tracking-wider text-white/80 uppercase">
                {label}
              </span>
            </div>
          </div>
          <div className="laser absolute left-1/2 top-1/2 h-px w-24 origin-left -translate-y-1/2 bg-crt shadow-[0_0_12px_var(--crt-green)]" />
        </div>
        <div className="tray mt-6 h-10 w-48 rounded-sm border border-white/10 bg-[#222831]" />
        <p className="mt-8 font-display text-[0.55rem] tracking-[0.25em] text-muted uppercase">
          Disc spinning up…
        </p>
      </div>
    </div>
  );
}