"use client"

import { cn } from "@/lib/utils"
import { useEmailDropTarget } from "@/lib/drag-context"
import type { FolderTreeNode } from "@/lib/sidebar-nav-data"
import { folderSubtreeContainsId } from "@/lib/sidebar-folder-tree-utils"
import {
  navRowRoundedWhenActive,
  SidebarNavIconSlot,
  FolderTreeNavIcon,
} from "@/components/gmail/sidebar/sidebar-nav-primitives"

export function SidebarFolderButtonCollapsed({
  node,
  isExpanded,
  selectedFolder,
  folderUnreadCounts,
  onSelectFolder,
}: {
  node: FolderTreeNode
  isExpanded: boolean
  selectedFolder: string
  folderUnreadCounts: Record<string, number>
  onSelectFolder: (id: string) => void
}) {
    const { isOver, dropHandlers } = useEmailDropTarget(node.id, node.label)
    const dotClass = node.color ?? "bg-gray-400"
    const hasChildFolders = !!(node.children?.length)
    const isHighlighted = folderSubtreeContainsId(node, selectedFolder)
    const unread = folderUnreadCounts[node.id] ?? 0
    const hasUnread = unread > 0
    return (
      <button
        type="button"
        title={
          !isExpanded
            ? unread > 0
              ? `${node.label} — ${unread} non lus`
              : node.label
            : undefined
        }
        onClick={() => onSelectFolder(node.id)}
        {...dropHandlers}
        className={cn(
          "relative flex h-8 w-full min-w-0 shrink-0 cursor-pointer items-center gap-4 pl-6 pr-3 text-sm transition-colors",
          navRowRoundedWhenActive(isHighlighted || isOver),
          isHighlighted
            ? "bg-mail-nav-selected text-mail-nav-selected font-medium"
            : isOver
              ? "bg-mail-nav-drop text-foreground"
              : hasUnread
                ? "text-gray-900 hover:bg-mail-nav-hover"
                : "text-gray-700 hover:bg-mail-nav-hover"
        )}
      >
        <SidebarNavIconSlot showUnreadDot={hasUnread}>
          <FolderTreeNavIcon
            hasChildren={hasChildFolders}
            open={false}
            colorBgClass={dotClass}
          />
        </SidebarNavIconSlot>
      </button>
    )
}