import { jsxs as a, jsx as r } from "react/jsx-runtime";
import { useState as n, useCallback as ce, useEffect as de, useMemo as F } from "react";
import { useNavigate as me } from "react-router-dom";
import { useTranslation as pe } from "react-i18next";
import { Shield as P, Sparkles as X, Users as B, X as M, Plus as ue, Search as xe, Filter as ve, ChevronDown as q, Loader2 as V, Eye as Y, PenTool as ge, UserCog as be, Crown as J, AppWindow as he, MoreHorizontal as fe, Edit2 as ye, Trash2 as Ne } from "lucide-react";
import { i as h, B as we, S as H } from "./index-Dh9kUeDn.js";
const Ce = ["Global", "Admin", "Manager", "Contributor", "Viewer", "Custom"], W = {
  Global: {
    icon: J,
    color: "text-purple-600 dark:text-purple-400",
    bgColor: "bg-purple-50 dark:bg-purple-900/20",
    borderColor: "border-purple-200 dark:border-purple-800"
  },
  Admin: {
    icon: P,
    color: "text-red-600 dark:text-red-400",
    bgColor: "bg-red-50 dark:bg-red-900/20",
    borderColor: "border-red-200 dark:border-red-800"
  },
  Manager: {
    icon: be,
    color: "text-blue-600 dark:text-blue-400",
    bgColor: "bg-blue-50 dark:bg-blue-900/20",
    borderColor: "border-blue-200 dark:border-blue-800"
  },
  Contributor: {
    icon: ge,
    color: "text-green-600 dark:text-green-400",
    bgColor: "bg-green-50 dark:bg-green-900/20",
    borderColor: "border-green-200 dark:border-green-800"
  },
  Viewer: {
    icon: Y,
    color: "text-gray-600 dark:text-gray-400",
    bgColor: "bg-gray-50 dark:bg-gray-900/20",
    borderColor: "border-gray-200 dark:border-gray-700"
  },
  Custom: {
    icon: X,
    color: "text-orange-600 dark:text-orange-400",
    bgColor: "bg-orange-50 dark:bg-orange-900/20",
    borderColor: "border-orange-200 dark:border-orange-800"
  }
};
function Ee() {
  const { t: o } = pe("admin"), _ = me(), [i, K] = n([]), [j, Q] = n([]), [f, D] = n(!0), [N, Z] = n(""), [ee, y] = n(!1), [u, L] = n(null), [c, x] = n({
    name: "",
    description: "",
    permissionIds: []
  }), [S, T] = n(!1), [G, w] = n(null), [O, A] = n(null), [d, U] = n(null), [m, R] = n(null), [v, $] = n(null), g = ce(async () => {
    try {
      D(!0);
      const e = await h.roles.getAll(N ? { search: N } : void 0);
      K(e);
    } catch (e) {
      console.error("Failed to load roles:", e);
    } finally {
      D(!1);
    }
  }, [N]), re = async () => {
    try {
      const e = await h.permissions.getAll();
      Q(e);
    } catch (e) {
      console.error("Failed to load permissions:", e);
    }
  };
  de(() => {
    g(), re();
  }, [g]);
  const te = (e) => {
    e.preventDefault(), g();
  }, ae = () => {
    L(null), x({ name: "", description: "", permissionIds: [] }), w(null), y(!0);
  }, oe = async (e) => {
    try {
      const t = await h.roles.getById(e.id);
      L(e), x({
        name: t.name,
        description: t.description || "",
        parentRoleId: t.parentRoleId || void 0,
        permissionIds: t.permissions.map((l) => l.id)
      }), w(null), y(!0);
    } catch (t) {
      console.error("Failed to load role details:", t);
    }
  }, le = async (e) => {
    e.preventDefault(), T(!0), w(null);
    try {
      if (u) {
        const t = {
          name: c.name,
          description: c.description,
          parentRoleId: c.parentRoleId,
          permissionIds: c.permissionIds
        };
        await h.roles.update(u.id, t);
      } else
        await h.roles.create(c);
      y(!1), g();
    } catch (t) {
      const l = t instanceof Error ? t.message : "An error occurred";
      w(l);
    } finally {
      T(!1);
    }
  }, se = async (e) => {
    if (confirm(o("roles.confirmDelete", { name: e.name }))) {
      try {
        await h.roles.delete(e.id), g();
      } catch (t) {
        const l = t instanceof Error ? t.message : "An error occurred";
        alert(l);
      }
      A(null);
    }
  }, ne = (e) => {
    x((t) => ({
      ...t,
      permissionIds: t.permissionIds?.includes(e) ? t.permissionIds.filter((l) => l !== e) : [...t.permissionIds || [], e]
    }));
  }, b = F(() => {
    const e = i.filter((s) => s.isSystem).length, t = i.filter((s) => !s.isSystem).length, l = i.reduce((s, I) => s + I.usersCount, 0), p = i.reduce((s, I) => (s[I.category] = (s[I.category] || 0) + 1, s), {});
    return { total: i.length, systemCount: e, customCount: t, totalUsers: l, categoryCount: p };
  }, [i]), ie = F(() => {
    const e = /* @__PURE__ */ new Map();
    return i.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));
  }, [i]), C = F(() => {
    let e = i;
    return d === "system" ? e = e.filter((t) => t.isSystem) : d === "custom" ? e = e.filter((t) => !t.isSystem) : d && (e = e.filter((t) => t.category === d)), m === "__global__" ? e = e.filter((t) => !t.applicationId) : m && (e = e.filter((t) => t.applicationId === m)), v && (e = e.filter((t) => t.category === v)), e;
  }, [i, d, m, v]), k = d !== null || m !== null || v !== null, E = () => {
    U(null), R(null), $(null);
  }, z = (e) => {
    U((t) => t === e ? null : e);
  };
  return /* @__PURE__ */ a("div", { className: "space-y-6", children: [
    /* @__PURE__ */ r(
      we,
      {
        items: [
          { label: o("header.title"), href: "/administration" },
          { label: o("roles.title") }
        ]
      }
    ),
    /* @__PURE__ */ a("div", { className: "flex items-start justify-between", children: [
      /* @__PURE__ */ a("div", { children: [
        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ r("h1", { className: "text-2xl font-bold text-[var(--text-primary)]", children: o("roles.title") }),
          !f && /* @__PURE__ */ a("span", { className: "px-3 py-1 rounded-full text-sm font-medium 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)]", children: [
            k ? `${C.length} / ${b.total}` : b.total,
            " ",
            o("roles.totalLabel")
          ] })
        ] }),
        /* @__PURE__ */ r("p", { className: "text-[var(--text-secondary)] mt-1", children: o("roles.list") }),
        !f && b.total > 0 && /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mt-3 text-sm", children: [
          /* @__PURE__ */ a(
            "button",
            {
              onClick: () => z("system"),
              className: `flex items-center gap-1.5 px-2.5 py-1 rounded-full transition-all ${d === "system" ? "bg-[var(--warning-bg)] text-[var(--warning-text)] border border-[var(--warning-border)] ring-2 ring-[var(--warning-border)]" : "text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]"}`,
              children: [
                /* @__PURE__ */ r(P, { className: "w-4 h-4" }),
                b.systemCount,
                " ",
                o("roles.systemRoles")
              ]
            }
          ),
          /* @__PURE__ */ a(
            "button",
            {
              onClick: () => z("custom"),
              className: `flex items-center gap-1.5 px-2.5 py-1 rounded-full transition-all ${d === "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-300)] dark:ring-[var(--color-accent-700)]" : "text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]"}`,
              children: [
                /* @__PURE__ */ r(X, { className: "w-4 h-4" }),
                b.customCount,
                " ",
                o("roles.customRoles")
              ]
            }
          ),
          /* @__PURE__ */ a("span", { className: "flex items-center gap-1.5 px-2.5 py-1 text-[var(--text-tertiary)]", children: [
            /* @__PURE__ */ r(B, { className: "w-4 h-4" }),
            b.totalUsers,
            " ",
            o("roles.totalUsers")
          ] }),
          k && /* @__PURE__ */ r(
            "button",
            {
              onClick: E,
              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: o("roles.filters.clearAll"),
              children: /* @__PURE__ */ r(M, { className: "w-3.5 h-3.5" })
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ r(H, { name: "roles.header.actions", context: { roles: i, reload: g } }),
        /* @__PURE__ */ a(
          "button",
          {
            onClick: ae,
            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(ue, { className: "w-4 h-4" }),
              o("roles.create")
            ]
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: [
      /* @__PURE__ */ a("form", { onSubmit: te, className: "flex gap-2", children: [
        /* @__PURE__ */ a("div", { className: "relative flex-1 max-w-md", children: [
          /* @__PURE__ */ r(xe, { 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: N,
              onChange: (e) => Z(e.target.value),
              placeholder: o("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: o("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-tertiary)]", children: [
          /* @__PURE__ */ r(ve, { className: "w-4 h-4" }),
          /* @__PURE__ */ r("span", { children: o("roles.filters.title") })
        ] }),
        /* @__PURE__ */ a("div", { className: "relative", children: [
          /* @__PURE__ */ a(
            "select",
            {
              value: m ?? "",
              onChange: (e) => R(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: o("roles.filters.allApplications") }),
                /* @__PURE__ */ r("option", { value: "__global__", children: o("roles.filters.globalRoles") }),
                ie.map((e) => /* @__PURE__ */ r("option", { value: e.id, children: e.name }, e.id))
              ]
            }
          ),
          /* @__PURE__ */ r(q, { className: "absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--text-tertiary)] pointer-events-none" })
        ] }),
        /* @__PURE__ */ a("div", { className: "relative", children: [
          /* @__PURE__ */ a(
            "select",
            {
              value: v ?? "",
              onChange: (e) => $(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: o("roles.filters.allCategories") }),
                Ce.map((e) => /* @__PURE__ */ r("option", { value: e, children: o(`roles.categories.${e.toLowerCase()}`) }, e))
              ]
            }
          ),
          /* @__PURE__ */ r(q, { className: "absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--text-tertiary)] pointer-events-none" })
        ] }),
        k && /* @__PURE__ */ a(
          "button",
          {
            onClick: E,
            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" }),
              o("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-secondary)]", children: [
        /* @__PURE__ */ r("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider", children: o("roles.columns.name") }),
        /* @__PURE__ */ r("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider hidden md:table-cell", children: o("roles.columns.category") }),
        /* @__PURE__ */ r("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider hidden lg:table-cell", children: o("roles.columns.application") }),
        /* @__PURE__ */ r("th", { className: "text-left px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider hidden xl:table-cell", children: o("roles.columns.description") }),
        /* @__PURE__ */ r("th", { className: "text-center px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider", children: o("roles.columns.usersCount") }),
        /* @__PURE__ */ r("th", { className: "text-center px-4 py-3 text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider hidden lg:table-cell", children: o("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(V, { className: "w-6 h-6 animate-spin mx-auto text-[var(--color-accent-500)]" }) }) }),
        !f && C.length === 0 && /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: 7, className: "px-6 py-12 text-center text-[var(--text-secondary)]", children: k ? /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ r("p", { children: o("roles.noRoles") }),
          /* @__PURE__ */ r(
            "button",
            {
              onClick: E,
              className: "text-[var(--color-accent-600)] hover:underline",
              children: o("roles.filters.clearAll")
            }
          )
        ] }) : o("roles.noRoles") }) }),
        !f && C.length > 0 && C.map((e) => {
          const t = W[e.category] || W.Custom, l = t.icon;
          return /* @__PURE__ */ a(
            "tr",
            {
              onClick: () => _(`/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.bgColor} ${t.borderColor} border`, children: /* @__PURE__ */ r(l, { className: `w-4 h-4 ${t.color}` }) }),
                  /* @__PURE__ */ a("div", { children: [
                    /* @__PURE__ */ r("div", { className: "font-medium text-[var(--text-primary)] group-hover:text-[var(--color-accent-600)] transition-colors", children: e.name }),
                    e.isSystem && /* @__PURE__ */ r("span", { className: "text-xs text-[var(--warning-text)]", children: o("roles.system") })
                  ] })
                ] }) }),
                /* @__PURE__ */ r("td", { className: "px-4 py-3 hidden md:table-cell", children: /* @__PURE__ */ a(
                  "button",
                  {
                    onClick: (p) => {
                      p.stopPropagation(), $((s) => s === 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.bgColor} ${t.color} ${t.borderColor} hover:ring-2 hover:ring-offset-1 ${v === e.category ? "ring-2 ring-offset-1" : ""}`,
                    children: [
                      /* @__PURE__ */ r(l, { className: "w-3.5 h-3.5" }),
                      o(`roles.categories.${e.category.toLowerCase()}`)
                    ]
                  }
                ) }),
                /* @__PURE__ */ r("td", { className: "px-4 py-3 hidden lg:table-cell", children: e.applicationName ? /* @__PURE__ */ a(
                  "button",
                  {
                    onClick: (p) => {
                      p.stopPropagation(), R((s) => s === 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(--info-bg)] text-[var(--info-text)] border-[var(--info-border)] hover:ring-2 hover:ring-offset-1 ${m === e.applicationId ? "ring-2 ring-offset-1" : ""}`,
                    children: [
                      /* @__PURE__ */ r(he, { 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-tertiary)]", children: [
                  /* @__PURE__ */ r(J, { className: "w-3.5 h-3.5" }),
                  o("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-secondary)]", children: [
                  /* @__PURE__ */ r(B, { 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-secondary)]", children: [
                  /* @__PURE__ */ r(P, { 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: (p) => p.stopPropagation(), children: [
                  /* @__PURE__ */ r(
                    "button",
                    {
                      onClick: () => _(`/administration/permissions/roles/${e.id}`),
                      className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-tertiary)] transition-colors",
                      title: o("users.view"),
                      children: /* @__PURE__ */ r(Y, { className: "w-4 h-4 text-[var(--text-secondary)]" })
                    }
                  ),
                  !e.isSystem && /* @__PURE__ */ a("div", { className: "relative", children: [
                    /* @__PURE__ */ r(
                      "button",
                      {
                        onClick: () => A(O === e.id ? null : e.id),
                        className: "p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-tertiary)] transition-colors",
                        children: /* @__PURE__ */ r(fe, { className: "w-4 h-4 text-[var(--text-secondary)]" })
                      }
                    ),
                    O === 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: () => {
                            oe(e), A(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(ye, { className: "w-4 h-4" }),
                            o("common.edit")
                          ]
                        }
                      ),
                      e.usersCount === 0 && /* @__PURE__ */ a(
                        "button",
                        {
                          onClick: () => se(e),
                          className: "w-full flex items-center gap-2 px-4 py-2 text-left text-[var(--error-text)] hover:bg-[var(--bg-hover)] transition-colors",
                          children: [
                            /* @__PURE__ */ r(Ne, { className: "w-4 h-4" }),
                            o("common.delete")
                          ]
                        }
                      )
                    ] })
                  ] })
                ] }) })
              ]
            },
            e.id
          );
        })
      ] })
    ] }) }),
    ee && /* @__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: o(u ? "roles.edit" : "roles.create") }),
        /* @__PURE__ */ r("button", { onClick: () => y(!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)]" }) })
      ] }),
      G && /* @__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: G }),
      /* @__PURE__ */ a("form", { onSubmit: le, 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: o("roles.form.name") }),
          /* @__PURE__ */ r(
            "input",
            {
              type: "text",
              required: !0,
              value: c.name,
              onChange: (e) => x((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: o("roles.form.description") }),
          /* @__PURE__ */ r(
            "textarea",
            {
              value: c.description,
              onChange: (e) => x((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__ */ r("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-2", children: o("roles.permissions") }),
          /* @__PURE__ */ a("div", { className: "space-y-2 max-h-64 overflow-y-auto p-2 border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
            j.map((e) => /* @__PURE__ */ a("label", { className: "flex items-start gap-2 cursor-pointer p-2 hover:bg-[var(--bg-hover)] rounded-[var(--radius-button)]", children: [
              /* @__PURE__ */ r(
                "input",
                {
                  type: "checkbox",
                  checked: c.permissionIds?.includes(e.id) || !1,
                  onChange: () => ne(e.id),
                  className: "mt-0.5 rounded border-[var(--border-color)]"
                }
              ),
              /* @__PURE__ */ a("div", { children: [
                /* @__PURE__ */ r("div", { className: "text-[var(--text-primary)] font-mono text-sm", children: e.path }),
                e.description && /* @__PURE__ */ r("div", { className: "text-xs text-[var(--text-secondary)]", children: e.description })
              ] })
            ] }, e.id)),
            j.length === 0 && /* @__PURE__ */ r("div", { className: "text-center py-4 text-[var(--text-secondary)]", children: o("roles.noPermissions") })
          ] })
        ] }),
        /* @__PURE__ */ r(
          H,
          {
            name: "roles.form.fields.after",
            context: {
              formData: c,
              onChange: (e, t) => {
                x((l) => ({ ...l, [e]: t }));
              },
              disabled: S,
              isEditing: !!u,
              role: u
            }
          }
        ),
        /* @__PURE__ */ a("div", { className: "flex justify-end gap-2 pt-4", children: [
          /* @__PURE__ */ r(
            "button",
            {
              type: "button",
              onClick: () => y(!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: o("common.cancel")
            }
          ),
          /* @__PURE__ */ a(
            "button",
            {
              type: "submit",
              disabled: S,
              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: [
                S && /* @__PURE__ */ r(V, { className: "w-4 h-4 animate-spin" }),
                o(u ? "common.save" : "common.create")
              ]
            }
          )
        ] })
      ] })
    ] }) })
  ] });
}
export {
  Ee as RolesPage
};
//# sourceMappingURL=RolesPage-Bw0M4Dr4.js.map
