"use client";

import { motion, AnimatePresence } from "framer-motion";
import { useAppSelector } from "@/store/hooks";
import { SplashBackground } from "./SplashBackground";
import { SplashLogo } from "./SplashLogo";
import { SplashLoader } from "./SplashLoader";

interface SplashScreenProps {
  onComplete: () => void;
  duration?: number;
}

const SPLASH_DURATION_MS = 3400;
const LOADER_DURATION = 2.6;

export function SplashScreen({
  onComplete,
  duration = SPLASH_DURATION_MS,
}: SplashScreenProps) {
  const mode = useAppSelector((s) => s.theme.mode);
  const isDark = mode === "dark";

  const mutedText = isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.35)";

  return (
    <AnimatePresence>
      <motion.div
        key="splash"
        className="fixed inset-0 z-[9999] flex flex-col items-center justify-center"
        style={{ background: isDark ? "#0a0a14" : "#f5f5f7" }}
        initial={{ opacity: 1 }}
        exit={{
          opacity: 0,
          scale: 1.06,
          filter: "blur(8px)",
        }}
        transition={{ duration: 0.55, ease: [0.4, 0, 1, 1] }}
        onAnimationComplete={(definition) => {
          if (definition === "exit") onComplete();
        }}
      >
        {/* Layered cinematic background */}
        <SplashBackground isDark={isDark} />

        {/* Centered content */}
        <div className="relative z-10 flex flex-col items-center gap-16">
          <SplashLogo isDark={isDark} />
          <SplashLoader duration={LOADER_DURATION} isDark={isDark} />
        </div>

        {/* Top-left brand stamp */}
        <motion.div
          className="absolute top-8 left-8 flex items-center gap-2"
          initial={{ opacity: 0, x: -16 }}
          animate={{ opacity: 0.3, x: 0 }}
          transition={{ duration: 0.6, delay: 1.6, ease: "easeOut" }}
        >
          <div
            style={{
              width: 18,
              height: 18,
              borderRadius: 4,
              background: "rgba(var(--accent-rgb),0.6)",
            }}
          />
          <span
            style={{
              fontSize: 11,
              letterSpacing: "0.18em",
              color: mutedText,
              textTransform: "uppercase",
              fontWeight: 600,
            }}
          >
            Streaming
          </span>
        </motion.div>

        {/* Bottom version text */}
        <motion.p
          className="absolute bottom-8"
          initial={{ opacity: 0 }}
          animate={{ opacity: 0.25 }}
          transition={{ duration: 0.5, delay: 1.8 }}
          style={{
            fontSize: 10,
            letterSpacing: "0.2em",
            color: mutedText,
            textTransform: "uppercase",
          }}
        >
          v1.0 · Doliplay Platform
        </motion.p>

        {/* Corner accent lines */}
        {[
          { top: 0, left: 0, borderTop: "2px solid", borderLeft: "2px solid" },
          { top: 0, right: 0, borderTop: "2px solid", borderRight: "2px solid" },
          { bottom: 0, left: 0, borderBottom: "2px solid", borderLeft: "2px solid" },
          { bottom: 0, right: 0, borderBottom: "2px solid", borderRight: "2px solid" },
        ].map((style, i) => (
          <motion.div
            key={i}
            className="absolute"
            style={{
              ...style,
              width: 28,
              height: 28,
              borderColor: "rgba(var(--accent-rgb),0.25)",
              margin: 20,
            }}
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{
              duration: 0.4,
              delay: 0.8 + i * 0.08,
              ease: "easeOut",
            }}
          />
        ))}

        {/* Horizontal scan line — one-shot sweep */}
        <motion.div
          className="absolute left-0 right-0 pointer-events-none"
          style={{
            height: 1,
            background:
              "linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb),0.4) 50%, transparent 100%)",
          }}
          initial={{ top: "0%", opacity: 0 }}
          animate={{ top: "100%", opacity: [0, 0.8, 0] }}
          transition={{ duration: 1.6, delay: 0.4, ease: "easeInOut" }}
        />
      </motion.div>
    </AnimatePresence>
  );
}

export { SPLASH_DURATION_MS };