import { jsx as r, jsxs as a } from "react/jsx-runtime";
import { useState as c, useCallback as ve, useEffect as xe, useMemo as $ } from "react";
import { useNavigate as ge } from "react-router-dom";
import { useTranslation as he } from "react-i18next";
import { Sparkles as K, Eye as Q, PenTool as be, UserCog as ye, Shield as _, Crown as Z, Users as H, X as M, Search as fe, Filter as Ne, ChevronDown as W, Loader2 as X, AppWindow as we, MoreHorizontal as Ce, Edit2 as ke, Trash2 as Ie, Plus as Se, Lock as Ae } from "lucide-react";
import { v as y, P as $e, S as Y } from "./index-CeEMms9z.js";
const J = {
  Global: {
    icon: Z,
    textClass: "text-[var(--category-global-text)]",
    bgClass: "bg-[var(--category-global-bg)]",
    borderClass: "border-[var(--category-global-border)]",
    textVar: "var(--category-global-text)"
  },
  Admin: {
    icon: _,
    textClass: "text-[var(--category-admin-text)]",
    bgClass: "bg-[var(--category-admin-bg)]",
    borderClass: "border-[var(--category-admin-border)]",
    textVar: "var(--category-admin-text)"
  },
  Manager: {
    icon: ye,
    textClass: "text-[var(--category-manager-text)]",
    bgClass: "bg-[var(--category-manager-bg)]",
    borderClass: "border-[var(--category-manager-border)]",
    textVar: "var(--category-manager-text)"
  },
  Contributor: {
    icon: be,
    textClass: "text-[var(--category-contributor-text)]",
    bgClass: "bg-[var(--category-contributor-bg)]",
    borderClass: "border-[var(--category-contributor-border)]",
    textVar: "var(--category-contributor-text)"
  },
  Viewer: {
    icon: Q,
    textClass: "text-[var(--category-viewer-text)]",
    bgClass: "bg-[var(--category-viewer-bg)]",
    borderClass: "border-[var(--category-viewer-border)]",
    textVar: "var(--category-viewer-text)"
  },
  Custom: {
    icon: K,
    textClass: "text-[var(--category-custom-text)]",
    bgClass: "bg-[var(--category-custom-bg)]",
    borderClass: "border-[var(--category-custom-border)]",
    textVar: "var(--category-custom-text)"
  }
}, Re = ["Global", "Admin", "Manager", "Contributor", "Viewer", "Custom"];
function _e() {
  const { t: s } = he("admin"), D = ge(), [m, ee] = c([]), [w, re] = c([]), [R, te] = c(""), [f, T] = c(!0), [C, ae] = c(""), [se, N] = c(!1), [x, j] = c(null), [d, u] = c({
    name: "",
    description: "",
    permissionIds: []
  }), [P, G] = c(!1), [O, k] = c(null), [U, E] = c(null), [p, z] = c(null), [v, F] = c(null), [g, V] = c(null), h = ve(async () => {
    try {
      T(!0);
      const e = await y.roles.getAll(C ? { search: C } : void 0);
      ee(e);
    } catch (e) {
      console.error("Failed to load roles:", e);
    } finally {
      T(!1);
    }
  }, [C]), oe = async () => {
    try {
      const e = await y.permissions.getAll();
      re(e);
    } catch (e) {
      console.error("Failed to load permissions:", e);
    }
  };
  xe(() => {
    h(), oe();
  }, [h]);
  const le = (e) => {
    e.preventDefault(), h();
  }, ne = () => {
    j(null), u({ name: "", description: "", permissionIds: [] }), k(null), N(!0);
  }, ie = async (e) => {
    try {
      const t = await y.roles.getById(e.id);
      j(e), u({
        name: t.name,
        description: t.description || "",
        parentRoleId: t.parentRoleId || void 0,
        permissionIds: t.permissions.map((l) => l.id)
      }), k(null), N(!0);
    } catch (t) {
      console.error("Failed to load role details:", t);
    }
  }, ce = async (e) => {
    e.preventDefault(), G(!0), k(null);
    try {
      if (x) {
        const t = {
          name: d.name,
          description: d.description,
          parentRoleId: d.parentRoleId,
          permissionIds: d.permissionIds
        };
        await y.roles.update(x.id, t);
      } else
        await y.roles.create(d);
      N(!1), h();
    } catch (t) {
      const l = t instanceof Error ? t.message : "An error occurred";
      k(l);
    } finally {
      G(!1);
    }
  }, de = async (e) => {
    if (confirm(s("roles.confirmDelete", { name: e.name }))) {
      try {
        await y.roles.delete(e.id), h();
      } catch (t) {
        const l = t instanceof Error ? t.message : "An error occurred";
        alert(l);
      }
      E(null);
    }
  }, q = $(() => {
    const e = R.trim().toLowerCase(), t = e ? w.filter((o) => o.path.toLowerCase().includes(e) || (o.description ?? "").toLowerCase().includes(e)) : w, l = /* @__PURE__ */ new Map();
    for (const o of t) {
      const n = o.path.split("."), i = n.length >= 2 ? `${n[0]}.${n[1]}` : n[0] || "other", A = l.get(i);
      A ? A.push(o) : l.set(i, [o]);
    }
    return Array.from(l.entries()).map(([o, n]) => ({ module: o, permissions: n.sort((i, A) => i.path.localeCompare(A.path)) })).sort((o, n) => o.module.localeCompare(n.module));
  }, [w, R]), me = (e) => {
    u((t) => ({
      ...t,
      permissionIds: t.permissionIds?.includes(e) ? t.permissionIds.filter((l) => l !== e) : [...t.permissionIds || [], e]
    }));
  }, pe = (e, t) => {
    u((l) => {
      const o = e.map((i) => i.id), n = l.permissionIds ?? [];
      if (t) {
        const i = /* @__PURE__ */ new Set([...n, ...o]);
        return { ...l, permissionIds: Array.from(i) };
      }
      return { ...l, permissionIds: n.filter((i) => !o.includes(i)) };
    });
  }, b = $(() => {
    const e = m.filter((n) => n.isSystem).length, t = m.filter((n) => !n.isSystem).length, l = m.reduce((n, i) => n + i.usersCount, 0), o = m.reduce((n, i) => (n[i.category] = (n[i.category] || 0) + 1, n), {});
    return { total: m.length, systemCount: e, customCount: t, totalUsers: l, categoryCount: o };
  }, [m]), ue = $(() => {
    const e = /* @__PURE__ */ new Map();
    return m.forEach((t) => {
      t.applicationId && t.applicationName && e.set(t.applicationId, t.applicationName);
    }), Array.from(e.entries()).map(([t, l]) => ({ id: t, name: l })).sort((t, l) => t.name.localeCompare(l.name));
  }, [m]), I = $(() => {
    let e = m;
    return p === "system" ? e = e.filter((t) => t.isSystem) : p === "custom" ? e = e.filter((t) => !t.isSystem) : p && (e = e.filter((t) => t.category === p)), v === "__global__" ? e = e.filter((t) => !t.applicationId) : v && (e = e.filter((t) => t.applicationId === v)), g && (e = e.filter((t) => t.category === g)), e;
  }, [m, p, v, g]), S = p !== null || v !== null || g !== null, L = () => {
    z(null), F(null), V(null);
  }, B = (e) => {
    z((t) => t === e ? null : e);
  };
  return /* @__PURE__ */ r(
    $e,
    {
      title: s("roles.title"),
      subtitle: s("roles.list"),
      icon: /* @__PURE__ */ r(Ae, { className: "w-6 h-6" }),
      breadcrumbs: [
        { label: s("header.title"), href: "/administration" },
        { label: s("roles.title") }
      ],
      actions: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ r(Y, { name: "roles.header.actions", context: { roles: m, reload: h } }),
        /* @__PURE__ */ a(
          "button",
          {
            onClick: ne,
            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",
            children: [
              /* @__PURE__ */ r(Se, { className: "w-4 h-4" }),
              s("roles.create")
            ]
          }
        )
      ] }),
      children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
        /* @__PURE__ */ r("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: /* @__PURE__ */ a("div", { children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: !f && /* @__PURE__ */ a("span", { className: "px-3 py-1 rounded-full text-sm font-medium bg-[var(--bg-tertiary)] text-[var(--text-primary)] border border-[var(--border-color)]", children: [
            S ? `${I.length} / ${b.total}` : b.total,
            " ",
            s("roles.totalLabel")
          ] }) }),
          /* @__PURE__ */ r("p", { className: "text-[var(--text-secondary)] mt-1", children: s("roles.list") }),
          !f && b.total > 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mt-3 text-sm", children: [
            /* @__PURE__ */ a(
              "button",
              {
                onClick: () => B("system"),
                className: `flex items-center gap-1.5 px-2.5 py-1 rounded-full transition-all ${p === "system" ? "bg-[var(--warning-bg)] text-[var(--warning-text)] border border-[var(--warning-border)] ring-2 ring-[var(--warning-dot)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"}`,
                children: [
                  /* @__PURE__ */ r(_, { className: "w-4 h-4" }),
                  b.systemCount,
                  " ",
                  s("roles.systemRoles")
                ]
              }
            ),
            /* @__PURE__ */ a(
              "button",
              {
                onClick: () => B("custom"),
                className: `flex items-center gap-1.5 px-2.5 py-1 rounded-full transition-all ${p === "custom" ? "bg-[var(--color-accent-100)] dark:bg-[var(--color-accent-900)]/30 text-[var(--color-accent-700)] dark:text-[var(--color-accent-300)] border border-[var(--color-accent-200)] dark:border-[var(--color-accent-800)] ring-2 ring-[var(--color-accent-500)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"}`,
                children: [
                  /* @__PURE__ */ r(K, { className: "w-4 h-4" }),
                  b.customCount,
                  " ",
                  s("roles.customRoles")
                ]
              }
            ),
            /* @__PURE__ */ a("span", { className: "flex items-center gap-1.5 px-2.5 py-1 text-[var(--text-secondary)]", children: [
              /* @__PURE__ */ r(H, { className: "w-4 h-4" }),
              b.totalUsers,
              " ",
              s("roles.totalUsers")
            ] }),
            S && /* @__PURE__ */ r(
              "button",
              {
                onClick: L,
                className: "flex items-center gap-1 px-2 py-1 rounded-full text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] transition-colors",
                title: s("roles.filters.clearAll"),
                children: /* @__PURE__ */ r(M, { className: "w-3.5 h-3.5" })
              }
            )
          ] })
        ] }) }),
        /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: [
          /* @__PURE__ */ a("form", { onSubmit: le, className: "flex gap-2", children: [
            /* @__PURE__ */ a("div", { className: "relative flex-1 max-w-md", children: [
              /* @__PURE__ */ r(fe, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-secondary)]" }),
              /* @__PURE__ */ r(
                "input",
                {
                  type: "text",
                  value: C,
                  onChange: (e) => ae(e.target.value),
                  placeholder: s("common.search"),
                  className: "w-full pl-10 pr-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]"
                }
              )
            ] }),
            /* @__PURE__ */ r(
              "button",
              {
                type: "submit",
                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: s("common.search")
              }
            )
          ] }),
          /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-3", children: [
            /* @__PURE__ */ a("div", { className: "flex items-center gap-1.5 text-sm text-[var(--text-secondary)]", children: [
              /* @__PURE__ */ r(Ne, { className: "w-4 h-4" }),
              /* @__PURE__ */ r("span", { children: s("roles.filters.title") })
            ] }),
            /* @__PURE__ */ a("div", { className: "relative", children: [
              /* @__PURE__ */ a(
                "select",
                {
                  value: v ?? "",
                  onChange: (e) => F(e.target.value || null),
                  className: "appearance-none pl-3 pr-8 py-1.5 text-sm rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)] cursor-pointer",
                  children: [
                    /* @__PURE__ */ r("option", { value: "", children: s("roles.filters.allApplications") }),
                    /* @__PURE__ */ r("option", { value: "__global__", children: s("roles.filters.globalRoles") }),
                    ue.map((e) => /* @__PURE__ */ r("option", { value: e.id, children: e.name }, e.id))
                  ]
                }
              ),
              /* @__PURE__ */ r(W, { className: "absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--text-secondary)] pointer-events-none" })
            ] }),
            /* @__PURE__ */ a("div", { className: "relative", children: [
              /* @__PURE__ */ a(
                "select",
                {
                  value: g ?? "",
                  onChange: (e) => V(e.target.value || null),
                  className: "appearance-none pl-3 pr-8 py-1.5 text-sm rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)] cursor-pointer",
                  children: [
                    /* @__PURE__ */ r("option", { value: "", children: s("roles.filters.allCategories") }),
                    Re.map((e) => /* @__PURE__ */ r("option", { value: e, children: s(`roles.categories.${e.toLowerCase()}`) }, e))
                  ]
                }
              ),
              /* @__PURE__ */ r(W, { className: "absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--text-secondary)] pointer-events-none" })
            ] }),
            S && /* @__PURE__ */ a(
              "button",
              {
                onClick: L,
                className: "flex items-center gap-1.5 px-2.5 py-1.5 text-sm rounded-[var(--radius-button)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] transition-colors",
                children: [
                  /* @__PURE__ */ r(M, { className: "w-3.5 h-3.5" }),
                  s("roles.filters.clearAll")
                ]
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "card overflow-hidden", children: /* @__PURE__ */ a("table", { className: "w-full", children: [
          /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ a("tr", { className: "bg-[var(--bg-tertiary)]", children: [
            /* @__PURE__ */ r("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider", children: s("roles.columns.name") }),
            /* @__PURE__ */ r("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider hidden md:table-cell", children: s("roles.columns.category") }),
            /* @__PURE__ */ r("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider hidden lg:table-cell", children: s("roles.columns.application") }),
            /* @__PURE__ */ r("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider hidden xl:table-cell", children: s("roles.columns.description") }),
            /* @__PURE__ */ r("th", { className: "text-center px-4 py-3 text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider", children: s("roles.columns.usersCount") }),
            /* @__PURE__ */ r("th", { className: "text-center px-4 py-3 text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider hidden lg:table-cell", children: s("roles.permissions") }),
            /* @__PURE__ */ r("th", { className: "w-24 px-4 py-3" })
          ] }) }),
          /* @__PURE__ */ a("tbody", { className: "divide-y divide-[var(--border-color)]", children: [
            f && /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: 7, className: "px-6 py-12 text-center", children: /* @__PURE__ */ r(X, { className: "w-6 h-6 animate-spin mx-auto text-[var(--color-accent-500)]" }) }) }),
            !f && I.length === 0 && /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: 7, className: "px-6 py-12 text-center text-[var(--text-secondary)]", children: S ? /* @__PURE__ */ a("div", { className: "space-y-2", children: [
              /* @__PURE__ */ r("p", { children: s("roles.noRoles") }),
              /* @__PURE__ */ r(
                "button",
                {
                  onClick: L,
                  className: "text-[var(--color-accent-600)] hover:underline",
                  children: s("roles.filters.clearAll")
                }
              )
            ] }) : s("roles.noRoles") }) }),
            !f && I.length > 0 && I.map((e) => {
              const t = J[e.category] || J.Custom, l = t.icon;
              return /* @__PURE__ */ a(
                "tr",
                {
                  onClick: () => D(`/administration/permissions/roles/${e.id}`),
                  className: "hover:bg-[var(--bg-hover)] transition-colors cursor-pointer group",
                  children: [
                    /* @__PURE__ */ r("td", { className: "px-4 py-3", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
                      /* @__PURE__ */ r("div", { className: `w-9 h-9 rounded-full flex items-center justify-center ${t.bgClass} ${t.borderClass} border`, children: /* @__PURE__ */ r(l, { className: `w-4 h-4 ${t.textClass}` }) }),
                      /* @__PURE__ */ a("div", { children: [
                        /* @__PURE__ */ r("div", { className: "font-medium text-[var(--text-primary)] group-hover:text-[var(--color-accent-500)] transition-colors", children: e.name }),
                        e.isSystem && /* @__PURE__ */ r("span", { className: "text-xs text-[var(--warning-text)]", children: s("roles.system") })
                      ] })
                    ] }) }),
                    /* @__PURE__ */ r("td", { className: "px-4 py-3 hidden md:table-cell", children: /* @__PURE__ */ a(
                      "button",
                      {
                        onClick: (o) => {
                          o.stopPropagation(), V((n) => n === e.category ? null : e.category);
                        },
                        className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-[var(--radius-badge)] text-xs font-medium border transition-all ${t.bgClass} ${t.textClass} ${t.borderClass} hover:ring-2 hover:ring-offset-1 ${g === e.category ? "ring-2 ring-offset-1" : ""}`,
                        children: [
                          /* @__PURE__ */ r(l, { className: "w-3.5 h-3.5" }),
                          s(`roles.categories.${e.category.toLowerCase()}`)
                        ]
                      }
                    ) }),
                    /* @__PURE__ */ r("td", { className: "px-4 py-3 hidden lg:table-cell", children: e.applicationName ? /* @__PURE__ */ a(
                      "button",
                      {
                        onClick: (o) => {
                          o.stopPropagation(), F((n) => n === e.applicationId ? null : e.applicationId);
                        },
                        className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-[var(--radius-badge)] text-xs font-medium border transition-all bg-[var(--accent-bg)] text-[var(--accent-text)] border-[var(--accent-border)] hover:ring-2 hover:ring-offset-1 ${v === e.applicationId ? "ring-2 ring-offset-1 ring-[var(--color-accent-500)]" : ""}`,
                        children: [
                          /* @__PURE__ */ r(we, { className: "w-3.5 h-3.5" }),
                          e.applicationName
                        ]
                      }
                    ) : /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs text-[var(--text-secondary)]", children: [
                      /* @__PURE__ */ r(Z, { className: "w-3.5 h-3.5" }),
                      s("roles.filters.globalRoles")
                    ] }) }),
                    /* @__PURE__ */ r("td", { className: "px-4 py-3 text-[var(--text-secondary)] max-w-xs truncate hidden xl:table-cell", children: e.description || "-" }),
                    /* @__PURE__ */ r("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ a("div", { className: "inline-flex items-center gap-1.5 text-[var(--text-primary)]", children: [
                      /* @__PURE__ */ r(H, { className: "w-4 h-4" }),
                      /* @__PURE__ */ r("span", { className: "font-medium", children: e.usersCount })
                    ] }) }),
                    /* @__PURE__ */ r("td", { className: "px-4 py-3 text-center hidden lg:table-cell", children: /* @__PURE__ */ a("div", { className: "inline-flex items-center gap-1.5 text-[var(--text-primary)]", children: [
                      /* @__PURE__ */ r(_, { className: "w-4 h-4" }),
                      /* @__PURE__ */ r("span", { className: "font-medium", children: e.permissionsCount })
                    ] }) }),
                    /* @__PURE__ */ r("td", { className: "px-4 py-3", children: /* @__PURE__ */ a("div", { className: "flex items-center justify-end gap-1", onClick: (o) => o.stopPropagation(), children: [
                      /* @__PURE__ */ r(
                        "button",
                        {
                          onClick: () => D(`/administration/permissions/roles/${e.id}`),
                          className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)] transition-colors",
                          title: s("users.view"),
                          children: /* @__PURE__ */ r(Q, { className: "w-4 h-4 text-[var(--text-secondary)]" })
                        }
                      ),
                      !e.isSystem && /* @__PURE__ */ a("div", { className: "relative", children: [
                        /* @__PURE__ */ r(
                          "button",
                          {
                            onClick: () => E(U === e.id ? null : e.id),
                            className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)] transition-colors",
                            children: /* @__PURE__ */ r(Ce, { className: "w-4 h-4 text-[var(--text-secondary)]" })
                          }
                        ),
                        U === e.id && /* @__PURE__ */ a("div", { className: "absolute right-0 top-full mt-1 w-48 py-1 bg-[var(--bg-secondary)] rounded-[var(--radius-menu-item)] border border-[var(--border-color)] shadow-lg z-10", children: [
                          /* @__PURE__ */ a(
                            "button",
                            {
                              onClick: () => {
                                ie(e), E(null);
                              },
                              className: "w-full flex items-center gap-2 px-4 py-2 text-left text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors",
                              children: [
                                /* @__PURE__ */ r(ke, { className: "w-4 h-4" }),
                                s("common.edit")
                              ]
                            }
                          ),
                          e.usersCount === 0 && /* @__PURE__ */ a(
                            "button",
                            {
                              onClick: () => de(e),
                              className: "w-full flex items-center gap-2 px-4 py-2 text-left text-[var(--error-text)] hover:bg-[var(--error-bg)]/30 transition-colors",
                              children: [
                                /* @__PURE__ */ r(Ie, { className: "w-4 h-4" }),
                                s("common.delete")
                              ]
                            }
                          )
                        ] })
                      ] })
                    ] }) })
                  ]
                },
                e.id
              );
            })
          ] })
        ] }) }),
        se && /* @__PURE__ */ r("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ a("div", { className: "bg-[var(--bg-primary)] rounded-[var(--radius-modal)] w-full max-w-lg p-6 m-4 max-h-[90vh] overflow-y-auto", children: [
          /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-6", children: [
            /* @__PURE__ */ r("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: s(x ? "roles.edit" : "roles.create") }),
            /* @__PURE__ */ r("button", { onClick: () => N(!1), className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)]", children: /* @__PURE__ */ r(M, { className: "w-5 h-5 text-[var(--text-secondary)]" }) })
          ] }),
          O && /* @__PURE__ */ r("div", { className: "mb-4 p-3 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)] text-[var(--error-text)] text-sm", children: O }),
          /* @__PURE__ */ a("form", { onSubmit: ce, className: "space-y-4", children: [
            /* @__PURE__ */ a("div", { children: [
              /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: s("roles.form.name") }),
              /* @__PURE__ */ r(
                "input",
                {
                  type: "text",
                  required: !0,
                  value: d.name,
                  onChange: (e) => u((t) => ({ ...t, name: e.target.value })),
                  className: "w-full px-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]"
                }
              )
            ] }),
            /* @__PURE__ */ a("div", { children: [
              /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: s("roles.form.description") }),
              /* @__PURE__ */ r(
                "textarea",
                {
                  value: d.description,
                  onChange: (e) => u((t) => ({ ...t, description: e.target.value })),
                  rows: 3,
                  className: "w-full px-4 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)] resize-none"
                }
              )
            ] }),
            /* @__PURE__ */ a("div", { children: [
              /* @__PURE__ */ a("label", { htmlFor: "role-permission-search", className: "block text-sm font-medium text-[var(--text-secondary)] mb-2", children: [
                s("roles.permissions"),
                " (",
                d.permissionIds?.length ?? 0,
                "/",
                w.length,
                ")"
              ] }),
              /* @__PURE__ */ r(
                "input",
                {
                  id: "role-permission-search",
                  type: "search",
                  value: R,
                  onChange: (e) => te(e.target.value),
                  placeholder: s("roles.permissionSearchPlaceholder", { defaultValue: "Rechercher une permission…" }),
                  className: "w-full mb-2 px-3 py-2 rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)]"
                }
              ),
              /* @__PURE__ */ a("div", { className: "space-y-2 max-h-96 overflow-y-auto p-2 border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
                q.length === 0 && /* @__PURE__ */ r("div", { className: "text-center py-4 text-[var(--text-secondary)]", children: s("roles.noPermissions") }),
                q.map((e) => {
                  const t = e.permissions.every((o) => d.permissionIds?.includes(o.id)), l = e.permissions.filter((o) => d.permissionIds?.includes(o.id)).length;
                  return /* @__PURE__ */ a("details", { open: !0, className: "border border-[var(--border-color)] rounded-[var(--radius-button)]", children: [
                    /* @__PURE__ */ a("summary", { className: "flex items-center justify-between gap-2 px-3 py-2 cursor-pointer bg-[var(--bg-secondary)] rounded-t-[var(--radius-button)] hover:bg-[var(--bg-hover)]", children: [
                      /* @__PURE__ */ a("span", { className: "font-medium text-[var(--text-primary)]", children: [
                        s(`roles.modules.${e.module}`, { defaultValue: e.module }),
                        /* @__PURE__ */ a("span", { className: "ml-2 text-xs text-[var(--text-secondary)]", children: [
                          "(",
                          l,
                          "/",
                          e.permissions.length,
                          ")"
                        ] })
                      ] }),
                      /* @__PURE__ */ r(
                        "button",
                        {
                          type: "button",
                          onClick: (o) => {
                            o.preventDefault(), o.stopPropagation(), pe(e.permissions, !t);
                          },
                          className: "text-xs px-2 py-1 rounded-[var(--radius-button)] bg-[var(--color-accent-500)]/10 text-[var(--color-accent-600)] hover:bg-[var(--color-accent-500)]/20",
                          children: t ? s("roles.uncheckAll", { defaultValue: "Tout décocher" }) : s("roles.checkAll", { defaultValue: "Tout cocher" })
                        }
                      )
                    ] }),
                    /* @__PURE__ */ r("div", { className: "p-2 space-y-1", children: e.permissions.map((o) => /* @__PURE__ */ a("label", { className: "flex items-start gap-3 cursor-pointer p-2 hover:bg-[var(--bg-hover)] rounded-[var(--radius-button)]", children: [
                      /* @__PURE__ */ r(
                        "input",
                        {
                          type: "checkbox",
                          id: `perm-${o.id}`,
                          name: `perm-${o.id}`,
                          checked: d.permissionIds?.includes(o.id) || !1,
                          onChange: () => me(o.id),
                          className: "mt-0.5 rounded border-[var(--border-color)]"
                        }
                      ),
                      /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: [
                        /* @__PURE__ */ r("div", { className: "text-[var(--text-primary)] font-mono text-sm break-all", children: o.path }),
                        o.description && /* @__PURE__ */ r("div", { className: "text-xs text-[var(--text-secondary)] mt-0.5", children: s(`roles.permissionDescriptions.${o.path}`, { defaultValue: o.description }) })
                      ] })
                    ] }, o.id)) })
                  ] }, e.module);
                })
              ] })
            ] }),
            /* @__PURE__ */ r(
              Y,
              {
                name: "roles.form.fields.after",
                context: {
                  formData: d,
                  onChange: (e, t) => {
                    u((l) => ({ ...l, [e]: t }));
                  },
                  disabled: P,
                  isEditing: !!x,
                  role: x
                }
              }
            ),
            /* @__PURE__ */ a("div", { className: "flex justify-end gap-2 pt-4", children: [
              /* @__PURE__ */ r(
                "button",
                {
                  type: "button",
                  onClick: () => N(!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: s("common.cancel")
                }
              ),
              /* @__PURE__ */ a(
                "button",
                {
                  type: "submit",
                  disabled: P,
                  className: "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 flex items-center gap-2",
                  children: [
                    P && /* @__PURE__ */ r(X, { className: "w-4 h-4 animate-spin" }),
                    s(x ? "common.save" : "common.create")
                  ]
                }
              )
            ] })
          ] })
        ] }) })
      ] })
    }
  );
}
export {
  _e as RolesPage
};
//# sourceMappingURL=RolesPage-DBdCBLw2.js.map
