"use client"

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

import { NavMain } from "@/components/layout/nav-main"
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { useAuthStore } from "@/store/auth-store"

// 일반 사용자 메뉴
const userNavMain = [
  {
    title: "대시보드",
    url: "/dashboard",
    icon: IconDashboard,
  },
  {
    title: "개체 조회",
    url: "/cow?reset=true",
    icon: IconListDetails,
    items: [
      {
        title: "개체 목록",
        url: "/cow?reset=true",
      },
    ],
  },
]

// 관리자 메뉴
const adminNavMain = [
  {
    title: "관리자 대시보드",
    url: "/admin",
    icon: IconShieldCheck,
  },
  {
    title: "파일 업로드",
    url: "/admin/upload",
    icon: IconFileUpload,
  },
  {
    title: "농장주별 집계",
    url: "/admin/genome-mapping",
    icon: IconChartBar,
  },
  {
    title: "사용자 관리",
    url: "/admin/users",
    icon: IconUsers,
  },
]


export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const { user } = useAuthStore()

  // 관리자 여부에 따라 다른 메뉴 표시
  const isAdmin = user?.userRole === 'ADMIN'
  const navMain = isAdmin ? adminNavMain : userNavMain
  const homeUrl = isAdmin ? "/admin" : "/dashboard"

  return (
    <Sidebar collapsible="offcanvas" {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <a href={homeUrl}>
                <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">
                    {isAdmin ? "관리자 페이지" : "한우 유전체 분석"}
                  </span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={navMain} />
      </SidebarContent>
    </Sidebar>
  )
}
