"use client";

import { useEffect, useState } from "react";
import Image from "next/image";

type Phase = "hidden" | "visible" | "exiting";

export function SplashScreen() {
  const [phase, setPhase] = useState<Phase>("hidden");

  useEffect(() => {
    const isStandalone =
      window.matchMedia("(display-mode: standalone)").matches ||
      ("standalone" in window.navigator &&
        (window.navigator as { standalone?: boolean }).standalone === true);

    if (!isStandalone) return;
    if (sessionStorage.getItem("__ab_splash__")) return;
    sessionStorage.setItem("__ab_splash__", "1");

    // Jump straight to visible — no entering delay so the glossy splash
    // snaps in immediately, covering the browser's native PWA splash.
    setPhase("visible");
    const t1 = setTimeout(() => setPhase("exiting"), 2200);
    const t2 = setTimeout(() => setPhase("hidden"), 2800);

    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  if (phase === "hidden") return null;

  return (
    <>
      <style>{`
        @keyframes ab-pulse-ring {
          0%, 100% { box-shadow: 0 0 0 0 rgba(254,214,101,0.25), 0 24px 64px rgba(0,0,0,0.45); }
          50%       { box-shadow: 0 0 0 10px rgba(254,214,101,0.06), 0 24px 64px rgba(0,0,0,0.45); }
        }
        @keyframes ab-dot-pulse {
          0%, 80%, 100% { transform: scale(0.7); opacity: 0.3; }
          40%           { transform: scale(1); opacity: 1; }
        }
        @keyframes ab-card-in {
          from { opacity: 0; transform: scale(0.88) translateY(10px); }
          to   { opacity: 1; transform: scale(1)   translateY(0); }
        }
        @keyframes ab-line-grow {
          from { transform: scaleX(0); }
          to   { transform: scaleX(1); }
        }
        @keyframes ab-fade-up {
          from { opacity: 0; transform: translateY(10px); }
          to   { opacity: 0.55; transform: translateY(0); }
        }
        @keyframes ab-dots-in {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
      `}</style>

      <div
        style={{
          position: "fixed",
          inset: 0,
          zIndex: 9999,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          /* Use safe-area insets so content clears notch / home indicator */
          paddingTop: "env(safe-area-inset-top, 0px)",
          paddingBottom: "env(safe-area-inset-bottom, 0px)",
          paddingLeft: "env(safe-area-inset-left, 0px)",
          paddingRight: "env(safe-area-inset-right, 0px)",
          background: "radial-gradient(ellipse at 38% 42%, #101da0 0%, #040b61 48%, #020738 100%)",
          opacity: phase === "exiting" ? 0 : 1,
          transition: "opacity 0.6s ease",
        }}
      >
        {/* Top decorative line */}
        <div style={{
          width: "clamp(48px, 12vw, 80px)",
          height: 1,
          background: "linear-gradient(90deg, transparent, rgba(254,214,101,0.6), transparent)",
          marginBottom: "clamp(24px, 6vw, 40px)",
          transformOrigin: "center",
          animation: "ab-line-grow 0.5s ease 0.1s both",
        }} />

        {/* Logo card */}
        <div style={{
          background: "#ffffff",
          borderRadius: "clamp(14px, 4vw, 20px)",
          padding: "clamp(18px, 5.5vw, 26px) clamp(24px, 8vw, 44px)",
          width: "min(88vw, 320px)",
          border: "1px solid rgba(254,214,101,0.35)",
          animation: "ab-card-in 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) 0.05s both, ab-pulse-ring 3s ease-in-out 0.65s infinite",
        }}>
          <Image
            src="/logo.png"
            alt="Al-Bakkah Travels and Tours"
            width={220}
            height={74}
            priority
            style={{
              display: "block",
              width: "100%",
              height: "auto",
              objectFit: "contain",
            }}
          />
        </div>

        {/* Gold divider */}
        <div style={{
          width: "clamp(60px, 16vw, 100px)",
          height: 1,
          background: "linear-gradient(90deg, transparent, rgba(254,214,101,0.7), transparent)",
          marginTop: "clamp(22px, 6vw, 36px)",
          marginBottom: "clamp(12px, 3vw, 18px)",
          transformOrigin: "center",
          animation: "ab-line-grow 0.5s ease 0.35s both",
        }} />

        {/* Tagline */}
        <p style={{
          color: "#ffffff",
          fontSize: "clamp(9px, 2.5vw, 11px)",
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          fontFamily: "var(--font-body, sans-serif)",
          fontWeight: 400,
          margin: 0,
          animation: "ab-fade-up 0.5s ease 0.45s both",
        }}>
          Your Journey to the Holy Land
        </p>

        {/* Pulsing dots */}
        <div style={{
          display: "flex",
          gap: 6,
          marginTop: "clamp(36px, 10vw, 52px)",
          animation: "ab-dots-in 0.4s ease 0.65s both",
        }}>
          {[0, 1, 2].map((i) => (
            <div
              key={i}
              style={{
                width: 5,
                height: 5,
                borderRadius: "50%",
                background: "rgba(254,214,101,0.7)",
                animation: `ab-dot-pulse 1.4s ease-in-out ${i * 0.16}s infinite`,
              }}
            />
          ))}
        </div>
      </div>
    </>
  );
}