Sidebar

import {
  AppSidebarProvider,
  AppSidebar,
  AppSidebarBrand,
  AppSidebarTrigger,
  AppSidebarRail,
  AppSidebarInset,
  AppSidebarHeader,
  AppSidebarContent,
  AppSidebarFooter,
  AppSidebarSeparator,
  AppSidebarInput,
  AppSidebarGroup,
  AppSidebarGroupLabel,
  AppSidebarGroupAction,
  AppSidebarGroupContent,
  AppSidebarMenu,
  AppSidebarMenuItem,
  AppSidebarMenuButton,
  AppSidebarMenuAction,
  AppSidebarMenuBadge,
  AppSidebarMenuSkeleton,
  AppSidebarMenuSub,
  AppSidebarMenuSubItem,
  AppSidebarMenuSubButton,
  useSidebar,
} from "@/components/primitives/AppSidebar"

"use client"

import * as React from "react"
import { ChevronDown } from "lucide-react"
import { cn } from "../../lib/utils"
import { WhiteLogo, WhiteSymbol } from "../../assets/logos"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu"
import { Sidebar, SidebarProvider, useSidebar, /* ... */ } from "../ui/sidebar"

export type AppSidebarBrandDropdownItem =
  | { separator: true }
  | { label: string; onClick?: () => void; icon?: React.ReactNode; disabled?: boolean }

function AppSidebarBrand({
  logo = <WhiteLogo width={90} height={28} />,
  collapsedLogo = <WhiteSymbol width={24} height={24} />,
  dropdown,
  showChevron = true,
  className,
}) {
  const { state } = useSidebar()
  const isCollapsed = state === "collapsed"

  const inner = (
    <div className="relative flex w-full items-center justify-center py-1">
      {isCollapsed
        ? collapsedLogo
        : typeof logo === "string"
          ? <span className="text-sm font-semibold text-foreground">{logo}</span>
          : logo}
      {!isCollapsed && dropdown && showChevron && (
        <ChevronDown className="absolute right-0 size-4 shrink-0 text-muted-foreground" />
      )}
    </div>
  )
  if (!dropdown || isCollapsed) {
    return <div className={cn("flex items-center px-2", className)}>{inner}</div>
  }
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className={cn("flex w-full items-center rounded-md px-2 outline-none hover:bg-sidebar-accent ...", className)}>
          {inner}
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent side="bottom" align="start" className="min-w-(--radix-dropdown-menu-trigger-width)">
        {dropdown.map((item, i) =>
          "separator" in item && item.separator
            ? <DropdownMenuSeparator key={i} />
            : <DropdownMenuItem key={i} disabled={item.disabled} onClick={item.onClick}>
                {item.icon}{item.label}
              </DropdownMenuItem>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

function AppSidebarMenuButton({ className, ...props }) {
  return (
    <SidebarMenuButton
      className={cn(
        // Remove fill on hover and CSS :active
        "hover:bg-transparent hover:text-sidebar-foreground",
        "active:bg-transparent active:text-sidebar-foreground",
        // data-active: matches ALL buttons in Tailwind v4 (attribute always present) — reset
        "data-active:bg-transparent data-active:font-normal data-active:text-sidebar-foreground",
        // Re-apply primary brand color only for isActive={true}
        "data-[active=true]:bg-primary data-[active=true]:font-medium data-[active=true]:text-primary-foreground",
        className
      )}
      {...props}
    />
  )
}

// All other App* wrappers are passthrough — see full source in the repo
export { AppSidebar, AppSidebarBrand, AppSidebarMenuButton, AppSidebarProvider, /* ... */ }