erika/components/admin-shell.tsx

"use client";

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

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

const NAV_GROUPS: { label: string; items: NavItem[] }[] = [
  {
    label: "Workspace",
    items: [
      {
        href: "/admin",
        label: "Home",
        icon: House,
        isActive: (pathname) => pathname === "/admin",
      },
      {
        href: "/admin/form",
        label: "Forms",
        icon: ClipboardList,
        isActive: (pathname) => pathname.startsWith("/admin/form"),
      },
    ],
  },
  {
    label: "Operations",
    items: [
      {
        href: "/admin/backend",
        label: "Backend",
        icon: Server,
        isActive: (pathname) => pathname.startsWith("/admin/backend"),
      },
      {
        href: "/admin/upload",
        label: "Upload",
        icon: Upload,
        isActive: (pathname) => pathname.startsWith("/admin/upload"),
        disabled: true,
      },
    ],
  },
  {
    label: "Platform access",
    items: [
      {
        href: "/admin/login",
        label: "Login",
        icon: KeyRound,
        isActive: (pathname) => pathname.startsWith("/admin/login"),
      },
    ],
  },
];

export function AdminShell({
  children,
  userName,
  userImage,
  profile,
  healthStatus,
}: {
  children: React.ReactNode;
  userName?: string;
  userImage?: string;
  profile?: DiscordMemberProfile | null;
  healthStatus?: React.ReactNode;
}) {
  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">
            <Link href="/admin">
            <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>
            </Link>
          </SidebarHeader>

          <SidebarContent>
            {healthStatus}
            {NAV_GROUPS.map((group) => (
              <SidebarGroup key={group.label}>
                <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {group.items.map(({ href, label, icon: Icon, isActive, disabled }) => (
                      <SidebarMenuItem key={href}>
                        {disabled ? (
                          <SidebarMenuButton disabled tooltip={`${label} temporarily disabled`}>
                            <Icon />
                            <span>{label}</span>
                          </SidebarMenuButton>
                        ) : (
                          <SidebarMenuButton
                            asChild
                            isActive={isActive(pathname)}
                            tooltip={label}
                          >
                            <Link href={href}>
                              <Icon />
                              <span>{label}</span>
                            </Link>
                          </SidebarMenuButton>
                        )}
                      </SidebarMenuItem>
                    ))}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            ))}
          </SidebarContent>
        </Sidebar>

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