import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { useState as g } from "react";
import { Link as R } from "react-router-dom";
import { useTranslation as C } from "react-i18next";
import { ArrowLeft as T, Grid3x3 as S, Target as P, ShieldCheck as u, ChevronRight as h, Sparkles as q, Ban as o, Eye as d, Star as c, Check as m, Lock as v, ChevronLeft as E, Search as D, Filter as G, BookOpen as A, ChevronUp as f, ChevronDown as N, User as $, Pencil as L, HelpCircle as U, Code2 as B, Info as F } from "lucide-react";
const O = [
  { id: "r1", name: "Super Admin", short: "SA", isSystem: !0 },
  { id: "r2", name: "Manager", short: "MG", isSystem: !0 },
  { id: "r3", name: "Contributor", short: "CT", isSystem: !1 },
  { id: "r4", name: "Viewer", short: "VW", isSystem: !1 }
], j = [
  { type: "app", label: "Administration" },
  { type: "module", label: "Users", cells: ["all", "all", "some", "read-only"] },
  { type: "module", label: "Permissions", cells: ["all", "some", "read-only", "none"] },
  { type: "module", label: "Applications", cells: ["all", "read-only", "none", "none"] },
  { type: "app", label: "Support" },
  { type: "module", label: "Tickets", cells: ["all", "all", "all", "some"] },
  { type: "module", label: "SLA Config", cells: ["all", "some", "none", "none"] }
], M = {
  all: { bg: "bg-emerald-500/20", border: "border-emerald-500/30", text: "text-emerald-700", icon: m },
  some: { bg: "bg-amber-500/20", border: "border-amber-500/30", text: "text-amber-700", icon: c },
  "read-only": { bg: "bg-sky-500/20", border: "border-sky-500/30", text: "text-sky-700", icon: d },
  none: { bg: "bg-red-500/10", border: "border-red-500/20", text: "text-red-600", icon: o }
}, I = [
  { method: "GET", path: "/api/administration/permissions/matrix", handler: "GetPermissionMatrix", permission: "administration.permissions.read" },
  { method: "GET", path: "/api/administration/permissions", handler: "GetPermissions", permission: "administration.permissions.read" },
  { method: "GET", path: "/api/administration/permissions/{id}", handler: "GetPermission", permission: "administration.permissions.read" },
  { method: "POST", path: "/api/administration/permissions", handler: "CreatePermission", permission: "administration.permissions.create" },
  { method: "DELETE", path: "/api/administration/permissions/{id}", handler: "DeletePermission", permission: "administration.permissions.delete" },
  { method: "GET", path: "/api/administration/permissions/tree", handler: "GetPermissionTree", permission: "administration.permissions.read" },
  { method: "GET", path: "/api/administration/permissions/roles", handler: "GetRoles", permission: "administration.roles.read" },
  { method: "POST", path: "/api/administration/permissions/roles", handler: "CreateRole", permission: "administration.roles.create" },
  { method: "PUT", path: "/api/administration/permissions/roles/{id}", handler: "UpdateRole", permission: "administration.roles.update" },
  { method: "DELETE", path: "/api/administration/permissions/roles/{id}", handler: "DeleteRole", permission: "administration.roles.delete" },
  { method: "POST", path: "/api/administration/permissions/roles/{id}/users/{userId}", handler: "AssignUserToRole", permission: "administration.users.manage-roles" },
  { method: "DELETE", path: "/api/administration/permissions/roles/{id}/users/{userId}", handler: "RemoveUserFromRole", permission: "administration.users.manage-roles" }
], H = {
  GET: "bg-blue-500/10 text-blue-700 border-blue-500/20",
  POST: "bg-green-500/10 text-green-700 border-green-500/20",
  PUT: "bg-amber-500/10 text-amber-700 border-amber-500/20",
  DELETE: "bg-red-500/10 text-red-700 border-red-500/20",
  PATCH: "bg-purple-500/10 text-purple-700 border-purple-500/20"
};
function n({ children: r }) {
  return /* @__PURE__ */ t("div", { className: "mt-3 flex items-start gap-2 px-3 py-2 rounded-md bg-blue-50 border border-blue-200 text-xs text-blue-800 dark:bg-blue-950/30 dark:border-blue-800 dark:text-blue-300", children: [
    /* @__PURE__ */ e(F, { className: "h-3.5 w-3.5 flex-shrink-0 mt-0.5" }),
    /* @__PURE__ */ e("span", { children: r })
  ] });
}
function Q() {
  const { t: r } = C("docsAdministrationPermissionsAssignments"), [x, y] = g(!1), [p, w] = g(!1);
  return /* @__PURE__ */ t("div", { className: "space-y-8 max-w-5xl mx-auto px-4 py-6", children: [
    /* @__PURE__ */ t(
      R,
      {
        to: "/docs/business/administration/permissions",
        className: "inline-flex items-center gap-1.5 text-sm text-[var(--color-accent-500)] hover:text-[var(--color-accent-600)] transition-colors",
        children: [
          /* @__PURE__ */ e(T, { className: "h-4 w-4" }),
          r("nav.backToPermissions")
        ]
      }
    ),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ t("div", { className: "flex items-center gap-3 mb-4", children: [
        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-[var(--color-accent-100)]", children: /* @__PURE__ */ e(S, { className: "h-6 w-6 text-[var(--color-accent-600)]" }) }),
        /* @__PURE__ */ t("div", { children: [
          /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-[var(--text-primary)]", children: r("title") }),
          /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-0.5", children: r("subtitle") })
        ] })
      ] }),
      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ t("div", { className: "p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-950/20 dark:border-red-800", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(P, { className: "h-4 w-4 text-red-600" }),
            /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-300", children: r("value.problemTitle") })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-red-700 dark:text-red-400", children: r("value.problem") })
        ] }),
        /* @__PURE__ */ t("div", { className: "p-4 rounded-lg bg-green-50 border border-green-200 dark:bg-green-950/20 dark:border-green-800", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
            /* @__PURE__ */ e(u, { className: "h-4 w-4 text-green-600" }),
            /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-300", children: r("value.solutionTitle") })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-green-700 dark:text-green-400", children: r("value.solution") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3", children: r("access.title") }),
      /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-2 text-sm mb-3", children: [
        /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-muted)]", children: "Administration" }),
        /* @__PURE__ */ e(h, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" }),
        /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-muted)]", children: "Permissions" }),
        /* @__PURE__ */ e(h, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" }),
        /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--color-accent-100)] text-[var(--color-accent-700)] font-medium", children: r("access.page") })
      ] }),
      /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-3 text-xs", children: [
        /* @__PURE__ */ e("div", { className: "px-3 py-1.5 rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] font-mono text-[var(--text-secondary)]", children: "/administration/permissions/assignments" }),
        /* @__PURE__ */ e("div", { className: "px-3 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-700 font-mono", children: "administration.permissions.read" })
      ] })
    ] }),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3", children: r("interface.title") }),
      /* @__PURE__ */ t("div", { className: "border border-[var(--border-color)] rounded-lg overflow-hidden bg-[var(--bg-card)] shadow-sm", children: [
        /* @__PURE__ */ t("div", { className: "px-4 py-3 border-b border-[var(--border-color)] flex items-center justify-between bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("div", { className: "text-sm font-bold text-[var(--text-primary)]", children: r("mock.header") }),
            /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)]", children: r("mock.headerSub") })
          ] }),
          /* @__PURE__ */ t("button", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs border border-[var(--border-color)] rounded-md bg-[var(--bg-card)] text-[var(--text-secondary)]", children: [
            /* @__PURE__ */ e(q, { className: "h-3.5 w-3.5" }),
            r("mock.createFromTemplate")
          ] })
        ] }),
        /* @__PURE__ */ t("div", { className: "px-4 py-2 border-b border-[var(--border-color)] flex flex-wrap items-center gap-3", children: [
          /* @__PURE__ */ t("span", { className: "px-2 py-0.5 text-xs font-semibold rounded-full bg-[var(--color-accent-100)] text-[var(--color-accent-700)]", children: [
            "4 ",
            r("mock.roles")
          ] }),
          /* @__PURE__ */ t("span", { className: "px-2 py-0.5 text-xs font-semibold rounded-full bg-[var(--bg-tertiary)] text-[var(--text-secondary)]", children: [
            "5/5 ",
            r("mock.modules")
          ] }),
          /* @__PURE__ */ t("span", { className: "px-2 py-0.5 text-xs font-semibold rounded-full bg-green-500/10 text-green-700 border border-green-500/20", children: [
            "38 ",
            r("mock.permissionsAssigned")
          ] }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-xs text-[var(--text-muted)] border-l border-[var(--border-color)] pl-3", children: [
            /* @__PURE__ */ t("span", { children: [
              r("mock.rolesPerPage"),
              ":"
            ] }),
            /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 border border-[var(--border-color)] rounded text-[var(--text-primary)] bg-[var(--bg-secondary)]", children: "10" }),
            /* @__PURE__ */ e("span", { children: "1-4 / 4" })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-1.5 ml-auto", children: [
            /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border bg-red-500/10 border-red-500/30 text-red-600", children: [
              /* @__PURE__ */ e(o, { className: "h-3 w-3" }),
              r("mock.filterNone")
            ] }),
            /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border bg-sky-500/10 border-sky-500/30 text-sky-600", children: [
              /* @__PURE__ */ e(d, { className: "h-3 w-3" }),
              r("mock.filterReadOnly")
            ] }),
            /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border bg-amber-500/10 border-amber-500/30 text-amber-600", children: [
              /* @__PURE__ */ e(c, { className: "h-3 w-3" }),
              r("mock.filterPartial")
            ] }),
            /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border bg-emerald-500/30 border-emerald-500 text-emerald-700", children: [
              /* @__PURE__ */ e(m, { className: "h-3 w-3" }),
              r("mock.filterComplete")
            ] })
          ] })
        ] }),
        /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ t("table", { className: "w-full text-xs", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)] bg-[var(--bg-secondary)]", children: [
            /* @__PURE__ */ e("th", { className: "text-left px-3 py-2 text-[var(--text-muted)] font-medium w-40", children: r("mock.module") }),
            O.map((a) => /* @__PURE__ */ e("th", { className: "px-2 py-2 text-center min-w-[80px]", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-0.5", children: [
              /* @__PURE__ */ e("span", { className: "font-medium text-[var(--text-primary)]", children: a.short }),
              a.isSystem && /* @__PURE__ */ e(v, { className: "h-2.5 w-2.5 text-[var(--warning-dot)]" })
            ] }) }, a.id))
          ] }) }),
          /* @__PURE__ */ e("tbody", { children: j.map((a, s) => a.type === "app" ? /* @__PURE__ */ e("tr", { className: "bg-[var(--bg-tertiary)]/50", children: /* @__PURE__ */ t("td", { colSpan: 5, className: "px-4 py-1 text-[var(--text-secondary)] text-[11px] font-medium", children: [
            "└ ",
            a.label
          ] }) }, `app-${a.label}-${s}`) : /* @__PURE__ */ t("tr", { className: "border-b border-[var(--border-color)] hover:bg-[var(--bg-hover)]", children: [
            /* @__PURE__ */ e("td", { className: "px-5 py-2 text-[var(--text-primary)]", children: a.label }),
            a.cells.map((l, b) => {
              const i = M[l], k = i.icon;
              return /* @__PURE__ */ e("td", { className: "px-2 py-2 text-center", children: /* @__PURE__ */ e("span", { className: `inline-flex items-center justify-center w-7 h-7 rounded-full ${i.bg} border ${i.border} ${i.text} cursor-pointer hover:opacity-80`, children: /* @__PURE__ */ e(k, { className: "h-3.5 w-3.5" }) }) }, b);
            })
          ] }, `row-${a.label}-${s}`)) })
        ] }) }),
        /* @__PURE__ */ t("div", { className: "px-4 py-2 border-t border-[var(--border-color)] flex items-center gap-3 text-xs text-[var(--text-muted)] bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ t("span", { children: [
            r("mock.itemsPerPage"),
            ":"
          ] }),
          /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 border border-[var(--border-color)] rounded bg-[var(--bg-card)] text-[var(--text-primary)]", children: "25" }),
          /* @__PURE__ */ e("span", { children: "1-5 / 5" }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
            /* @__PURE__ */ e("span", { className: "p-1 rounded border border-[var(--border-color)] opacity-30", children: /* @__PURE__ */ e(E, { className: "h-3 w-3" }) }),
            /* @__PURE__ */ e("span", { className: "text-xs min-w-[40px] text-center", children: "1 / 1" }),
            /* @__PURE__ */ e("span", { className: "p-1 rounded border border-[var(--border-color)] opacity-30", children: /* @__PURE__ */ e(h, { className: "h-3 w-3" }) })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ e(n, { children: r("annotation.matrix") }),
      /* @__PURE__ */ e("div", { className: "mt-4 grid grid-cols-2 md:grid-cols-4 gap-2", children: [
        { icon: m, label: r("legend.all"), bg: "bg-emerald-500/20 border-emerald-500/30 text-emerald-700" },
        { icon: c, label: r("legend.some"), bg: "bg-amber-500/20 border-amber-500/30 text-amber-700" },
        { icon: d, label: r("legend.readOnly"), bg: "bg-sky-500/20 border-sky-500/30 text-sky-700" },
        { icon: o, label: r("legend.none"), bg: "bg-red-500/10 border-red-500/20 text-red-600" }
      ].map(({ icon: a, label: s, bg: l }) => /* @__PURE__ */ t("div", { className: `flex items-center gap-2 px-3 py-2 rounded-lg border text-xs ${l}`, children: [
        /* @__PURE__ */ e(a, { className: "h-4 w-4 flex-shrink-0" }),
        /* @__PURE__ */ e("span", { className: "font-medium", children: s })
      ] }, s)) }),
      /* @__PURE__ */ e(n, { children: r("annotation.legend") })
    ] }),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3", children: r("filters.title") }),
      /* @__PURE__ */ t("div", { className: "border border-[var(--border-color)] rounded-lg overflow-hidden bg-[var(--bg-card)]", children: [
        /* @__PURE__ */ t("div", { className: "px-4 py-3 flex flex-wrap items-center gap-3 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2 flex-1 min-w-[160px]", children: [
            /* @__PURE__ */ e(D, { className: "h-4 w-4 text-[var(--text-muted)]" }),
            /* @__PURE__ */ e("div", { className: "flex-1 px-2 py-1 text-xs border border-[var(--border-color)] rounded bg-[var(--bg-card)] text-[var(--text-muted)]", children: r("mock.searchModules") })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(G, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" }),
            /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: r("mock.filterByRole") }),
            /* @__PURE__ */ e("div", { className: "px-2 py-1 text-xs border border-[var(--border-color)] rounded bg-[var(--bg-card)] text-[var(--text-muted)] min-w-[100px]", children: r("mock.allRoles") })
          ] }),
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: r("mock.application") }),
            /* @__PURE__ */ e("div", { className: "px-2 py-1 text-xs border border-[var(--border-color)] rounded bg-[var(--bg-card)] text-[var(--text-muted)] min-w-[80px]", children: r("mock.all") })
          ] })
        ] }),
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => y(!x),
            className: "w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] transition-colors",
            children: [
              /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e(A, { className: "h-4 w-4 text-[var(--color-accent-500)]" }),
                /* @__PURE__ */ e("span", { children: r("mock.userGuide") })
              ] }),
              x ? /* @__PURE__ */ e(f, { className: "h-4 w-4" }) : /* @__PURE__ */ e(N, { className: "h-4 w-4" })
            ]
          }
        ),
        x && /* @__PURE__ */ t("div", { className: "px-4 pb-4 border-t border-[var(--border-color)] grid grid-cols-1 md:grid-cols-2 gap-4 pt-3 text-xs text-[var(--text-secondary)]", children: [
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("h4", { className: "font-semibold text-[var(--text-primary)] mb-2 uppercase tracking-wider text-[10px]", children: r("guide.colorLegend") }),
            /* @__PURE__ */ t("ul", { className: "space-y-1", children: [
              /* @__PURE__ */ t("li", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-600", children: /* @__PURE__ */ e(o, { className: "h-3 w-3" }) }),
                r("guide.noneDesc")
              ] }),
              /* @__PURE__ */ t("li", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full bg-sky-500/20 border border-sky-500/30 text-sky-700", children: /* @__PURE__ */ e(d, { className: "h-3 w-3" }) }),
                r("guide.readOnlyDesc")
              ] }),
              /* @__PURE__ */ t("li", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-700", children: /* @__PURE__ */ e(c, { className: "h-3 w-3" }) }),
                r("guide.partialDesc")
              ] }),
              /* @__PURE__ */ t("li", { className: "flex items-center gap-2", children: [
                /* @__PURE__ */ e("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-full bg-emerald-500/20 border border-emerald-500/30 text-emerald-700", children: /* @__PURE__ */ e(m, { className: "h-3 w-3" }) }),
                r("guide.completeDesc")
              ] })
            ] })
          ] }),
          /* @__PURE__ */ t("div", { children: [
            /* @__PURE__ */ e("h4", { className: "font-semibold text-[var(--text-primary)] mb-2 uppercase tracking-wider text-[10px]", children: r("guide.howToUse") }),
            /* @__PURE__ */ t("ul", { className: "space-y-1", children: [
              /* @__PURE__ */ t("li", { children: [
                "• ",
                r("guide.clickCell")
              ] }),
              /* @__PURE__ */ t("li", { className: "flex items-center gap-1", children: [
                /* @__PURE__ */ e(v, { className: "h-3 w-3 text-amber-500" }),
                r("guide.systemRoles")
              ] }),
              /* @__PURE__ */ t("li", { children: [
                "• ",
                r("guide.inheritance")
              ] }),
              /* @__PURE__ */ t("li", { children: [
                "• ",
                r("guide.autoSave")
              ] })
            ] })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ e(n, { children: r("annotation.filters") })
    ] }),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-3", children: r("templates.title") }),
      /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mb-4", children: r("templates.description") }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: [
        { icon: d, name: r("templates.viewer"), desc: r("templates.viewerDesc"), color: "text-blue-600 bg-blue-500/10 border-blue-500/20" },
        { icon: $, name: r("templates.member"), desc: r("templates.memberDesc"), color: "text-green-600 bg-green-500/10 border-green-500/20" },
        { icon: L, name: r("templates.contributor"), desc: r("templates.contributorDesc"), color: "text-orange-600 bg-orange-500/10 border-orange-500/20" },
        { icon: u, name: r("templates.admin"), desc: r("templates.adminDesc"), color: "text-red-600 bg-red-500/10 border-red-500/20" }
      ].map(({ icon: a, name: s, desc: l, color: b }) => /* @__PURE__ */ t("div", { className: `p-3 rounded-lg border-2 ${b} flex flex-col gap-1.5`, children: [
        /* @__PURE__ */ e(a, { className: "h-5 w-5" }),
        /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: s }),
        /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-secondary)]", children: l })
      ] }, s)) }),
      /* @__PURE__ */ e(n, { children: r("annotation.templates") })
    ] }),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4", children: r("useCases.title") }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [
        { id: "UC-001", actor: r("useCases.uc1.actor"), name: r("useCases.uc1.name"), desc: r("useCases.uc1.desc"), perm: "administration.roles.update" },
        { id: "UC-002", actor: r("useCases.uc2.actor"), name: r("useCases.uc2.name"), desc: r("useCases.uc2.desc"), perm: "administration.permissions.read" },
        { id: "UC-003", actor: r("useCases.uc3.actor"), name: r("useCases.uc3.name"), desc: r("useCases.uc3.desc"), perm: "administration.roles.create" }
      ].map((a) => /* @__PURE__ */ t("div", { className: "p-4 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)]", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center justify-between mb-1", children: [
          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e("span", { className: "text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-tertiary)] px-1.5 py-0.5 rounded", children: a.id }),
            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: a.name })
          ] }),
          /* @__PURE__ */ e("span", { className: "text-xs text-[var(--color-accent-500)] bg-[var(--color-accent-100)] px-2 py-0.5 rounded-full", children: a.actor })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] mt-1", children: a.desc }),
        /* @__PURE__ */ e("div", { className: "mt-2 font-mono text-[10px] text-[var(--text-muted)] bg-[var(--bg-tertiary)] px-2 py-1 rounded", children: a.perm })
      ] }, a.id)) })
    ] }),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4", children: r("features.title") }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [
        { id: "F-001", title: r("features.f1.title"), desc: r("features.f1.desc"), example: r("features.f1.example") },
        { id: "F-002", title: r("features.f2.title"), desc: r("features.f2.desc"), example: r("features.f2.example") },
        { id: "F-003", title: r("features.f3.title"), desc: r("features.f3.desc"), example: r("features.f3.example") },
        { id: "F-004", title: r("features.f4.title"), desc: r("features.f4.desc"), example: r("features.f4.example") },
        { id: "F-005", title: r("features.f5.title"), desc: r("features.f5.desc"), example: r("features.f5.example") }
      ].map((a) => /* @__PURE__ */ t("div", { className: "p-4 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)]", children: [
        /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-1", children: [
          /* @__PURE__ */ e("span", { className: "text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-tertiary)] px-1.5 py-0.5 rounded", children: a.id }),
          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: a.title })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: a.desc }),
        /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs text-[var(--color-accent-500)] italic", children: a.example })
      ] }, a.id)) })
    ] }),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4", children: r("faq.title") }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [
        { q: r("faq.q1"), a: r("faq.a1") },
        { q: r("faq.q2"), a: r("faq.a2") },
        { q: r("faq.q3"), a: r("faq.a3") },
        { q: r("faq.q4"), a: r("faq.a4") },
        { q: r("faq.q5"), a: r("faq.a5") }
      ].map(({ q: a, a: s }, l) => /* @__PURE__ */ t("div", { className: "p-4 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)]", children: [
        /* @__PURE__ */ t("div", { className: "flex items-start gap-2 mb-1", children: [
          /* @__PURE__ */ e(U, { className: "h-4 w-4 text-[var(--color-accent-500)] flex-shrink-0 mt-0.5" }),
          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: a })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] ml-6", children: s })
      ] }, `faq-${l}`)) })
    ] }),
    /* @__PURE__ */ t("section", { children: [
      /* @__PURE__ */ t(
        "button",
        {
          onClick: () => w(!p),
          className: "w-full flex items-center justify-between px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)] hover:bg-[var(--bg-hover)] transition-colors",
          children: [
            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e(B, { className: "h-4 w-4 text-[var(--color-accent-500)]" }),
              /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: r("techRef.title") })
            ] }),
            p ? /* @__PURE__ */ e(f, { className: "h-4 w-4 text-[var(--text-muted)]" }) : /* @__PURE__ */ e(N, { className: "h-4 w-4 text-[var(--text-muted)]" })
          ]
        }
      ),
      p && /* @__PURE__ */ t("div", { className: "mt-3 space-y-4", children: [
        /* @__PURE__ */ t("div", { className: "p-4 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)]", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-[var(--text-primary)] mb-3", children: r("techRef.businessRules") }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: [
            { id: "BR-001", cat: r("techRef.br.catSecurity"), name: r("techRef.br.br1.name"), stmt: r("techRef.br.br1.stmt") },
            { id: "BR-002", cat: r("techRef.br.catLogic"), name: r("techRef.br.br2.name"), stmt: r("techRef.br.br2.stmt") },
            { id: "BR-003", cat: r("techRef.br.catSecurity"), name: r("techRef.br.br3.name"), stmt: r("techRef.br.br3.stmt") },
            { id: "BR-004", cat: r("techRef.br.catLogic"), name: r("techRef.br.br4.name"), stmt: r("techRef.br.br4.stmt") },
            { id: "BR-005", cat: r("techRef.br.catTenant"), name: r("techRef.br.br5.name"), stmt: r("techRef.br.br5.stmt") }
          ].map((a) => /* @__PURE__ */ t("div", { className: "flex items-start gap-3 text-xs border-l-2 border-[var(--color-accent-300)] pl-3 py-1", children: [
            /* @__PURE__ */ e("span", { className: "font-mono text-[var(--text-muted)] w-12 flex-shrink-0", children: a.id }),
            /* @__PURE__ */ e("span", { className: "text-[var(--color-accent-500)] px-1.5 py-0.5 rounded bg-[var(--color-accent-100)] text-[10px] flex-shrink-0", children: a.cat }),
            /* @__PURE__ */ t("div", { children: [
              /* @__PURE__ */ e("div", { className: "font-medium text-[var(--text-primary)]", children: a.name }),
              /* @__PURE__ */ e("div", { className: "text-[var(--text-secondary)] mt-0.5", children: a.stmt })
            ] })
          ] }, a.id)) })
        ] }),
        /* @__PURE__ */ t("div", { className: "p-4 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)]", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-[var(--text-primary)] mb-3", children: r("techRef.apiEndpoints") }),
          /* @__PURE__ */ e("div", { className: "space-y-1.5", children: I.map((a, s) => /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-xs", children: [
            /* @__PURE__ */ e("span", { className: `px-1.5 py-0.5 rounded border font-mono font-bold text-[10px] flex-shrink-0 ${H[a.method]}`, children: a.method }),
            /* @__PURE__ */ e("span", { className: "font-mono text-[var(--text-primary)] flex-1", children: a.path }),
            /* @__PURE__ */ e("span", { className: "text-[var(--text-muted)] hidden md:block", children: a.handler })
          ] }, `ep-${a.method}-${s}`)) })
        ] })
      ] })
    ] })
  ] });
}
export {
  Q as default
};
//# sourceMappingURL=index-DRc5qb2I.js.map
