"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { PWA_THEME_COLOR } from "@/lib/pwaConfig";
import { isStandaloneMode } from "@/lib/pwa/install";

const SPLASH_KEY = "modstagram-pwa-splash-v2";

type Phase = "logo" | "fill" | "hold" | "out" | "done";

/**
 * اسپلش PWA شبیه WebView:
 * ۱) لوگو کامل ظاهر می‌شود
 * ۲) پس‌زمینه با انیمیشن همرنگ لوگو می‌شود
 * ۳) لوگو وسط می‌ماند
 * ۴) محو و ورود سایت
 */
export default function PwaBootSplash() {
  const [phase, setPhase] = useState<Phase>("done");
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined") return;

    const params = new URLSearchParams(window.location.search);
    const fromPwa = params.get("source") === "pwa";
    const standalone = isStandaloneMode();
    if (!standalone && !fromPwa) return;

    try {
      if (sessionStorage.getItem(SPLASH_KEY) === "1") return;
      sessionStorage.setItem(SPLASH_KEY, "1");
    } catch {
      /* ignore */
    }

    setVisible(true);
    setPhase("logo");

    const t1 = window.setTimeout(() => setPhase("fill"), 420);
    const t2 = window.setTimeout(() => setPhase("hold"), 980);
    const t3 = window.setTimeout(() => setPhase("out"), 1550);
    const t4 = window.setTimeout(() => {
      setPhase("done");
      setVisible(false);
    }, 2000);

    return () => {
      window.clearTimeout(t1);
      window.clearTimeout(t2);
      window.clearTimeout(t3);
      window.clearTimeout(t4);
    };
  }, []);

  if (!visible || phase === "done") return null;

  const filled = phase === "fill" || phase === "hold" || phase === "out";
  const fading = phase === "out";

  return (
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center overflow-hidden"
      style={{
        opacity: fading ? 0 : 1,
        transition: "opacity 420ms ease",
        pointerEvents: fading ? "none" : "auto",
      }}
      aria-hidden
    >
      <div
        className="absolute inset-0 bg-white"
        style={{
          opacity: filled ? 0 : 1,
          transition: "opacity 380ms ease",
        }}
      />

      <div
        className="absolute left-1/2 top-1/2"
        style={{
          width: filled ? "220vmax" : "0px",
          height: filled ? "220vmax" : "0px",
          marginLeft: filled ? "-110vmax" : 0,
          marginTop: filled ? "-110vmax" : 0,
          borderRadius: "50%",
          background: PWA_THEME_COLOR,
          transition:
            "width 620ms cubic-bezier(0.22, 1, 0.36, 1), height 620ms cubic-bezier(0.22, 1, 0.36, 1), margin 620ms cubic-bezier(0.22, 1, 0.36, 1)",
        }}
      />

      <div
        className="relative z-[1]"
        style={{
          opacity: phase === "logo" ? 1 : 1,
          transform: phase === "logo" ? "scale(1)" : "scale(1)",
          transition: "transform 360ms ease, opacity 360ms ease",
          animation: "modSplashLogoIn 420ms ease both",
        }}
      >
        <Image
          src="/images/icons/512x512.png"
          alt="Modstagram"
          width={148}
          height={148}
          priority
          className="h-[148px] w-[148px] object-contain drop-shadow-md"
        />
      </div>

      <style>{`
        @keyframes modSplashLogoIn {
          from { opacity: 0; transform: scale(0.86); }
          to { opacity: 1; transform: scale(1); }
        }
      `}</style>
    </div>
  );
}
