"use client";

import { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { Separator } from '@/components/ui/separator';
import { 
  ArrowLeft, 
  ArrowRight, 
  FileText, 
  Users, 
  Film, 
  Music, 
  Video,
  CheckCircle,
} from 'lucide-react';
import { InputScriptStep } from '@/components/workflow/input-script-step';
import { GenerateChaptersStep } from '@/components/workflow/generate-chapters-step';
import { GenerateShotsStep } from '@/components/workflow/generate-shots-step';
import { AddMusicStep } from '@/components/workflow/add-music-step';
import { FinalCompositionStep } from '@/components/workflow/final-composition-step';

const steps = [
  { id: 1, name: 'Input Script', icon: FileText, description: 'Enter your script and settings' },
  { id: 2, name: 'Generate Chapters', icon: Users, description: 'AI splits script and assigns actors' },
  { id: 3, name: 'Generate Shots', icon: Film, description: 'Create storyboard and scenes' },
  { id: 4, name: 'Add Music', icon: Music, description: 'Background music and audio' },
  { id: 5, name: 'Final Video', icon: Video, description: 'Compose and export video' },
];

export function CreateVideoWorkflow() {
  const [currentStep, setCurrentStep] = useState(1);
  const [completedSteps, setCompletedSteps] = useState<number[]>([]);

  const handleNext = () => {
    if (currentStep < steps.length) {
      setCompletedSteps([...completedSteps, currentStep]);
      setCurrentStep(currentStep + 1);
    }
  };

  const handlePrevious = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  const handleStepClick = (stepId: number) => {
    if (stepId <= currentStep || completedSteps.includes(stepId)) {
      setCurrentStep(stepId);
    }
  };

  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return <InputScriptStep onNext={handleNext} />;
      case 2:
        return <GenerateChaptersStep onNext={handleNext} onPrevious={handlePrevious} />;
      case 3:
        return <GenerateShotsStep onNext={handleNext} onPrevious={handlePrevious} />;
      case 4:
        return <AddMusicStep onNext={handleNext} onPrevious={handlePrevious} />;
      case 5:
        return <FinalCompositionStep onPrevious={handlePrevious} />;
      default:
        return null;
    }
  };

  return (
    <div className="max-w-6xl mx-auto space-y-8">
      {/* Step Content */}
      <div>
        {renderStepContent()}
      </div>
    </div>
  );
}