"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { TEXT, IMAGES } from "@/branding";

/* ─── Orbiting particles ─────────────────────────────────────────────────── */
function OrbitParticle({
  radius,
  angle,
  delay,
  size = 4,
}: {
  radius: number;
  angle: number;
  delay: number;
  size?: number;
}) {
  return (
    <motion.div
      className="absolute rounded-full"
      style={{
        width: size,
        height: size,
        background: "rgba(var(--accent-rgb),0.8)",
        top: "50%",
        left: "50%",
        boxShadow: "0 0 6px rgba(var(--accent-rgb),0.8)",
      }}
      initial={{ opacity: 0 }}
      animate={{
        opacity: [0, 1, 0.6, 1, 0],
        rotate: [angle, angle + 360],
        x: [
          Math.cos((angle * Math.PI) / 180) * radius - size / 2,
          Math.cos(((angle + 360) * Math.PI) / 180) * radius - size / 2,
        ],
        y: [
          Math.sin((angle * Math.PI) / 180) * radius - size / 2,
          Math.sin(((angle + 360) * Math.PI) / 180) * radius - size / 2,
        ],
      }}
      transition={{
        duration: 3,
        delay,
        repeat: Infinity,
        ease: "linear",
      }}
    />
  );
}

/* ─── Ring pulse ─────────────────────────────────────────────────────────── */
function PulseRing({ delay = 0 }: { delay?: number }) {
  return (
    <motion.div
      className="absolute rounded-full border"
      style={{
        width: 130,
        height: 130,
        top: "50%",
        left: "50%",
        x: "-50%",
        y: "-50%",
        borderColor: "rgba(var(--accent-rgb),0.4)",
        pointerEvents: "none",
      }}
      animate={{
        scale: [1, 1.9],
        opacity: [0.7, 0],
      }}
      transition={{
        duration: 2,
        delay,
        repeat: Infinity,
        ease: "easeOut",
      }}
    />
  );
}

/* ─── Main SplashLogo ─────────────────────────────────────────────────────── */
export function SplashLogo({ isDark }: { isDark: boolean }) {
  const letters = TEXT.app.name.split("");

  return (
    <div className="relative flex flex-col items-center gap-6 select-none">
      {/* Pulse rings behind the icon */}
      <div className="relative flex items-center justify-center">
        <PulseRing delay={0} />
        <PulseRing delay={1} />

        {/* Icon with floating effect */}
        <motion.div
          initial={{ scale: 0.3, opacity: 0, y: 20 }}
          animate={{
            scale: 1,
            opacity: 1,
            y: [0, -8, 0],
          }}
          transition={{
            scale: { type: "spring", stiffness: 200, damping: 18, delay: 0.1 },
            opacity: { duration: 0.4, delay: 0.1 },
            y: {
              delay: 1.2,
              duration: 2.8,
              repeat: Infinity,
              ease: "easeInOut",
            },
          }}
          style={{
            filter: "drop-shadow(0 0 28px rgba(var(--accent-rgb),0.65))",
          }}
        >
          <Image
            src={IMAGES.appIcon}
            alt={TEXT.app.name}
            width={88}
            height={88}
            className="rounded-2xl"
            priority
          />
        </motion.div>

        {/* Orbiting particles — appear after logo */}
        <motion.div
          className="absolute inset-0"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.9, duration: 0.4 }}
        >
          <OrbitParticle radius={68} angle={0} delay={0} size={5} />
          <OrbitParticle radius={68} angle={120} delay={0.4} size={3} />
          <OrbitParticle radius={68} angle={240} delay={0.8} size={4} />
          <OrbitParticle radius={80} angle={60} delay={0.2} size={2.5} />
          <OrbitParticle radius={80} angle={180} delay={0.6} size={2.5} />
          <OrbitParticle radius={80} angle={300} delay={1.0} size={2.5} />
        </motion.div>
      </div>

      {/* App name — staggered letter entrance */}
      <div className="flex items-center gap-0.5 overflow-hidden">
        {letters.map((letter, i) => (
          <motion.span
            key={i}
            initial={{ y: 40, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{
              type: "spring",
              stiffness: 280,
              damping: 22,
              delay: 0.55 + i * 0.06,
            }}
            style={{
              fontSize: 38,
              fontWeight: 900,
              color: isDark ? "#ffffff" : "#0a0a14",
              letterSpacing: letter === " " ? "0.1em" : "-0.02em",
              display: "inline-block",
              fontFamily: "inherit",
              lineHeight: 1,
            }}
          >
            {letter === " " ? " " : letter}
          </motion.span>
        ))}
      </div>

      {/* Tagline */}
      <motion.p
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, delay: 1.1, ease: "easeOut" }}
        style={{
          fontSize: 13,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: isDark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.35)",
          fontWeight: 500,
        }}
      >
        {TEXT.app.tagline}
      </motion.p>

      {/* Orange accent line under tagline */}
      <motion.div
        initial={{ scaleX: 0, opacity: 0 }}
        animate={{ scaleX: 1, opacity: 1 }}
        transition={{ duration: 0.7, delay: 1.3, ease: "circOut" }}
        style={{
          height: 1.5,
          width: 60,
          background:
            "linear-gradient(90deg, transparent, var(--accent), transparent)",
          borderRadius: 1,
          marginTop: -14,
        }}
      />
    </div>
  );
}