"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";

import { LogOut, UtensilsCrossed } from "lucide-react";

import { Button } from "@/components/ui/button";
import { APP_CONFIG } from "@/config/app-config";
import { logout, getAuthUser } from "@/lib/auth";
import { adminNavItems } from "@/navigation/admin/admin-nav-items";
import { cn } from "@/lib/utils";

export function AdminSidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const user = getAuthUser();

  return (
    <aside className="flex h-screen w-60 shrink-0 flex-col border-r bg-card">
      <div className="flex items-center gap-2 border-b px-4 py-4">
        <div className="flex size-8 items-center justify-center rounded-lg bg-violet-500/15 text-violet-600">
          <UtensilsCrossed className="size-4" />
        </div>
        <div>
          <p className="text-sm font-semibold">{APP_CONFIG.name}</p>
          <p className="text-[10px] text-muted-foreground">Super Admin</p>
        </div>
      </div>
      <nav className="flex-1 space-y-0.5 p-3">
        {adminNavItems.map((item) => {
          const isActive = item.url === "/admin" ? pathname === "/admin" : pathname.startsWith(item.url);
          return (
            <Link
              key={item.url}
              href={item.url}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
                isActive ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
            >
              <item.icon className="size-4" />
              {item.title}
            </Link>
          );
        })}
      </nav>
      <div className="border-t p-3">
        <p className="mb-2 truncate px-1 text-xs text-muted-foreground">{user?.name}</p>
        <Button variant="ghost" className="w-full justify-start" onClick={() => { logout(); router.replace("/login"); }}>
          <LogOut className="mr-2 size-4" />
          Sign out
        </Button>
      </div>
    </aside>
  );
}