import { jsx as e, jsxs as t, Fragment as Ye } from "react/jsx-runtime";
import Te, { useState as d, useMemo as te, useCallback as y, createRef as Ze, useEffect as Ue } from "react";
import { useParams as er, useNavigate as rr, Link as je } from "react-router-dom";
import { useTranslation as Be } from "react-i18next";
import { x as tr, D as ar, I as sr, J as lr, v as w, P as Re } from "./index-CeEMms9z.js";
import { U as nr } from "./UnderlinedTabs-BEbz4Kre.js";
import { Loader2 as g, AlertCircle as Ee, Check as Ge, Info as or, Star as ir, Eye as Pe, Ban as cr, ChevronRight as Ie, ChevronDown as Me, FolderOpen as dr, Database as mr, FileText as ur, Box as vr, Play as pr, UserPlus as xr, Trash2 as Ne, Edit as br, Plus as we, Shield as de, Settings as hr, Users as gr, UsersRound as Oe, Languages as fr, AlertTriangle as yr, CheckCircle as Nr, Lock as wr, Save as Cr, X as Ae, Search as ze, Edit2 as Dr } from "lucide-react";
import { g as kr } from "./groupsApi-DfNkt7nG.js";
import { a as Sr, c as Rr, g as Ar, b as Tr, P as Pr, d as $r } from "./PermissionPopover-CzuQmLbY.js";
const Lr = {
  "*": /* @__PURE__ */ e(de, { className: "h-3 w-3" }),
  read: /* @__PURE__ */ e(Pe, { className: "h-3 w-3" }),
  create: /* @__PURE__ */ e(we, { className: "h-3 w-3" }),
  update: /* @__PURE__ */ e(br, { className: "h-3 w-3" }),
  delete: /* @__PURE__ */ e(Ne, { className: "h-3 w-3" }),
  assign: /* @__PURE__ */ e(xr, { className: "h-3 w-3" }),
  execute: /* @__PURE__ */ e(pr, { className: "h-3 w-3" })
}, Fr = {
  "*": "bg-[var(--accent-bg)] text-[var(--accent-text)] border-[var(--accent-border)]",
  read: "bg-[var(--info-bg)] text-[var(--info-text)] border-[var(--info-border)]",
  create: "bg-[var(--success-bg)] text-[var(--success-text)] border-[var(--success-border)]",
  update: "bg-[var(--warning-bg)] text-[var(--warning-text)] border-[var(--warning-border)]",
  delete: "bg-[var(--error-bg)] text-[var(--error-text)] border-[var(--error-border)]",
  assign: "bg-[var(--accent-bg)] text-[var(--accent-text)] border-[var(--accent-border)]",
  execute: "bg-[var(--warning-bg)] text-[var(--warning-text)] border-[var(--warning-border)]"
};
function Ur(a, l, h) {
  return a.filter((c) => l === "all" || c.application === l).map((c) => ({
    ...c,
    modules: c.modules.filter((A) => h === "all" || A.module.moduleLabel === h)
  })).filter((c) => c.modules.length > 0);
}
function jr(a, l, h) {
  return a.map((c) => ({
    ...c,
    modules: c.modules.filter((A) => {
      const { status: F } = h(A);
      return l.has(F);
    })
  })).filter((c) => c.modules.length > 0);
}
function Er({
  section: a,
  resources: l,
  moduleIndex: h,
  sectionIndex: c,
  collapsedSections: A,
  renderResourceRow: F
}) {
  const M = l.length > 0, O = A.has(a.id);
  return /* @__PURE__ */ t(Te.Fragment, { children: [
    F(a, h + c + 1, "section", M, O),
    M && !O && l.map(
      (H, m) => F(H, h + c + m + 2, "resource", !1, !1)
    )
  ] }, a.id);
}
function Gr({ roleId: a }) {
  const { t: l } = Be("admin"), { user: h } = tr(), { collapsedApps: c, toggleApp: A } = ar(), [F, M] = d(/* @__PURE__ */ new Set()), [O, H] = d(/* @__PURE__ */ new Set()), [m, me] = d(/* @__PURE__ */ new Set()), [ae, p] = d(null), [U, C] = d("all"), [x, T] = d("all"), se = te(() => h ? sr(h.permissions) : !1, [h]), {
    loading: Ce,
    error: ue,
    roles: D,
    filteredResources: _,
    hasChanges: q,
    saving: j,
    saveSuccess: le,
    saveError: K,
    togglePermission: b,
    resetChanges: k,
    getPermissionInheritance: S
  } = lr({ canEditSystemRoles: se }), u = te(() => D.find((s) => s.id === a), [D, a]), P = te(() => !(!u || u.isSystem && !se), [u, se]), E = (s) => {
    me((i) => {
      const n = new Set(i);
      return n.has(s) ? n.delete(s) : n.add(s), n;
    });
  }, J = y((s) => {
    M((i) => {
      const n = new Set(i);
      return n.has(s) ? n.delete(s) : n.add(s), n;
    });
  }, []), V = y((s) => {
    H((i) => {
      const n = new Set(i);
      return n.has(s) ? n.delete(s) : n.add(s), n;
    });
  }, []), ve = te(() => {
    const s = [], i = [];
    return _.forEach((n) => {
      if (n.level === "module") {
        const v = n.applicationLabel;
        s.find((f) => f.app === v) || s.push({
          app: n.applicationLabel,
          label: n.applicationLabel
        }), i.push({
          app: n.applicationLabel,
          module: n.moduleLabel,
          label: n.moduleLabel
        });
      }
    }), {
      applications: s.sort((n, v) => n.label.localeCompare(v.label)),
      modules: i.sort((n, v) => n.label.localeCompare(v.label))
    };
  }, [_]), X = y((s) => {
    !u || !P || b(u.id, s);
  }, [u, P, b]), Q = y((s) => {
    if (!u) return !1;
    const i = S(u.id, s);
    return i.isDirect || i.isInherited;
  }, [u, S]), pe = y((s) => Sr(
    s.module,
    s.sections,
    Q
  ), [Q]), De = y((s) => Rr(s, Q), [Q]), xe = y((s) => u ? s.permissions.filter((i) => {
    const n = S(u.id, i.id);
    return n.isDirect || n.isInherited;
  }).map((i) => i.action) : [], [u, S]), z = y((s) => Ur(s, U, x), [U, x]), ne = y((s) => m.size === 0 ? s : jr(s, m, pe), [m, pe]), $ = te(() => {
    let s = Ar(_);
    return s = z(s), s = ne(s), s;
  }, [_, z, ne]), Y = te(() => $.reduce((s, i) => s + i.modules.length, 0), [$]), be = y((s, i) => {
    i === "module" ? J(s) : i === "section" && V(s);
  }, [J, V]), he = (s) => {
    p(ae === s ? null : s);
  };
  if (Ce)
    return /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ t("div", { className: "text-center", children: [
      /* @__PURE__ */ e(g, { className: "h-8 w-8 animate-spin text-[var(--color-accent-500)] mx-auto mb-4" }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: l("userPermissions.loading") })
    ] }) });
  if (ue)
    return /* @__PURE__ */ e("div", { className: "p-4 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)]", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ e(Ee, { className: "h-5 w-5 text-[var(--error-text)]" }),
      /* @__PURE__ */ e("p", { className: "text-[var(--error-text)]", children: ue })
    ] }) });
  if (!u)
    return /* @__PURE__ */ e("div", { className: "text-center py-12 text-[var(--text-secondary)]", children: l("roleDetail.notFound") });
  const ge = (s) => s === "resource" ? /* @__PURE__ */ e(mr, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" }) : s === "section" ? /* @__PURE__ */ e(ur, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" }) : /* @__PURE__ */ e(vr, { className: "h-3.5 w-3.5 text-[var(--text-secondary)]" }), fe = (s) => s === "resource" ? "text-[var(--text-muted)] italic" : s === "section" ? "text-[var(--text-secondary)]" : "font-medium text-[var(--text-primary)]", ke = (s) => s === "resource" ? "pl-28" : s === "section" ? "pl-22" : "pl-16", Z = (s, i, n, v) => s ? /* @__PURE__ */ e(
    "button",
    {
      onClick: () => be(i, n),
      className: "p-0.5 hover:bg-[var(--bg-hover)] rounded",
      children: v ? /* @__PURE__ */ e(Ie, { className: "h-3 w-3 text-[var(--text-muted)]" }) : /* @__PURE__ */ e(Me, { className: "h-3 w-3 text-[var(--text-muted)]" })
    }
  ) : null, Se = (s) => s.length === 0 ? /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)] italic", children: l("assignments.noPermissions") }) : s.map((i) => {
    const n = Fr[i] || "bg-[var(--bg-secondary)] text-[var(--text-secondary)] border-[var(--border-color)]", v = Lr[i] || /* @__PURE__ */ e(Pe, { className: "h-3 w-3" });
    return /* @__PURE__ */ t(
      "div",
      {
        className: `inline-flex items-center gap-1.5 px-2 py-0.5 rounded-[var(--radius-badge)] border text-xs font-medium ${n}`,
        title: l(`assignments.actions.${i === "*" ? "all" : i}.description`),
        children: [
          v,
          /* @__PURE__ */ e("span", { className: "capitalize", children: l(`assignments.actions.${i === "*" ? "all" : i}.label`) })
        ]
      },
      i
    );
  }), ye = (s, i, n, v = !1, f = !1) => {
    const { status: R, grantedCount: G } = De(s), I = ae === s.id, W = Ze(), ee = Tr(R), N = xe(s), re = ke(n), L = i % 2 === 0 ? "item-light" : "item-medium";
    return /* @__PURE__ */ t(
      "tr",
      {
        className: `hover:bg-[var(--bg-hover)] ${L}`,
        children: [
          /* @__PURE__ */ e(
            "td",
            {
              className: `sticky left-0 z-10 ${L} px-3 py-2 ${re}`,
              style: { width: "280px", minWidth: "280px", maxWidth: "280px" },
              children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
                Z(v, s.id, n, f),
                ge(n),
                /* @__PURE__ */ e("span", { className: `text-sm ${fe(n)}`, children: s.moduleLabel }),
                /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-muted)]", children: [
                  "(",
                  s.permissions.length,
                  ")"
                ] })
              ] })
            }
          ),
          /* @__PURE__ */ t(
            "td",
            {
              className: `px-0 py-1 text-center relative ${ee}`,
              style: { width: "60px", minWidth: "60px", maxWidth: "60px" },
              children: [
                /* @__PURE__ */ e(
                  "button",
                  {
                    ref: W,
                    type: "button",
                    onClick: () => P && he(s.id),
                    disabled: !P,
                    className: `w-full h-full min-h-[36px] flex items-center justify-center rounded transition-colors ${P ? "hover:opacity-80" : "cursor-not-allowed opacity-50"} ${I ? "ring-2 ring-[var(--color-accent-500)]" : ""}`,
                    title: P ? `${u.name} - ${s.moduleLabel}: ${G}/${s.permissions.length}` : `${u.name} - ${l("assignments.systemRoleReadOnly")}`,
                    children: /* @__PURE__ */ e(
                      Pr,
                      {
                        status: R,
                        grantedCount: G,
                        totalCount: s.permissions.length
                      }
                    )
                  }
                ),
                I && P && /* @__PURE__ */ e(
                  $r,
                  {
                    mode: "editable",
                    role: u,
                    resource: s,
                    onTogglePermission: X,
                    onClose: () => p(null),
                    getPermissionInheritance: ($e, oe) => S(u.id, oe)
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: Se(N) }) })
        ]
      },
      s.id
    );
  };
  return /* @__PURE__ */ t("div", { className: "space-y-4", children: [
    /* @__PURE__ */ t("div", { className: "min-h-[52px]", children: [
      le && /* @__PURE__ */ e("div", { className: "flex items-center justify-between p-3 rounded-[var(--radius-card)] bg-[var(--success-bg)] border border-[var(--success-border)]", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e(Ge, { className: "h-4 w-4 text-[var(--success-text)]" }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--success-text)] font-medium", children: l("common.savedSuccessfully") })
      ] }) }),
      !le && (q || j) && /* @__PURE__ */ t("div", { className: "flex items-center p-3 rounded-[var(--radius-card)] bg-[var(--warning-bg)] border border-[var(--warning-border)]", children: [
        j ? /* @__PURE__ */ e(g, { className: "h-4 w-4 text-[var(--warning-dot)] animate-spin" }) : /* @__PURE__ */ e(or, { className: "h-4 w-4 text-[var(--warning-dot)]" }),
        /* @__PURE__ */ e("p", { className: "ml-2 text-sm text-[var(--warning-text)]", children: l(j ? "assignments.saving" : "assignments.autoSaveActive") }),
        !j && /* @__PURE__ */ e(
          "button",
          {
            type: "button",
            onClick: k,
            className: "ml-auto text-sm text-[var(--warning-text)] hover:opacity-80 font-medium",
            children: l("assignments.discardChanges")
          }
        )
      ] }),
      !le && !j && !q && /* @__PURE__ */ e("div", { className: "h-[52px]" })
    ] }),
    K && /* @__PURE__ */ e("div", { className: "p-3 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)]", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ e(Ee, { className: "h-4 w-4 text-[var(--error-text)]" }),
      /* @__PURE__ */ e("p", { className: "text-sm text-[var(--error-text)]", children: K })
    ] }) }),
    /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-4", children: [
      /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ t("label", { className: "text-sm text-[var(--text-secondary)]", children: [
          l("userPermissions.filters.application"),
          ":"
        ] }),
        /* @__PURE__ */ t(
          "select",
          {
            value: U,
            onChange: (s) => {
              C(s.target.value), T("all");
            },
            className: "px-3 py-1.5 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-[var(--radius-input)] text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-accent-500)]",
            children: [
              /* @__PURE__ */ e("option", { value: "all", children: l("userPermissions.filters.allApplications") }),
              ve.applications.map((s) => /* @__PURE__ */ e("option", { value: s.app, children: s.label }, s.app))
            ]
          }
        )
      ] }),
      /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ t("label", { className: "text-sm text-[var(--text-secondary)]", children: [
          l("userPermissions.filters.module"),
          ":"
        ] }),
        /* @__PURE__ */ t(
          "select",
          {
            value: x,
            onChange: (s) => T(s.target.value),
            className: "px-3 py-1.5 text-sm bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-[var(--radius-input)] text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-accent-500)]",
            children: [
              /* @__PURE__ */ e("option", { value: "all", children: l("userPermissions.filters.allModules") }),
              ve.modules.filter(
                (s) => U === "all" || s.app === U
              ).map((s) => /* @__PURE__ */ e("option", { value: s.module, children: s.label }, `${s.app}:${s.module}`))
            ]
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-3", children: [
      /* @__PURE__ */ t("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: [
        l("userPermissions.filterByStatus"),
        ":"
      ] }),
      /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-2", children: [
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => E("all"),
            className: `inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border transition-colors ${m.has("all") ? "bg-[var(--success-bg)] border-[var(--success-border)] text-[var(--success-text)]" : "bg-[var(--bg-tertiary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--success-border)]"}`,
            children: [
              /* @__PURE__ */ e(Ge, { className: `h-3.5 w-3.5 ${m.has("all") ? "" : "text-[var(--success-dot)]"}` }),
              l("assignments.complete")
            ]
          }
        ),
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => E("some"),
            className: `inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border transition-colors ${m.has("some") ? "bg-[var(--warning-bg)] border-[var(--warning-border)] text-[var(--warning-text)]" : "bg-[var(--bg-tertiary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--warning-border)]"}`,
            children: [
              /* @__PURE__ */ e(ir, { className: `h-3.5 w-3.5 ${m.has("some") ? "" : "text-[var(--warning-dot)]"}` }),
              l("assignments.partial")
            ]
          }
        ),
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => E("read-only"),
            className: `inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border transition-colors ${m.has("read-only") ? "bg-[var(--info-bg)] border-[var(--info-border)] text-[var(--info-text)]" : "bg-[var(--bg-tertiary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--info-border)]"}`,
            children: [
              /* @__PURE__ */ e(Pe, { className: `h-3.5 w-3.5 ${m.has("read-only") ? "" : "text-[var(--info-dot)]"}` }),
              l("assignments.readOnly")
            ]
          }
        ),
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => E("none"),
            className: `inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full border transition-colors ${m.has("none") ? "bg-[var(--error-bg)] border-[var(--error-border)] text-[var(--error-text)]" : "bg-[var(--bg-tertiary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--error-border)]"}`,
            children: [
              /* @__PURE__ */ e(cr, { className: `h-3.5 w-3.5 ${m.has("none") ? "" : "text-[var(--text-muted)]"}` }),
              l("assignments.none")
            ]
          }
        )
      ] }),
      m.size > 0 && /* @__PURE__ */ e(
        "button",
        {
          onClick: () => me(/* @__PURE__ */ new Set()),
          className: "text-xs text-[var(--color-accent-500)] hover:text-[var(--color-accent-600)] underline",
          children: l("assignments.clearFilters")
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ t("span", { className: "px-2.5 py-1 text-xs font-semibold rounded-full bg-[var(--bg-tertiary)] text-[var(--text-secondary)]", children: [
      Y,
      " ",
      l("assignments.modules")
    ] }) }),
    /* @__PURE__ */ e("div", { className: "overflow-x-auto overflow-y-visible", children: /* @__PURE__ */ t("table", { className: "border-collapse", style: { width: "auto" }, children: [
      /* @__PURE__ */ e("thead", { className: "item-medium border-b border-[var(--item-color-border)]", children: /* @__PURE__ */ t("tr", { children: [
        /* @__PURE__ */ e(
          "th",
          {
            scope: "col",
            className: "sticky left-0 z-20 item-medium px-3 text-left text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider",
            style: { width: "280px", minWidth: "280px", maxWidth: "280px", height: "48px", verticalAlign: "middle" },
            children: l("assignments.resource")
          }
        ),
        /* @__PURE__ */ e(
          "th",
          {
            scope: "col",
            className: "px-2 text-center text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider",
            style: { width: "60px", minWidth: "60px", maxWidth: "60px", height: "48px", verticalAlign: "middle" },
            children: l("userPermissions.status")
          }
        ),
        /* @__PURE__ */ e(
          "th",
          {
            scope: "col",
            className: "px-3 text-left text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider",
            style: { height: "48px", verticalAlign: "middle" },
            children: l("assignments.permissions")
          }
        )
      ] }) }),
      /* @__PURE__ */ e("tbody", { className: "divide-y divide-[var(--item-color-border)]", children: $.map((s) => {
        const i = s.application, n = c.has(i);
        return /* @__PURE__ */ t(Te.Fragment, { children: [
          /* @__PURE__ */ t("tr", { className: "bg-[var(--bg-tertiary)]", children: [
            /* @__PURE__ */ e(
              "td",
              {
                className: "sticky left-0 z-10 px-3 py-2 bg-[var(--bg-tertiary)]",
                style: { width: "280px", minWidth: "280px", maxWidth: "280px" },
                children: /* @__PURE__ */ t(
                  "button",
                  {
                    onClick: () => A(i),
                    className: "flex items-center gap-3 w-full text-left hover:opacity-80",
                    children: [
                      n ? /* @__PURE__ */ e(Ie, { className: "h-4 w-4 text-[var(--text-secondary)]" }) : /* @__PURE__ */ e(Me, { className: "h-4 w-4 text-[var(--text-secondary)]" }),
                      /* @__PURE__ */ e(dr, { className: "h-4 w-4 text-[var(--text-secondary)]" }),
                      /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: s.application }),
                      /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-muted)] ml-auto", children: [
                        s.modules.length,
                        " module",
                        s.modules.length > 1 ? "s" : ""
                      ] })
                    ]
                  }
                )
              }
            ),
            /* @__PURE__ */ e("td", { className: "px-0 py-2" }),
            /* @__PURE__ */ e("td", { className: "px-0 py-2" })
          ] }),
          !n && s.modules.map((v, f) => {
            const { module: R, sections: G } = v, I = G.length > 0, W = F.has(R.id);
            return /* @__PURE__ */ t(Te.Fragment, { children: [
              ye(R, f, "module", I, W),
              I && !W && G.map((ee, N) => {
                const { section: re, resources: L } = ee;
                return /* @__PURE__ */ e(
                  Er,
                  {
                    section: re,
                    resources: L,
                    moduleIndex: f,
                    sectionIndex: N,
                    collapsedSections: O,
                    renderResourceRow: ye
                  },
                  re.id
                );
              })
            ] }, R.id);
          })
        ] }, i);
      }) })
    ] }) }),
    Y === 0 && /* @__PURE__ */ e("div", { className: "text-center py-12 text-[var(--text-secondary)]", children: l("assignments.noResources") })
  ] });
}
const We = [
  { code: "fr", label: "Français" },
  { code: "en", label: "English" },
  { code: "it", label: "Italiano" },
  { code: "de", label: "Deutsch" }
];
function Kr() {
  const { t: a } = Be("admin"), { id: l } = er(), h = rr(), [c, A] = d(null), [F, M] = d(!0), [O, H] = d(!1), [m, me] = d("info"), [ae, p] = d(null), [U, C] = d(null), [x, T] = d({
    name: "",
    shortName: "",
    category: "Custom",
    description: "",
    parentRoleId: null
  }), [se, Ce] = d([]), ue = ["Global", "Admin", "Manager", "Contributor", "Viewer", "Custom"], [D, _] = d([]), [q, j] = d(!1), [le, K] = d(null), [b, k] = d({
    name: "",
    shortName: "",
    description: ""
  }), [S, u] = d(!1), [P, E] = d(!1), [J, V] = d(""), [ve, X] = d(!1), [Q, pe] = d([]), [De, xe] = d(!1), [z, ne] = d(""), [$, Y] = d(null), [be, he] = d(!1), [ge, fe] = d(null), [ke, Z] = d(!1), [Se, ye] = d([]), [s, i] = d(!1), [n, v] = d(""), [f, R] = d(null), [G, I] = d(!1), [W, ee] = d(null), N = y(async () => {
    if (l)
      try {
        M(!0);
        const [r, o] = await Promise.all([
          w.roles.getById(l),
          w.roles.getAll()
        ]);
        A(r), Ce(o.filter((ie) => ie.id !== l)), T({
          name: r.name,
          shortName: r.shortName,
          category: r.category,
          description: r.description || "",
          parentRoleId: r.parentRoleId
        });
      } catch (r) {
        console.error("Failed to load role:", r), p(a("roleDetail.errors.loadFailed"));
      } finally {
        M(!1);
      }
  }, [l, a]);
  Ue(() => {
    N();
  }, [N]);
  const re = async (r) => {
    if (r.preventDefault(), !(!l || !c)) {
      H(!0), p(null), C(null);
      try {
        const o = {
          name: x.name,
          shortName: x.shortName,
          category: x.category,
          description: x.description || void 0,
          parentRoleId: x.parentRoleId || void 0
        };
        await w.roles.update(l, o), C(a("roleDetail.success.saved")), N();
      } catch (o) {
        p(o instanceof Error ? o.message : a("roleDetail.errors.saveFailed"));
      } finally {
        H(!1);
      }
    }
  }, L = y(async () => {
    if (l) {
      j(!0);
      try {
        const r = await w.roles.getTranslations(l);
        _(r);
      } catch (r) {
        console.error("Failed to load translations:", r);
      } finally {
        j(!1);
      }
    }
  }, [l]);
  Ue(() => {
    m === "translations" && D.length === 0 && L();
  }, [m, D.length, L]);
  const $e = (r) => {
    K(r.languageCode), k({
      name: r.name,
      shortName: r.shortName,
      description: r.description || ""
    });
  }, oe = () => {
    K(null), E(!1), k({ name: "", shortName: "", description: "" }), V("");
  }, Le = async (r) => {
    if (l) {
      u(!0), p(null);
      try {
        await w.roles.upsertTranslation(l, r, b), C(a("roleDetail.translations.saved")), K(null), E(!1), V(""), L();
      } catch (o) {
        p(o instanceof Error ? o.message : a("roleDetail.errors.saveFailed"));
      } finally {
        u(!1);
      }
    }
  }, He = async (r) => {
    if (l && confirm(a("roleDetail.translations.confirmDelete")))
      try {
        await w.roles.deleteTranslation(l, r), C(a("roleDetail.translations.deleted")), L();
      } catch (o) {
        p(o instanceof Error ? o.message : a("roleDetail.errors.saveFailed"));
      }
  }, Fe = We.filter(
    (r) => !D.some((o) => o.languageCode === r.code)
  ), _e = async () => {
    X(!0), Y(null), ne(""), xe(!0);
    try {
      const r = await w.users.getAll({ globalScope: !0 });
      pe(r.items);
    } catch (r) {
      console.error("Failed to load users:", r);
    } finally {
      xe(!1);
    }
  }, qe = async () => {
    if (!(!l || !$)) {
      he(!0);
      try {
        await w.roles.assignUser(l, $), X(!1), Y(null), C(a("roleDetail.users.assigned")), N();
      } catch (r) {
        p(r instanceof Error ? r.message : a("roleDetail.errors.assignFailed"));
      } finally {
        he(!1);
      }
    }
  }, Ke = async (r) => {
    if (l && confirm(a("roleDetail.users.confirmRemove"))) {
      fe(r);
      try {
        await w.roles.removeUser(l, r), C(a("roleDetail.users.removed")), N();
      } catch (o) {
        p(o instanceof Error ? o.message : a("roleDetail.errors.removeFailed"));
      } finally {
        fe(null);
      }
    }
  }, Je = async () => {
    Z(!0), R(null), v(""), i(!0);
    try {
      const r = await kr.getAll();
      ye(r);
    } catch (r) {
      console.error("Failed to load groups:", r);
    } finally {
      i(!1);
    }
  }, Ve = async () => {
    if (!(!l || !f)) {
      I(!0);
      try {
        await w.roles.assignGroup(l, f), Z(!1), R(null), C(a("roleDetail.groups.assigned")), N();
      } catch (r) {
        p(r instanceof Error ? r.message : a("roleDetail.errors.assignFailed"));
      } finally {
        I(!1);
      }
    }
  }, Xe = async (r) => {
    if (l && confirm(a("roleDetail.groups.confirmRemove"))) {
      ee(r);
      try {
        await w.roles.removeGroup(l, r), C(a("roleDetail.groups.removed")), N();
      } catch (o) {
        p(o instanceof Error ? o.message : a("roleDetail.errors.removeFailed"));
      } finally {
        ee(null);
      }
    }
  }, Qe = [
    { id: "info", label: a("roleDetail.tabs.info"), icon: /* @__PURE__ */ e(hr, { className: "w-4 h-4" }) },
    { id: "permissions", label: a("roleDetail.tabs.permissions"), icon: /* @__PURE__ */ e(de, { className: "w-4 h-4" }) },
    { id: "users", label: a("roleDetail.tabs.users"), icon: /* @__PURE__ */ e(gr, { className: "w-4 h-4" }) },
    { id: "groups", label: a("roleDetail.tabs.groups"), icon: /* @__PURE__ */ e(Oe, { className: "w-4 h-4" }) },
    { id: "translations", label: a("roleDetail.tabs.translations"), icon: /* @__PURE__ */ e(fr, { className: "w-4 h-4" }) }
  ];
  return F ? /* @__PURE__ */ e(
    Re,
    {
      title: a("roles.title", "Roles"),
      breadcrumbs: [
        { label: a("header.title"), href: "/administration" },
        { label: a("roles.title", "Roles"), href: "/administration/permissions/roles" }
      ],
      icon: /* @__PURE__ */ e(de, { className: "h-6 w-6" }),
      children: /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ e(g, { className: "w-8 h-8 animate-spin text-[var(--color-accent-500)]" }) })
    }
  ) : c ? /* @__PURE__ */ t(
    Re,
    {
      title: c.name,
      subtitle: c.description,
      icon: /* @__PURE__ */ e(de, { className: "h-6 w-6" }),
      breadcrumbs: [
        { label: a("header.title"), href: "/administration" },
        { label: a("roles.title", "Roles"), href: "/administration/permissions/roles" },
        { label: c?.name || "Detail" }
      ],
      children: [
        ae && /* @__PURE__ */ t("div", { className: "p-4 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)] text-[var(--error-text)] flex items-center gap-2", children: [
          /* @__PURE__ */ e(yr, { className: "w-5 h-5 flex-shrink-0" }),
          ae
        ] }),
        U && /* @__PURE__ */ t("div", { className: "p-4 rounded-[var(--radius-card)] bg-[var(--success-bg)] border border-[var(--success-border)] text-[var(--success-text)] flex items-center gap-2", children: [
          /* @__PURE__ */ e(Nr, { className: "w-5 h-5 flex-shrink-0" }),
          U
        ] }),
        /* @__PURE__ */ e(
          nr,
          {
            tabs: Qe.map((r) => ({
              id: r.id,
              icon: r.icon,
              label: /* @__PURE__ */ e("span", { className: "hidden sm:inline", children: r.label })
            })),
            activeTab: m,
            onTabChange: me,
            ariaLabel: a("roleDetail.tabs.label", "Onglets du rôle")
          }
        ),
        /* @__PURE__ */ t(
          "div",
          {
            role: "tabpanel",
            id: `tabpanel-${m}`,
            "aria-labelledby": `tab-${m}`,
            children: [
              m === "info" && /* @__PURE__ */ t("form", { onSubmit: re, className: "space-y-6 max-w-2xl", children: [
                /* @__PURE__ */ t("div", { children: [
                  /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.info.id") }),
                  /* @__PURE__ */ e("div", { className: "px-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] font-mono text-sm", children: c.id })
                ] }),
                /* @__PURE__ */ t("div", { children: [
                  /* @__PURE__ */ t("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: [
                    a("roles.form.name"),
                    " *"
                  ] }),
                  /* @__PURE__ */ e(
                    "input",
                    {
                      type: "text",
                      required: !0,
                      value: x.name,
                      onChange: (r) => T((o) => ({ ...o, name: r.target.value })),
                      className: "w-full px-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]"
                    }
                  )
                ] }),
                /* @__PURE__ */ t("div", { children: [
                  /* @__PURE__ */ t("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: [
                    a("roleDetail.info.shortName"),
                    " *"
                  ] }),
                  /* @__PURE__ */ e(
                    "input",
                    {
                      type: "text",
                      required: !0,
                      value: x.shortName,
                      onChange: (r) => T((o) => ({ ...o, shortName: r.target.value })),
                      className: "w-full px-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]"
                    }
                  ),
                  /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: a("roleDetail.info.shortNameHelp") })
                ] }),
                /* @__PURE__ */ t("div", { children: [
                  /* @__PURE__ */ t("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: [
                    a("roleDetail.info.category"),
                    " *"
                  ] }),
                  /* @__PURE__ */ e(
                    "select",
                    {
                      value: x.category,
                      onChange: (r) => T((o) => ({ ...o, category: r.target.value })),
                      className: "w-full px-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]",
                      children: ue.map((r) => /* @__PURE__ */ e("option", { value: r, children: a(`roleDetail.categories.${r.toLowerCase()}`) }, r))
                    }
                  ),
                  /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: a("roleDetail.info.categoryHelp") })
                ] }),
                /* @__PURE__ */ t("div", { children: [
                  /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.info.parentRole") }),
                  /* @__PURE__ */ t(
                    "select",
                    {
                      value: x.parentRoleId || "",
                      onChange: (r) => T((o) => ({ ...o, parentRoleId: r.target.value || null })),
                      className: "w-full px-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]",
                      children: [
                        /* @__PURE__ */ e("option", { value: "", children: a("roleDetail.info.noParent") }),
                        se.map((r) => /* @__PURE__ */ t("option", { value: r.id, children: [
                          r.name,
                          " (",
                          a(`roleDetail.categories.${r.category.toLowerCase()}`),
                          ")"
                        ] }, r.id))
                      ]
                    }
                  ),
                  /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: a("roleDetail.info.parentRoleHelp") })
                ] }),
                /* @__PURE__ */ t("div", { children: [
                  /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roles.form.description") }),
                  /* @__PURE__ */ e(
                    "textarea",
                    {
                      value: x.description,
                      onChange: (r) => T((o) => ({ ...o, description: r.target.value })),
                      rows: 3,
                      className: "w-full px-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)] resize-none"
                    }
                  )
                ] }),
                /* @__PURE__ */ t("div", { children: [
                  /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.info.systemRole") }),
                  /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: c.isSystem ? /* @__PURE__ */ t("span", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-badge)] text-sm bg-[var(--warning-bg)] text-[var(--warning-text)] border border-[var(--warning-border)]", children: [
                    /* @__PURE__ */ e(wr, { className: "w-4 h-4" }),
                    a("roleDetail.info.isSystemRole")
                  ] }) : /* @__PURE__ */ e("span", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-badge)] text-sm bg-[var(--bg-tertiary)] text-[var(--text-secondary)]", children: a("roleDetail.info.isCustomRole") }) })
                ] }),
                /* @__PURE__ */ t("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4 border-t border-[var(--border-color)]", children: [
                  /* @__PURE__ */ t("div", { children: [
                    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.createdAt") }),
                    /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-primary)]", children: new Date(c.createdAt).toLocaleString() })
                  ] }),
                  c.updatedAt && /* @__PURE__ */ t("div", { children: [
                    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.updatedAt") }),
                    /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-primary)]", children: new Date(c.updatedAt).toLocaleString() })
                  ] })
                ] }),
                /* @__PURE__ */ e("div", { className: "flex justify-end pt-4", children: /* @__PURE__ */ t(
                  "button",
                  {
                    type: "submit",
                    disabled: O,
                    className: "flex items-center gap-2 px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] hover:bg-[var(--color-accent-700)] text-white font-medium transition-colors disabled:opacity-50",
                    children: [
                      O ? /* @__PURE__ */ e(g, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(Cr, { className: "w-4 h-4" }),
                      a("common.save")
                    ]
                  }
                ) })
              ] }),
              m === "permissions" && l && /* @__PURE__ */ e(Gr, { roleId: l }),
              m === "groups" && /* @__PURE__ */ t("div", { className: "space-y-4", children: [
                /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                  /* @__PURE__ */ t("h3", { className: "text-lg font-semibold text-[var(--text-primary)]", children: [
                    a("roleDetail.groups.title"),
                    " (",
                    c.groups?.length || 0,
                    ")"
                  ] }),
                  /* @__PURE__ */ t(
                    "button",
                    {
                      onClick: Je,
                      className: "flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] hover:bg-[var(--color-accent-700)] text-white text-sm font-medium transition-colors",
                      children: [
                        /* @__PURE__ */ e(we, { className: "w-4 h-4" }),
                        a("roleDetail.groups.add")
                      ]
                    }
                  )
                ] }),
                !c.groups || c.groups.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-12 text-[var(--text-secondary)]", children: a("roleDetail.groups.noGroups") }) : /* @__PURE__ */ e("div", { className: "grid gap-3", children: c.groups.map((r) => /* @__PURE__ */ t(
                  "div",
                  {
                    className: "flex items-center gap-4 p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]",
                    children: [
                      /* @__PURE__ */ t(
                        je,
                        {
                          to: `/administration/users/groups/${r.id}`,
                          className: "flex items-center gap-4 flex-1 min-w-0 hover:opacity-80 transition-opacity",
                          children: [
                            /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-[var(--color-accent-100)] flex items-center justify-center", children: /* @__PURE__ */ e(Oe, { className: "w-5 h-5 text-[var(--color-accent-700)]" }) }),
                            /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
                              /* @__PURE__ */ e("div", { className: "font-medium text-[var(--text-primary)] truncate", children: r.name }),
                              /* @__PURE__ */ t("div", { className: "text-sm text-[var(--text-secondary)] truncate", children: [
                                r.membersCount,
                                " ",
                                a("roleDetail.groups.members"),
                                r.description && ` · ${r.description}`
                              ] })
                            ] })
                          ]
                        }
                      ),
                      /* @__PURE__ */ e(
                        "button",
                        {
                          onClick: () => Xe(r.id),
                          disabled: W === r.id,
                          className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--error-text)] transition-colors disabled:opacity-50",
                          title: a("roleDetail.groups.remove"),
                          children: W === r.id ? /* @__PURE__ */ e(g, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(Ne, { className: "w-4 h-4" })
                        }
                      )
                    ]
                  },
                  r.id
                )) }),
                ke && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50", children: /* @__PURE__ */ t("div", { className: "bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)] w-full max-w-md p-6 m-4 max-h-[90vh] overflow-y-auto", children: [
                  /* @__PURE__ */ t("div", { className: "flex items-center justify-between mb-6", children: [
                    /* @__PURE__ */ e("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: a("roleDetail.groups.addTitle") }),
                    /* @__PURE__ */ e(
                      "button",
                      {
                        onClick: () => Z(!1),
                        className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)] transition-colors",
                        children: /* @__PURE__ */ e(Ae, { className: "w-5 h-5 text-[var(--text-tertiary)]" })
                      }
                    )
                  ] }),
                  /* @__PURE__ */ e("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "relative", children: [
                    /* @__PURE__ */ e(ze, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" }),
                    /* @__PURE__ */ e(
                      "input",
                      {
                        type: "text",
                        value: n,
                        onChange: (r) => v(r.target.value),
                        className: "w-full pl-10 pr-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]",
                        placeholder: a("roleDetail.groups.searchPlaceholder")
                      }
                    )
                  ] }) }),
                  s ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(g, { className: "w-6 h-6 animate-spin text-[var(--color-accent-500)]" }) }) : /* @__PURE__ */ e("div", { className: "space-y-2 max-h-64 overflow-y-auto", children: Se.filter(
                    (r) => !c.groups?.some((o) => o.id === r.id) && (n === "" || r.name.toLowerCase().includes(n.toLowerCase()) || (r.description || "").toLowerCase().includes(n.toLowerCase()))
                  ).map((r) => /* @__PURE__ */ t(
                    "label",
                    {
                      className: `flex items-center gap-3 cursor-pointer p-3 rounded-[var(--radius-button)] transition-colors ${f === r.id ? "bg-[var(--color-accent-500)]/10 border border-[var(--color-accent-500)]" : "hover:bg-[var(--bg-hover)] border border-transparent"}`,
                      htmlFor: `group-${r.id}`,
                      children: [
                        /* @__PURE__ */ e(
                          "input",
                          {
                            id: `group-${r.id}`,
                            type: "radio",
                            name: "selectedGroup",
                            checked: f === r.id,
                            onChange: () => R(r.id),
                            className: "w-4 h-4 text-[var(--color-accent-600)] focus:ring-[var(--color-accent-500)]"
                          }
                        ),
                        /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
                          /* @__PURE__ */ e("span", { className: "text-[var(--text-primary)] font-medium", children: r.name }),
                          /* @__PURE__ */ t("p", { className: "text-xs text-[var(--text-tertiary)]", children: [
                            r.memberCount,
                            " ",
                            a("roleDetail.groups.members"),
                            r.description && ` · ${r.description}`
                          ] })
                        ] })
                      ]
                    },
                    r.id
                  )) }),
                  /* @__PURE__ */ t("div", { className: "flex justify-end gap-3 mt-6", children: [
                    /* @__PURE__ */ e(
                      "button",
                      {
                        onClick: () => Z(!1),
                        className: "px-4 py-2 rounded-[var(--radius-button)] bg-[var(--bg-tertiary)] hover:bg-[var(--bg-hover)] text-[var(--text-primary)] font-medium transition-colors",
                        children: a("common.cancel")
                      }
                    ),
                    /* @__PURE__ */ t(
                      "button",
                      {
                        onClick: Ve,
                        disabled: !f || G,
                        className: "flex items-center gap-2 px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] hover:bg-[var(--color-accent-700)] text-white font-medium transition-colors disabled:opacity-50",
                        children: [
                          G && /* @__PURE__ */ e(g, { className: "w-4 h-4 animate-spin" }),
                          a("common.add")
                        ]
                      }
                    )
                  ] })
                ] }) })
              ] }),
              m === "users" && /* @__PURE__ */ t("div", { className: "space-y-4", children: [
                /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                  /* @__PURE__ */ t("h3", { className: "text-lg font-semibold text-[var(--text-primary)]", children: [
                    a("roleDetail.users.title"),
                    " (",
                    c.users.length,
                    ")"
                  ] }),
                  /* @__PURE__ */ t(
                    "button",
                    {
                      onClick: _e,
                      className: "flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] hover:bg-[var(--color-accent-700)] text-white text-sm font-medium transition-colors",
                      children: [
                        /* @__PURE__ */ e(we, { className: "w-4 h-4" }),
                        a("roleDetail.users.add")
                      ]
                    }
                  )
                ] }),
                c.users.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-12 text-[var(--text-secondary)]", children: a("roleDetail.users.noUsers") }) : /* @__PURE__ */ e("div", { className: "grid gap-3", children: c.users.map((r) => /* @__PURE__ */ t(
                  "div",
                  {
                    className: "flex items-center gap-4 p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]",
                    children: [
                      /* @__PURE__ */ t(
                        je,
                        {
                          to: `/administration/users/${r.id}`,
                          className: "flex items-center gap-4 flex-1 min-w-0 hover:opacity-80 transition-opacity",
                          children: [
                            /* @__PURE__ */ e("div", { className: "w-10 h-10 rounded-full bg-[var(--color-accent-100)] flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--color-accent-700)]", children: r.fullName.split(" ").map((o) => o.at(0)).join("").toUpperCase().slice(0, 2) }) }),
                            /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
                              /* @__PURE__ */ e("div", { className: "font-medium text-[var(--text-primary)] truncate", children: r.fullName }),
                              /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-secondary)] truncate", children: r.email })
                            ] })
                          ]
                        }
                      ),
                      /* @__PURE__ */ e(
                        "button",
                        {
                          onClick: () => Ke(r.id),
                          disabled: ge === r.id,
                          className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--error-text)] transition-colors disabled:opacity-50",
                          title: a("roleDetail.users.remove"),
                          children: ge === r.id ? /* @__PURE__ */ e(g, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(Ne, { className: "w-4 h-4" })
                        }
                      )
                    ]
                  },
                  r.id
                )) }),
                ve && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50", children: /* @__PURE__ */ t("div", { className: "bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)] w-full max-w-md p-6 m-4 max-h-[90vh] overflow-y-auto", children: [
                  /* @__PURE__ */ t("div", { className: "flex items-center justify-between mb-6", children: [
                    /* @__PURE__ */ e("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: a("roleDetail.users.addTitle") }),
                    /* @__PURE__ */ e(
                      "button",
                      {
                        onClick: () => X(!1),
                        className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)] transition-colors",
                        children: /* @__PURE__ */ e(Ae, { className: "w-5 h-5 text-[var(--text-tertiary)]" })
                      }
                    )
                  ] }),
                  /* @__PURE__ */ e("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "relative", children: [
                    /* @__PURE__ */ e(ze, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-tertiary)]" }),
                    /* @__PURE__ */ e(
                      "input",
                      {
                        type: "text",
                        value: z,
                        onChange: (r) => ne(r.target.value),
                        className: "w-full pl-10 pr-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]",
                        placeholder: a("roleDetail.users.searchPlaceholder")
                      }
                    )
                  ] }) }),
                  De ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ e(g, { className: "w-6 h-6 animate-spin text-[var(--color-accent-500)]" }) }) : /* @__PURE__ */ e("div", { className: "space-y-2 max-h-64 overflow-y-auto", children: Q.filter(
                    (r) => !c.users.some((o) => o.id === r.id) && (z === "" || r.fullName.toLowerCase().includes(z.toLowerCase()) || r.email.toLowerCase().includes(z.toLowerCase()))
                  ).map((r) => /* @__PURE__ */ t(
                    "label",
                    {
                      className: `flex items-center gap-3 cursor-pointer p-3 rounded-[var(--radius-button)] transition-colors ${$ === r.id ? "bg-[var(--color-accent-500)]/10 border border-[var(--color-accent-500)]" : "hover:bg-[var(--bg-hover)] border border-transparent"}`,
                      htmlFor: `user-${r.id}`,
                      children: [
                        /* @__PURE__ */ e(
                          "input",
                          {
                            id: `user-${r.id}`,
                            type: "radio",
                            name: "selectedUser",
                            checked: $ === r.id,
                            onChange: () => Y(r.id),
                            className: "w-4 h-4 text-[var(--color-accent-600)] focus:ring-[var(--color-accent-500)]"
                          }
                        ),
                        /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
                          /* @__PURE__ */ e("span", { className: "text-[var(--text-primary)] font-medium", children: r.fullName }),
                          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-tertiary)]", children: r.email })
                        ] })
                      ]
                    },
                    r.id
                  )) }),
                  /* @__PURE__ */ t("div", { className: "flex justify-end gap-3 mt-6", children: [
                    /* @__PURE__ */ e(
                      "button",
                      {
                        onClick: () => X(!1),
                        className: "px-4 py-2 rounded-[var(--radius-button)] bg-[var(--bg-tertiary)] hover:bg-[var(--bg-hover)] text-[var(--text-primary)] font-medium transition-colors",
                        children: a("common.cancel")
                      }
                    ),
                    /* @__PURE__ */ t(
                      "button",
                      {
                        onClick: qe,
                        disabled: !$ || be,
                        className: "flex items-center gap-2 px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] hover:bg-[var(--color-accent-700)] text-white font-medium transition-colors disabled:opacity-50",
                        children: [
                          be && /* @__PURE__ */ e(g, { className: "w-4 h-4 animate-spin" }),
                          a("common.add")
                        ]
                      }
                    )
                  ] })
                ] }) })
              ] }),
              m === "translations" && /* @__PURE__ */ t("div", { className: "space-y-6", children: [
                /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                  /* @__PURE__ */ t("h3", { className: "text-lg font-semibold text-[var(--text-primary)]", children: [
                    a("roleDetail.translations.title"),
                    " (",
                    D.length,
                    ")"
                  ] }),
                  Fe.length > 0 && /* @__PURE__ */ t(
                    "button",
                    {
                      onClick: () => E(!0),
                      className: "flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] hover:bg-[var(--color-accent-700)] text-white text-sm font-medium transition-colors",
                      children: [
                        /* @__PURE__ */ e(we, { className: "w-4 h-4" }),
                        a("roleDetail.translations.add")
                      ]
                    }
                  )
                ] }),
                P && /* @__PURE__ */ t("div", { className: "p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--color-accent-500)]", children: [
                  /* @__PURE__ */ t("div", { className: "flex items-center justify-between mb-4", children: [
                    /* @__PURE__ */ e("h4", { className: "font-medium text-[var(--text-primary)]", children: a("roleDetail.translations.addNew") }),
                    /* @__PURE__ */ e(
                      "button",
                      {
                        onClick: oe,
                        className: "p-1 rounded hover:bg-[var(--bg-hover)]",
                        children: /* @__PURE__ */ e(Ae, { className: "w-4 h-4 text-[var(--text-secondary)]" })
                      }
                    )
                  ] }),
                  /* @__PURE__ */ t("div", { className: "grid gap-4", children: [
                    /* @__PURE__ */ t("div", { children: [
                      /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.translations.language") }),
                      /* @__PURE__ */ t(
                        "select",
                        {
                          value: J,
                          onChange: (r) => V(r.target.value),
                          className: "w-full px-3 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]",
                          children: [
                            /* @__PURE__ */ e("option", { value: "", children: a("roleDetail.translations.selectLanguage") }),
                            Fe.map((r) => /* @__PURE__ */ e("option", { value: r.code, children: r.label }, r.code))
                          ]
                        }
                      )
                    ] }),
                    J && /* @__PURE__ */ t(Ye, { children: [
                      /* @__PURE__ */ t("div", { children: [
                        /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.translations.name") }),
                        /* @__PURE__ */ e(
                          "input",
                          {
                            type: "text",
                            value: b.name,
                            onChange: (r) => k((o) => ({ ...o, name: r.target.value })),
                            className: "w-full px-3 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                          }
                        )
                      ] }),
                      /* @__PURE__ */ t("div", { children: [
                        /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.translations.shortName") }),
                        /* @__PURE__ */ e(
                          "input",
                          {
                            type: "text",
                            value: b.shortName,
                            onChange: (r) => k((o) => ({ ...o, shortName: r.target.value })),
                            className: "w-full px-3 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                          }
                        )
                      ] }),
                      /* @__PURE__ */ t("div", { children: [
                        /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.translations.description") }),
                        /* @__PURE__ */ e(
                          "textarea",
                          {
                            value: b.description || "",
                            onChange: (r) => k((o) => ({ ...o, description: r.target.value })),
                            rows: 2,
                            className: "w-full px-3 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none"
                          }
                        )
                      ] }),
                      /* @__PURE__ */ t("div", { className: "flex justify-end gap-2", children: [
                        /* @__PURE__ */ e(
                          "button",
                          {
                            onClick: oe,
                            className: "px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--bg-tertiary)] hover:bg-[var(--bg-hover)] text-[var(--text-primary)] text-sm font-medium",
                            children: a("common.cancel")
                          }
                        ),
                        /* @__PURE__ */ t(
                          "button",
                          {
                            onClick: () => Le(J),
                            disabled: S || !b.name || !b.shortName,
                            className: "flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] hover:bg-[var(--color-accent-700)] text-white text-sm font-medium disabled:opacity-50",
                            children: [
                              S && /* @__PURE__ */ e(g, { className: "w-4 h-4 animate-spin" }),
                              a("common.save")
                            ]
                          }
                        )
                      ] })
                    ] })
                  ] })
                ] }),
                q && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ e(g, { className: "w-6 h-6 animate-spin text-[var(--color-accent-500)]" }) }),
                !q && D.length === 0 && /* @__PURE__ */ e("div", { className: "text-center py-12 text-[var(--text-secondary)]", children: a("roleDetail.translations.noTranslations") }),
                !q && D.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-3", children: D.map((r) => {
                  const o = We.find((B) => B.code === r.languageCode), ie = le === r.languageCode;
                  return /* @__PURE__ */ t(
                    "div",
                    {
                      className: `p-4 rounded-[var(--radius-card)] border ${ie ? "bg-[var(--bg-primary)] border-[var(--color-accent-500)]" : "bg-[var(--bg-primary)] border-[var(--border-color)]"}`,
                      children: [
                        /* @__PURE__ */ t("div", { className: "flex items-center justify-between mb-2", children: [
                          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
                            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 text-xs font-medium rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)] uppercase", children: r.languageCode }),
                            /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-secondary)]", children: o?.label || r.languageCode })
                          ] }),
                          !ie && /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
                            /* @__PURE__ */ e(
                              "button",
                              {
                                onClick: () => $e(r),
                                className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--color-accent-600)]",
                                title: a("common.edit"),
                                children: /* @__PURE__ */ e(Dr, { className: "w-4 h-4" })
                              }
                            ),
                            /* @__PURE__ */ e(
                              "button",
                              {
                                onClick: () => He(r.languageCode),
                                className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)] hover:text-[var(--error-text)]",
                                title: a("common.delete"),
                                children: /* @__PURE__ */ e(Ne, { className: "w-4 h-4" })
                              }
                            )
                          ] })
                        ] }),
                        ie ? /* @__PURE__ */ t("div", { className: "grid gap-3 mt-3", children: [
                          /* @__PURE__ */ t("div", { children: [
                            /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.translations.name") }),
                            /* @__PURE__ */ e(
                              "input",
                              {
                                type: "text",
                                value: b.name,
                                onChange: (B) => k((ce) => ({ ...ce, name: B.target.value })),
                                className: "w-full px-3 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                              }
                            )
                          ] }),
                          /* @__PURE__ */ t("div", { children: [
                            /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.translations.shortName") }),
                            /* @__PURE__ */ e(
                              "input",
                              {
                                type: "text",
                                value: b.shortName,
                                onChange: (B) => k((ce) => ({ ...ce, shortName: B.target.value })),
                                className: "w-full px-3 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                              }
                            )
                          ] }),
                          /* @__PURE__ */ t("div", { children: [
                            /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: a("roleDetail.translations.description") }),
                            /* @__PURE__ */ e(
                              "textarea",
                              {
                                value: b.description || "",
                                onChange: (B) => k((ce) => ({ ...ce, description: B.target.value })),
                                rows: 2,
                                className: "w-full px-3 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] resize-none"
                              }
                            )
                          ] }),
                          /* @__PURE__ */ t("div", { className: "flex justify-end gap-2", children: [
                            /* @__PURE__ */ e(
                              "button",
                              {
                                onClick: oe,
                                className: "px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--bg-tertiary)] hover:bg-[var(--bg-hover)] text-[var(--text-primary)] text-sm font-medium",
                                children: a("common.cancel")
                              }
                            ),
                            /* @__PURE__ */ t(
                              "button",
                              {
                                onClick: () => Le(r.languageCode),
                                disabled: S || !b.name || !b.shortName,
                                className: "flex items-center gap-2 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] hover:bg-[var(--color-accent-700)] text-white text-sm font-medium disabled:opacity-50",
                                children: [
                                  S && /* @__PURE__ */ e(g, { className: "w-4 h-4 animate-spin" }),
                                  a("common.save")
                                ]
                              }
                            )
                          ] })
                        ] }) : /* @__PURE__ */ t("div", { className: "grid gap-1", children: [
                          /* @__PURE__ */ e("div", { className: "font-medium text-[var(--text-primary)]", children: r.name }),
                          /* @__PURE__ */ t("div", { className: "text-sm text-[var(--text-secondary)]", children: [
                            a("roleDetail.translations.shortName"),
                            ": ",
                            r.shortName
                          ] }),
                          r.description && /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-tertiary)] mt-1", children: r.description })
                        ] })
                      ]
                    },
                    r.languageCode
                  );
                }) })
              ] })
            ]
          }
        )
      ]
    }
  ) : /* @__PURE__ */ e(
    Re,
    {
      title: a("roles.title", "Roles"),
      breadcrumbs: [
        { label: a("header.title"), href: "/administration" },
        { label: a("roles.title", "Roles"), href: "/administration/permissions/roles" }
      ],
      icon: /* @__PURE__ */ e(de, { className: "h-6 w-6" }),
      children: /* @__PURE__ */ t("div", { className: "text-center py-12", children: [
        /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: a("roleDetail.notFound") }),
        /* @__PURE__ */ e(
          "button",
          {
            onClick: () => h("/administration/permissions/roles"),
            className: "mt-4 px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] text-white",
            children: a("roleDetail.backToList")
          }
        )
      ] })
    }
  );
}
export {
  Kr as RoleDetailPage
};
//# sourceMappingURL=RoleDetailPage-BQ1nT1wK.js.map
