"use client";

import { motion, AnimatePresence } from "framer-motion";
import {
    Bot, Wand2, ImageIcon, Video, FolderGit2,
    DollarSign, Film, Zap, TrendingUp, Calendar,
    PawPrint, Users2
} from "lucide-react";

interface Props {
    sidebarOpen: boolean;
    activeTab: string;
    setActiveTab: (tab: string) => void;
    stats: { images: number; videos: number; stories: number; pets: number };
}

const navItems = [
    { id: "prompt-engineer", icon: Wand2, label: "Ingeniero IA" },
    { id: "images", icon: ImageIcon, label: "Imágenes" },
    { id: "videos", icon: Video, label: "Videos" },
    { id: "monetization", icon: DollarSign, label: "Monetización" },
    { id: "posts", icon: Calendar, label: "Publicaciones" },
    { id: "storytelling", icon: Film, label: "Storytelling" },
    { id: "automation", icon: Zap, label: "Automatización" },
    { id: "influencers", icon: Users2, label: "Influencers IA" },
    { id: "pets", icon: PawPrint, label: "Mascotas" },
    { id: "trends", icon: TrendingUp, label: "Tendencias" },
    { id: "content", icon: FolderGit2, label: "Contenido" },
];

export default function DashboardSidebar({ sidebarOpen, activeTab, setActiveTab, stats }: Props) {
    return (
        <AnimatePresence mode="wait">
            {sidebarOpen && (
                <motion.aside
                    initial={{ x: -280 }} animate={{ x: 0 }} exit={{ x: -280 }}
                    className="fixed left-0 top-0 h-full w-64 bg-slate-900/90 backdrop-blur-xl border-r border-slate-800 z-50"
                >
                    <div className="p-5">
                        <div className="flex items-center gap-3 mb-6">
                            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
                                <Bot className="h-5 w-5" />
                            </div>
                            <div>
                                <h1 className="text-lg font-bold bg-gradient-to-r from-violet-400 to-purple-400 bg-clip-text text-transparent">AI Influencer Studio</h1>
                                <p className="text-xs text-slate-400">Plataforma SaaS</p>
                            </div>
                        </div>

                        <nav className="space-y-1">
                            {navItems.map((item) => (
                                <button key={item.id} onClick={() => setActiveTab(item.id)}
                                    className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-sm ${activeTab === item.id ? "bg-violet-500/20 text-violet-400 border border-violet-500/30" : "text-slate-400 hover:bg-slate-800"}`}>
                                    <item.icon className="h-4 w-4" /><span>{item.label}</span>
                                </button>
                            ))}
                        </nav>
                    </div>

                    <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-800">
                        <div className="grid grid-cols-2 gap-2 text-center text-xs">
                            <div><p className="text-xl font-bold text-violet-400">{stats.images}</p><p className="text-slate-500">Imágenes</p></div>
                            <div><p className="text-xl font-bold text-blue-400">{stats.videos}</p><p className="text-slate-500">Videos</p></div>
                            <div><p className="text-xl font-bold text-green-400">{stats.stories}</p><p className="text-slate-500">Historias</p></div>
                            <div><p className="text-xl font-bold text-amber-400">{stats.pets}</p><p className="text-slate-500">Mascotas</p></div>
                        </div>
                    </div>
                </motion.aside>
            )}
        </AnimatePresence>
    );
}