"use client";

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { ArrowRight, Sparkles, Users, FileText } from 'lucide-react';

interface InputScriptStepProps {
  onNext: () => void;
}

const aiModels = [
  { id: 'gpt-4', name: 'GPT-4 Turbo', description: 'Most advanced model with superior creativity' },
  { id: 'gpt-3.5', name: 'GPT-3.5 Turbo', description: 'Fast and efficient for most tasks' },
  { id: 'claude-3', name: 'Claude 3 Opus', description: 'Excellent for narrative and storytelling' },
];

export function InputScriptStep({ onNext }: InputScriptStepProps) {
  const [script, setScript] = useState('');
  const [chapters, setChapters] = useState('4');
  const [showActorsPanel, setShowActorsPanel] = useState(false);

  const handleSubmit = () => {
    if (script.trim() && chapters) {
      onNext();
    }
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <FileText className="h-5 w-5" />
            <span>Script Input & Configuration</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <Separator />

          {/* Script Input */}
          <div className="space-y-3">
            <Label htmlFor="script" className="text-base font-medium">
              Your Script
            </Label>
            <Textarea
              id="script"
              placeholder="Paste your script here... The AI will analyze it and break it into chapters with suggested actors and scenes."
              value={script}
              onChange={(e) => setScript(e.target.value)}
              className="min-h-[200px] resize-none"
            />
            <div className="flex justify-between text-sm text-muted-foreground">
              <span>{script.length} characters</span>
              <span>Estimated reading time: {Math.ceil(script.split(' ').length / 200)} min</span>
            </div>
          </div>

          <Separator />

          {/* Chapters Configuration */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-3">
              <Label htmlFor="chapters" className="text-base font-medium">
                Number of Chapters
              </Label>
              <Input
                id="chapters"
                type="number"
                min="1"
                max="10"
                value={chapters}
                onChange={(e) => setChapters(e.target.value)}
                placeholder="4"
              />
              <p className="text-sm text-muted-foreground">
                AI will automatically split your script into this many chapters
              </p>
            </div>

            <div className="space-y-3">
              <Label className="text-base font-medium">AI Twins Reference</Label>
              <Button
                variant="outline"
                onClick={() => setShowActorsPanel(true)}
                className="w-full justify-start"
              >
                <Users className="mr-2 h-4 w-4" />
                Select Reference Actors
              </Button>
              <p className="text-sm text-muted-foreground">
                Choose existing actors or create new ones for character reference
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Action Buttons */}
      <div className="flex justify-end">
        <Button 
          onClick={handleSubmit}
          disabled={!script.trim() || !chapters}
          size="lg"
        >
          <Sparkles className="mr-2 h-4 w-4" />
          Generate Chapters
          <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
      </div>
    </div>
  );
}