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

const LoadingScreen = ({ onComplete }) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    // Cycling loading messages and colors
    const messages = [
      { text: "LOADING...", color: "#00f8f1" },
      { text: "MADE BY LUNA...", color: "#ff6b9d" },
      { text: "OCR EXTRACTOR...", color: "#4facfe" },
      { text: "LUNA POWERED...", color: "#a855f7" },
      { text: "TEXT EXTRACTION...", color: "#10b981" }
    ];
    
    let messageIndex = 0;
    const textElement = document.getElementById('loading-text');
    
    const cycleMessages = () => {
      if (textElement) {
        const currentMessage = messages[messageIndex];
        textElement.textContent = currentMessage.text;
        textElement.style.color = currentMessage.color;
        textElement.style.textShadow = `0 0 8px ${currentMessage.color}`;
        
        // Update dots color to match
        const dots = document.querySelectorAll('.dot');
        dots.forEach(dot => {
          dot.style.background = currentMessage.color;
          dot.style.boxShadow = `0 0 4px ${currentMessage.color}`;
        });
        
        messageIndex = (messageIndex + 1) % messages.length;
      }
    };
    
    // Start cycling immediately
    cycleMessages();
    const messageTimer = setInterval(cycleMessages, 800);

    // Auto-hide after 4 seconds
    const timer = setTimeout(() => {
      setIsVisible(false);
      setTimeout(() => {
        onComplete?.();
      }, 500); // Wait for fade out animation
    }, 4000);

    return () => {
      clearTimeout(timer);
      clearInterval(messageTimer);
    };
  }, [onComplete]);

  if (!isVisible) {
    return (
      <div 
        className="loading-screen"
        style={{
          opacity: 0,
          transition: 'opacity 0.5s ease',
          pointerEvents: 'none'
        }}
      />
    );
  }

  return (
    <div className="loading-screen">
      <div className="a-hole-container">
        <AHoleLoader />
      </div>
      
      {/* Pixelated loading indicator in bottom left */}
      <div className="pixelated-loading">
        <div className="loading-dots">
          <div className="dot"></div>
          <div className="dot"></div>
          <div className="dot"></div>
          <div className="dot"></div>
        </div>
        <span className="loading-text" id="loading-text">LOADING...</span>
      </div>
    </div>
  );
};

export default LoadingScreen;