"use client";

import { useState } from "react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { useAuth } from "@/hooks/use-auth";
import {
  LayoutDashboardIcon,
  CalendarIcon,
  ImageIcon,
  // FolderIcon,
  SettingsIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  HistoryIcon,
  MedalIcon,
} from "lucide-react";

export default function AdminSidebar() {
  const pathname = usePathname();
  const { user, logoutMutation } = useAuth();
  const [collapsed, setCollapsed] = useState(false);

  const logout = async () => {
    await logoutMutation.mutateAsync();
  };

  const NavItem = ({
    href,
    icon,
    label,
    notification,
  }: {
    href: string;
    icon: React.ReactNode;
    label: string;
    notification?: number;
  }) => {
    const isActive = pathname === href;

    return (
      <Link href={href}>
        <Button
          className={cn(
            "flex items-center justify-items-start justify-start w-full px-4 py-2 rounded-lg transition-all duration-150 bg-transparent",
            isActive
              ? "bg-indigo-600 text-white shadow-inner"
              : "text-white/80 hover:bg-white/10 hover:text-white"
          )}
        >
          <span className="mr-3 text-lg">{icon}</span>
          {!collapsed && (
            <>
              <span className="font-medium">{label}</span>
              {notification && (
                <span className="ml-auto text-xs bg-pink-600 rounded-full px-2 py-0.5 text-white">
                  {notification}
                </span>
              )}
            </>
          )}
        </Button>
      </Link>
    );
  };

  const NavSection = ({
    title,
    children,
  }: {
    title: string;
    children: React.ReactNode;
  }) => (
    <div>
      {!collapsed && (
        <div className="px-4 py-2 text-xs text-white/50 font-semibold uppercase tracking-wider">
          {title}
        </div>
      )}
      {children}
    </div>
  );

  return (
    <div
      className={cn(
        "flex flex-col h-full transition-all duration-300 text-white shadow-md",
        "bg-gradient-to-b from-gray-950 via-indigo-900 to-gray-950",
        collapsed ? "w-16" : "w-64"
      )}
    >
      {/* Header */}
      <div className="p-4 border-b border-white/10 flex items-center justify-between">
        {!collapsed && (
          <div>
            <h1 className="text-lg font-bold tracking-wide">Badagry</h1>
            <p className="text-xs text-white/70">Admin Panel</p>
          </div>
        )}
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setCollapsed(!collapsed)}
          className="text-white/70 hover:bg-white/10"
        >
          {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
        </Button>
      </div>

      {/* Navigation */}
      <div className="flex-1 overflow-y-auto py-4 space-y-6">
        <NavSection title="Content Management">
          <NavItem
            href="/dashboard"
            label="Dashboard"
            icon={<LayoutDashboardIcon />}
          />
          <NavItem
            href="/dashboard/bookings"
            label="Bookings"
            icon={<CalendarIcon />}
          />
          <NavItem
            href="/dashboard/gallery"
            label="Gallery"
            icon={<ImageIcon />}
          />
          <NavItem
            href="/dashboard/history"
            label="History"
            icon={<HistoryIcon />}
          />
          <NavItem
            href="/dashboard/social"
            label="Social"
            icon={<MedalIcon />}
          />
          {/* <NavItem
            href="/dashboard/media"
            label="Media Library"
            icon={<FolderIcon />}
          /> */}
        </NavSection>

        <NavSection title="Settings">
          <NavItem
            href="/dashboard/settings"
            label="Account Settings"
            icon={<SettingsIcon />}
          />
        </NavSection>
      </div>

      {/* Footer */}
      <div className="p-4 border-t border-white/10">
        <div className="flex items-center">
          <div className="h-9 w-9 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center font-bold text-white">
            {user?.fullName?.[0] ?? "U"}
          </div>
          {!collapsed && (
            <div className="ml-3">
              <p className="text-sm font-medium">
                {user?.fullName ?? "Museum Admin"}
              </p>
              <Button
                variant="link"
                size="sm"
                className="text-xs text-white/70 hover:text-white p-0 h-auto"
                onClick={logout}
              >
                Sign Out
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
