import { useEffect, useState } from 'react';

export default function SplashScreen() {
  const [visible, setVisible] = useState(true);
  const [fadeOut, setFadeOut] = useState(false);

  useEffect(() => {
    const show = () => {
      setVisible(true);
      setFadeOut(false);
    };
    const hide = () => {
      setFadeOut(true);
      setTimeout(() => setVisible(false), 600);
    };

    document.addEventListener('astro:before-preparation', show);
    document.addEventListener('astro:after-preparation', hide);

    // Initial hide for first page load
    const timer = setTimeout(hide, 1000);

    return () => {
      document.removeEventListener('astro:before-preparation', show);
      document.removeEventListener('astro:after-preparation', hide);
      clearTimeout(timer);
    };
  }, []);

  if (!visible) return null;

  return (
    <div
      className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[#0f0f0f] transition-opacity duration-500 ${fadeOut ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
    >
      <div className="relative mb-8 flex flex-col items-center">
        <div className="relative w-80 h-32 overflow-hidden animate-pulse">
          <img src="/logo-full.png" className="h-full w-full object-contain" alt="TPHIMX Full Logo" />
        </div>
        <div className="mt-4 text-[12px] font-black uppercase tracking-[0.6em] text-primary">Tuyệt mỹ từng khung hình</div>
        <div className="mt-6 h-[2px] w-64 bg-gradient-to-r from-transparent via-primary to-transparent" />
      </div>
      <div className="flex gap-1.5">
        {[0, 1, 2].map((i) => (
          <div
            key={i}
            className="h-2.5 w-2.5 rounded-full bg-primary animate-bounce shadow-[0_0_8px_var(--primary)]"
            style={{ animationDelay: `${i * 0.15}s` }}
          />
        ))}
      </div>
      <p className="mt-4 text-sm tracking-widest text-gray-500 uppercase">Đang tải...</p>
    </div>
  );
}