import { useEffect, useState } from "react";
import niyamahLogo from "@/assets/niyamah-logo.png";

interface LogoAnimationProps {
  onComplete?: () => void;
  duration?: number; // in ms, default 10000
}

export function LogoAnimation({ onComplete, duration = 10000 }: LogoAnimationProps) {
  const logoUrl = niyamahLogo;
  const [progress, setProgress] = useState(0);
  const [phase, setPhase] = useState(0); // 0=intro, 1=hold, 2=exit
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const start = Date.now();
    const total = duration;

    const interval = setInterval(() => {
      const elapsed = Date.now() - start;
      const pct = Math.min((elapsed / total) * 100, 100);
      setProgress(pct);

      if (elapsed < 2000) setPhase(0);
      else if (elapsed < total - 2000) setPhase(1);
      else setPhase(2);
    }, 50);

    const timer = setTimeout(() => {
      setVisible(false);
      setTimeout(() => onComplete?.(), 800);
    }, total);

    return () => {
      clearInterval(interval);
      clearTimeout(timer);
    };
  }, [duration, onComplete]);

  if (!visible) return null;

  return (
    <div
      className="fixed inset-0 z-[200] flex flex-col items-center justify-center overflow-hidden bg-white p-4"
      style={{
        animation: phase === 2 ? "logoAnimFadeOut 1.5s ease-in-out forwards" : "logoAnimFadeIn 0.8s ease-out",
      }}
    >
      <style>{`
        @keyframes logoAnimFadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes logoAnimFadeOut {
          from { opacity: 1; }
          to { opacity: 0; visibility: hidden; }
        }
        @keyframes logoPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.05); }
        }
        @keyframes logoRingA {
          0%, 100% { transform: scale(1); opacity: 0.3; }
          50%      { transform: scale(1.08); opacity: 0.6; }
        }
        @keyframes logoRingB {
          0%, 100% { transform: scale(1); opacity: 0.2; }
          50%      { transform: scale(1.12); opacity: 0.4; }
        }
        @keyframes logoRingC {
          0%, 100% { transform: scale(1); opacity: 0.1; }
          50%      { transform: scale(1.18); opacity: 0.25; }
        }
        @keyframes logoFloat {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-10px); }
        }
        @keyframes logoGlow {
          0%, 100% { opacity: 0.5; transform: scale(1); }
          50% { opacity: 0.8; transform: scale(1.15); }
        }
        @keyframes logoTextSlide {
          0% { opacity: 0; transform: translateY(20px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes logoTagline {
          0% { opacity: 0; letter-spacing: 0.3em; }
          100% { opacity: 1; letter-spacing: 0.15em; }
        }
        @keyframes logoDotBounce {
          0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
          40% { transform: scale(1); opacity: 1; }
        }
        @keyframes logoGradientShift {
          0% { background-position: 0% 50%; }
          100% { background-position: 200% 50%; }
        }
      `}</style>

      {/* Background ambient orbs — matching portal login */}
      <div className="absolute -top-40 -left-20 h-96 w-96 rounded-full bg-violet-400/20 blur-3xl" />
      <div className="absolute -bottom-40 -right-20 h-96 w-96 rounded-full bg-fuchsia-400/20 blur-3xl" />
      <div className="absolute top-1/3 left-1/2 h-72 w-72 rounded-full bg-purple-400/10 blur-3xl" />

      {/* Main logo container */}
      <div
        className="relative flex flex-col items-center gap-8"
        style={{ animation: "logoFloat 3s ease-in-out infinite" }}
      >
        {/* Animated rings — matching portal login */}
        <div
          className="absolute rounded-full border-2 border-violet-400/30"
          style={{
            inset: "-8px",
            animation: "logoRingA 3s ease-in-out infinite",
          }}
        />
        <div
          className="absolute rounded-full border border-fuchsia-400/20"
          style={{
            inset: "-20px",
            animation: "logoRingB 3s ease-in-out infinite 0.5s",
          }}
        />
        <div
          className="absolute rounded-full border border-violet-300/10"
          style={{
            inset: "-32px",
            animation: "logoRingC 3s ease-in-out infinite 1s",
          }}
        />

        {/* Glow behind logo — violet/fuchsia gradient like portal */}
        <div
          className="absolute inset-0 rounded-full bg-gradient-to-br from-violet-500/30 to-fuchsia-500/30 blur-xl"
          style={{
            transform: "scale(1.3)",
            animation: "logoGlow 2.5s ease-in-out infinite",
          }}
        />

        {/* Logo image */}
        <div
          className="relative h-32 w-32 sm:h-40 sm:w-40 rounded-full bg-white shadow-2xl shadow-violet-500/30 overflow-hidden grid place-items-center ring-4 ring-violet-400/30"
          style={{
            animation: "logoPulse 2s ease-in-out infinite",
          }}
        >
          <img
            src={logoUrl}
            alt="Niyamah"
            className="h-full w-full object-cover scale-110"
            draggable={false}
          />
        </div>

        {/* Brand name */}
        <div className="flex flex-col items-center gap-2">
          <h1
            className="text-3xl sm:text-4xl font-bold tracking-tight text-slate-900"
            style={{ animation: "logoTextSlide 1s ease-out 0.5s both" }}
          >
            <span
              className="bg-clip-text text-transparent"
              style={{
                backgroundImage: "linear-gradient(to right, #8b5cf6, #d946ef)",
              }}
            >
              NIYAMAH
            </span>
          </h1>
          <p
            className="text-xs sm:text-sm font-medium uppercase text-slate-500"
            style={{ animation: "logoTagline 1.2s ease-out 1s both" }}
          >
            Electric Hardware Products
          </p>
        </div>
      </div>

      {/* Bottom section — progress + dots, matching portal login */}
      <div className="absolute bottom-12 sm:bottom-16 flex flex-col items-center gap-4 w-full px-8">
        {/* Dots */}
        <div className="flex items-center gap-2">
          <span
            className="inline-block h-2.5 w-2.5 rounded-full bg-violet-400"
            style={{ animation: "logoDotBounce 1.4s ease-in-out 0s infinite" }}
          />
          <span
            className="inline-block h-2.5 w-2.5 rounded-full bg-fuchsia-400"
            style={{ animation: "logoDotBounce 1.4s ease-in-out 0.2s infinite" }}
          />
          <span
            className="inline-block h-2.5 w-2.5 rounded-full bg-violet-400"
            style={{ animation: "logoDotBounce 1.4s ease-in-out 0.4s infinite" }}
          />
        </div>

        {/* Progress bar — violet → fuchsia gradient */}
        <div className="w-56 sm:w-64 h-1.5 rounded-full bg-slate-200 overflow-hidden">
          <div
            className="h-full rounded-full bg-gradient-to-r from-violet-400 to-fuchsia-400 transition-all duration-100 ease-linear"
            style={{ width: `${progress}%` }}
          />
        </div>

        <p className="text-xs text-slate-500 font-medium tracking-wide">
          {progress < 30 && "Loading resources..."}
          {progress >= 30 && progress < 60 && "Preparing your dashboard..."}
          {progress >= 60 && progress < 90 && "Almost ready..."}
          {progress >= 90 && "Welcome back!"}
        </p>
      </div>
    </div>
  );
}
