"use client";

import { useState } from "react";
import { ImageIcon, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { toast } from "sonner";
import { apiFetch, type Pet } from "./types";

interface Props {
    pets: Pet[];
    includePetInContent: boolean;
    setIncludePetInContent: (v: boolean) => void;
    onGenerated: () => void;
}

export default function ImagesTab({ pets, includePetInContent, setIncludePetInContent, onGenerated }: Props) {
    const [userPrompt, setUserPrompt] = useState("");
    const [imageStyle, setImageStyle] = useState("realistic");
    const [imagePlatform, setImagePlatform] = useState("general");
    const [imageLoading, setImageLoading] = useState(false);

    const handleGenerateImage = async () => {
        if (!userPrompt.trim()) { toast.error("Describe la imagen"); return; }
        setImageLoading(true);
        try {
            const result = await apiFetch("/generate/image", {
                method: "POST",
                body: JSON.stringify({
                    prompt: userPrompt,
                    platform: imagePlatform,
                    style: imageStyle,
                    includePet: includePetInContent,
                    petId: pets[0]?.id
                }),
            });
            if (result.success) {
                toast.success("Imagen generada");
                onGenerated();
            } else toast.error(result.error);
        } catch { toast.error("Error"); }
        finally { setImageLoading(false); }
    };

    return (
        <Card className="bg-slate-900/50 border-slate-800">
            <CardHeader><CardTitle className="flex items-center gap-2"><ImageIcon className="h-5 w-5 text-green-400" />Generar Imágenes</CardTitle></CardHeader>
            <CardContent className="space-y-4">
                <Textarea placeholder="Describe la imagen..." value={userPrompt} onChange={(e) => setUserPrompt(e.target.value)} className="bg-slate-800 border-slate-700" />
                <div className="grid grid-cols-3 gap-4">
                    <div>
                        <Label className="text-xs text-slate-400">Estilo</Label>
                        <Select value={imageStyle} onValueChange={setImageStyle}>
                            <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
                            <SelectContent>
                                <SelectItem value="realistic">Realista</SelectItem>
                                <SelectItem value="anime">Anime</SelectItem>
                                <SelectItem value="artistic">Artístico</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                    <div>
                        <Label className="text-xs text-slate-400">Plataforma</Label>
                        <Select value={imagePlatform} onValueChange={setImagePlatform}>
                            <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
                            <SelectContent>
                                <SelectItem value="general">General</SelectItem>
                                <SelectItem value="onlyfans">OnlyFans</SelectItem>
                                <SelectItem value="instagram">Instagram</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                </div>
                {pets.length > 0 && (
                    <div className="flex items-center gap-2">
                        <Switch checked={includePetInContent} onCheckedChange={setIncludePetInContent} />
                        <Label className="text-sm text-slate-400">Incluir mascota ({pets[0]?.name})</Label>
                    </div>
                )}
                <Button onClick={handleGenerateImage} disabled={imageLoading} className="w-full bg-green-600 hover:bg-green-700">
                    {imageLoading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <ImageIcon className="h-4 w-4 mr-2" />}Generar
                </Button>
            </CardContent>
        </Card>
    );
}