"use client"

import { ChevronDown, Columns3, Loader2, RefreshCw } from "lucide-react"
import type { Column, Table } from "@tanstack/react-table"
import type { ReactNode } from "react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { TABLE_TOOLBAR_BTN_OUTLINE } from "@/components/shared/table-ui"

export type DataTableToolbarProps<TRow> = {
  table: Table<TRow>
  isRefreshing?: boolean
  onRefresh: () => void
  /** Extra buttons/links rendered between the columns toggle and Refresh. */
  extraActions?: ReactNode
  /** Show the "Toggle columns" dropdown. Defaults to true. */
  showToggleColumns?: boolean
  /** Show the Refresh button. Defaults to true. */
  showRefresh?: boolean
  /** Which columns may be hidden. Defaults to getCanHide() && id !== "actions". */
  isColumnHideable?: (column: Column<TRow, unknown>) => boolean
  /** Display label for a column id. Defaults to the column id itself. */
  getColumnLabel?: (columnId: string) => ReactNode
}

/**
 * Shared "toggle columns + refresh (+ extra actions)" list-page toolbar.
 * Extracted from the near-identical trash/emails/deepdex toolbars.
 */
export function DataTableToolbar<TRow>({
  table,
  isRefreshing,
  onRefresh,
  extraActions,
  showToggleColumns = true,
  showRefresh = true,
  isColumnHideable = (col) => col.getCanHide() && col.id !== "actions",
  getColumnLabel = (id) => id,
}: DataTableToolbarProps<TRow>) {
  const hideableColumns = table.getAllColumns().filter(isColumnHideable)

  return (
    <div className="flex flex-wrap items-center gap-2 sm:justify-end">
      {showToggleColumns ? (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button {...TABLE_TOOLBAR_BTN_OUTLINE}>
              <Columns3 className="size-4" />
              Toggle columns
              <ChevronDown className="size-4 opacity-70" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            {hideableColumns.length ? (
              hideableColumns.map((column) => (
                <DropdownMenuCheckboxItem
                  key={column.id}
                  checked={column.getIsVisible()}
                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
                >
                  {getColumnLabel(column.id)}
                </DropdownMenuCheckboxItem>
              ))
            ) : (
              <div className="px-2 py-1.5 text-sm text-muted-foreground">
                No hideable columns
              </div>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      ) : null}

      {extraActions}

      {showRefresh ? (
        <Button {...TABLE_TOOLBAR_BTN_OUTLINE} onClick={onRefresh} disabled={isRefreshing}>
          {isRefreshing ? (
            <Loader2 className="size-4 animate-spin" />
          ) : (
            <RefreshCw className="size-4" />
          )}
          Refresh
        </Button>
      ) : null}
    </div>
  )
}