"use client";

import { useState } from "react";
import { Calendar } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { apiFetch, getStatusColor, type Post } from "./types";

interface Props { posts: Post[]; onCreated: () => void; }

export default function PostsTab({ posts, onCreated }: Props) {
    const [postTitle, setPostTitle] = useState("");
    const [postType, setPostType] = useState("reel");
    const [postCaption, setPostCaption] = useState("");
    const [scheduledTime, setScheduledTime] = useState("");

    const handleCreatePost = async () => {
        if (!postTitle.trim()) { toast.error("Añade un título"); return; }
        try {
            const result = await apiFetch("/posts", {
                method: "POST",
                body: JSON.stringify({
                    title: postTitle, type: postType, caption: postCaption,
                    scheduledAt: scheduledTime || null, autoGenerateCaption: true,
                }),
            });
            if (result.success) {
                toast.success(scheduledTime ? "Post programado" : "Post creado");
                setPostTitle(""); setPostCaption(""); setScheduledTime("");
                onCreated();
            } else toast.error(result.error);
        } catch { toast.error("Error"); }
    };

    return (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card className="bg-slate-900/50 border-slate-800">
                <CardHeader><CardTitle className="flex items-center gap-2"><Calendar className="h-5 w-5 text-blue-400" />Crear Publicación</CardTitle></CardHeader>
                <CardContent className="space-y-4">
                    <Input placeholder="Título" value={postTitle} onChange={(e) => setPostTitle(e.target.value)} className="bg-slate-800 border-slate-700" />
                    <Textarea placeholder="Caption..." value={postCaption} onChange={(e) => setPostCaption(e.target.value)} className="bg-slate-800 border-slate-700 min-h-20" />
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <Label className="text-xs text-slate-400">Tipo</Label>
                            <Select value={postType} onValueChange={setPostType}>
                                <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="reel">Reel</SelectItem>
                                    <SelectItem value="photo">Foto</SelectItem>
                                    <SelectItem value="carousel">Carrusel</SelectItem>
                                    <SelectItem value="story">Story</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                        <div>
                            <Label className="text-xs text-slate-400">Programar</Label>
                            <Input type="datetime-local" value={scheduledTime} onChange={(e) => setScheduledTime(e.target.value)} className="bg-slate-800 border-slate-700 mt-1" />
                        </div>
                    </div>
                    <Button onClick={handleCreatePost} className="w-full bg-blue-600 hover:bg-blue-700">
                        <Calendar className="h-4 w-4 mr-2" />{scheduledTime ? "Programar" : "Crear"}
                    </Button>
                </CardContent>
            </Card>

            <Card className="bg-slate-900/50 border-slate-800">
                <CardHeader><CardTitle>Publicaciones</CardTitle></CardHeader>
                <CardContent>
                    <ScrollArea className="h-64">
                        {posts.length === 0 ? (
                            <p className="text-slate-400 text-center py-8">No hay publicaciones</p>
                        ) : (
                            <div className="space-y-2">
                                {posts.map((p) => (
                                    <div key={p.id} className="p-3 rounded-lg bg-slate-800/50 flex items-center justify-between">
                                        <div>
                                            <p className="font-medium text-sm">{p.title || "Sin título"}</p>
                                            <p className="text-xs text-slate-400">{p.type} • {p.scheduledAt ? new Date(p.scheduledAt).toLocaleString() : "Borrador"}</p>
                                        </div>
                                        <Badge className={getStatusColor(p.status)}>{p.status}</Badge>
                                    </div>
                                ))}
                            </div>
                        )}
                    </ScrollArea>
                </CardContent>
            </Card>
        </div>
    );
}