import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { DataTable } from "@open-mercato/ui/backend/DataTable";
import { Button } from "@open-mercato/ui/primitives/button";
import { RowActions } from "@open-mercato/ui/backend/RowActions";
import { renderDictionaryColor, renderDictionaryIcon } from "./dictionaryAppearance.js";
function DictionaryTable({
  entries,
  loading = false,
  canManage = false,
  onCreate,
  onEdit,
  onDelete,
  onRefresh,
  translations
}) {
  const [search, setSearch] = React.useState("");
  const [sorting, setSorting] = React.useState([{ id: "value", desc: false }]);
  const [page, setPage] = React.useState(1);
  const pageSize = 50;
  const filtered = React.useMemo(() => {
    if (!search.trim()) return entries;
    const term = search.trim().toLowerCase();
    return entries.filter((entry) => {
      return entry.value.toLowerCase().includes(term) || (entry.label ?? "").toLowerCase().includes(term);
    });
  }, [entries, search]);
  const paginated = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return filtered.slice(start, start + pageSize);
  }, [filtered, page]);
  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
  const columns = React.useMemo(() => [
    {
      accessorKey: "value",
      header: translations.valueColumn,
      meta: { priority: 1 },
      cell: ({ getValue, row }) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx("span", { className: "font-medium", children: String(getValue()) }),
          row.original.isInherited ? /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground", title: translations.inheritedTooltip, children: translations.inheritedLabel }) : null
        ] }),
        typeof row.original.usageCount === "number" && row.original.usageCount > 0 && translations.usageCountLabel ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: translations.usageCountLabel.replace("{{count}}", String(row.original.usageCount)) }) : null
      ] })
    },
    {
      accessorKey: "label",
      header: translations.labelColumn,
      meta: { priority: 2 },
      cell: ({ getValue }) => /* @__PURE__ */ jsx("span", { children: String(getValue() ?? "") })
    },
    {
      id: "appearance",
      header: translations.appearanceColumn,
      meta: { priority: 3 },
      cell: ({ row }) => {
        const { color, icon } = row.original;
        if (!color && !icon) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          color ? renderDictionaryColor(color, "h-4 w-4 rounded-full border border-border") : null,
          icon ? renderDictionaryIcon(icon, "h-4 w-4") : null
        ] });
      }
    }
  ], [translations.appearanceColumn, translations.inheritedLabel, translations.inheritedTooltip, translations.labelColumn, translations.valueColumn]);
  const actions = React.useMemo(() => {
    if (!canManage || !onCreate) return null;
    return /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onCreate, children: translations.addLabel });
  }, [canManage, onCreate, translations.addLabel]);
  const handleRowClick = canManage && onEdit ? (entry) => {
    if (entry.isInherited) return;
    onEdit(entry);
  } : void 0;
  return /* @__PURE__ */ jsx(
    DataTable,
    {
      title: translations.title,
      actions,
      columns,
      data: paginated,
      embedded: true,
      sortable: true,
      sorting,
      onSortingChange: setSorting,
      searchValue: search,
      onSearchChange: (value) => {
        setSearch(value);
        setPage(1);
      },
      searchPlaceholder: translations.searchPlaceholder,
      isLoading: loading,
      emptyState: /* @__PURE__ */ jsx("p", { className: "py-10 text-center text-sm text-muted-foreground", children: translations.emptyLabel }),
      pagination: {
        page,
        pageSize,
        total: filtered.length,
        totalPages,
        onPageChange: setPage
      },
      refreshButton: onRefresh ? {
        label: translations.refreshLabel,
        onRefresh,
        isRefreshing: loading
      } : void 0,
      onRowClick: handleRowClick,
      rowActions: canManage ? (entry) => {
        if (!entry) return null;
        if (entry.isInherited) return null;
        const items = [];
        if (onEdit) {
          items.push({
            id: "edit",
            label: translations.editLabel,
            onSelect: () => onEdit(entry)
          });
        }
        if (onDelete) {
          items.push({
            id: "delete",
            label: translations.deleteLabel,
            onSelect: () => onDelete(entry),
            destructive: true
          });
        }
        return items.length ? /* @__PURE__ */ jsx(RowActions, { items }) : null;
      } : void 0
    }
  );
}
export {
  DictionaryTable
};
//# sourceMappingURL=DictionaryTable.js.map
