"use client"

import { ComponentProps, useMemo } from "react"
import { useLocale, useTranslations } from "next-intl"

import { Link } from "@/i18n/navigation"
import { NavDocuments } from "@/components/nav-documents"
import { NavMain } from "@/components/nav-main"
import { NavUser } from "@/components/nav-user"
import { useAuth } from "@/app/providers/auth-provider"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { getNavItemsByGroup } from "@/lib/acl-routes"
import { canSeeNavGroup } from "@/lib/auth/permissions"
import { getNavIcon } from "@/lib/nav-icons"
import { CommandIcon } from "lucide-react"

export function AppSidebar({ ...props }: ComponentProps<typeof Sidebar>) {
  const locale = useLocale()
  const dir = locale === "ar" ? "rtl" : "ltr"
  const tNav = useTranslations("Nav")
  const tApp = useTranslations("App")
  const { user, permissionType, permissions, hasPermission } = useAuth()

  const { navMain, markatty, admin, settings } = useMemo(() => {
    const groups = getNavItemsByGroup()
    const main = groups.find((g) => g.groupKey === "main")
    const markattyGroup = groups.find((g) => g.groupKey === "markatty")
    const adminGroup = groups.find((g) => g.groupKey === "admin")
    const settingsGroup = groups.find((g) => g.groupKey === "settings")

    const filterItems = (items: typeof main extends undefined ? never : NonNullable<typeof main>["items"]) =>
      items
        .filter((item) => hasPermission(item.listPermission))
        .map((item) => ({
          title: tNav(item.navKey),
          name: tNav(item.navKey),
          url: item.href,
          icon: getNavIcon(item.navKey),
        }))

    return {
      navMain: main ? filterItems(main.items).map(({ title, url, icon }) => ({ title, url, icon })) : [],
      markatty: markattyGroup
        ? filterItems(markattyGroup.items).map(({ name, url, icon }) => ({ name, url, icon }))
        : [],
      admin: adminGroup
        ? filterItems(adminGroup.items).map(({ name, url, icon }) => ({ name, url, icon }))
        : [],
      settings: settingsGroup
        ? filterItems(settingsGroup.items).map(({ name, url, icon }) => ({ name, url, icon }))
        : [],
    }
  }, [tNav, hasPermission])

  const showMarkatty = canSeeNavGroup(permissionType, permissions, "markatty")
  const showAdmin = canSeeNavGroup(permissionType, permissions, "admin")
  const showSettings = canSeeNavGroup(permissionType, permissions, "settings")

  return (
    <Sidebar collapsible="offcanvas" dir={dir} {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              asChild
              className="data-[slot=sidebar-menu-button]:p-1.5!"
            >
              <Link href="/dashboard">
                <CommandIcon className="size-5!" />
                <span className="font-semibold text-base">{tApp("name")}</span>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={navMain} />
        {showMarkatty && markatty.length > 0 ? (
          <NavDocuments items={markatty} label={tNav("markatty")} />
        ) : null}
        {showAdmin && admin.length > 0 ? (
          <NavDocuments items={admin} label={tNav("admin")} />
        ) : null}
        {/* {showSettings && settings.length > 0 ? (
          <NavDocuments items={settings} label={tNav("settings")} />
        ) : null} */}
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={user} />
      </SidebarFooter>
    </Sidebar>
  )
}