"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { SparklesIcon } from "lucide-react";

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarSeparator,
} from "@/components/ui/sidebar";
import {
  adminNavIconBySegment,
  LogIn,
} from "@/modules/_config/admin-nav-icons";
import { adminShellNavItems, ADMIN_BASE } from "@/modules/_config/admin-nav";

function isActive(pathname: string, href: string): boolean {
  if (href === ADMIN_BASE || href === `${ADMIN_BASE}/`) {
    return pathname === ADMIN_BASE || pathname === `${ADMIN_BASE}/`;
  }
  return pathname === href || pathname.startsWith(`${href}/`);
}

export function AdminAppSidebar() {
  const pathname = usePathname();

  return (
    <Sidebar collapsible="icon" variant="inset">
      <SidebarHeader className="border-b border-sidebar-border">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              render={<Link href={ADMIN_BASE} />}
              className="gap-3 px-0 hover:bg-transparent"
            >
              <SparklesIcon data-icon="inline-start" aria-hidden />
              <div className="flex flex-col items-start gap-0.5 group-data-[collapsible=icon]:hidden">
                <span className="font-semibold tracking-tight text-sidebar-foreground">
                  彩票后台
                </span>
                <span className="text-xs text-sidebar-foreground/70">
                  Lottery Admin
                </span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>工作台</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {adminShellNavItems.map((item) => {
                const Icon = adminNavIconBySegment[item.segment];
                return (
                  <SidebarMenuItem key={item.segment}>
                    <SidebarMenuButton
                      tooltip={item.label}
                      isActive={isActive(pathname, item.href)}
                      render={<Link href={item.href} />}
                    >
                      <Icon data-icon="inline-start" aria-hidden />
                      <span>{item.label}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarSeparator />
      <SidebarFooter className="border-t border-sidebar-border">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              tooltip="登录"
              render={<Link href="/admin/login" />}
            >
              <LogIn data-icon="inline-start" aria-hidden />
              <span>登录入口</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}