"use client";

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

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 + Math.random() * 15;
      });
    }, 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">
        {[...Array(20)].map((_, i) => (
          <div
            key={i}
            className="absolute w-1 h-1 bg-zsl-primary/50 rounded-full animate-pulse"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 2}s`,
              animationDuration: `${2 + Math.random() * 3}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>
  );
};
