"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import AnimatedBackground from "./AnimatedBackground";
import SplashLoader from "./SplashLoader";
import { images } from "@/branding/images";

export const SPLASH_DURATION_MS = 2800;

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

export default function SplashScreen({ onComplete }: SplashScreenProps) {
  return (
    <motion.div
      key="dtnews-splash"
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 9999,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "var(--surf, #ffffff)",
        overflow: "hidden",
      }}
      initial={{ opacity: 1 }}
      exit={{ opacity: 0, scale: 1.05 }}
      transition={{ duration: 0.5, ease: [0.4, 0, 1, 1] }}
      onAnimationComplete={(def) => {
        if (def === "exit") onComplete();
      }}
    >
      <AnimatedBackground />

      {/* Centre content */}
      <div
        style={{
          position: "relative",
          zIndex: 10,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: "2rem",
          padding: "0 1.5rem",
          textAlign: "center",
        }}
      >
        {/* App icon */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.2, duration: 0.5, ease: [0.34, 1.56, 0.64, 1] }}
        >
          <Image
            src={images.appLogo}
            alt="DTNews"
            width={80}
            height={80}
            priority
            style={{ borderRadius: 18, flexShrink: 0 }}
          />
        </motion.div>

        {/* Wordmark + tagline */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "0.75rem" }}>
          <motion.h1
            style={{
              margin: 0,
              fontFamily: "var(--font-geist-sans, sans-serif)",
              fontWeight: 800,
              fontSize: "clamp(2rem, 6vw, 2.75rem)",
              letterSpacing: "-0.03em",
              lineHeight: 1,
              color: "var(--ink, #0e0e11)",
            }}
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.65, duration: 0.6, ease: "easeOut" }}
          >
            DT<span style={{ color: "var(--brand, #C1272D)" }}>News</span>
          </motion.h1>

          <motion.p
            style={{
              margin: 0,
              fontFamily: "var(--font-geist-sans, sans-serif)",
              fontSize: "clamp(0.65rem, 2vw, 0.75rem)",
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "var(--text-secondary, #6B7280)",
            }}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.95, duration: 0.6, ease: "easeOut" }}
          >
            India&apos;s&nbsp;&nbsp;Trusted&nbsp;&nbsp;News&nbsp;&nbsp;Source
          </motion.p>
        </div>

        {/* Loader */}
        <SplashLoader duration={SPLASH_DURATION_MS / 1000 - 0.6} />
      </div>

      {/* Bottom brand */}
      <motion.div
        style={{
          position: "absolute",
          bottom: "2rem",
          left: 0,
          right: 0,
          display: "flex",
          justifyContent: "center",
        }}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.6, duration: 0.5 }}
      >
        <span
          style={{
            fontFamily: "var(--font-geist-sans, monospace)",
            fontSize: "0.65rem",
            letterSpacing: "0.12em",
            textTransform: "uppercase",
            color: "var(--text-tertiary, #9CA3AF)",
          }}
        >
          DIVINETECHS IT COMPANY
        </span>
      </motion.div>
    </motion.div>
  );
}