"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import {
  SidebarProvider,
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarHeader,
  SidebarInset,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { ClipboardList, Server, LayoutDashboard, LucideIcon } from "lucide-react";
import { ThemeToggle } from "@/components/theme-toggle";
import { DropdownMenuAvatar, DiscordMemberProfile } from "@/components/dropdown-menu-avatar";

interface NavItem {
  href: string;
  label: string;
  icon: LucideIcon;
  isActive: (pathname: string) => boolean;
}

const NAV_ITEMS: NavItem[] = [
  {
    href: "/admin",
    label: "Dashboard",
    icon: LayoutDashboard,
    isActive: (pathname) => pathname === "/admin",
  },
  {
    href: "/admin/form",
    label: "Form",
    icon: ClipboardList,
    isActive: (pathname) => pathname === "/admin/form",
  },
  {
    href: "/admin/backend",
    label: "Backend",
    icon: Server,
    isActive: (pathname) => pathname.startsWith("/admin/backend"),
  },
];

export function AdminShell({
  children,
  userName,
  userImage,
  profile,
}: {
  children: React.ReactNode;
  userName?: string;
  userImage?: string;
  profile?: DiscordMemberProfile | null;
}) {
  const pathname = usePathname();

  return (
    <SidebarProvider>
      <div className="flex w-full min-h-screen bg-background text-foreground">
        <Sidebar variant="sidebar" collapsible="icon">
          <SidebarHeader className="border-b border-border py-4 px-4">
            <div className="flex flex-row items-center justify-between">
              <span className="font-bold text-primary text-lg">Admin</span>
              <div className="flex items-center gap-1">
                {(userName || profile) && (
                  <DropdownMenuAvatar
                    userName={userName || ""}
                    userImage={userImage || ""}
                    profile={profile || null}
                    showName={false}
                  />
                )}
                <ThemeToggle />
              </div>
            </div>
          </SidebarHeader>

          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Navigation</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {NAV_ITEMS.map(({ href, label, icon: Icon, isActive }) => (
                    <SidebarMenuItem key={href}>
                      <SidebarMenuButton asChild isActive={isActive(pathname)}>
                        <Link href={href}>
                          <Icon className="w-4 h-4" />
                          <span>{label}</span>
                        </Link>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>

        <SidebarInset>
          <div className="md:hidden p-2">
            <SidebarTrigger />
          </div>
          {children}
        </SidebarInset>
      </div>
    </SidebarProvider>
  );
}