"use client";

import React, { useEffect, useState, useMemo } from 'react';
import { Logo } from './Logo';

// Fixed particle positions to avoid hydration mismatch
const PARTICLE_POSITIONS = [
  { left: 10, top: 15, delay: 0.2, duration: 3 },
  { left: 25, top: 80, delay: 0.5, duration: 4 },
  { left: 45, top: 30, delay: 0.8, duration: 3.5 },
  { left: 70, top: 60, delay: 1.1, duration: 4.5 },
  { left: 85, top: 20, delay: 1.4, duration: 3 },
  { left: 15, top: 50, delay: 0.3, duration: 4 },
  { left: 55, top: 85, delay: 0.6, duration: 3.5 },
  { left: 90, top: 45, delay: 0.9, duration: 4 },
  { left: 35, top: 70, delay: 1.2, duration: 3 },
  { left: 60, top: 10, delay: 1.5, duration: 4.5 },
  { left: 5, top: 90, delay: 0.4, duration: 3.5 },
  { left: 50, top: 55, delay: 0.7, duration: 4 },
  { left: 75, top: 35, delay: 1.0, duration: 3 },
  { left: 20, top: 25, delay: 1.3, duration: 4.5 },
  { left: 40, top: 95, delay: 1.6, duration: 3.5 },
  { left: 95, top: 75, delay: 0.1, duration: 4 },
  { left: 30, top: 5, delay: 1.8, duration: 3 },
  { left: 65, top: 40, delay: 0.25, duration: 4.5 },
  { left: 80, top: 65, delay: 1.7, duration: 3.5 },
  { left: 12, top: 88, delay: 1.9, duration: 4 },
];

export const LoadingScreen: React.FC = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          setTimeout(() => setIsLoading(false), 300);
          return 100;
        }
        return prev + 10;
      });
    }, 100);

    return () => clearInterval(interval);
  }, []);

  if (!isLoading) return null;

  return (
    <div className={`fixed inset-0 z-100 bg-zsl-bg flex flex-col items-center justify-center transition-opacity duration-500 ${progress >= 100 ? 'opacity-0' : 'opacity-100'}`}>
      {/* Cyber Grid Background */}
      <div className="absolute inset-0 cyber-grid opacity-20"></div>
      
      {/* Floating Particles */}
      <div className="absolute inset-0 overflow-hidden">
        {PARTICLE_POSITIONS.map((particle, i) => (
          <div
            key={i}
            className="absolute w-1 h-1 bg-zsl-primary/50 rounded-full animate-pulse"
            style={{
              left: `${particle.left}%`,
              top: `${particle.top}%`,
              animationDelay: `${particle.delay}s`,
              animationDuration: `${particle.duration}s`
            }}
          />
        ))}
      </div>

      {/* Logo with Glow Animation */}
      <div className="relative mb-8 animate-pulse">
        <div className="absolute inset-0 bg-zsl-primary/20 rounded-full blur-3xl scale-150"></div>
        <Logo size="lg" />
      </div>

      {/* Loading Text */}
      <div className="font-mono text-zsl-primary text-sm tracking-widest mb-6 uppercase">
        Sistem Başlatılıyor...
      </div>

      {/* Progress Bar */}
      <div className="w-64 h-1 bg-zsl-card rounded-full overflow-hidden">
        <div 
          className="h-full bg-linear-to-r from-zsl-primary to-zsl-accent transition-all duration-200 ease-out"
          style={{ width: `${Math.min(progress, 100)}%` }}
        />
      </div>

      {/* Progress Percentage */}
      <div className="font-mono text-xs text-zsl-muted mt-3">
        {Math.min(Math.round(progress), 100)}%
      </div>

      {/* Terminal-style Messages */}
      <div className="absolute bottom-8 left-8 font-mono text-[10px] text-zsl-muted/50 hidden md:block">
        <div className="animate-pulse">&gt; Modüller yükleniyor...</div>
        <div className="animate-pulse delay-100">&gt; Bağlantı güvenli...</div>
        <div className="animate-pulse delay-200">&gt; ZeroSixLab hazır.</div>
      </div>
    </div>
  );
};
