"use client"

import { useT } from "@/components/locale-provider"
import type { MessageKey } from "@/lib/i18n/messages"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar"
import { IconChevronRight } from "@tabler/icons-react"

export type NavItem = {
  /** A dictionary key. The word is chosen when it is drawn, not when it is listed. */
  title: MessageKey
  url: string
  icon?: React.ReactNode
  isActive?: boolean
  /**
   * How many things are waiting behind this entry. Zero and undefined both draw
   * nothing: a badge reading 0 is a badge asking to be looked at for no reason.
   */
  unread?: number
  items?: { title: MessageKey; url: string }[]
}

/**
 * One labelled group of navigation.
 *
 * An entry with sub-items collapses; an entry without is a plain link. The
 * registry version wrapped everything in a Collapsible, which gave a staff
 * member three disclosure arrows opening nothing, and the specification is
 * explicit that their sidebar holds three entries and nothing more.
 */
export function NavMain({
  label,
  items,
}: {
  label: MessageKey
  items: NavItem[]
}) {
  const t = useT()
  return (
    <SidebarGroup>
      <SidebarGroupLabel>{t(label)}</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) =>
          item.items?.length ? (
            <Collapsible
              key={t(item.title)}
              defaultOpen={item.isActive}
              className="group/collapsible"
              render={<SidebarMenuItem />}
            >
              <CollapsibleTrigger
                render={<SidebarMenuButton tooltip={t(item.title)} />}
              >
                {item.icon}
                <span>{t(item.title)}</span>
                <IconChevronRight className="ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" />
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarMenuSub>
                  {item.items.map((subItem) => (
                    <SidebarMenuSubItem key={subItem.title}>
                      <SidebarMenuSubButton render={<a href={subItem.url} />}>
                        <span>{subItem.title}</span>
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                  ))}
                </SidebarMenuSub>
              </CollapsibleContent>
            </Collapsible>
          ) : (
            <SidebarMenuItem key={t(item.title)}>
              <SidebarMenuButton
                tooltip={t(item.title)}
                isActive={item.isActive}
                render={<a href={item.url} />}
              >
                {item.icon}
                <span>{t(item.title)}</span>
              </SidebarMenuButton>
              {/*
                Outside the button and not inside it, which is where the badge
                has to be: the sidebar collapses to icons and hides everything
                after the icon, and a count that stayed inside would be drawn
                over the icon rather than hidden with the words.
              */}
              {item.unread ? (
                <SidebarMenuBadge
                  // Coloured, because the default badge is the same colour as
                  // the word beside it and a count that reads as part of the
                  // label is a count nobody notices arriving.
                  className="bg-primary text-primary-foreground"
                  aria-label={t("nav.unreadCount", { count: item.unread })}
                >
                  {item.unread}
                </SidebarMenuBadge>
              ) : null}
            </SidebarMenuItem>
          ),
        )}
      </SidebarMenu>
    </SidebarGroup>
  )
}