// Loading Overlay Component for Trip Creation
import { useEffect, useState } from 'react';
import { Loader2 } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Alert, AlertDescription } from '@/components/ui/alert';

interface LoadingStep {
  progress: number;
  message: string;
  duration: number;
}

const CREATION_STEPS: LoadingStep[] = [
  { progress: 0, message: 'Seyahat bilgileri hazırlanıyor...', duration: 2000 },
  { progress: 20, message: 'Kapadokya rotası oluşturuluyor...', duration: 5000 },
  { progress: 40, message: 'Önerilen yerler belirleniyor...', duration: 4000 },
  { progress: 60, message: 'Günlük plan hazırlanıyor...', duration: 4000 },
  { progress: 80, message: 'Seyahat detayları kaydediliyor...', duration: 3000 },
  { progress: 95, message: 'Son kontroller yapılıyor...', duration: 2000 },
  { progress: 100, message: 'Seyahatiniz hazır!', duration: 1000 }
];

interface LoadingOverlayProps {
  isVisible: boolean;
  onComplete?: () => void;
}

export function LoadingOverlay({ isVisible, onComplete }: LoadingOverlayProps) {
  const [currentStepIndex, setCurrentStepIndex] = useState(0);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    if (!isVisible) {
      setCurrentStepIndex(0);
      setProgress(0);
      return;
    }

    let timeoutId: NodeJS.Timeout;

    const advanceStep = () => {
      if (currentStepIndex < CREATION_STEPS.length - 1) {
        const nextIndex = currentStepIndex + 1;
        setCurrentStepIndex(nextIndex);
        setProgress(CREATION_STEPS[nextIndex].progress);

        timeoutId = setTimeout(advanceStep, CREATION_STEPS[nextIndex].duration);
      } else if (onComplete) {
        onComplete();
      }
    };

    // Start first step
    setProgress(CREATION_STEPS[currentStepIndex].progress);
    timeoutId = setTimeout(advanceStep, CREATION_STEPS[currentStepIndex].duration);

    return () => {
      if (timeoutId) clearTimeout(timeoutId);
    };
  }, [isVisible, currentStepIndex, onComplete]);

  if (!isVisible) return null;

  const currentStep = CREATION_STEPS[currentStepIndex];

  return (
    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
      <Card className="w-full max-w-md mx-4">
        <CardContent className="pt-6">
          <div className="space-y-4">
            <div className="flex items-center justify-center space-x-2">
              <Loader2 className="h-6 w-6 animate-spin text-primary" />
              <h3 className="text-lg font-semibold">Seyahatiniz Oluşturuluyor</h3>
            </div>

            <div className="space-y-2">
              <Progress value={progress} className="h-2" />
              <p className="text-sm text-center text-muted-foreground">
                %{progress}
              </p>
            </div>

            <Alert>
              <AlertDescription className="text-center">
                {currentStep.message}
              </AlertDescription>
            </Alert>

            <p className="text-xs text-center text-muted-foreground">
              Bu işlem yaklaşık 20 saniye sürebilir. Lütfen bekleyin...
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
