FactuGES_ERP/packages/rdx-ui/src/components/datatable/data-table-toolbar.tsx

import { Button, Separator, Tooltip, TooltipContent, TooltipTrigger } from '@repo/shadcn-ui/components'
import { cn } from '@repo/shadcn-ui/lib/utils'
import { Table } from "@tanstack/react-table"
import { ArrowDownIcon, ArrowUpIcon, CopyPlusIcon, PlusIcon, ScanIcon, TrashIcon } from 'lucide-react'
import React from 'react'
import { useTranslation } from "../../locales/i18n.ts"
import { DataTableViewOptions } from './data-table-view-options.tsx'
import { DataTableMeta } from './data-table.tsx'


interface DataTableToolbarProps<TData> {
  table: Table<TData>;
  showViewOptions?: boolean;
  className?: string;
}

export function DataTableToolbar<TData>({
  table,
  showViewOptions = true,
  className
}: DataTableToolbarProps<TData>) {
  const { t } = useTranslation();
  const meta = table.options.meta as DataTableMeta<TData> | undefined;

  const readOnly = meta?.readOnly ?? false;

  // Modelos y conteos
  const allRows = table.getFilteredRowModel().rows;
  const selectedRows = table.getSelectedRowModel().rows;
  const totalCount = allRows.length;
  const selectedCount = selectedRows.length;
  const hasSelection = selectedCount > 0;

  // Índices seleccionados (memoizado)
  const selectedIndexes = React.useMemo(
    () => selectedRows.map((r) => r.index),
    [selectedRows]
  );

  const handleAdd = React.useCallback(() => {
    if (!readOnly) meta?.tableOps?.onAdd?.(table);
  }, [meta, table, readOnly]);

  const handleDuplicateSelected = React.useCallback(() => {
    if (!readOnly) meta?.bulkOps?.duplicateSelected?.(selectedIndexes, table);
  }, [meta, selectedIndexes, table, readOnly]);

  const handleMoveSelectedUp = React.useCallback(() => {
    if (!readOnly) meta?.bulkOps?.moveSelectedUp?.(selectedIndexes, table);
  }, [meta, selectedIndexes, table, readOnly]);

  const handleMoveSelectedDown = React.useCallback(() => {
    if (!readOnly) meta?.bulkOps?.moveSelectedDown?.(selectedIndexes, table);
  }, [meta, selectedIndexes, table, readOnly]);

  const handleRemoveSelected = React.useCallback(() => {
    if (!readOnly) meta?.bulkOps?.removeSelected?.(selectedIndexes, table);
  }, [meta, selectedIndexes, table, readOnly]);

  const handleClearSelection = React.useCallback(() => {
    table.resetRowSelection();
  }, [table]);

  // Render principal
  return (
    <div
      className={cn(
        "flex items-center justify-between gap-2 py-2 bg-transparent",
        className
      )}
    >
      {/* IZQUIERDA: acciones + contador */}
      <div className="flex flex-1 items-center gap-3 flex-wrap">
        {/* Botón añadir */}
        {!readOnly && meta?.tableOps?.onAdd && (
          <Button
            className='cursor-pointer'
            type="button"
            size="sm"
            variant={'outline'}
            onClick={handleAdd}
            aria-label={t("components.datatable.actions.add")}
          >
            <PlusIcon className="size-4 mr-1" aria-hidden="true" />
            <span>{t("components.datatable.actions.add")}</span>
          </Button>
        )}

        {/* Acciones sobre selección */}
        {hasSelection && (
          <>
            <Separator orientation="vertical" className="h-5 mx-1" />

            {!readOnly && meta?.bulkOps?.duplicateSelected && (
              <Button
                className='cursor-pointer'
                type="button"
                size="sm"
                variant="outline"
                onClick={handleDuplicateSelected}
                aria-label={t("components.datatable.actions.duplicate")}
              >
                <CopyPlusIcon className="size-4 mr-1" aria-hidden="true" />
                <span>{t("components.datatable.actions.duplicate")}</span>
              </Button>
            )}

            {!readOnly && meta?.bulkOps?.moveSelectedUp && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    onClick={handleMoveSelectedUp}
                    aria-label={t("components.datatable.actions.move_up")}
                  >
                    <ArrowUpIcon className="size-4" aria-hidden="true" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  {t("components.datatable.actions.move_up")}
                </TooltipContent>
              </Tooltip>
            )}

            {!readOnly && meta?.bulkOps?.moveSelectedDown && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    onClick={handleMoveSelectedDown}
                    aria-label={t("components.datatable.actions.move_down")}
                  >
                    <ArrowDownIcon className="size-4" aria-hidden="true" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  {t("components.datatable.actions.move_down")}
                </TooltipContent>
              </Tooltip>
            )}

            {!readOnly && meta?.bulkOps?.removeSelected && (
              <>
                <Separator
                  orientation="vertical"
                  className="h-5 mx-1 w-[1px] bg-red-500/70"
                />
                <Button
                  type="button"
                  size="sm"
                  variant="destructive"
                  onClick={handleRemoveSelected}
                  aria-label={t("components.datatable.actions.remove")}
                >
                  <TrashIcon className="size-4 mr-1" aria-hidden="true" />
                  <span>{t("components.datatable.actions.remove")}</span>
                </Button>
              </>
            )}

            <Separator orientation="vertical" className="h-6 mx-1 bg-muted/50" />

            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  type="button"
                  size="sm"
                  variant="outline"
                  onClick={handleClearSelection}
                >
                  <ScanIcon className="size-4 mr-1" aria-hidden="true" />
                  <span>{t("components.datatable.actions.clear_selection")}</span>
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                {t("components.datatable.actions.clear_selection")}
              </TooltipContent>
            </Tooltip>
          </>
        )}

        {/* Contador de selección */}
        <div
          className="text-sm text-muted-foreground ml-2"
          aria-live="polite"
        >
          {hasSelection
            ? t("components.datatable.selection_summary", {
              count: selectedCount,
              total: totalCount,
            })
            : t("components.datatable.selection_none", { total: totalCount })}
        </div>
      </div>

      {/* DERECHA: opciones de vista */}
      <div className="flex items-center gap-2">
        {showViewOptions && !readOnly && <DataTableViewOptions table={table} />}
      </div>
    </div>
  );
}

export const MemoizedDataTableToolbar = React.memo(DataTableToolbar) as typeof DataTableToolbar;