import { useState, useEffect } from "react";
import { LucideIcon, Loader2, Brain, Sparkles } from "lucide-react";
import { useTranslation } from "react-i18next";

interface LoadingScreenProps {
  /** Optional single message to display under the spinner */
  message?: string;
  /** Optional array of messages to rotate through (every 2.5 seconds) */
  messages?: string[];
  /** Optional icon to display in the center of the spinner. Defaults to a generic loading icon */
  icon?: LucideIcon;
  /** Whether to show the full-screen gradient background. Defaults to true */
  fullScreen?: boolean;
  /** Show animated Brain+Sparkles icon instead of standard spinner icon. Defaults to false */
  showAnimatedIcon?: boolean;
  /** Optional subtitle to display below the main message */
  subtitle?: string;
}

/**
 * A reusable loading screen component with an animated circular spinner.
 * Used throughout the application for consistent loading states.
 *
 * Supports rotating funny messages when `messages` array is provided.
 */
export function LoadingScreen({
  message,
  messages,
  icon: Icon = Loader2,
  fullScreen = true,
  showAnimatedIcon = false,
  subtitle
}: LoadingScreenProps) {
  const { t } = useTranslation();
  const [currentMessage, setCurrentMessage] = useState<string>("");

  // Rotate through messages every 2.5 seconds
  useEffect(() => {
    if (messages && messages.length > 0) {
      // Set initial random message
      setCurrentMessage(messages[Math.floor(Math.random() * messages.length)]);

      // Rotate every 2.5 seconds
      const interval = setInterval(() => {
        setCurrentMessage(messages[Math.floor(Math.random() * messages.length)]);
      }, 2500);

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

  // Determine which message to display
  const displayMessage = messages && messages.length > 0
    ? currentMessage
    : (message || t('common.loading'));

  // Animated icon content (Brain + Sparkles + Loader)
  const animatedIconContent = (
    <div className="relative mb-6">
      <div className="w-20 h-20 rounded-full bg-gradient-to-br from-cyan-500/20 to-purple-500/20 flex items-center justify-center">
        <Brain className="w-10 h-10 text-cyan-400 animate-pulse" />
      </div>
      <Sparkles className="absolute -top-1 -right-1 w-6 h-6 text-yellow-400 animate-bounce" />
      <Loader2 className="absolute -bottom-1 -left-1 w-5 h-5 text-purple-400 animate-spin" />
    </div>
  );

  // Standard icon content (existing spinner)
  const standardIconContent = (
    <div className="relative mx-auto w-16 h-16 mb-6">
      {/* Outer static ring */}
      <div className="absolute inset-0 rounded-full border-4 border-[#52b3d0]/20"></div>
      {/* Spinning ring */}
      <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-[#52b3d0] animate-spin"></div>
      {/* Inner circle with icon */}
      <div className="absolute inset-2 rounded-full bg-[#52b3d0]/10 flex items-center justify-center">
        <Icon className="w-6 h-6 text-[#52b3d0]" />
      </div>
    </div>
  );

  const content = (
    <div className="w-full max-w-md text-center flex flex-col items-center">
      {showAnimatedIcon ? animatedIconContent : standardIconContent}
      <p className={`text-slate-400 ${messages && messages.length > 0 ? 'animate-pulse' : ''}`}>
        {displayMessage}
      </p>
      {subtitle && (
        <p className="text-sm text-slate-500 mt-2">{subtitle}</p>
      )}
      {/* Progress dots for rotating messages */}
      {messages && messages.length > 0 && (
        <div className="flex space-x-2 mt-4">
          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
        </div>
      )}
    </div>
  );

  if (fullScreen) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center px-4">
        {content}
      </div>
    );
  }

  return (
    <div className="flex items-center justify-center py-12 px-4">
      {content}
    </div>
  );
}
