'use client';

import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const PRELOAD_VIDEOS = [
  '/assets/videos/web/hero-bohrung.mp4'
];

export function InitialLoader() {
  const [isLoading, setIsLoading] = useState(true);
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
    
    // Prüfen, ob wir in dieser Session schon geladen haben
    const hasLoaded = sessionStorage.getItem('etib_initial_load');
    if (hasLoaded) {
      setIsLoading(false);
      return;
    }

    // Fallback Timeout (4 Sekunden), falls Videos hängen
    const timeout = setTimeout(() => {
      finishLoading();
    }, 4000);

    let videosLoaded = 0;
    
    const checkAllLoaded = () => {
      videosLoaded++;
      if (videosLoaded === PRELOAD_VIDEOS.length) {
        clearTimeout(timeout);
        // Kleine Verzögerung für die smootheness
        setTimeout(finishLoading, 800);
      }
    };

    PRELOAD_VIDEOS.forEach((src) => {
      const video = document.createElement('video');
      video.preload = 'auto';
      video.oncanplaythrough = checkAllLoaded;
      video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
      video.src = src;
      video.load();
    });

    // Cleanup
    return () => clearTimeout(timeout);
  }, []);

  const finishLoading = () => {
    sessionStorage.setItem('etib_initial_load', 'true');
    setIsLoading(false);
  };

  // Wir rendern serverseitig nichts blockierendes (Hydration Mismatch verhindern)
  if (!isClient) return null;

  return (
    <AnimatePresence>
      {isLoading && (
        <motion.div
          key="initial-loader"
          initial={{ y: 0 }}
          exit={{ y: '-100%' }}
          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
          className="fixed inset-0 z-[9999] bg-neutral-dark flex flex-col items-center justify-center overflow-hidden"
        >
          {/* E-TIB Premium Glow */}
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent opacity-60" />
          
          <motion.div 
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="relative z-10 flex flex-col items-center"
          >
            {/* Minimalistisches Logo oder Loader */}
            <div className="w-24 h-24 relative mb-8">
              <motion.div 
                className="absolute inset-0 border-2 border-primary/20 rounded-xl"
                animate={{ rotate: 360 }}
                transition={{ duration: 8, ease: "linear", repeat: Infinity }}
              />
              <motion.div 
                className="absolute inset-2 border-2 border-accent/40 rounded-lg"
                animate={{ rotate: -360 }}
                transition={{ duration: 6, ease: "linear", repeat: Infinity }}
              />
              <motion.div 
                className="absolute inset-4 border-2 border-white rounded-md bg-white/5 backdrop-blur-sm flex items-center justify-center"
              >
                <span className="text-white font-bold text-xl tracking-tighter">E-TIB</span>
              </motion.div>
            </div>
            
            <motion.div 
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
              className="h-1 w-48 bg-neutral-800 rounded-full overflow-hidden"
            >
              <motion.div 
                className="h-full bg-primary"
                initial={{ width: "0%" }}
                animate={{ width: "100%" }}
                transition={{ duration: 3.5, ease: [0.16, 1, 0.3, 1] }}
              />
            </motion.div>
            <motion.p 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.6 }}
              className="mt-4 text-xs text-neutral-400 font-mono tracking-widest uppercase"
            >
              Loading Infrastructure
            </motion.p>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}