import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { useState as b } from "react";
import { Link as N } from "react-router-dom";
import { useTranslation as y } from "react-i18next";
import { ArrowLeft as p, Palette as d, ChevronRight as m, Plus as w, EyeOff as i, Check as x, Copy as k, Pencil as M, Trash2 as C, RotateCcw as R, Loader2 as T, Power as j, Eye as B, Users as P, Zap as E, HelpCircle as D, Code2 as $, Info as S } from "lucide-react";
const L = [
  { id: "th1", name: "Lumière Pro", presetCount: 2 },
  { id: "th2", name: "Dark Storm", presetCount: 1 }
], A = [
  {
    id: "p1",
    themeId: "th1",
    name: "Azure",
    accentKey: "azure",
    accentHex: "#0ea5e9",
    scope: "platform",
    isBuiltin: !0,
    isDisabled: !1,
    desc: "Accent bleu ciel — preset de référence"
  },
  {
    id: "p2",
    themeId: "th1",
    name: "Violet Signature",
    accentKey: "violet",
    accentHex: "#8b5cf6",
    scope: "tenant",
    isBuiltin: !1,
    isDisabled: !1,
    desc: null
  },
  {
    id: "p3",
    themeId: "th2",
    name: "Emerald Night",
    accentKey: "emerald",
    accentHex: "#10b981",
    scope: "platform",
    isBuiltin: !1,
    isDisabled: !0,
    desc: null
  }
], I = ["identity", "accent", "backgrounds", "dashboard", "typography", "spacing", "activation"], h = [
  { method: "GET", path: "/api/administration/uiconfiguration/presets", handler: "List", permission: "administration.uiconfiguration.presets.view" },
  { method: "GET", path: "/api/administration/uiconfiguration/presets/{id}", handler: "GetById", permission: "administration.uiconfiguration.presets.view" },
  { method: "POST", path: "/api/administration/uiconfiguration/presets", handler: "Create", permission: "administration.uiconfiguration.presets.create" },
  { method: "POST", path: "/api/administration/uiconfiguration/presets/duplicate", handler: "Duplicate", permission: "administration.uiconfiguration.presets.create" },
  { method: "PUT", path: "/api/administration/uiconfiguration/presets/{id}", handler: "Update", permission: "administration.uiconfiguration.presets.update" },
  { method: "DELETE", path: "/api/administration/uiconfiguration/presets/{id}", handler: "Delete", permission: "administration.uiconfiguration.presets.delete" },
  { method: "POST", path: "/api/administration/uiconfiguration/presets/{id}/disabled", handler: "SetDisabled", permission: "administration.uiconfiguration.presets.update" }
], v = [
  { id: "BR-001", key: "techRef.rules.br001" },
  { id: "BR-002", key: "techRef.rules.br002" },
  { id: "BR-003", key: "techRef.rules.br003" },
  { id: "BR-004", key: "techRef.rules.br004" },
  { id: "BR-005", key: "techRef.rules.br005" },
  { id: "BR-006", key: "techRef.rules.br006" }
], V = {
  GET: "bg-[var(--info-bg)] text-[var(--info-text)] border-[var(--info-border)]",
  POST: "bg-[var(--success-bg)] text-[var(--success-text)] border-[var(--success-border)]",
  PUT: "bg-[var(--warning-bg)] text-[var(--warning-text)] border-[var(--warning-border)]",
  DELETE: "bg-[var(--error-bg)] text-[var(--error-text)] border-[var(--error-border)]"
};
function c({ children: t }) {
  return /* @__PURE__ */ r("div", { className: "flex items-start gap-2 px-3 py-2 rounded-md border-l-2 border-[var(--color-accent-500)] bg-[var(--bg-secondary)] text-xs text-[var(--text-secondary)]", children: [
    /* @__PURE__ */ e(S, { className: "w-3.5 h-3.5 mt-0.5 flex-shrink-0 text-[var(--text-tertiary)]" }),
    /* @__PURE__ */ e("span", { className: "leading-relaxed", children: t })
  ] });
}
function K() {
  const { t } = y("docsAdministrationPresets"), [n, u] = b("identity"), [o, f] = b(!1);
  return /* @__PURE__ */ r("div", { className: "space-y-8 max-w-5xl mx-auto pb-12", children: [
    /* @__PURE__ */ r(
      N,
      {
        to: "/docs/business/administration",
        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(p, { className: "h-4 w-4" }),
          t("nav.backToAdmin")
        ]
      }
    ),
    /* @__PURE__ */ r("div", { children: [
      /* @__PURE__ */ r("div", { className: "flex items-center gap-3 mb-3", children: [
        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-[var(--color-accent-600)]/10", children: /* @__PURE__ */ e(d, { className: "h-7 w-7 text-[var(--color-accent-600)]" }) }),
        /* @__PURE__ */ e("h1", { className: "text-3xl font-bold text-[var(--text-primary)]", children: t("title") })
      ] }),
      /* @__PURE__ */ e("p", { className: "text-xl text-[var(--color-accent-600)] font-medium mb-1", children: t("summary") }),
      /* @__PURE__ */ e("p", { className: "text-lg text-[var(--text-secondary)]", children: t("subtitle") }),
      /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-4 mt-3 text-sm text-[var(--text-secondary)]", children: [
        /* @__PURE__ */ r("span", { children: [
          v.length,
          " ",
          t("header.businessRules")
        ] }),
        /* @__PURE__ */ e("span", { children: "·" }),
        /* @__PURE__ */ r("span", { children: [
          h.length,
          " ",
          t("header.apiEndpoints")
        ] }),
        /* @__PURE__ */ e("span", { children: "·" }),
        /* @__PURE__ */ r("span", { children: [
          "7 ",
          t("header.editorTabs")
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "objectif", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r("h2", { className: "text-2xl font-bold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-sm font-bold", children: "1" }),
        t("sections.objective")
      ] }),
      /* @__PURE__ */ e("div", { className: "p-6 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] leading-relaxed", children: t("objective") }) })
    ] }),
    /* @__PURE__ */ r("section", { id: "acces", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r("h2", { className: "text-2xl font-bold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-sm font-bold", children: "2" }),
        t("sections.access")
      ] }),
      /* @__PURE__ */ r("div", { className: "p-5 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)] space-y-3", children: [
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("div", { className: "text-xs font-medium text-[var(--text-secondary)] mb-2", children: t("access.navigation") }),
          /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--color-accent-600)]/10 text-[var(--color-accent-700)] font-medium", children: "Administration" }),
            /* @__PURE__ */ e(m, { className: "h-3.5 w-3.5 text-[var(--text-tertiary)]" }),
            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--color-accent-600)]/10 text-[var(--color-accent-700)] font-medium", children: t("access.uiConfig") }),
            /* @__PURE__ */ e(m, { className: "h-3.5 w-3.5 text-[var(--text-tertiary)]" }),
            /* @__PURE__ */ e("span", { className: "px-2 py-0.5 rounded bg-[var(--color-accent-600)]/10 text-[var(--color-accent-700)] font-medium", children: t("title") })
          ] })
        ] }),
        /* @__PURE__ */ r("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/uiconfiguration/presets" }),
          /* @__PURE__ */ e("div", { className: "px-3 py-1.5 rounded-full bg-[var(--color-accent-600)]/10 border border-[var(--color-accent-600)]/20 text-[var(--color-accent-700)] font-mono", children: t("access.permission") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "liste", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r("h2", { className: "text-2xl font-bold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-sm font-bold", children: "3" }),
        t("sections.listView")
      ] }),
      /* @__PURE__ */ r("div", { className: "bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden", children: [
        /* @__PURE__ */ r("div", { className: "px-5 py-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center gap-3", children: [
          /* @__PURE__ */ e(d, { className: "h-5 w-5 text-[var(--color-accent-600)]" }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("h3", { className: "text-sm font-bold text-[var(--text-primary)]", children: t("listMock.pageTitle") }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: t("listMock.pageSubtitle") })
          ] })
        ] }),
        /* @__PURE__ */ e("div", { className: "p-4 space-y-4", children: L.map((a) => {
          const l = A.filter((s) => s.themeId === a.id);
          return /* @__PURE__ */ r("div", { className: "rounded-[var(--radius-card)] border border-[var(--border-color)] overflow-hidden", children: [
            /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3 px-4 py-3 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ r("div", { className: "flex items-center gap-2.5 min-w-0", children: [
                /* @__PURE__ */ e(d, { className: "w-5 h-5 text-[var(--text-primary)]" }),
                /* @__PURE__ */ r("div", { className: "min-w-0", children: [
                  /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-[var(--text-primary)] truncate", children: a.name }),
                  /* @__PURE__ */ r("p", { className: "text-xs text-[var(--text-secondary)]", children: [
                    a.presetCount,
                    " ",
                    t("listMock.presetsCount")
                  ] })
                ] })
              ] }),
              /* @__PURE__ */ r("button", { type: "button", className: "flex items-center gap-1.5 px-2.5 py-1.5 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-xs font-medium", children: [
                /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5" }),
                t("listMock.createButton")
              ] })
            ] }),
            /* @__PURE__ */ e("table", { className: "w-full text-sm", children: /* @__PURE__ */ e("tbody", { children: l.map((s) => {
              const g = s.scope === "tenant" ? "bg-[var(--accent-bg)] text-[var(--accent-text)] border-[var(--accent-border)]" : "bg-[var(--bg-secondary)] text-[var(--text-secondary)] border-[var(--border-color)]";
              return /* @__PURE__ */ r("tr", { className: "border-t border-[var(--border-color)] hover:bg-[var(--bg-secondary)] transition-colors cursor-pointer", children: [
                /* @__PURE__ */ e("td", { className: "px-4 py-2.5 w-12", children: /* @__PURE__ */ e("span", { className: "flex items-center justify-center w-8 h-8 rounded-[var(--radius-card)]", style: { backgroundColor: s.accentHex }, children: /* @__PURE__ */ e(d, { className: "w-4 h-4 text-white" }) }) }),
                /* @__PURE__ */ r("td", { className: "px-2 py-2.5", children: [
                  /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-wrap", children: [
                    /* @__PURE__ */ e("span", { className: "font-medium text-[var(--text-primary)]", children: s.name }),
                    s.isBuiltin && /* @__PURE__ */ e("span", { className: "text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]", children: t("listMock.builtinBadge") })
                  ] }),
                  s.desc && /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-secondary)] mt-0.5", children: s.desc })
                ] }),
                /* @__PURE__ */ e("td", { className: "px-2 py-2.5", children: /* @__PURE__ */ e("span", { className: `inline-flex items-center px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider rounded border ${g}`, children: t(`listMock.scope${s.scope === "tenant" ? "Tenant" : "Platform"}`) }) }),
                /* @__PURE__ */ e("td", { className: "px-2 py-2.5", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
                  /* @__PURE__ */ e("span", { className: "w-5 h-5 rounded-md flex-shrink-0 border border-[var(--border-color)]", style: { backgroundColor: s.accentHex } }),
                  /* @__PURE__ */ e("code", { className: "text-xs font-mono text-[var(--text-secondary)]", children: s.accentKey })
                ] }) }),
                /* @__PURE__ */ e("td", { className: "px-2 py-2.5", children: s.isDisabled ? /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider rounded bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]", children: [
                  /* @__PURE__ */ e(i, { className: "w-3 h-3" }),
                  t("listMock.statusDisabled")
                ] }) : /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider rounded bg-[var(--success-bg)] text-[var(--success-text)] border border-[var(--success-border)]", children: [
                  /* @__PURE__ */ e(x, { className: "w-3 h-3" }),
                  t("listMock.statusActive")
                ] }) }),
                /* @__PURE__ */ e("td", { className: "px-3 py-2.5", children: /* @__PURE__ */ r("div", { className: "flex items-center justify-end gap-1", children: [
                  /* @__PURE__ */ e("button", { type: "button", className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)]", children: /* @__PURE__ */ e(i, { className: "w-4 h-4" }) }),
                  /* @__PURE__ */ e("button", { type: "button", className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)]", children: /* @__PURE__ */ e(k, { className: "w-4 h-4" }) }),
                  /* @__PURE__ */ e("button", { type: "button", className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)]", children: /* @__PURE__ */ e(M, { className: "w-4 h-4" }) }),
                  !s.isBuiltin && /* @__PURE__ */ e("button", { type: "button", className: "p-1.5 rounded hover:bg-[var(--error-bg)] text-[var(--text-secondary)] hover:text-[var(--error-text)]", children: /* @__PURE__ */ e(C, { className: "w-4 h-4" }) })
                ] }) })
              ] }, s.id);
            }) }) })
          ] }, a.id);
        }) }),
        /* @__PURE__ */ r("div", { className: "px-4 pb-4 space-y-1.5", children: [
          /* @__PURE__ */ e(c, { children: t("listMock.annotations.themeGroup") }),
          /* @__PURE__ */ e(c, { children: t("listMock.annotations.colorBadge") }),
          /* @__PURE__ */ e(c, { children: t("listMock.annotations.scopeBadge") }),
          /* @__PURE__ */ e(c, { children: t("listMock.annotations.builtinRow") }),
          /* @__PURE__ */ e(c, { children: t("listMock.annotations.actions") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "editeur", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r("h2", { className: "text-2xl font-bold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-sm font-bold", children: "4" }),
        t("sections.editorView")
      ] }),
      /* @__PURE__ */ r("div", { className: "bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden", children: [
        /* @__PURE__ */ r("div", { className: "px-5 py-3 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] flex items-center justify-between gap-3", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2.5", children: [
            /* @__PURE__ */ e(d, { className: "h-5 w-5 text-[var(--color-accent-600)]" }),
            /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Violet Signature" }),
            /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded bg-[var(--warning-bg)] text-[var(--warning-text)] border border-[var(--warning-border)]", children: [
              /* @__PURE__ */ e("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--warning-bg)]" }),
              t("editorMock.dirtyIndicator")
            ] })
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ r("button", { type: "button", className: "flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-button)] text-sm text-[var(--text-secondary)] border border-[var(--border-color)] hover:bg-[var(--bg-secondary)]", children: [
              /* @__PURE__ */ e(p, { className: "w-3.5 h-3.5" }),
              " ",
              t("editorMock.backButton")
            ] }),
            /* @__PURE__ */ r("button", { type: "button", className: "flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-button)] text-sm text-[var(--text-secondary)] border border-[var(--border-color)] opacity-40", children: [
              /* @__PURE__ */ e(R, { className: "w-3.5 h-3.5" }),
              " ",
              t("editorMock.resetButton")
            ] }),
            /* @__PURE__ */ r("button", { type: "button", className: "flex items-center gap-1.5 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-sm font-medium", children: [
              /* @__PURE__ */ e(x, { className: "w-3.5 h-3.5" }),
              " ",
              t("editorMock.saveButton")
            ] })
          ] })
        ] }),
        /* @__PURE__ */ e("div", { className: "flex gap-1 px-5 border-b border-[var(--border-color)] overflow-x-auto", children: I.map((a) => /* @__PURE__ */ e(
          "button",
          {
            type: "button",
            onClick: () => u(a),
            className: [
              "py-3 px-1 text-sm font-medium whitespace-nowrap transition-colors border-b-2 -mb-px mr-4",
              a === n ? "text-[var(--text-primary)] border-[var(--color-accent-500)]" : "text-[var(--text-secondary)] border-transparent hover:text-[var(--text-primary)]"
            ].join(" "),
            children: t(`editorMock.tab_${a}`)
          },
          a
        )) }),
        /* @__PURE__ */ r("div", { className: "p-4", children: [
          n === "identity" && /* @__PURE__ */ r("div", { className: "grid lg:grid-cols-2 gap-5", children: [
            /* @__PURE__ */ r("div", { className: "rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-5 space-y-4", children: [
              /* @__PURE__ */ r("div", { className: "grid grid-cols-[72px_1fr] gap-4 items-end", children: [
                /* @__PURE__ */ r("div", { className: "space-y-1", children: [
                  /* @__PURE__ */ e("label", { className: "block text-xs font-medium text-[var(--text-secondary)]", children: t("editorMock.fieldIcon") }),
                  /* @__PURE__ */ e("div", { className: "w-16 h-10 rounded-[var(--radius-input)] bg-[var(--bg-card)] border border-[var(--border-color)] flex items-center justify-center", children: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-[var(--color-accent-600)]" }) })
                ] }),
                /* @__PURE__ */ r("div", { className: "space-y-1", children: [
                  /* @__PURE__ */ e("label", { className: "block text-xs font-medium text-[var(--text-secondary)]", children: t("editorMock.fieldName") }),
                  /* @__PURE__ */ e("div", { className: "w-full px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-card)] border border-[var(--border-color)] text-sm text-[var(--text-primary)]", children: "Violet Signature" })
                ] })
              ] }),
              /* @__PURE__ */ r("div", { className: "space-y-1", children: [
                /* @__PURE__ */ e("label", { className: "block text-xs font-medium text-[var(--text-secondary)]", children: t("editorMock.fieldDesc") }),
                /* @__PURE__ */ e("div", { className: "w-full h-12 px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-card)] border border-[var(--border-color)] text-xs text-[var(--text-secondary)]", children: t("editorMock.descPlaceholder") })
              ] }),
              /* @__PURE__ */ r("div", { className: "space-y-1", children: [
                /* @__PURE__ */ e("label", { className: "block text-xs font-medium text-[var(--text-secondary)]", children: t("editorMock.fieldParentTheme") }),
                /* @__PURE__ */ e("div", { className: "w-full px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-card)] border border-[var(--border-color)] text-sm text-[var(--text-secondary)] opacity-60", children: "Lumière Pro" }),
                /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-tertiary)]", children: t("editorMock.parentLocked") })
              ] }),
              /* @__PURE__ */ r("div", { className: "flex items-center gap-2 px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-card)] border border-[var(--border-color)]", children: [
                /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider", children: t("editorMock.fieldScope") }),
                /* @__PURE__ */ e("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded bg-[var(--accent-bg)] text-[var(--accent-text)] border border-[var(--accent-border)]", children: t("listMock.scopeTenant") })
              ] })
            ] }),
            /* @__PURE__ */ r("div", { className: "rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-4", children: [
              /* @__PURE__ */ e("p", { className: "text-xs font-medium text-[var(--text-secondary)] mb-3", children: t("editorMock.previewTitle") }),
              /* @__PURE__ */ r("div", { className: "rounded-[var(--radius-card)] bg-[var(--bg-card)] border border-[var(--border-color)] overflow-hidden", children: [
                /* @__PURE__ */ r("div", { className: "h-8 flex items-center px-3 gap-2", style: { backgroundColor: "#8b5cf6" }, children: [
                  /* @__PURE__ */ e(d, { className: "w-3.5 h-3.5 text-white" }),
                  /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white", children: "Lumière Pro" })
                ] }),
                /* @__PURE__ */ r("div", { className: "p-3 space-y-2", children: [
                  /* @__PURE__ */ e("div", { className: "h-2 w-3/4 rounded-full", style: { backgroundColor: "#8b5cf6" } }),
                  /* @__PURE__ */ e("div", { className: "h-2 w-1/2 rounded-full bg-[var(--border-color)]" }),
                  /* @__PURE__ */ r("div", { className: "flex gap-2 mt-3", children: [
                    /* @__PURE__ */ e("div", { className: "flex-1 h-6 rounded-[var(--radius-button)] flex items-center justify-center", style: { backgroundColor: "#8b5cf6" }, children: /* @__PURE__ */ e("span", { className: "text-[10px] text-white font-medium", children: t("editorMock.previewBtn") }) }),
                    /* @__PURE__ */ e("div", { className: "flex-1 h-6 rounded-[var(--radius-button)] border border-[var(--border-color)] flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-[10px] text-[var(--text-secondary)]", children: t("editorMock.previewBtnSecondary") }) })
                  ] })
                ] })
              ] })
            ] })
          ] }),
          n !== "identity" && /* @__PURE__ */ r("div", { className: "flex items-center justify-center py-10 text-[var(--text-secondary)] text-sm gap-2", children: [
            /* @__PURE__ */ e(T, { className: "w-4 h-4 animate-spin opacity-40" }),
            /* @__PURE__ */ e("span", { className: "opacity-60", children: t(`editorMock.tab_${n}`) })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { className: "px-4 pb-4 space-y-1.5", children: [
          /* @__PURE__ */ e(c, { children: t("editorMock.annotations.tabs") }),
          /* @__PURE__ */ e(c, { children: t("editorMock.annotations.dirtyIndicator") }),
          /* @__PURE__ */ e(c, { children: t("editorMock.annotations.parentLocked") }),
          /* @__PURE__ */ e(c, { children: t("editorMock.annotations.livePreview") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "activation", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r("h2", { className: "text-2xl font-bold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-sm font-bold", children: "5" }),
        t("sections.activationView")
      ] }),
      /* @__PURE__ */ r("div", { className: "bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)] overflow-hidden", children: [
        /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ r("div", { className: "rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-5 space-y-4", children: [
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ r("h3", { className: "text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2", children: [
              /* @__PURE__ */ e(j, { className: "w-4 h-4 text-[var(--color-accent-600)]" }),
              t("activationMock.title")
            ] }),
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] mt-1", children: t("activationMock.hint") })
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-4 p-4 rounded-[var(--radius-card)] bg-[var(--bg-card)] border border-[var(--border-color)]", children: [
            /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium uppercase tracking-wider rounded bg-[var(--success-bg)] text-[var(--success-text)] border border-[var(--success-border)]", children: [
              /* @__PURE__ */ e(x, { className: "w-3.5 h-3.5" }),
              t("listMock.statusActive")
            ] }) }),
            /* @__PURE__ */ r("button", { type: "button", className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] text-sm bg-[var(--bg-secondary)] text-[var(--text-primary)] border border-[var(--border-color)]", children: [
              /* @__PURE__ */ e(i, { className: "w-4 h-4" }),
              t("activationMock.disableButton")
            ] })
          ] }),
          /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-4 p-4 rounded-[var(--radius-card)] bg-[var(--bg-card)] border border-[var(--border-color)] opacity-70", children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium uppercase tracking-wider rounded bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]", children: [
                /* @__PURE__ */ e(i, { className: "w-3.5 h-3.5" }),
                t("listMock.statusDisabled")
              ] }),
              /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-secondary)]", children: t("activationMock.disabledExample") })
            ] }),
            /* @__PURE__ */ r("button", { type: "button", className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] text-sm bg-[var(--color-accent-500)] text-white font-medium", children: [
              /* @__PURE__ */ e(B, { className: "w-4 h-4" }),
              t("activationMock.enableButton")
            ] })
          ] })
        ] }) }),
        /* @__PURE__ */ r("div", { className: "px-4 pb-4 space-y-1.5", children: [
          /* @__PURE__ */ e(c, { children: t("activationMock.annotations.scope") }),
          /* @__PURE__ */ e(c, { children: t("activationMock.annotations.propagation") })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r("section", { id: "cas-usage", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r("h2", { className: "text-2xl font-bold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-sm font-bold", children: "6" }),
        t("sections.useCases")
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [1, 2, 3].map((a) => /* @__PURE__ */ r("div", { className: "p-5 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
        /* @__PURE__ */ r("div", { className: "flex items-center gap-2.5 mb-3", children: [
          /* @__PURE__ */ e("div", { className: "w-9 h-9 rounded-full bg-[var(--accent-bg)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ e(P, { className: "w-4 h-4 text-[var(--accent-text)]" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("div", { className: "text-xs font-semibold text-[var(--color-accent-600)] uppercase tracking-wide", children: t(`useCases.${a}.persona`) }),
            /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-secondary)]", children: t(`useCases.${a}.role`) })
          ] })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-sm mb-2", children: t(`useCases.${a}.situation`) }),
        /* @__PURE__ */ r("div", { className: "text-sm p-3 rounded-md border-l-2 border-[var(--color-accent-500)] bg-[var(--bg-secondary)]", children: [
          /* @__PURE__ */ r("span", { className: "font-medium text-[var(--text-primary)]", children: [
            t("useCases.withLabel"),
            " "
          ] }),
          /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)]", children: t(`useCases.${a}.outcome`) })
        ] })
      ] }, a)) })
    ] }),
    /* @__PURE__ */ r("section", { id: "fonctionnalites", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r("h2", { className: "text-2xl font-bold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-sm font-bold", children: "7" }),
        t("sections.features")
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((a) => /* @__PURE__ */ r("div", { className: "p-5 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)] flex gap-4", children: [
        /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-[var(--accent-bg)] flex-shrink-0 h-fit", children: /* @__PURE__ */ e(E, { className: "h-4 w-4 text-[var(--accent-text)]" }) }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-1", children: t(`features.${a}.title`) }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] mb-2", children: t(`features.${a}.desc`) }),
          /* @__PURE__ */ r("div", { className: "px-3 py-1.5 rounded-md bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ e("span", { className: "font-medium text-[var(--color-accent-600)]", children: "Ex. " }),
            t(`features.${a}.example`)
          ] })
        ] })
      ] }, a)) })
    ] }),
    /* @__PURE__ */ r("section", { id: "faq", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r("h2", { className: "text-2xl font-bold mb-4 flex items-center gap-2", children: [
        /* @__PURE__ */ e("span", { className: "w-8 h-8 rounded-full bg-[var(--color-accent-600)] text-white flex items-center justify-center text-sm font-bold", children: "8" }),
        t("sections.faq")
      ] }),
      /* @__PURE__ */ e("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((a) => /* @__PURE__ */ r("div", { className: "p-4 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-card)]", children: [
        /* @__PURE__ */ r("div", { className: "flex items-start gap-2 mb-1.5", children: [
          /* @__PURE__ */ e(D, { className: "h-4 w-4 text-[var(--color-accent-600)] flex-shrink-0 mt-0.5" }),
          /* @__PURE__ */ e("h3", { className: "text-sm font-medium", children: t(`faq.${a}.question`) })
        ] }),
        /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)] pl-6", children: t(`faq.${a}.answer`) })
      ] }, a)) })
    ] }),
    /* @__PURE__ */ r("section", { id: "reference", className: "scroll-mt-4", children: [
      /* @__PURE__ */ r(
        "button",
        {
          type: "button",
          onClick: () => f(!o),
          className: "w-full flex items-center justify-between p-4 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-card)] hover:bg-[var(--bg-secondary)] transition-colors",
          children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ e($, { className: "h-4 w-4 text-[var(--text-tertiary)]" }),
              /* @__PURE__ */ e("span", { className: "text-sm font-semibold", children: t("sections.techRef") })
            ] }),
            /* @__PURE__ */ e(m, { className: `h-4 w-4 text-[var(--text-tertiary)] transition-transform ${o ? "rotate-90" : ""}` })
          ]
        }
      ),
      o && /* @__PURE__ */ r("div", { className: "mt-2 border border-[var(--border-color)] rounded-[var(--radius-card)] bg-[var(--bg-card)] divide-y divide-[var(--border-color)]", children: [
        /* @__PURE__ */ r("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: t("techRef.rulesTitle") }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: v.map((a) => /* @__PURE__ */ r("div", { className: "p-2.5 rounded-lg bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ e("span", { className: "font-mono text-[var(--color-accent-600)] mr-2", children: a.id }),
            /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)]", children: t(a.key) })
          ] }, a.id)) })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: t("techRef.permissionsTitle") }),
          /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r("table", { className: "w-full text-xs", children: [
            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("th", { className: "text-left py-2 px-2 text-[var(--text-secondary)] font-medium", children: t("techRef.permColAction") }),
              /* @__PURE__ */ e("th", { className: "text-left py-2 px-2 text-[var(--text-secondary)] font-medium", children: t("techRef.permColPerm") })
            ] }) }),
            /* @__PURE__ */ e("tbody", { children: [
              { action: t("techRef.permView"), perm: "administration.uiconfiguration.presets.view" },
              { action: t("techRef.permCreate"), perm: "administration.uiconfiguration.presets.create" },
              { action: t("techRef.permUpdate"), perm: "administration.uiconfiguration.presets.update" },
              { action: t("techRef.permDelete"), perm: "administration.uiconfiguration.presets.delete" }
            ].map((a) => /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)]", children: [
              /* @__PURE__ */ e("td", { className: "py-2 px-2 text-[var(--text-secondary)]", children: a.action }),
              /* @__PURE__ */ e("td", { className: "py-2 px-2 font-mono text-[var(--color-accent-600)]", children: a.perm })
            ] }, a.perm)) })
          ] }) })
        ] }),
        /* @__PURE__ */ r("div", { className: "p-4", children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: t("techRef.endpointsTitle") }),
          /* @__PURE__ */ e("div", { className: "space-y-2", children: h.map((a, l) => /* @__PURE__ */ r("div", { className: "p-2.5 rounded-lg bg-[var(--bg-secondary)] text-xs", children: [
            /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-0.5 flex-wrap", children: [
              /* @__PURE__ */ e("span", { className: `font-bold px-1.5 py-0.5 rounded border text-xs ${V[a.method] ?? ""}`, children: a.method }),
              /* @__PURE__ */ e("code", { className: "text-[var(--text-primary)]", children: a.path })
            ] }),
            /* @__PURE__ */ r("div", { className: "text-[var(--text-secondary)] pl-1", children: [
              a.handler,
              " — ",
              /* @__PURE__ */ e("span", { className: "font-mono text-[var(--color-accent-600)]", children: a.permission })
            ] })
          ] }, l)) })
        ] })
      ] })
    ] })
  ] });
}
export {
  K as default
};
//# sourceMappingURL=index-BS232aQS.js.map
