"use client";

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useEffect, useState } from "react";

const STORAGE_KEY = "deck-intro-seen-v1";

type IntroScreenProps = {
  /** Tokens displayed as the wordmark. Default ["Deck"]. */
  tokens?: string[];
  /** Top eyebrow line. */
  eyebrow?: string;
  /** Bottom status line. */
  status?: string;
  /** ms before auto-dismiss. Default 2800. */
  duration?: number;
};

/**
 * Black splash with token-by-token wordmark, radial accent glow, and a thin progress bar.
 * Persists across one session via sessionStorage; reduced motion users skip it.
 *
 * To render "Brand × Partner" pass tokens={["Brand", "×", "Partner"]} — the "×"
 * token is automatically rendered in 45 % white instead of accent.
 */
export function IntroScreen({
  tokens = ["Deck"],
  eyebrow = "",
  status = "Loading",
  duration = 2800,
}: IntroScreenProps) {
  const [show, setShow] = useState<boolean | null>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (typeof window === "undefined") return;
    const seen = sessionStorage.getItem(STORAGE_KEY) === "1";
    if (seen || reduce) {
      setShow(false);
      return;
    }
    setShow(true);
    document.body.style.overflow = "hidden";
    const t = setTimeout(() => {
      sessionStorage.setItem(STORAGE_KEY, "1");
      setShow(false);
      document.body.style.overflow = "";
    }, duration);
    return () => {
      clearTimeout(t);
      document.body.style.overflow = "";
    };
  }, [reduce, duration]);

  if (show === null) return null;

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          key="intro"
          initial={{ opacity: 1 }}
          exit={{
            opacity: 0,
            transition: { duration: 0.7, ease: [0.65, 0, 0.35, 1] },
          }}
          className="fixed inset-0 z-[100] flex items-center justify-center overflow-hidden bg-ink-900"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 1.4, ease: [0.22, 1, 0.36, 1] }}
            className="pointer-events-none absolute inset-0"
            style={{
              background:
                "radial-gradient(60% 60% at 50% 50%, rgba(250,204,13,0.08) 0%, rgba(250,204,13,0) 70%)",
            }}
          />

          <div className="relative flex flex-col items-center gap-6 px-6">
            {eyebrow && (
              <motion.div
                initial={{ opacity: 0, y: 18 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
                className="mono text-[11px] uppercase tracking-[0.28em] text-white/55"
              >
                {eyebrow}
              </motion.div>
            )}

            <div className="flex items-baseline gap-4">
              {tokens.map((token, i) => (
                <span key={`${token}-${i}`} className="overflow-hidden">
                  <motion.span
                    initial={{ y: "110%", opacity: 0 }}
                    animate={{ y: "0%", opacity: 1 }}
                    transition={{
                      duration: 0.7,
                      delay: 0.45 + i * 0.12,
                      ease: [0.22, 1, 0.36, 1],
                    }}
                    className="inline-block font-display italic"
                    style={{
                      fontSize: "clamp(40px, 7vw, 96px)",
                      color: token === "×" ? "rgba(255,255,255,0.45)" : "var(--accent-500)",
                      lineHeight: 1,
                      letterSpacing: "-0.015em",
                    }}
                  >
                    {token}
                  </motion.span>
                </span>
              ))}
            </div>

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.4, delay: 1.0 }}
              className="mt-4 h-px w-56 overflow-hidden bg-white/15"
            >
              <motion.span
                initial={{ x: "-100%" }}
                animate={{ x: "0%" }}
                transition={{ duration: 1.6, delay: 1.0, ease: [0.65, 0, 0.35, 1] }}
                className="block h-full w-full bg-accent-500"
              />
            </motion.div>
          </div>

          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.4, delay: 1.6 }}
            className="absolute inset-x-0 bottom-10 flex items-center justify-center"
          >
            <span className="mono text-[10px] uppercase tracking-[0.32em] text-white/40">
              {status}
            </span>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}