import { useEffect, useState } from 'react';

interface SplashScreenProps {
    onComplete?: () => void;
    duration?: number;
}

export function SplashScreen({ onComplete, duration = 1800 }: SplashScreenProps) {
    const [phase, setPhase] = useState<'logo' | 'text' | 'fadeOut'>('logo');

    useEffect(() => {
        // Phase 1: Logo appears (0ms)
        // Phase 2: Text fades in (600ms)
        const textTimer = setTimeout(() => setPhase('text'), 600);

        // Phase 3: Fade out starts (duration - 400ms)
        const fadeTimer = setTimeout(() => setPhase('fadeOut'), duration - 400);

        // Complete
        const completeTimer = setTimeout(() => {
            onComplete?.();
        }, duration);

        return () => {
            clearTimeout(textTimer);
            clearTimeout(fadeTimer);
            clearTimeout(completeTimer);
        };
    }, [duration, onComplete]);

    return (
        <div
            className={`
                fixed inset-0 z-50 flex items-center justify-center bg-primary
                transition-opacity duration-slower ease-out-expo
                ${phase === 'fadeOut' ? 'opacity-0' : 'opacity-100'}
            `}
        >
            {/* Subtle dot pattern */}
            <div
                className="absolute inset-0 opacity-[0.02] pointer-events-none"
                style={{
                    backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
                    backgroundSize: '24px 24px',
                }}
            />

            <div className="flex flex-col items-center gap-8">
                {/* Logo */}
                <div
                    className={`
                        relative transition-all duration-slow ease-out-expo
                        ${phase === 'logo' ? 'scale-95 opacity-0' : 'scale-100 opacity-100'}
                    `}
                    style={{ transitionDelay: '100ms' }}
                >
                    <img
                        src="/assets/logo-veridian.jpg"
                        alt="Veridian"
                        className="w-24 h-24 md:w-32 md:h-32 rounded-2xl shadow-xl"
                    />

                    {/* Subtle pulse ring */}
                    <div
                        className={`
                            absolute inset-0 rounded-2xl border border-current opacity-0
                            ${phase !== 'logo' ? 'animate-ping' : ''}
                        `}
                        style={{
                            animationDuration: '2s',
                            opacity: phase !== 'logo' ? 0.1 : 0,
                        }}
                    />
                </div>

                {/* Text */}
                <div
                    className={`
                        text-center transition-all duration-slow ease-out-expo
                        ${phase === 'text' || phase === 'fadeOut'
                            ? 'opacity-100 translate-y-0'
                            : 'opacity-0 translate-y-2'
                        }
                    `}
                >
                    <h1 className="text-xl md:text-2xl font-semibold text-primary tracking-tight">
                        Veridian
                    </h1>
                    <p className="text-sm text-tertiary mt-1">
                        Cultivation Platform
                    </p>
                </div>

                {/* Loading indicator - three dots */}
                <div
                    className={`
                        flex gap-1.5 transition-opacity duration-normal
                        ${phase === 'text' ? 'opacity-100' : 'opacity-0'}
                    `}
                >
                    {[0, 1, 2].map((i) => (
                        <div
                            key={i}
                            className="w-1.5 h-1.5 rounded-full bg-tertiary"
                            style={{
                                animation: 'pulse-dot 1.4s ease-in-out infinite',
                                animationDelay: `${i * 0.16}s`,
                            }}
                        />
                    ))}
                </div>
            </div>

            {/* Keyframes for dot pulse */}
            <style>{`
                @keyframes pulse-dot {
                    0%, 80%, 100% {
                        opacity: 0.3;
                        transform: scale(0.8);
                    }
                    40% {
                        opacity: 1;
                        transform: scale(1);
                    }
                }
            `}</style>
        </div>
    );
}
