"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import {
  School,
  ShoppingBag,
  Users,
  LayoutDashboard,
  ClipboardList,
  Menu,
  X,
  LogOut,
  ChevronRight,
} from "lucide-react";
import { cn } from "@/lib/utils";

const NAV_ITEMS = [
  { href: "/admin", label: "Dashboard", icon: LayoutDashboard },
  { href: "/admin/fardamentos", label: "Fardamentos", icon: ShoppingBag },
  { href: "/admin/alunos", label: "Alunos", icon: Users },
  { href: "/admin/pedidos", label: "Pedidos", icon: ClipboardList },
];

export function AdminNav({ usuario }: { usuario: any }) {
  const pathname = usePathname();
  const [menuAberto, setMenuAberto] = useState(false);

  return (
    <>
      {/* Header */}
      <header className="bg-primary-800 text-white sticky top-0 z-40 shadow-md">
        <div className="max-w-7xl mx-auto px-4 h-14 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <School size={22} />
            <span className="font-bold text-lg">Admin</span>
          </div>

          {/* Desktop nav */}
          <nav className="hidden md:flex items-center gap-1">
            {NAV_ITEMS.map(({ href, label, icon: Icon }) => (
              <Link
                key={href}
                href={href}
                className={cn(
                  "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors",
                  pathname === href || (href !== "/admin" && pathname.startsWith(href))
                    ? "bg-white/20 text-white"
                    : "text-primary-100 hover:bg-white/10"
                )}
              >
                <Icon size={16} />
                {label}
              </Link>
            ))}
          </nav>

          <div className="flex items-center gap-2">
            <span className="hidden md:block text-primary-200 text-sm">
              {usuario?.name}
            </span>
            <button
              onClick={() => signOut({ callbackUrl: "/auth/login" })}
              className="hidden md:flex items-center gap-1 text-primary-200 hover:text-white text-sm"
            >
              <LogOut size={16} />
            </button>
            {/* Mobile menu button */}
            <button
              onClick={() => setMenuAberto(!menuAberto)}
              className="md:hidden p-1"
            >
              {menuAberto ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile menu overlay */}
      {menuAberto && (
        <div className="fixed inset-0 z-30 md:hidden">
          <div
            className="absolute inset-0 bg-black/50"
            onClick={() => setMenuAberto(false)}
          />
          <div className="absolute top-14 left-0 right-0 bg-white shadow-xl">
            {NAV_ITEMS.map(({ href, label, icon: Icon }) => (
              <Link
                key={href}
                href={href}
                onClick={() => setMenuAberto(false)}
                className={cn(
                  "flex items-center justify-between px-4 py-3.5 border-b border-gray-100",
                  pathname === href || (href !== "/admin" && pathname.startsWith(href))
                    ? "text-primary-700 bg-primary-50"
                    : "text-gray-700"
                )}
              >
                <div className="flex items-center gap-3">
                  <Icon size={20} />
                  <span className="font-medium">{label}</span>
                </div>
                <ChevronRight size={18} className="text-gray-400" />
              </Link>
            ))}
            <button
              onClick={() => signOut({ callbackUrl: "/auth/login" })}
              className="flex items-center gap-3 px-4 py-3.5 text-red-600 w-full"
            >
              <LogOut size={20} />
              <span className="font-medium">Sair</span>
            </button>
          </div>
        </div>
      )}
    </>
  );
}