"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { flexRender } from "@tanstack/react-table";
import { cn } from "@stigmer/theme";
import { ColumnHeader } from "./ColumnHeader";
import { SelectionCheckbox } from "./SelectionCheckbox";
/**
 * Table view for the resource workbench.
 *
 * Renders a semantic `<table>` element using column definitions and
 * data from a TanStack Table instance. Supports sortable column
 * headers, row selection checkboxes, per-row action menus, and
 * keyboard-navigable rows.
 *
 * This component renders **only the table**. Search, filters, view
 * switching, and pagination are handled by the parent `ResourceWorkbench`.
 *
 * @example
 * ```tsx
 * const { table } = useResourceCollection({ ... });
 * <ResourceTable
 *   table={table}
 *   enableSelection
 *   renderRowAction={(item) => <AgentActionMenu item={item} />}
 *   onRowClick={(item) => navigate(item.slug)}
 * />
 * ```
 */
export function ResourceTable({ table, enableSelection = false, renderRowAction, onRowClick, "aria-label": ariaLabel = "Resources", className, }) {
    const headerGroups = table.getHeaderGroups();
    const rows = table.getRowModel().rows;
    const allSelected = table.getIsAllRowsSelected();
    const someSelected = table.getIsSomeRowsSelected();
    return (_jsx("div", { className: cn("overflow-x-auto", className), children: _jsxs("table", { role: "table", "aria-label": ariaLabel, className: "w-full border-collapse text-sm", children: [_jsx("thead", { children: headerGroups.map((headerGroup) => (_jsxs("tr", { className: "border-b border-border", children: [enableSelection && (_jsx("th", { scope: "col", className: "w-10 px-3 py-2", children: _jsx(SelectionCheckbox, { checked: allSelected, indeterminate: someSelected && !allSelected, onChange: table.getToggleAllRowsSelectedHandler()
                                        ? () => table.toggleAllRowsSelected(!allSelected)
                                        : () => { }, "aria-label": allSelected
                                        ? "Deselect all rows"
                                        : "Select all rows" }) })), headerGroup.headers.map((header) => {
                                const canSort = header.column.getCanSort();
                                const sorted = header.column.getIsSorted();
                                const direction = sorted === "asc"
                                    ? "asc"
                                    : sorted === "desc"
                                        ? "desc"
                                        : null;
                                return (_jsx(ColumnHeader, { label: typeof header.column.columnDef.header === "string"
                                        ? header.column.columnDef.header
                                        : header.id, sortable: canSort, sortDirection: direction, onSort: canSort
                                        ? () => header.column.toggleSorting()
                                        : undefined }, header.id));
                            }), renderRowAction && (_jsx("th", { scope: "col", className: "w-10 px-3 py-2", children: _jsx("span", { className: "sr-only", children: "Actions" }) }))] }, headerGroup.id))) }), _jsx("tbody", { children: rows.map((row) => (_jsx(TableRow, { row: row, enableSelection: enableSelection, renderRowAction: renderRowAction, onRowClick: onRowClick }, row.id))) })] }) }));
}
// ---------------------------------------------------------------------------
// Internal: Table row
// ---------------------------------------------------------------------------
function TableRow({ row, enableSelection, renderRowAction, onRowClick, }) {
    const isSelected = row.getIsSelected();
    const item = row.original;
    const isClickable = !!onRowClick;
    return (_jsxs("tr", { className: cn("border-b border-border-muted transition-colors", isSelected && "bg-primary-subtle", isClickable && "cursor-pointer hover:bg-accent-hover"), onClick: isClickable
            ? (e) => {
                // Don't trigger row click when interacting with controls
                const target = e.target;
                if (target.closest("button") ||
                    target.closest("input") ||
                    target.closest("[role='menu']") ||
                    target.closest("[role='menuitem']")) {
                    return;
                }
                onRowClick(item);
            }
            : undefined, "aria-selected": enableSelection ? isSelected : undefined, children: [enableSelection && (_jsx("td", { className: "w-10 px-3 py-2", children: _jsx(SelectionCheckbox, { checked: isSelected, onChange: () => row.toggleSelected(), "aria-label": `Select row ${row.id}` }) })), row.getVisibleCells().map((cell) => (_jsx("td", { className: "px-3 py-2 text-sm text-foreground", style: {
                    minWidth: cell.column.columnDef.minSize
                        ? `${cell.column.columnDef.minSize}px`
                        : undefined,
                }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))), renderRowAction && (_jsx("td", { className: "w-10 px-3 py-2 text-right", children: renderRowAction(item) }))] }));
}
//# sourceMappingURL=ResourceTable.js.map