"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import { useEffect, useRef, useState } from "react";

const MAX_DISPLAY_MS = 1200;
const EXIT_MS = 350;
const LOGO_TIMEOUT_MS = 2500;

interface SplashScreenProps {
  logo?: string;
  restaurantName?: string;
  onDismiss: () => void;
}

export default function SplashScreen({ logo, restaurantName, onDismiss }: SplashScreenProps) {
  const [opacity, setOpacity] = useState(1);
  const [logoState, setLogoState] = useState<"idle" | "loading" | "ready" | "error">(logo ? "loading" : "idle");
  const onDismissRef = useRef(onDismiss);
  onDismissRef.current = onDismiss;

  useEffect(() => {
    setLogoState(logo ? "loading" : "idle");
  }, [logo]);

  useEffect(() => {
    if (!logo || logoState !== "loading") return;

    const logoTimeout = setTimeout(() => {
      setLogoState("error");
    }, LOGO_TIMEOUT_MS);

    return () => clearTimeout(logoTimeout);
  }, [logo, logoState]);

  useEffect(() => {
    const fadeTimer = setTimeout(() => {
      setOpacity(0);
    }, MAX_DISPLAY_MS);

    const dismissTimer = setTimeout(() => {
      onDismissRef.current();
    }, MAX_DISPLAY_MS + EXIT_MS);

    return () => {
      clearTimeout(fadeTimer);
      clearTimeout(dismissTimer);
    };
  }, []);

  return (
    <motion.div
      initial={{ opacity: 1 }}
      animate={{ opacity }}
      transition={{ duration: EXIT_MS / 1000, ease: "easeOut" }}
      className="fixed inset-0 z-9999 flex flex-col items-center justify-center bg-background"
      data-slot="splash-screen"
      aria-hidden="true"
    >
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <motion.div
          animate={{
            scale: [1, 1.2, 1],
            opacity: [0.1, 0.2, 0.1],
          }}
          transition={{
            duration: 3,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          className="absolute -top-20 -right-20 w-80 h-80 rounded-full bg-primary/20 blur-3xl"
        />
        <motion.div
          animate={{
            scale: [1.2, 1, 1.2],
            opacity: [0.1, 0.2, 0.1],
          }}
          transition={{
            duration: 3,
            delay: 0.5,
            repeat: Infinity,
            ease: "easeInOut",
          }}
          className="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-primary/20 blur-3xl"
        />
      </div>

      <div className="flex flex-col items-center gap-8 px-8 w-full max-w-md relative z-10">
        {logo && logoState !== "error" && (
          <div className="relative">
            <Image
              src={logo}
              alt={restaurantName || "Restaurant Logo"}
              width={200}
              height={100}
              unoptimized
              priority
              className="object-contain"
              onLoad={() => setLogoState("ready")}
              onError={() => setLogoState("error")}
              style={{
                opacity: logoState === "ready" ? 1 : 0,
                transition: "opacity 0.3s",
              }}
            />
          </div>
        )}

        <div className="flex gap-3 mt-2">
          {[0, 0.2, 0.4].map((delay) => (
            <motion.div
              key={delay}
              animate={{
                scale: [1, 1.3, 1],
                opacity: [0.4, 1, 0.4],
              }}
              transition={{
                duration: 1.5,
                delay,
                repeat: Infinity,
                ease: "easeInOut",
              }}
              className="w-3 h-3 rounded-full bg-primary shadow-lg shadow-primary/50"
            />
          ))}
        </div>
      </div>
    </motion.div>
  );
}
