import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import { svgs } from "@/assets/svgMap";
import { Heart, Sparkles, ShieldCheck } from "lucide-react";

export function SplashScreen() {
  const [show, setShow] = useState(true);

  useEffect(() => {
    // Smooth timer for splash exit
    const timer = setTimeout(() => {
      setShow(false);
    }, 2200);

    return () => clearTimeout(timer);
  }, []);

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          key="splash"
          initial={{ opacity: 1 }}
          exit={{ opacity: 0, scale: 0.96 }}
          transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
          onClick={() => setShow(false)}
          className="fixed inset-0 z-50 flex flex-col items-center justify-between bg-background text-foreground p-6 select-none cursor-pointer overflow-hidden backdrop-blur-2xl"
          style={{ backgroundImage: "var(--app-bg-gradient)" }}
        >
          {/* Animated Ambient Glowing Orbs */}
          <motion.div
            initial={{ scale: 0.8, opacity: 0.3 }}
            animate={{ scale: [0.8, 1.2, 0.9], opacity: [0.3, 0.6, 0.4] }}
            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
            className="absolute -top-24 -left-24 h-72 w-72 rounded-full bg-emerald-500/20 blur-3xl pointer-events-none"
          />
          <motion.div
            initial={{ scale: 1, opacity: 0.2 }}
            animate={{ scale: [1, 1.3, 1], opacity: [0.2, 0.5, 0.3] }}
            transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
            className="absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-teal-500/20 blur-3xl pointer-events-none"
          />

          {/* Top Header Status */}
          <div className="w-full flex justify-between items-center text-xs font-extrabold text-muted-foreground pt-2 z-10">
            <span className="flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400">
              <Sparkles className="h-4 w-4 animate-spin" /> Senior Health AI
            </span>
            <span className="flex items-center gap-1 text-[11px] bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 px-3 py-1 rounded-full border border-emerald-500/30 font-extrabold shadow-xs">
              <ShieldCheck className="h-3.5 w-3.5" /> 100% Safe & Secure
            </span>
          </div>

          {/* Central Animated Hero Logo Block */}
          <div className="flex flex-col items-center justify-center text-center space-y-6 my-auto z-10">
            <motion.div
              initial={{ scale: 0.6, y: 15, opacity: 0 }}
              animate={{ scale: 1, y: 0, opacity: 1 }}
              transition={{ duration: 0.65, type: "spring", bounce: 0.4 }}
              className="relative"
            >
              {/* Outer Pulsing Glow */}
              <div className="absolute -inset-5 rounded-3xl bg-gradient-to-tr from-emerald-500/40 via-teal-500/30 to-cyan-500/40 blur-2xl animate-pulse" />

              {/* Icon Container */}
              <div className="relative grid h-28 w-28 sm:h-32 sm:w-32 place-items-center rounded-3xl bg-card border-2 border-emerald-500/50 p-5 shadow-2xl">
                <img
                  src={svgs.miscLogo}
                  alt="NeuroSaathi Logo"
                  className="h-20 w-20 sm:h-24 sm:w-24 object-contain drop-shadow-md"
                />
              </div>
            </motion.div>

            {/* App Title & Subtitle */}
            <motion.div
              initial={{ y: 25, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.18, duration: 0.5 }}
              className="space-y-2"
            >
              <h1 className="text-4xl sm:text-5xl font-display font-black tracking-tight text-foreground">
                Neuro<span className="text-emerald-500">Saathi</span>
              </h1>
              <p className="text-base sm:text-lg font-bold text-muted-foreground max-w-xs">
                Swasthya & AI Voice Companion
              </p>
            </motion.div>

            {/* Smooth Animated Loading Progress Indicator */}
            <div className="w-44 h-2 rounded-full bg-muted/80 p-0.5 border border-border/80 shadow-inner overflow-hidden">
              <motion.div
                initial={{ width: "0%" }}
                animate={{ width: "100%" }}
                transition={{ duration: 1.8, ease: "easeInOut" }}
                className="h-full rounded-full bg-gradient-to-r from-emerald-500 via-teal-400 to-cyan-500 shadow-sm"
              />
            </div>
          </div>

          {/* Bottom Branding: Made in India */}
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3, duration: 0.5 }}
            className="flex flex-col items-center gap-1.5 pb-4 z-10"
          >
            <div className="flex items-center gap-2.5 rounded-full bg-card/95 px-5 py-2.5 border-2 border-emerald-500/30 shadow-lg backdrop-blur-md">
              <span className="text-xl">🇮🇳</span>
              <span className="text-xs sm:text-sm font-black tracking-widest uppercase text-foreground flex items-center gap-1.5">
                Made in India{" "}
                <Heart className="h-4 w-4 text-red-500 fill-red-500 animate-bounce ml-0.5" />
              </span>
            </div>
            <p className="text-xs font-bold text-muted-foreground">
              Designed for Senior Citizens & Elderly Care
            </p>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}