"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Page, PageBody } from "@open-mercato/ui/backend/Page";
import { DataTable, withDataTableNamespaces } from "@open-mercato/ui/backend/DataTable";
import { RowActions } from "@open-mercato/ui/backend/RowActions";
import { markdownToPlainText } from "@open-mercato/ui/backend/markdown/markdownToPlainText";
import { Button } from "@open-mercato/ui/primitives/button";
import { readApiResultOrThrow, apiCall, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
import { deleteCrud } from "@open-mercato/ui/backend/utils/crud";
import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
import { flash } from "@open-mercato/ui/backend/FlashMessages";
import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
import { Pencil, Users } from "lucide-react";
import { ListEmptyState } from "@open-mercato/ui/backend/filters/ListEmptyState";
import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { formatDateTime } from "@open-mercato/shared/lib/time";
import { createLogger } from "@open-mercato/shared/lib/logger";
const logger = createLogger("staff");
const PAGE_SIZE = 50;
function StaffTeamRolesPage() {
  const t = useT();
  const router = useRouter();
  const scopeVersion = useOrganizationScopeVersion();
  const { confirm, ConfirmDialogElement } = useConfirmDialog();
  const [rows, setRows] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [total, setTotal] = React.useState(0);
  const [totalPages, setTotalPages] = React.useState(1);
  const [search, setSearch] = React.useState("");
  const [isLoading, setIsLoading] = React.useState(true);
  const [reloadToken, setReloadToken] = React.useState(0);
  const [filterValues, setFilterValues] = React.useState({});
  const [teamFilterOptions, setTeamFilterOptions] = React.useState([]);
  const labels = React.useMemo(() => ({
    title: t("staff.teamRoles.page.title", "Team roles"),
    description: t("staff.teamRoles.page.description", "Define roles that can be assigned to team members."),
    table: {
      name: t("staff.teamRoles.table.name", "Name"),
      description: t("staff.teamRoles.table.description", "Description"),
      members: t("staff.teamRoles.table.members", "Team members"),
      updatedAt: t("staff.teamRoles.table.updatedAt", "Updated"),
      empty: t("staff.teamRoles.table.empty", "No team roles yet."),
      search: t("staff.teamRoles.table.search", "Search roles...")
    },
    groups: {
      unassigned: t("staff.teamRoles.group.unassigned", "Unassigned")
    },
    filters: {
      team: t("staff.teamRoles.filters.team", "Team")
    },
    actions: {
      add: t("staff.teamRoles.actions.add", "Add team role"),
      edit: t("staff.teamRoles.actions.edit", "Edit"),
      showMembers: t("staff.teamRoles.actions.showMembers", "Show team members ({{count}})"),
      delete: t("staff.teamRoles.actions.delete", "Delete"),
      deleteConfirm: t("staff.teamRoles.actions.deleteConfirm", 'Delete team role "{{name}}"?'),
      refresh: t("staff.teamRoles.actions.refresh", "Refresh"),
      editTeam: t("staff.teams.actions.edit", "Edit")
    },
    messages: {
      deleted: t("staff.teamRoles.messages.deleted", "Team role deleted.")
    },
    errors: {
      load: t("staff.teamRoles.errors.load", "Failed to load team roles."),
      delete: t("staff.teamRoles.errors.delete", "Failed to delete team role.")
    }
  }), [t]);
  const columns = React.useMemo(() => [
    {
      accessorKey: "name",
      header: labels.table.name,
      meta: { priority: 1, sticky: true },
      cell: ({ row }) => {
        if (row.original.kind === "team") {
          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
              row.original.teamId ? /* @__PURE__ */ jsx(Users, { className: "h-4 w-4 text-muted-foreground" }) : null,
              /* @__PURE__ */ jsx("span", { className: "font-semibold", children: row.original.name })
            ] }),
            row.original.teamId ? /* @__PURE__ */ jsx(
              Button,
              {
                asChild: true,
                size: "icon",
                variant: "ghost",
                className: "h-7 w-7",
                title: labels.actions.editTeam,
                "aria-label": labels.actions.editTeam,
                children: /* @__PURE__ */ jsx(Link, { href: `/backend/staff/teams/${encodeURIComponent(row.original.teamId)}/edit`, children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }) })
              }
            ) : null
          ] });
        }
        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
          /* @__PURE__ */ jsx("span", { className: "font-medium pl-6", children: row.original.name }),
          row.original.description ? /* @__PURE__ */ jsx("span", { className: "pl-6 text-xs text-muted-foreground line-clamp-2", children: markdownToPlainText(row.original.description) }) : null
        ] });
      }
    },
    {
      accessorKey: "description",
      header: labels.table.description,
      meta: { priority: 3 },
      cell: ({ row }) => row.original.kind === "team" ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "-" }) : row.original.description ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground line-clamp-2", children: markdownToPlainText(row.original.description) }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "-" })
    },
    {
      accessorKey: "memberCount",
      header: () => /* @__PURE__ */ jsx("span", { className: "inline-block min-w-[250px]", children: labels.table.members }),
      meta: { priority: 3, maxWidth: "250px", truncate: true },
      enableSorting: false,
      cell: ({ row }) => row.original.kind === "role" ? /* @__PURE__ */ jsxs(
        Link,
        {
          className: "inline-flex min-w-[220px] items-center gap-2 text-sm text-muted-foreground hover:text-foreground",
          href: `/backend/staff/team-members?roleId=${encodeURIComponent(row.original.id)}`,
          onClick: (event) => event.stopPropagation(),
          children: [
            /* @__PURE__ */ jsx(Users, { className: "h-4 w-4", "aria-hidden": true }),
            labels.actions.showMembers.replace("{{count}}", String(row.original.memberCount))
          ]
        }
      ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "-" })
    },
    {
      accessorKey: "updatedAt",
      header: labels.table.updatedAt,
      meta: { priority: 4 },
      cell: ({ row }) => row.original.kind === "team" ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "-" }) : row.original.updatedAt ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDateTime(row.original.updatedAt) }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "-" })
    }
  ], [labels.actions.showMembers, labels.table.description, labels.table.members, labels.table.name, labels.table.updatedAt]);
  const loadTeamRoles = React.useCallback(async () => {
    setIsLoading(true);
    try {
      const params = new URLSearchParams({
        page: String(page),
        pageSize: String(PAGE_SIZE)
      });
      if (search.trim()) params.set("search", search.trim());
      if (typeof filterValues.teamId === "string" && filterValues.teamId.trim()) {
        params.set("teamId", filterValues.teamId);
      }
      const payload = await readApiResultOrThrow(
        `/api/staff/team-roles?${params.toString()}`,
        void 0,
        { errorMessage: labels.errors.load, fallback: { items: [], total: 0, totalPages: 1 } }
      );
      const items = Array.isArray(payload.items) ? payload.items : [];
      setRows(buildTeamRoleRows(items.map(mapApiTeamRole), labels.groups.unassigned));
      setTotal(typeof payload.total === "number" ? payload.total : items.length);
      setTotalPages(typeof payload.totalPages === "number" ? payload.totalPages : Math.max(1, Math.ceil(items.length / PAGE_SIZE)));
    } catch (error) {
      logger.error("staff.team-roles.list", { err: error });
      flash(labels.errors.load, "error");
    } finally {
      setIsLoading(false);
    }
  }, [filterValues.teamId, labels.errors.load, labels.groups, page, search]);
  React.useEffect(() => {
    void loadTeamRoles();
  }, [loadTeamRoles, scopeVersion, reloadToken]);
  React.useEffect(() => {
    let cancelled = false;
    async function loadFilters() {
      try {
        const params = new URLSearchParams({ page: "1", pageSize: "100" });
        const response = await apiCall(`/api/staff/teams?${params.toString()}`);
        const teamItems = Array.isArray(response.result?.items) ? response.result.items : [];
        const teams = teamItems.map((team) => {
          const id = typeof team.id === "string" ? team.id : null;
          const name = typeof team.name === "string" ? team.name : null;
          if (!id || !name) return null;
          return { value: id, label: name };
        }).filter((entry) => entry !== null);
        if (!cancelled) setTeamFilterOptions(teams);
      } catch {
        if (!cancelled) setTeamFilterOptions([]);
      }
    }
    loadFilters();
    return () => {
      cancelled = true;
    };
  }, [scopeVersion]);
  const filters = React.useMemo(() => [
    {
      id: "teamId",
      label: labels.filters.team,
      type: "select",
      options: teamFilterOptions,
      placeholder: labels.filters.team
    }
  ], [labels.filters.team, teamFilterOptions]);
  const handleSearchChange = React.useCallback((value) => {
    setSearch(value);
    setPage(1);
  }, []);
  const handleFiltersApply = React.useCallback((values) => {
    setFilterValues(values);
    setPage(1);
  }, []);
  const handleFiltersClear = React.useCallback(() => {
    setFilterValues({});
    setPage(1);
  }, []);
  const handleRefresh = React.useCallback(() => {
    setReloadToken((token) => token + 1);
  }, []);
  const handleDelete = React.useCallback(async (entry) => {
    if (entry.kind !== "role") return;
    const message = labels.actions.deleteConfirm.replace("{{name}}", entry.name);
    const confirmed = await confirm({
      title: labels.actions.delete,
      text: message,
      variant: "destructive"
    });
    if (!confirmed) return;
    try {
      const headers = buildOptimisticLockHeader(entry.updatedAt);
      await withScopedApiRequestHeaders(headers, () => deleteCrud("staff/team-roles", entry.id, { errorMessage: labels.errors.delete }));
      flash(labels.messages.deleted, "success");
      handleRefresh();
    } catch (error) {
      logger.error("staff.team-roles.delete", { err: error });
      flash(labels.errors.delete, "error");
    }
  }, [confirm, handleRefresh, labels.actions.deleteConfirm, labels.actions.delete, labels.errors.delete, labels.messages.deleted]);
  return /* @__PURE__ */ jsxs(Page, { children: [
    /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(
      DataTable,
      {
        title: labels.title,
        data: rows,
        columns,
        isLoading,
        searchValue: search,
        onSearchChange: handleSearchChange,
        searchPlaceholder: labels.table.search,
        filters,
        filterValues,
        onFiltersApply: handleFiltersApply,
        onFiltersClear: handleFiltersClear,
        emptyState: /* @__PURE__ */ jsx(
          ListEmptyState,
          {
            entityName: labels.title,
            createHref: "/backend/staff/team-roles/create",
            createLabel: labels.actions.add
          }
        ),
        actions: /* @__PURE__ */ jsx(Button, { asChild: true, size: "sm", children: /* @__PURE__ */ jsx(Link, { href: "/backend/staff/team-roles/create", children: labels.actions.add }) }),
        refreshButton: {
          label: labels.actions.refresh,
          onRefresh: handleRefresh,
          isRefreshing: isLoading
        },
        pagination: {
          page,
          pageSize: PAGE_SIZE,
          total,
          totalPages,
          onPageChange: setPage
        },
        rowActions: (row) => row.kind === "role" ? /* @__PURE__ */ jsx(
          RowActions,
          {
            items: [
              { id: "edit", label: labels.actions.edit, onSelect: () => {
                router.push(`/backend/staff/team-roles/${row.id}/edit`);
              } },
              { id: "delete", label: labels.actions.delete, destructive: true, onSelect: () => {
                void handleDelete(row);
              } }
            ]
          }
        ) : null
      }
    ) }),
    ConfirmDialogElement
  ] });
}
function mapApiTeamRole(item) {
  const id = typeof item.id === "string" ? item.id : "";
  const name = typeof item.name === "string" ? item.name : id;
  const description = typeof item.description === "string" && item.description.trim().length ? item.description.trim() : null;
  const updatedAt = typeof item.updatedAt === "string" ? item.updatedAt : typeof item.updated_at === "string" ? item.updated_at : null;
  const teamId = typeof item.teamId === "string" ? item.teamId : typeof item.team_id === "string" ? item.team_id : null;
  const team = item.team && typeof item.team === "object" ? item.team : null;
  const teamName = typeof team?.name === "string" ? team.name : null;
  const memberCount = typeof item.memberCount === "number" ? item.memberCount : 0;
  return withDataTableNamespaces({ id, name, description, updatedAt, teamId, teamName, memberCount }, item);
}
function buildTeamRoleRows(items, unassignedLabel) {
  const groups = /* @__PURE__ */ new Map();
  for (const role of items) {
    const key = role.teamId ?? "unassigned";
    const label = role.teamName ?? unassignedLabel;
    const group = groups.get(key) ?? { teamId: role.teamId ?? null, name: label, roles: [] };
    group.roles.push(role);
    groups.set(key, group);
  }
  const sortedGroups = Array.from(groups.values()).sort((a, b) => a.name.localeCompare(b.name));
  const rows = [];
  for (const group of sortedGroups) {
    rows.push({
      kind: "team",
      id: `team:${group.teamId ?? "unassigned"}`,
      teamId: group.teamId,
      name: group.name,
      description: null,
      updatedAt: null,
      memberCount: 0
    });
    const sortedRoles = [...group.roles].sort((a, b) => a.name.localeCompare(b.name));
    for (const role of sortedRoles) {
      rows.push({
        kind: "role",
        id: role.id,
        teamId: role.teamId,
        name: role.name,
        description: role.description,
        updatedAt: role.updatedAt,
        memberCount: role.memberCount
      });
    }
  }
  return rows;
}
export {
  StaffTeamRolesPage as default
};
//# sourceMappingURL=page.js.map
