"use client";

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

export function HandheldBoot({
  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(".hinge-top", { rotateX: -95, transformOrigin: "bottom center" });
      gsap.set(".screen-glow", { opacity: 0 });
      gsap.set(".cart-chip", { x: 80, opacity: 0 });

      tl.to(".cart-chip", { x: 0, opacity: 1, duration: 0.4 })
        .to(".hinge-top", { rotateX: 0, duration: 0.65, ease: "power3.out" })
        .to(".screen-glow", { opacity: 1, duration: 0.45 })
        .to({}, { duration: 0.35 });
    }, root);
    return () => ctx.revert();
  }, [onComplete]);

  return (
    <div ref={root} className="boot-stage" style={{ perspective: 900 }}>
      <div className="relative flex w-[min(92vw,280px)] flex-col items-center">
        <div
          className="hinge-top relative z-10 w-full rounded-t-md border border-white/15 p-3"
          style={{ background: `linear-gradient(180deg, ${accent}aa, #1b212b)` }}
        >
          <div className="screen-glow relative aspect-[4/3] overflow-hidden rounded-sm bg-black">
            <div
              className="absolute inset-0 opacity-70"
              style={{
                background: `radial-gradient(circle at 50% 40%, ${accent}88, transparent 65%)`,
              }}
            />
            <div className="absolute inset-0 flex items-center justify-center">
              <p className="font-display text-[0.5rem] tracking-[0.2em] text-crt uppercase">
                {label}
              </p>
            </div>
          </div>
        </div>
        <div className="w-full rounded-b-md border border-t-0 border-white/15 bg-[#1b212b] p-4">
          <div className="mx-auto mb-4 h-1.5 w-16 rounded-full bg-black/50" />
          <div className="flex items-center justify-between">
            <div className="h-10 w-10 rounded-full border border-white/10 bg-black/40" />
            <div className="cart-chip h-8 w-14 rounded-sm border border-white/20 bg-accent/30" />
            <div className="flex gap-1">
              <div className="h-5 w-5 rounded-sm bg-black/40" />
              <div className="h-5 w-5 rounded-sm bg-black/40" />
            </div>
          </div>
        </div>
        <p className="mt-8 font-display text-[0.55rem] tracking-[0.25em] text-muted uppercase">
          Powering handheld…
        </p>
      </div>
    </div>
  );
}