"use client"

import {
  IconChartBar,
  IconDashboard,
  IconFileUpload,
  IconInnerShadowTop,
  IconSettings,
  IconUsers
} from "@tabler/icons-react"
import * as React from "react"

import { NavMain } from "@/components/layout/nav-main"
import { NavSecondary } from "@/components/layout/nav-secondary"
import { NavUser } from "@/components/layout/nav-user"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

const adminData = {
  navMain: [
    {
      title: "관리자 대시보드",
      url: "/admin",
      icon: IconDashboard,
    },
    {
      title: "파일 업로드",
      url: "/admin/upload",
      icon: IconFileUpload,
      items: [
        {
          title: "유전체 접수내역",
          url: "/admin/upload/reception",
        },
        {
          title: "분석 의뢰 목록",
          url: "/admin/upload/request-list",
        },
        {
          title: "친자확인 결과",
          url: "/admin/upload/paternity",
        },
        {
          title: "불일치 개체 목록",
          url: "/admin/upload/mismatch",
        },
        {
          title: "유전체 분석 결과",
          url: "/admin/upload/genome-result",
        },
      ],
    },
    {
      title: "농장주별 집계",
      url: "/admin/genome-mapping",
      icon: IconChartBar,
    },
    {
      title: "사용자 관리",
      url: "/admin/users",
      icon: IconUsers,
    },
  ],
  navSecondary: [
    {
      title: "설정",
      url: "/admin/settings",
      icon: IconSettings,
    },
  ],
}

export function AdminSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar collapsible="offcanvas" {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <a href="/admin">
                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                  <IconInnerShadowTop className="size-4" />
                </div>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-semibold">관리자 페이지</span>
                  <span className="truncate text-xs">Admin Panel</span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={adminData.navMain} />
        <NavSecondary items={adminData.navSecondary} className="mt-auto" />
      </SidebarContent>
      <SidebarFooter>
        <NavUser />
      </SidebarFooter>
    </Sidebar>
  )
}
