import { useState, useEffect } 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: 'Preparing trip information...', duration: 2000 },
  { progress: 20, message: 'Creating Cappadocia route...', duration: 5000 },
  { progress: 40, message: 'Finding recommended places...', duration: 4000 },
  { progress: 60, message: 'Preparing daily itinerary...', duration: 4000 },
  { progress: 80, message: 'Saving trip details...', duration: 3000 },
  { progress: 95, message: 'Final checks...', duration: 2000 },
  { progress: 100, message: 'Your trip is ready!', duration: 1000 },
];

interface TripCreationLoadingProps {
  isVisible: boolean;
}

export function TripCreationLoading({ isVisible }: TripCreationLoadingProps) {
  const [progress, setProgress] = useState(0);
  const [currentStep, setCurrentStep] = useState('');
  const [stepIndex, setStepIndex] = useState(0);

  useEffect(() => {
    if (!isVisible) {
      setProgress(0);
      setCurrentStep('');
      setStepIndex(0);
      return;
    }

    // Start the progress simulation
    const step = CREATION_STEPS[stepIndex];
    if (!step) return;

    setProgress(step.progress);
    setCurrentStep(step.message);

    const timer = setTimeout(() => {
      if (stepIndex < CREATION_STEPS.length - 1) {
        setStepIndex(stepIndex + 1);
      }
    }, step.duration);

    return () => clearTimeout(timer);
  }, [isVisible, stepIndex]);

  if (!isVisible) return null;

  return (
    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardContent className="pt-6">
          <div className="space-y-4">
            {/* Header */}
            <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">Creating Your Trip</h3>
            </div>

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

            {/* Current Step Message */}
            <Alert>
              <AlertDescription className="text-center">
                {currentStep}
              </AlertDescription>
            </Alert>

            {/* Info Text */}
            <p className="text-xs text-center text-muted-foreground">
              This may take about 20 seconds. Please wait...
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

/**
 * Hook to manage trip creation loading state
 */
export function useTripCreationLoading() {
  const [isLoading, setIsLoading] = useState(false);

  const startLoading = () => setIsLoading(true);
  const stopLoading = () => setIsLoading(false);

  return {
    isLoading,
    startLoading,
    stopLoading,
    LoadingComponent: () => <TripCreationLoading isVisible={isLoading} />,
  };
}
