"use client"

import { useCallback, useState } from "react"
import { DriveFileContextMenu } from "@/components/drive/drive-file-context-menu"
import { DriveFileMenuButton } from "@/components/drive/drive-file-actions-menu"
import type { useDriveMutations } from "@/lib/api/hooks/use-drive-queries"
import type { PublicShareThumbContext } from "@/lib/api/hooks/use-public-share-preview-thumb"
import { DriveFileTypeIcon } from "@/lib/drive/drive-file-icon"
import type { DriveFileInfo } from "@/lib/api/types"
import { displayFileName } from "@/lib/drive/display-file-name"
import { cn } from "@/lib/utils"

const FOLDER_TITLE_CLASS =
  "min-w-0 flex-1 truncate text-sm font-medium text-[#3c4043] dark:text-[#e8eaed]"

export function DriveFolderGridCard({
  folder,
  allItems,
  inSharedView,
  isSelected,
  isTrash,
  allowShare = true,
  writable = true,
  hideFavorite = false,
  disableDnd = false,
  mutations,
  onDownloadItem,
  publicShare,
  onOpen,
  onItemClick,
  registerRef,
}: {
  folder: DriveFileInfo
  allItems: DriveFileInfo[]
  inSharedView?: boolean
  isSelected: boolean
  isTrash?: boolean
  allowShare?: boolean
  writable?: boolean
  hideFavorite?: boolean
  disableDnd?: boolean
  mutations?: ReturnType<typeof useDriveMutations>
  onDownloadItem?: (file: DriveFileInfo) => void
  publicShare?: PublicShareThumbContext
  onOpen: () => void
  onItemClick: (file: DriveFileInfo, e: React.MouseEvent) => void
  registerRef?: (path: string, el: HTMLDivElement | null) => void
}) {
  const [menuActive, setMenuActive] = useState(false)
  const [contextMenuActive, setContextMenuActive] = useState(false)
  const label = displayFileName(folder.name)
  const highlighted = isSelected || menuActive || contextMenuActive

  const setRef = useCallback(
    (el: HTMLDivElement | null) => registerRef?.(folder.path, el),
    [folder.path, registerRef]
  )

  return (
    <DriveFileContextMenu
      file={folder}
      allItems={allItems}
      isTrash={isTrash}
      allowShare={allowShare}
      writable={writable}
      hideFavorite={hideFavorite}
      disableDnd={disableDnd}
      mutations={mutations}
      onDownloadRequest={onDownloadItem ? () => onDownloadItem(folder) : undefined}
      onOpen={onOpen}
      variant="grid"
      registerRef={registerRef ? setRef : undefined}
      onItemClick={onItemClick}
      onContextMenuActiveChange={setContextMenuActive}
      className={cn(
        "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-xl px-3 py-3 transition-colors",
        highlighted
          ? "bg-[#c2e7ff] dark:bg-primary/25"
          : "bg-[#f8f9fa] hover:bg-[#f1f3f4] dark:bg-muted/30 dark:hover:bg-muted/45"
      )}
    >
      <div className="flex min-w-0 flex-1 items-center gap-3 text-left">
        <DriveFileTypeIcon file={folder} inSharedView={inSharedView} size="md" />
        <span className={FOLDER_TITLE_CLASS} title={label}>
          {label}
        </span>
      </div>
      <DriveFileMenuButton
        file={folder}
        allItems={allItems}
        isTrash={isTrash}
        allowShare={allowShare}
        writable={writable}
        hideFavorite={hideFavorite}
        mutations={mutations}
        onDownloadRequest={onDownloadItem ? () => onDownloadItem(folder) : undefined}
        onOpen={onOpen}
        onActiveChange={setMenuActive}
      />
    </DriveFileContextMenu>
  )
}