"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { ROUTES } from "@/config/constants";
import {
    LayoutDashboard,
    Key,
    FileText,
    Database,
    Users,
    Brain,
    ChevronLeft,
    ChevronRight,
    Megaphone,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { useState } from "react";

const navigation = [
    { name: "Dashboard", href: ROUTES.HOME, icon: LayoutDashboard },
    { name: "API Management", href: ROUTES.API_MANAGEMENT, icon: Key },
    { name: "Campaign Management", href: ROUTES.CAMPAIGNS, icon: Megaphone },
    { name: "CMS Content", href: ROUTES.CMS_CONTENT, icon: FileText },
    { name: "CMS Buckets", href: ROUTES.CMS_BUCKETS, icon: Database },
    { name: "Users", href: ROUTES.USERS, icon: Users },
    { name: "OpenAI", href: ROUTES.OPENAI, icon: Brain },
];

export function Sidebar() {
    const pathname = usePathname();
    const [collapsed, setCollapsed] = useState(false);

    return (
        <div
            className={cn(
                "flex h-screen flex-col border-r bg-card transition-all duration-300",
                collapsed ? "w-16" : "w-64"
            )}
        >
            <div className="flex h-16 items-center justify-between border-b px-4">
                {!collapsed && (
                    <h1 className="text-xl font-bold text-white">
                        Admin CSA
                    </h1>
                )}
                <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setCollapsed(!collapsed)}
                    className="ml-auto"
                >
                    {collapsed ? (
                        <ChevronRight className="h-4 w-4" />
                    ) : (
                        <ChevronLeft className="h-4 w-4" />
                    )}
                </Button>
            </div>

            <nav className="flex-1 space-y-1 p-2 overflow-y-auto">
                {navigation.map((item) => {
                    const isActive = pathname === item.href;
                    return (
                        <Link
                            key={item.name}
                            href={item.href}
                            className={cn(
                                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all hover:bg-accent",
                                isActive
                                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
                                    : "text-muted-foreground hover:text-foreground",
                                collapsed && "justify-center"
                            )}
                            title={collapsed ? item.name : undefined}
                        >
                            <item.icon className="h-5 w-5 flex-shrink-0" />
                            {!collapsed && <span>{item.name}</span>}
                        </Link>
                    );
                })}
            </nav>
        </div>
    );
}