"use client";

import { useState } from "react";
import { Video, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { toast } from "sonner";
import { apiFetch } from "./types";

interface Props { onGenerated: () => void; }

export default function VideosTab({ onGenerated }: Props) {
    const [userPrompt, setUserPrompt] = useState("");
    const [loading, setLoading] = useState(false);

    const handleGenerateVideo = async () => {
        if (!userPrompt.trim()) { toast.error("Describe el video"); return; }
        setLoading(true);
        try {
            const result = await apiFetch("/generate/video", {
                method: "POST",
                body: JSON.stringify({ prompt: userPrompt }),
            });
            if (result.success) {
                toast.success("Video generado");
                onGenerated();
            } else toast.error(result.error);
        } catch { toast.error("Error"); }
        finally { setLoading(false); }
    };

    return (
        <Card className="bg-slate-900/50 border-slate-800">
            <CardHeader><CardTitle className="flex items-center gap-2"><Video className="h-5 w-5 text-blue-400" />Generar Videos</CardTitle></CardHeader>
            <CardContent className="space-y-4">
                <Textarea placeholder="Describe el video..." value={userPrompt} onChange={(e) => setUserPrompt(e.target.value)} className="bg-slate-800 border-slate-700" />
                <Button onClick={handleGenerateVideo} disabled={loading} className="w-full bg-blue-600 hover:bg-blue-700">
                    {loading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <Video className="h-4 w-4 mr-2" />}Generar Video
                </Button>
            </CardContent>
        </Card>
    );
}