'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef, useEffect } from 'react';
export function DataTable({ columns, rows, selectedIds, onSelectionChange, sortField, sortDir, onSort, rowActions, onRowClick, }) {
    const allSelected = rows.length > 0 && selectedIds.length === rows.length;
    function toggleAll() {
        onSelectionChange(allSelected ? [] : rows.map((r) => r.id));
    }
    function toggleRow(id) {
        onSelectionChange(selectedIds.includes(id) ? selectedIds.filter((s) => s !== id) : [...selectedIds, id]);
    }
    return (_jsx("div", { className: "overflow-x-auto rounded-lg border border-[var(--border)]", children: _jsxs("table", { className: "w-full text-left text-sm", children: [_jsx("thead", { className: "border-b border-[var(--border)] bg-[var(--muted)]", children: _jsxs("tr", { children: [_jsx("th", { className: "w-10 px-4 py-3", children: _jsx("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, className: "rounded border-[var(--border)]" }) }), columns.map((col) => (_jsx("th", { className: "px-4 py-3 font-medium", children: col.sortable && onSort ? (_jsxs("button", { onClick: () => onSort(col.key), className: "inline-flex items-center gap-1 hover:text-[var(--foreground)]", children: [col.label, sortField === col.key && (_jsx("span", { className: "text-xs", children: sortDir === 'asc' ? '↑' : '↓' }))] })) : (col.label) }, col.key))), rowActions && rowActions.length > 0 && _jsx("th", { className: "w-20 px-4 py-3" })] }) }), _jsx("tbody", { className: "divide-y divide-[var(--border)]", children: rows.map((row) => (_jsxs("tr", { className: `hover:bg-[var(--accent)] ${selectedIds.includes(row.id) ? 'bg-[var(--accent)]' : ''}`, onClick: () => onRowClick?.(row), style: onRowClick ? { cursor: 'pointer' } : undefined, children: [_jsx("td", { className: "px-4 py-3", onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", checked: selectedIds.includes(row.id), onChange: () => toggleRow(row.id), className: "rounded border-[var(--border)]" }) }), columns.map((col) => (_jsx("td", { className: "px-4 py-3", children: row[col.key] }, col.key))), rowActions && rowActions.length > 0 && (_jsx("td", { className: "px-4 py-3", onClick: (e) => e.stopPropagation(), children: _jsx(RowActionsMenu, { actions: rowActions, row: row }) }))] }, row.id))) })] }) }));
}
function RowActionsMenu({ actions, row }) {
    const [open, setOpen] = useState(false);
    const ref = useRef(null);
    useEffect(() => {
        if (!open)
            return;
        function handleClickOutside(e) {
            if (ref.current && !ref.current.contains(e.target)) {
                setOpen(false);
            }
        }
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, [open]);
    return (_jsxs("div", { className: "relative flex items-center justify-end gap-1", ref: ref, children: [actions
                .filter((a) => a.icon)
                .map((action) => (_jsx("button", { onClick: () => action.onClick(row), className: "rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]", "aria-label": action.label, title: action.label, children: action.icon }, action.key))), _jsx("button", { onClick: () => setOpen((o) => !o), className: "rounded p-1 hover:bg-[var(--muted)]", "aria-label": "More actions", children: _jsx(MoreVerticalIcon, {}) }), open && (_jsx("div", { className: "absolute top-full right-0 z-50 mt-1 w-40 rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg", children: actions.map((action) => (_jsxs("button", { className: `flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-[var(--accent)] ${action.destructive ? 'text-[var(--destructive)]' : ''}`, onClick: () => {
                        action.onClick(row);
                        setOpen(false);
                    }, children: [action.icon && _jsx("span", { className: "h-4 w-4", children: action.icon }), action.label] }, action.key))) }))] }));
}
function MoreVerticalIcon() {
    return (_jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v.01M12 12v.01M12 19v.01" }) }));
}
//# sourceMappingURL=DataTable.js.map