'use client';

import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { usePreloader } from '@/hooks/use-preloader';

export const SitePreloader = () => {
    const { loading } = usePreloader();
    const [isVisible, setIsVisible] = useState(true);

    useEffect(() => {
        if (loading) {
            setIsVisible(true);
        } else {
            // Add a small exit delay for smoothness
            const timer = setTimeout(() => setIsVisible(false), 800);
            return () => clearTimeout(timer);
        }
    }, [loading]);

    const [pixelBits, setPixelBits] = useState<{ id: number; size: number; x: number; y: number; delay: number }[]>([]);

    useEffect(() => {
        // Generate random pixel bits only on the client to avoid hydration mismatch
        const bits = Array.from({ length: 40 }).map((_, i) => ({
            id: i,
            size: Math.random() * 8 + 4,
            x: Math.random() * 200 - 100,
            y: Math.random() * 200 - 100,
            delay: Math.random() * 0.5,
        }));
        setPixelBits(bits);
    }, []);

    return (
        <AnimatePresence>
            {isVisible && (
                <motion.div
                    initial={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.6, ease: "easeInOut" }}
                    className="fixed inset-0 z-[9999] flex items-center justify-center bg-black overflow-hidden pointer-events-none"
                >
                    <div className="relative">
                        {/* Pixel Bits Flying Off */}
                        {pixelBits.map((bit) => (
                            <motion.div
                                key={bit.id}
                                initial={{ opacity: 0, x: 0, y: 0, scale: 0 }}
                                animate={{
                                    opacity: [0, 1, 0],
                                    x: bit.x,
                                    y: bit.y,
                                    scale: [0, 1, 0],
                                }}
                                transition={{
                                    duration: 1.5,
                                    repeat: Infinity,
                                    delay: bit.delay,
                                    ease: "easeOut"
                                }}
                                className="absolute bg-secondary/60 rounded-sm"
                                style={{
                                    width: bit.size,
                                    height: bit.size,
                                    left: '50%',
                                    top: '50%',
                                }}
                            />
                        ))}

                        {/* AAU Logo Wrapper */}
                        <motion.div
                            initial={{ scale: 0.8, opacity: 0, filter: "blur(10px)" }}
                            animate={{ scale: 1, opacity: 1, filter: "blur(0px)" }}
                            transition={{ duration: 0.8, ease: "easeOut" }}
                            className="relative z-10 flex flex-col items-center"
                        >
                            {/* SVG Recreation of AAU Shield Logo */}
                            <svg
                                width="180"
                                height="180"
                                viewBox="0 0 200 200"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                                className="drop-shadow-[0_0_15px_rgba(245,200,60,0.4)]"
                            >
                                {/* Shield Base */}
                                <motion.path
                                    d="M100 20 L40 45 V100 C40 145 100 180 100 180 C100 180 160 145 160 100 V45 L100 20Z"
                                    stroke="#F5C83C"
                                    strokeWidth="6"
                                    initial={{ pathLength: 0 }}
                                    animate={{ pathLength: 1 }}
                                    transition={{ duration: 1.5, ease: "easeInOut" }}
                                />
                                {/* AAU Letters Approximation */}
                                <motion.path
                                    d="M70 110 L85 60 L100 110 M75 95 H95"
                                    stroke="#F5C83C"
                                    strokeWidth="8"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    initial={{ opacity: 0 }}
                                    animate={{ opacity: 1 }}
                                    transition={{ delay: 0.5, duration: 0.5 }}
                                />
                                <motion.path
                                    d="M115 110 L130 60 L145 110 M120 95 H140"
                                    stroke="#F5C83C"
                                    strokeWidth="8"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    initial={{ opacity: 0 }}
                                    animate={{ opacity: 1 }}
                                    transition={{ delay: 0.7, duration: 0.5 }}
                                />
                                {/* Pen Nib */}
                                <motion.path
                                    d="M100 120 V150 L95 155 L100 145 L105 155 L100 150"
                                    stroke="#F5C83C"
                                    strokeWidth="4"
                                    fill="#F5C83C"
                                    initial={{ scale: 0 }}
                                    animate={{ scale: 1 }}
                                    transition={{ delay: 1, duration: 0.4 }}
                                />
                            </svg>

                            {/* University Name */}
                            <motion.div
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: 1.2, duration: 0.6 }}
                                className="mt-8 text-center"
                            >
                                <h2 className="text-secondary text-2xl font-display font-bold tracking-widest uppercase">
                                    Al-Jeel Al-Jadeed
                                </h2>
                                <p className="text-white/60 text-xs tracking-[0.3em] font-medium mt-2">
                                    UNIVERSITY
                                </p>
                            </motion.div>

                            {/* Glitch Overlay Effect */}
                            <motion.div
                                animate={{
                                    opacity: [0, 0.2, 0, 0.1, 0],
                                    x: [0, -5, 5, -2, 0],
                                }}
                                transition={{
                                    duration: 0.4,
                                    repeat: Infinity,
                                    repeatDelay: 2
                                }}
                                className="absolute inset-0 bg-secondary/10 blur-xl rounded-full"
                            />
                        </motion.div>
                    </div>

                    {/* Scanning Line Effect */}
                    <motion.div
                        initial={{ top: "-10%" }}
                        animate={{ top: "110%" }}
                        transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
                        className="absolute left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-secondary/30 to-transparent shadow-[0_0_15px_rgba(245,200,60,0.5)] z-20"
                    />
                </motion.div>
            )}
        </AnimatePresence>
    );
};