import { NavMain } from '@/components/layout/nav-main';
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
} from '@/components/ui/sidebar';
import { adminNavItems } from '@/config/admin-navigation';
import { SharedData } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import { AppLogo } from '../app-logo';

export function AdminSidebar() {
  const { auth } = usePage<SharedData>().props;
  const isSuperAdmin = auth.roles?.includes('super-admin');

  const canSee = (permission?: string) =>
    isSuperAdmin || !permission || auth.permissions?.includes(permission);

  const filteredNav = adminNavItems
    .map((group) => ({
      ...group,
      items: group.items
        .filter((item) => canSee(item.permission))
        .map((item) => ({
          ...item,
          subMenu: item.subMenu?.filter((sub) => canSee(sub.permission)),
        })),
    }))
    .filter((group) => group.items.length > 0);

  return (
    <Sidebar collapsible="icon" variant="sidebar" className="px-2">
      <SidebarHeader className="border-b border-white/10">
        <Link href={'/admin/dashboard'} prefetch>
          <AppLogo alwaysDarkLogo={true} />
        </Link>
      </SidebarHeader>

      <SidebarContent className="no-scrollbar">
        <NavMain
          items={filteredNav}
          variant="admin"
          className="border-b border-white/10 last:border-transparent"
        />
      </SidebarContent>
    </Sidebar>
  );
}