import { jsxs as r, jsx as e, Fragment as Xe } from "react/jsx-runtime";
import { useMemo as re, useState as f, useRef as Ze, useEffect as ge, useCallback as F } from "react";
import { useNavigate as It, useParams as Ut, useSearchParams as Vt } from "react-router-dom";
import { useTranslation as Se } from "react-i18next";
import { u as Lt } from "./useTabNavigation-Bsbskz0i.js";
import { Layers as qe, Square as Dt, Droplets as Mt, Info as Ot, XCircle as Rt, AlertTriangle as zt, CheckCircle2 as Bt, X as vt, Loader2 as te, EyeOff as mt, Check as ke, Eye as xt, Power as Ht, Globe as bt, Lock as pt, Search as Ft, Users as _t, ShieldCheck as jt, Sparkles as _e, PenTool as Jt, UserCog as Kt, Shield as $t, Crown as Gt, ArrowLeft as Wt, RotateCcw as qt } from "lucide-react";
import { a8 as yt, a9 as Ct, $ as pe, aa as Nt, v as E, ab as gt, j as Yt, ac as Je, ad as Ke, ae as Xt, af as Zt, ag as Qt, ah as er, ai as tr, P as ft, aj as rr, ak as ar } from "./index-CeEMms9z.js";
import { C as nr } from "./ConfirmModal-Ve-8m7xp.js";
import { e as Z } from "./extractErrorMessage-C0uxTGn5.js";
import { C as $e, I as or, A as ir, T as sr, D as cr, B as lr, L as dr } from "./DataVizEditor-ymsAbmGw.js";
import { L as ht } from "./LogoUploader-MJaO1AEq.js";
const Ie = {
  accent: "#6366f1",
  background: null,
  text: null,
  prefersDark: !0
}, ur = [
  { id: "default", labelKey: "uiConfiguration.backgroundEditor.modeDefault", Icon: qe },
  { id: "uniform", labelKey: "uiConfiguration.backgroundEditor.modeUniform", Icon: Dt },
  { id: "tinted", labelKey: "uiConfiguration.backgroundEditor.modeTinted", Icon: Mt }
], mr = [
  { id: "crisp", labelKey: "uiConfiguration.backgroundEditor.intensityCrisp", descKey: "uiConfiguration.backgroundEditor.intensityCrispDesc" },
  { id: "neutral", labelKey: "uiConfiguration.backgroundEditor.intensityNeutral", descKey: "uiConfiguration.backgroundEditor.intensityNeutralDesc" },
  { id: "muted", labelKey: "uiConfiguration.backgroundEditor.intensityMuted", descKey: "uiConfiguration.backgroundEditor.intensityMutedDesc" }
];
function br(t, o, s) {
  const a = (C) => {
    const g = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(C);
    return g ? [parseInt(g[1], 16), parseInt(g[2], 16), parseInt(g[3], 16)] : [0, 0, 0];
  }, [u, c, b] = a(t), [l, p, d] = a(o), y = (C) => Math.max(0, Math.min(255, Math.round(C))).toString(16).padStart(2, "0");
  return `#${y(u * (1 - s) + l * s)}${y(c * (1 - s) + p * s)}${y(b * (1 - s) + d * s)}`;
}
function pr({
  value: t,
  onChange: o,
  mode: s,
  accentColorKey: a,
  sourceBackground: u,
  currentBackgrounds: c,
  onChangeCurrentBackground: b
}) {
  const { t: l } = Se("admin"), p = t?.mode ?? "default", d = re(
    () => s === "dark" ? yt(a) : Ct(a),
    [s, a]
  ), y = pe[a]?.shades?.[500] ?? "#6366f1", C = re(
    () => Nt(s, d.backgrounds, y, t),
    [s, d, y, t]
  ), g = u ?? c.app ?? null, I = (m) => {
    if (m === "default") {
      o(null);
      return;
    }
    if (m === "uniform") {
      const k = g ?? br(s === "dark" ? "#161618" : "#fafafa", y, 0.05);
      o({
        mode: "uniform",
        uniform: k
      });
      return;
    }
    if (m === "tinted") {
      o({
        mode: "tinted",
        intensity: "neutral",
        tint: 0.1,
        tintColor: g ?? y
      });
      return;
    }
  };
  return /* @__PURE__ */ r("section", { className: "rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-4 space-y-3", children: [
    /* @__PURE__ */ r("div", { className: "flex items-baseline justify-between gap-3 flex-wrap", children: [
      /* @__PURE__ */ e("h4", { className: "text-xs font-semibold tracking-widest text-[var(--text-muted)] uppercase", children: l("uiConfiguration.backgroundEditor.title") }),
      /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-muted)]", children: l("uiConfiguration.backgroundEditor.description") })
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-1 p-1 rounded-[var(--radius-button)] bg-[var(--bg-primary)] border border-[var(--border-color)]", children: ur.map(({ id: m, labelKey: S, Icon: k }) => {
      const T = p === m, ae = l(S);
      return /* @__PURE__ */ r(
        "button",
        {
          type: "button",
          onClick: () => I(m),
          className: [
            "flex flex-col items-center gap-1 px-2 py-2 rounded-[var(--radius-button)] text-xs font-medium transition-colors",
            T ? "bg-[var(--color-accent-500)] text-white" : "text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)]"
          ].join(" "),
          title: ae,
          "aria-pressed": T,
          children: [
            /* @__PURE__ */ e(k, { className: "w-4 h-4" }),
            /* @__PURE__ */ e("span", { className: "truncate", children: ae })
          ]
        },
        m
      );
    }) }),
    p === "default" && /* @__PURE__ */ r("div", { className: "p-2 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)] space-y-1.5", children: [
      /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-1.5", children: ["app", "primary", "secondary", "card"].map((m) => {
        const S = c[m], k = {
          app: "uiConfiguration.backgroundEditor.slotApp",
          primary: "uiConfiguration.backgroundEditor.slotPrimary",
          secondary: "uiConfiguration.backgroundEditor.slotSecondary",
          card: "uiConfiguration.backgroundEditor.slotCard"
        }[m];
        return /* @__PURE__ */ r(
          "div",
          {
            className: "flex flex-col items-center gap-1 p-1.5 rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)]",
            children: [
              /* @__PURE__ */ e("span", { className: "text-[9px] font-medium uppercase tracking-wider text-[var(--text-muted)] text-center leading-tight", children: l(k) }),
              /* @__PURE__ */ e(
                $e,
                {
                  value: S,
                  onChange: (T) => b(m, T),
                  label: l(k),
                  size: "sm",
                  recentKey: "bg-editor"
                }
              ),
              /* @__PURE__ */ e("code", { className: "text-[9px] font-mono text-[var(--text-secondary)]", children: S.toUpperCase() })
            ]
          },
          m
        );
      }) }),
      /* @__PURE__ */ e("p", { className: "text-[10px] text-[var(--text-muted)] leading-snug", children: l("uiConfiguration.backgroundEditor.modeDefaultHint") })
    ] }),
    p === "uniform" && /* @__PURE__ */ r("div", { className: "space-y-3 p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]", children: [
      /* @__PURE__ */ r("label", { className: "block", children: [
        /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: l("uiConfiguration.backgroundEditor.uniformColor") }),
        /* @__PURE__ */ r("div", { className: "mt-2 flex items-center gap-3", children: [
          /* @__PURE__ */ e(
            $e,
            {
              value: t?.uniform ?? "#1c1c1f",
              onChange: (m) => o({ ...t ?? { mode: "uniform" }, mode: "uniform", uniform: m }),
              label: l("uiConfiguration.backgroundEditor.uniformColor"),
              size: "lg",
              recentKey: "bg-editor"
            }
          ),
          /* @__PURE__ */ e("code", { className: "font-mono text-sm px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--text-primary)] flex-1 truncate", children: (t?.uniform ?? "#1c1c1f").toUpperCase() })
        ] })
      ] }),
      /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-muted)]", children: l("uiConfiguration.backgroundEditor.uniformHint") })
    ] }),
    p === "tinted" && /* @__PURE__ */ r("div", { className: "space-y-2.5 p-3 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]", children: [
      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-1.5", children: mr.map((m) => {
        const S = (t?.intensity ?? "neutral") === m.id;
        return /* @__PURE__ */ e(
          "button",
          {
            type: "button",
            onClick: () => o({ ...t ?? { mode: "tinted" }, mode: "tinted", intensity: m.id }),
            "aria-pressed": S,
            title: l(m.descKey),
            className: [
              "flex items-center justify-center px-2 py-1.5 rounded-[var(--radius-button)] text-xs font-medium border transition-colors",
              S ? "border-[var(--color-accent-500)] bg-[var(--accent-bg)] text-[var(--text-primary)]" : "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:border-[var(--color-accent-400)]"
            ].join(" "),
            children: l(m.labelKey)
          },
          m.id
        );
      }) }),
      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
            /* @__PURE__ */ e("span", { className: "text-[11px] font-medium text-[var(--text-secondary)] uppercase tracking-wider", children: l("uiConfiguration.backgroundEditor.tintIntensity") }),
            /* @__PURE__ */ r("span", { className: "text-[10px] font-mono text-[var(--text-muted)]", children: [
              Math.round((t?.tint ?? 0.1) * 100),
              "%"
            ] })
          ] }),
          /* @__PURE__ */ e(
            "input",
            {
              type: "range",
              min: 0,
              max: 30,
              step: 1,
              value: Math.round((t?.tint ?? 0.1) * 100),
              onChange: (m) => o({ ...t ?? { mode: "tinted" }, mode: "tinted", tint: Number(m.target.value) / 100 }),
              className: "w-full mt-1 accent-[var(--color-accent-500)]"
            }
          )
        ] }),
        /* @__PURE__ */ r("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [
          /* @__PURE__ */ e(
            $e,
            {
              value: t?.tintColor ?? y,
              onChange: (m) => o({ ...t ?? { mode: "tinted" }, mode: "tinted", tintColor: m }),
              label: l("uiConfiguration.backgroundEditor.tintColor"),
              size: "md",
              recentKey: "bg-editor-tint"
            }
          ),
          /* @__PURE__ */ e("code", { className: "text-[10px] font-mono text-[var(--text-secondary)]", children: (t?.tintColor ?? y).toUpperCase() }),
          t?.tintColor && /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: () => o({ ...t ?? { mode: "tinted" }, mode: "tinted", tintColor: void 0 }),
              className: "text-[10px] text-[var(--text-muted)] underline-offset-2 hover:underline",
              title: l("uiConfiguration.backgroundEditor.tintColorReset"),
              children: "↺"
            }
          )
        ] })
      ] })
    ] }),
    p !== "default" && /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-1.5", children: ["app", "primary", "secondary", "card"].map((m) => /* @__PURE__ */ r(
      "div",
      {
        className: "flex flex-col items-center justify-center h-11 rounded-[var(--radius-card)] border text-[9px] font-medium",
        style: {
          backgroundColor: C[m],
          borderColor: d.border.default,
          color: d.text.secondary
        },
        children: [
          /* @__PURE__ */ e("span", { className: "capitalize leading-none", children: l(`uiConfiguration.backgroundEditor.slot${m.charAt(0).toUpperCase()}${m.slice(1)}`) }),
          /* @__PURE__ */ e("code", { className: "text-[8px] opacity-60 mt-0.5", children: C[m].toUpperCase() })
        ]
      },
      m
    )) })
  ] });
}
const gr = {
  success: {
    light: {
      bg: ["#f0fdfa", "#ecfdf5", "#dcfce7", "#d1fae5"],
      text: ["#0f766e", "#047857", "#065f46", "#064e3b"],
      border: ["#99f6e4", "#a7f3d0", "#6ee7b7", "#5eead4"],
      dot: ["#14b8a6", "#10b981", "#059669", "#22c55e"]
    },
    dark: {
      bg: ["rgba(20,184,166,0.15)", "rgba(16,185,129,0.15)", "rgba(34,197,94,0.15)", "rgba(5,150,105,0.15)"],
      text: ["#5eead4", "#6ee7b7", "#86efac", "#a7f3d0"],
      border: ["rgba(20,184,166,0.3)", "rgba(16,185,129,0.3)", "rgba(34,197,94,0.3)", "rgba(5,150,105,0.3)"],
      dot: ["#14b8a6", "#10b981", "#22c55e", "#059669"]
    }
  },
  warning: {
    light: {
      bg: ["#fffbeb", "#fef3c7", "#fef9c3", "#ffedd5"],
      text: ["#b45309", "#92400e", "#9a3412", "#854d0e"],
      border: ["#fde68a", "#fcd34d", "#fdba74", "#facc15"],
      dot: ["#f59e0b", "#eab308", "#f97316", "#d97706"]
    },
    dark: {
      bg: ["rgba(245,158,11,0.15)", "rgba(234,179,8,0.15)", "rgba(249,115,22,0.15)", "rgba(217,119,6,0.15)"],
      text: ["#fbbf24", "#fcd34d", "#fdba74", "#facc15"],
      border: ["rgba(245,158,11,0.3)", "rgba(234,179,8,0.3)", "rgba(249,115,22,0.3)", "rgba(217,119,6,0.3)"],
      dot: ["#f59e0b", "#eab308", "#f97316", "#d97706"]
    }
  },
  error: {
    light: {
      bg: ["#fff1f2", "#fef2f2", "#ffe4e6", "#fee2e2"],
      text: ["#be123c", "#b91c1c", "#9f1239", "#991b1b"],
      border: ["#fecdd3", "#fecaca", "#fda4af", "#fca5a5"],
      dot: ["#f43f5e", "#ef4444", "#e11d48", "#dc2626"]
    },
    dark: {
      bg: ["rgba(244,63,94,0.15)", "rgba(239,68,68,0.15)", "rgba(225,29,72,0.15)", "rgba(220,38,38,0.15)"],
      text: ["#fb7185", "#fca5a5", "#fda4af", "#f87171"],
      border: ["rgba(244,63,94,0.3)", "rgba(239,68,68,0.3)", "rgba(225,29,72,0.3)", "rgba(220,38,38,0.3)"],
      dot: ["#f43f5e", "#ef4444", "#e11d48", "#dc2626"]
    }
  },
  info: {
    light: {
      bg: ["#f0f9ff", "#eff6ff", "#ecfeff", "#e0f2fe"],
      text: ["#0369a1", "#1d4ed8", "#0e7490", "#075985"],
      border: ["#bae6fd", "#bfdbfe", "#a5f3fc", "#7dd3fc"],
      dot: ["#0ea5e9", "#3b82f6", "#06b6d4", "#0284c7"]
    },
    dark: {
      bg: ["rgba(14,165,233,0.15)", "rgba(59,130,246,0.15)", "rgba(6,182,212,0.15)", "rgba(2,132,199,0.15)"],
      text: ["#7dd3fc", "#93c5fd", "#67e8f9", "#bae6fd"],
      border: ["rgba(14,165,233,0.3)", "rgba(59,130,246,0.3)", "rgba(6,182,212,0.3)", "rgba(2,132,199,0.3)"],
      dot: ["#0ea5e9", "#3b82f6", "#06b6d4", "#0284c7"]
    }
  }
}, Ye = {
  success: { label: "Succès", description: "Opération réussie, validation confirmée", Icon: Bt, sampleMsg: "Les modifications ont été enregistrées." },
  warning: { label: "Avertissement", description: "Action à confirmer, attention requise", Icon: zt, sampleMsg: "Cette action est irréversible." },
  error: { label: "Erreur", description: "Échec, problème bloquant", Icon: Rt, sampleMsg: "Impossible d'accéder à la ressource." },
  info: { label: "Information", description: "Astuce, statut neutre, conseil", Icon: Ot, sampleMsg: "Cliquez ici pour en savoir plus." }
}, He = {
  bg: { label: "Arrière-plan", description: "Fond du bandeau/badge" },
  text: { label: "Texte", description: "Couleur du message" },
  border: { label: "Bordure", description: "Contour de l'alerte" },
  dot: { label: "Icône / point", description: "Point de statut + icône" }
};
function fr({ value: t, onChange: o, mode: s = "dark" }) {
  const { t: a } = Se("admin"), [u, c] = f(null), b = (l, p, d) => {
    o({ ...t, [l]: { ...t[l], [p]: d } });
  };
  return /* @__PURE__ */ r("div", { className: "space-y-4", children: [
    /* @__PURE__ */ r("div", { children: [
      /* @__PURE__ */ e("h3", { className: "text-base font-semibold text-[var(--text-primary)]", children: a("statuses.title", { defaultValue: "Messages de statut" }) }),
      /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: a("statuses.hint", { defaultValue: "Cliquez sur un élément d'une alerte pour changer sa couleur." }) })
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: Object.keys(Ye).map((l) => {
      const p = Ye[l], d = t[l], y = p.Icon;
      return /* @__PURE__ */ r("div", { className: "rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-3 space-y-3", children: [
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h4", { className: "text-sm font-semibold text-[var(--text-primary)]", children: p.label }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-muted)]", children: p.description })
        ] }),
        /* @__PURE__ */ r(
          "div",
          {
            className: "rounded-[var(--radius-card)] border p-3 flex items-start gap-2.5 transition-all",
            style: { backgroundColor: d.bg, borderColor: d.border },
            children: [
              /* @__PURE__ */ e(
                "span",
                {
                  title: "Éditer l'icône / point",
                  className: "inline-flex cursor-pointer hover:scale-110 transition-transform mt-0.5 shrink-0",
                  onClick: () => c({ kind: l, swatch: "dot" }),
                  children: /* @__PURE__ */ e(y, { className: "w-4 h-4", style: { color: d.dot } })
                }
              ),
              /* @__PURE__ */ e(
                "div",
                {
                  className: "flex-1 text-xs cursor-pointer",
                  style: { color: d.text },
                  onClick: () => c({ kind: l, swatch: "text" }),
                  title: "Éditer le texte",
                  children: p.sampleMsg
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-1.5", children: Object.keys(He).map((C) => {
          const g = d[C];
          return /* @__PURE__ */ r(
            "button",
            {
              type: "button",
              onClick: () => c({ kind: l, swatch: C }),
              className: "group flex flex-col items-center gap-1 p-1.5 rounded-[var(--radius-button)] hover:bg-[var(--bg-tertiary)] transition-colors",
              title: He[C].description,
              children: [
                /* @__PURE__ */ e(
                  "span",
                  {
                    className: "w-full h-6 rounded border border-[var(--border-color)] group-hover:ring-2 group-hover:ring-[var(--color-accent-500)]",
                    style: { backgroundColor: g }
                  }
                ),
                /* @__PURE__ */ e("span", { className: "text-[10px] text-[var(--text-muted)] leading-none", children: He[C].label })
              ]
            },
            C
          );
        }) }),
        /* @__PURE__ */ r("div", { className: "flex items-center justify-between text-[10px] text-[var(--text-muted)]", children: [
          /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: () => c({ kind: l, swatch: "bg" }),
              className: "hover:text-[var(--text-primary)] transition-colors",
              children: "← Modifier le fond"
            }
          ),
          /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: () => c({ kind: l, swatch: "border" }),
              className: "hover:text-[var(--text-primary)] transition-colors",
              children: "Modifier la bordure →"
            }
          )
        ] })
      ] }, l);
    }) }),
    u && /* @__PURE__ */ e(
      hr,
      {
        kind: u.kind,
        swatch: u.swatch,
        color: t[u.kind][u.swatch],
        suggestions: gr[u.kind][s][u.swatch],
        onChange: (l) => b(u.kind, u.swatch, l),
        onClose: () => c(null)
      }
    )
  ] });
}
function hr({
  kind: t,
  swatch: o,
  color: s,
  suggestions: a,
  onChange: u,
  onClose: c
}) {
  const b = Ze(null);
  ge(() => {
    const d = (y) => {
      b.current && !b.current.contains(y.target) && c();
    };
    return window.addEventListener("mousedown", d), () => window.removeEventListener("mousedown", d);
  }, [c]);
  const l = Ye[t], p = He[o];
  return /* @__PURE__ */ r(Xe, { children: [
    /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/40 z-50", onClick: c }),
    /* @__PURE__ */ r(
      "div",
      {
        ref: b,
        className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] w-80 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)] shadow-2xl p-4 space-y-3",
        onClick: (d) => d.stopPropagation(),
        children: [
          /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-2", children: [
            /* @__PURE__ */ r("div", { children: [
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)]", children: l.label }),
              /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: p.label })
            ] }),
            /* @__PURE__ */ e("button", { type: "button", onClick: c, className: "p-1 rounded hover:bg-[var(--bg-secondary)] text-[var(--text-muted)]", children: /* @__PURE__ */ e(vt, { className: "w-4 h-4" }) })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: p.description }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(
              "input",
              {
                type: "color",
                value: vr(s),
                onChange: (d) => u(d.target.value),
                className: "w-12 h-12 rounded-[var(--radius-input)] border border-[var(--border-color)] cursor-pointer"
              }
            ),
            /* @__PURE__ */ e(
              "input",
              {
                type: "text",
                value: s,
                onChange: (d) => u(d.target.value),
                className: "flex-1 font-mono text-sm px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--text-primary)]"
              }
            )
          ] }),
          a && a.length > 0 && /* @__PURE__ */ r("div", { className: "space-y-1.5", children: [
            /* @__PURE__ */ e("label", { className: "text-[10px] font-medium uppercase tracking-wider text-[var(--text-muted)] block", children: "Variantes suggérées" }),
            /* @__PURE__ */ e("div", { className: "grid grid-cols-4 gap-1.5", children: a.map((d) => {
              const y = d.toLowerCase() === s.toLowerCase();
              return /* @__PURE__ */ e(
                "button",
                {
                  type: "button",
                  onClick: () => u(d),
                  title: d.toUpperCase(),
                  "aria-label": d,
                  "aria-pressed": y,
                  className: [
                    "h-8 rounded-[var(--radius-input)] border transition-transform hover:scale-105",
                    y ? "border-[var(--color-accent-500)] ring-2 ring-[var(--color-accent-300)]" : "border-[var(--border-color)]"
                  ].join(" "),
                  style: { backgroundColor: d }
                },
                d
              );
            }) })
          ] }),
          /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: c,
              className: "w-full px-3 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-sm font-medium hover:bg-[var(--color-accent-600)]",
              children: "Valider"
            }
          )
        ]
      }
    )
  ] });
}
function vr(t) {
  if (t.startsWith("#") && (t.length === 7 || t.length === 9)) return t.slice(0, 7);
  const o = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(t);
  if (o) {
    const s = (a) => Math.max(0, Math.min(255, parseInt(a, 10))).toString(16).padStart(2, "0");
    return `#${s(o[1])}${s(o[2])}${s(o[3])}`;
  }
  return "#000000";
}
const Ge = {
  canUsersChangeTheme: !0,
  canUsersChangePreset: !0,
  canUsersCreatePresets: !0,
  allowedThemeIds: null,
  allowedPresetIds: null,
  allowUserCustomization: !0
};
function xr({ themeId: t, theme: o, onThemeChanged: s }) {
  const { t: a } = Se(["admin", "common"]), [u, c] = f([]), [b, l] = f(/* @__PURE__ */ new Set()), [p, d] = f(!1), [y, C] = f(!1), [g, I] = f(""), [m, S] = f([]), [k, T] = f(/* @__PURE__ */ new Set()), [ae, R] = f(!1), [fe, J] = f(!1), [me, W] = f(!1), [ne, w] = f(!1), [he, ve] = f(null), [h, z] = f(Ge), [K, oe] = f(!1), [O, Q] = f(!1), [q, ie] = f(!0), [L, D] = f(null), $ = F(async () => {
    ie(!0), D(null);
    try {
      const [i, N, x] = await Promise.all([
        E.uiThemes.getTenantAssignments(t),
        E.uiThemes.getTemplateAssignments(t),
        E.platformUiConfig.get()
      ]);
      c(i), l(new Set(i.filter((U) => U.isAssigned && !U.isAssignedViaTemplate).map((U) => U.tenantId))), S(N), T(new Set(N.filter((U) => U.isAssigned).map((U) => U.tenantTemplateId))), ve(x), z(x.userPermissions ?? Ge);
    } catch (i) {
      D(Z(i));
    } finally {
      ie(!1);
    }
  }, [t]);
  ge(() => {
    $();
  }, [$]);
  const xe = async () => {
    W(!0), D(null);
    try {
      await E.uiThemes.setDisabled(t, !o.isDisabled), await s();
    } catch (i) {
      D(Z(i));
    } finally {
      W(!1);
    }
  }, B = async (i) => {
    if (!o.isBuiltin) {
      w(!0), D(null);
      try {
        await E.uiThemes.setVisibility(t, i), await s();
      } catch (N) {
        D(Z(N));
      } finally {
        w(!1);
      }
    }
  }, _ = re(() => {
    const i = g.trim().toLowerCase();
    return i ? u.filter(
      (N) => N.tenantName.toLowerCase().includes(i) || N.tenantSlug.toLowerCase().includes(i) || (N.tenantTemplateName ?? "").toLowerCase().includes(i)
    ) : u;
  }, [u, g]), G = (i) => {
    l((N) => {
      const x = new Set(N);
      return x.has(i) ? x.delete(i) : x.add(i), x;
    });
  }, ye = () => {
    l((i) => {
      const N = _.map((X) => X.tenantId), x = N.length > 0 && N.every((X) => i.has(X)), U = new Set(i);
      return x ? N.forEach((X) => U.delete(X)) : N.forEach((X) => U.add(X)), U;
    });
  }, Y = re(
    () => new Set(u.filter((i) => i.isAssigned).map((i) => i.tenantId)),
    [u]
  ), Ce = b.size !== Y.size || Array.from(b).some((i) => !Y.has(i)), je = async () => {
    d(!0), D(null);
    try {
      await E.uiThemes.setTenantAssignments(t, Array.from(b)), C(!0), setTimeout(() => C(!1), 2e3);
      const i = await E.uiThemes.getTenantAssignments(t);
      c(i), l(new Set(i.filter((N) => N.isAssigned && !N.isAssignedViaTemplate).map((N) => N.tenantId)));
    } catch (i) {
      D(Z(i));
    } finally {
      d(!1);
    }
  }, se = (i) => {
    T((N) => {
      const x = new Set(N);
      return x.has(i) ? x.delete(i) : x.add(i), x;
    });
  }, M = re(
    () => new Set(m.filter((i) => i.isAssigned).map((i) => i.tenantTemplateId)),
    [m]
  ), be = k.size !== M.size || Array.from(k).some((i) => !M.has(i)), ce = async () => {
    R(!0), D(null);
    try {
      await E.uiThemes.setTemplateAssignments(t, Array.from(k)), J(!0), setTimeout(() => J(!1), 2e3);
      const [i, N] = await Promise.all([
        E.uiThemes.getTemplateAssignments(t),
        E.uiThemes.getTenantAssignments(t)
      ]);
      S(i), T(new Set(i.filter((x) => x.isAssigned).map((x) => x.tenantTemplateId))), c(N), l(new Set(N.filter((x) => x.isAssigned && !x.isAssignedViaTemplate).map((x) => x.tenantId)));
    } catch (i) {
      D(Z(i));
    } finally {
      R(!1);
    }
  }, j = he?.userPermissions ?? Ge, le = h.canUsersChangeTheme !== j.canUsersChangeTheme || h.canUsersChangePreset !== j.canUsersChangePreset || h.canUsersCreatePresets !== j.canUsersCreatePresets || h.allowUserCustomization !== j.allowUserCustomization, ee = async () => {
    oe(!0), D(null);
    try {
      const i = await E.platformUiConfig.updateUserPermissions({
        canUsersChangeTheme: h.canUsersChangeTheme,
        canUsersChangePreset: h.canUsersChangePreset,
        canUsersCreatePresets: h.canUsersCreatePresets,
        allowedThemeIds: h.allowedThemeIds,
        allowedPresetIds: h.allowedPresetIds,
        allowUserCustomization: h.allowUserCustomization
      });
      ve(i), z(i.userPermissions), Q(!0), setTimeout(() => Q(!1), 2e3);
    } catch (i) {
      D(Z(i));
    } finally {
      oe(!1);
    }
  };
  return q ? /* @__PURE__ */ r("div", { className: "flex items-center gap-2 py-8 text-[var(--text-muted)]", children: [
    /* @__PURE__ */ e(te, { className: "w-4 h-4 animate-spin" }),
    a("common:loading", { defaultValue: "Chargement…" })
  ] }) : /* @__PURE__ */ r("div", { className: "space-y-6", children: [
    L && /* @__PURE__ */ e("div", { className: "p-3 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)] text-sm text-[var(--error-text)]", children: L }),
    /* @__PURE__ */ e(
      we,
      {
        title: a("admin:uiConfiguration.activationTitle", { defaultValue: "Activation du thème" }),
        icon: /* @__PURE__ */ e(Ht, { className: "w-4 h-4" }),
        description: a("admin:uiConfiguration.activationHint", {
          defaultValue: "Un thème désactivé reste en base mais n’est plus proposé aux utilisateurs. Les thèmes built-in peuvent également être masqués."
        }),
        children: /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-4 p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
            o.isDisabled ? /* @__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-muted)] border border-[var(--border-color)]", children: [
              /* @__PURE__ */ e(mt, { className: "w-3.5 h-3.5" }),
              a("admin:uiConfiguration.disabledLabel", { defaultValue: "Désactivé" })
            ] }) : /* @__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(ke, { className: "w-3.5 h-3.5" }),
              a("admin:uiConfiguration.activeLabel", { defaultValue: "Actif" })
            ] }),
            /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-secondary)]", children: o.isDisabled ? a("admin:uiConfiguration.activationCurrentDisabled", { defaultValue: "Ce thème est masqué aux utilisateurs." }) : a("admin:uiConfiguration.activationCurrentActive", { defaultValue: "Ce thème est proposé aux utilisateurs." }) })
          ] }),
          /* @__PURE__ */ r(
            "button",
            {
              type: "button",
              onClick: xe,
              disabled: me,
              className: [
                "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] text-sm font-medium disabled:opacity-50",
                o.isDisabled ? "bg-[var(--color-accent-500)] text-white hover:bg-[var(--color-accent-600)]" : "bg-[var(--bg-secondary)] text-[var(--text-primary)] border border-[var(--border-color)] hover:bg-[var(--bg-tertiary)]"
              ].join(" "),
              children: [
                me ? /* @__PURE__ */ e(te, { className: "w-4 h-4 animate-spin" }) : o.isDisabled ? /* @__PURE__ */ e(xt, { className: "w-4 h-4" }) : /* @__PURE__ */ e(mt, { className: "w-4 h-4" }),
                o.isDisabled ? a("admin:uiConfiguration.activateTheme", { defaultValue: "Activer" }) : a("admin:uiConfiguration.deactivateTheme", { defaultValue: "Désactiver" })
              ]
            }
          )
        ] })
      }
    ),
    /* @__PURE__ */ r(
      we,
      {
        title: a("admin:uiConfiguration.visibilityTitle", { defaultValue: "Visibilité" }),
        icon: o.isPublic ? /* @__PURE__ */ e(bt, { className: "w-4 h-4" }) : /* @__PURE__ */ e(pt, { className: "w-4 h-4" }),
        description: a("admin:uiConfiguration.visibilityHint", {
          defaultValue: "Public = disponible pour tous les tenants. Privé = disponible uniquement pour les tenants listés ci-dessous."
        }),
        children: [
          /* @__PURE__ */ r("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [
            /* @__PURE__ */ r(
              "button",
              {
                type: "button",
                onClick: () => B(!0),
                disabled: ne || o.isPublic,
                className: [
                  "p-4 rounded-[var(--radius-card)] border text-left transition-all disabled:cursor-not-allowed",
                  o.isPublic ? "border-[var(--color-accent-500)] bg-[var(--accent-bg)]" : "border-[var(--border-color)] bg-[var(--bg-primary)] hover:border-[var(--color-accent-400)]"
                ].join(" "),
                children: [
                  /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-1", children: [
                    /* @__PURE__ */ e(bt, { className: "w-4 h-4 text-[var(--text-primary)]" }),
                    /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: a("admin:uiConfiguration.visibilityPublic", { defaultValue: "Public" }) })
                  ] }),
                  /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: a("admin:uiConfiguration.visibilityPublicHint", {
                    defaultValue: "Proposé à tous les tenants."
                  }) })
                ]
              }
            ),
            /* @__PURE__ */ r(
              "button",
              {
                type: "button",
                onClick: () => B(!1),
                disabled: ne || !o.isPublic || o.isBuiltin,
                title: o.isBuiltin ? a("admin:uiConfiguration.builtinAlwaysPublic", { defaultValue: "Les thèmes built-in restent toujours publics." }) : void 0,
                className: [
                  "p-4 rounded-[var(--radius-card)] border text-left transition-all disabled:cursor-not-allowed",
                  o.isPublic ? "border-[var(--border-color)] bg-[var(--bg-primary)] hover:border-[var(--color-accent-400)] disabled:opacity-50" : "border-[var(--color-accent-500)] bg-[var(--accent-bg)]"
                ].join(" "),
                children: [
                  /* @__PURE__ */ r("div", { className: "flex items-center gap-2 mb-1", children: [
                    /* @__PURE__ */ e(pt, { className: "w-4 h-4 text-[var(--text-primary)]" }),
                    /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: a("admin:uiConfiguration.visibilityPrivate", { defaultValue: "Privé" }) })
                  ] }),
                  /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: a("admin:uiConfiguration.visibilityPrivateHint", {
                    defaultValue: "Restreint aux tenants explicitement autorisés."
                  }) })
                ]
              }
            )
          ] }),
          ne && /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-xs text-[var(--text-muted)] mt-2", children: [
            /* @__PURE__ */ e(te, { className: "w-3 h-3 animate-spin" }),
            a("common:saving", { defaultValue: "Enregistrement…" })
          ] })
        ]
      }
    ),
    !o.isPublic && /* @__PURE__ */ e(
      we,
      {
        title: a("admin:uiConfiguration.themeTemplatesTitle", { defaultValue: "Modèles autorisés" }),
        icon: /* @__PURE__ */ e(qe, { className: "w-4 h-4" }),
        description: a("admin:uiConfiguration.themeTemplatesHint", {
          defaultValue: "Publier sur un modèle de tenant donne accès à ce thème à tous les tenants utilisant ce modèle — raccourci pratique si plusieurs tenants partagent le même modèle."
        }),
        headerExtra: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: a("admin:uiConfiguration.themeTenantsCount", {
            defaultValue: "{{selected}} / {{total}}",
            selected: k.size,
            total: m.length
          }) }),
          /* @__PURE__ */ r(
            "button",
            {
              type: "button",
              onClick: ce,
              disabled: ae || !be,
              className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-sm font-medium hover:bg-[var(--color-accent-600)] disabled:opacity-50",
              children: [
                ae ? /* @__PURE__ */ e(te, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(ke, { className: "w-4 h-4" }),
                fe ? a("common:saved", { defaultValue: "Enregistré" }) : a("common:save", { defaultValue: "Enregistrer" })
              ]
            }
          )
        ] }),
        children: m.length === 0 ? /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-muted)] py-4", children: a("admin:uiConfiguration.noTemplates", { defaultValue: "Aucun modèle de tenant configuré." }) }) : /* @__PURE__ */ e("div", { className: "rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-primary)] overflow-hidden", children: /* @__PURE__ */ r("table", { className: "w-full text-sm", children: [
          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)] bg-[var(--bg-tertiary)]", children: [
            /* @__PURE__ */ e("th", { className: "px-3 py-2 w-10" }),
            /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("admin:uiConfiguration.colTemplate", { defaultValue: "Modèle" }) }),
            /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("admin:uiConfiguration.colType", { defaultValue: "Type" }) }),
            /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("admin:uiConfiguration.colTenantCount", { defaultValue: "Tenants" }) })
          ] }) }),
          /* @__PURE__ */ e("tbody", { children: m.map((i) => {
            const N = k.has(i.tenantTemplateId);
            return /* @__PURE__ */ r(
              "tr",
              {
                onClick: () => se(i.tenantTemplateId),
                className: "border-b border-[var(--border-color)] last:border-0 hover:bg-[var(--bg-tertiary)] cursor-pointer",
                children: [
                  /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e(
                    "input",
                    {
                      type: "checkbox",
                      checked: N,
                      onChange: () => se(i.tenantTemplateId),
                      onClick: (x) => x.stopPropagation(),
                      className: "accent-[var(--color-accent-500)] cursor-pointer"
                    }
                  ) }),
                  /* @__PURE__ */ r("td", { className: "px-3 py-2", children: [
                    /* @__PURE__ */ e("div", { className: "font-medium text-[var(--text-primary)]", children: i.tenantTemplateName }),
                    /* @__PURE__ */ e("code", { className: "text-xs text-[var(--text-muted)] font-mono", children: i.tenantTemplateCode })
                  ] }),
                  /* @__PURE__ */ e("td", { className: "px-3 py-2 text-[var(--text-secondary)]", children: i.targetTenantType }),
                  /* @__PURE__ */ e("td", { className: "px-3 py-2 text-[var(--text-secondary)]", children: i.tenantCount })
                ]
              },
              i.tenantTemplateId
            );
          }) })
        ] }) })
      }
    ),
    !o.isPublic && /* @__PURE__ */ r(
      we,
      {
        title: a("admin:uiConfiguration.themeTenantsTitle", { defaultValue: "Tenants autorisés" }),
        icon: /* @__PURE__ */ e(_t, { className: "w-4 h-4" }),
        description: a("admin:uiConfiguration.themeTenantsHintPrivate", {
          defaultValue: "Cochez les tenants autorisés à utiliser ce thème privé. Les tenants non cochés ne verront pas ce thème (sauf via une publication par modèle)."
        }),
        headerExtra: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: a("admin:uiConfiguration.themeTenantsCount", {
            defaultValue: "{{selected}} / {{total}}",
            selected: b.size,
            total: u.length
          }) }),
          /* @__PURE__ */ r(
            "button",
            {
              type: "button",
              onClick: je,
              disabled: p || !Ce,
              className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-sm font-medium hover:bg-[var(--color-accent-600)] disabled:opacity-50",
              children: [
                p ? /* @__PURE__ */ e(te, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(ke, { className: "w-4 h-4" }),
                y ? a("common:saved", { defaultValue: "Enregistré" }) : a("common:save", { defaultValue: "Enregistrer" })
              ]
            }
          )
        ] }),
        children: [
          /* @__PURE__ */ r("div", { className: "relative", children: [
            /* @__PURE__ */ e(Ft, { className: "w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)]" }),
            /* @__PURE__ */ e(
              "input",
              {
                type: "text",
                value: g,
                onChange: (i) => I(i.target.value),
                placeholder: a("admin:uiConfiguration.searchTenants", { defaultValue: "Rechercher un tenant…" }),
                className: "w-full pl-9 pr-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-primary)] border border-[var(--border-color)] text-[var(--text-primary)]"
              }
            )
          ] }),
          u.length === 0 ? /* @__PURE__ */ e("div", { className: "text-sm text-[var(--text-muted)] py-4", children: a("admin:uiConfiguration.noTenants", { defaultValue: "Aucun tenant disponible." }) }) : /* @__PURE__ */ e("div", { className: "rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-primary)] overflow-hidden", children: /* @__PURE__ */ r("table", { className: "w-full text-sm", children: [
            /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { className: "border-b border-[var(--border-color)] bg-[var(--bg-tertiary)]", children: [
              /* @__PURE__ */ e("th", { className: "px-3 py-2 w-10", children: /* @__PURE__ */ e(
                "input",
                {
                  type: "checkbox",
                  checked: _.length > 0 && _.every((i) => b.has(i.tenantId)),
                  onChange: ye,
                  className: "accent-[var(--color-accent-500)] cursor-pointer"
                }
              ) }),
              /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("admin:uiConfiguration.colTenant", { defaultValue: "Tenant" }) }),
              /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("admin:uiConfiguration.colType", { defaultValue: "Type" }) }),
              /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("admin:uiConfiguration.colTemplate", { defaultValue: "Modèle" }) }),
              /* @__PURE__ */ e("th", { className: "px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("admin:uiConfiguration.colStatus", { defaultValue: "Statut" }) })
            ] }) }),
            /* @__PURE__ */ e("tbody", { children: _.map((i) => {
              const N = b.has(i.tenantId), x = i.isAssignedViaTemplate;
              return /* @__PURE__ */ r(
                "tr",
                {
                  onClick: () => !x && G(i.tenantId),
                  className: [
                    "border-b border-[var(--border-color)] last:border-0 hover:bg-[var(--bg-tertiary)]",
                    x ? "cursor-not-allowed opacity-80" : "cursor-pointer"
                  ].join(" "),
                  title: x ? a("admin:uiConfiguration.tenantInheritedFromTemplate", { defaultValue: "Accès hérité via la publication du modèle" }) : void 0,
                  children: [
                    /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e(
                      "input",
                      {
                        type: "checkbox",
                        checked: N || x,
                        disabled: x,
                        onChange: () => !x && G(i.tenantId),
                        onClick: (U) => U.stopPropagation(),
                        className: "accent-[var(--color-accent-500)] cursor-pointer disabled:cursor-not-allowed"
                      }
                    ) }),
                    /* @__PURE__ */ r("td", { className: "px-3 py-2", children: [
                      /* @__PURE__ */ r("div", { className: "font-medium text-[var(--text-primary)] flex items-center gap-2", children: [
                        i.tenantName,
                        x && /* @__PURE__ */ r(
                          "span",
                          {
                            className: "inline-flex items-center gap-1 px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-wider rounded bg-[var(--info-bg)] text-[var(--info-text)] border border-[var(--info-border)]",
                            title: a("admin:uiConfiguration.tenantInheritedFromTemplate", { defaultValue: "Accès hérité via la publication du modèle" }),
                            children: [
                              /* @__PURE__ */ e(qe, { className: "w-2.5 h-2.5" }),
                              a("admin:uiConfiguration.viaTemplateBadge", { defaultValue: "via modèle" })
                            ]
                          }
                        )
                      ] }),
                      /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)] font-mono", children: i.tenantSlug })
                    ] }),
                    /* @__PURE__ */ e("td", { className: "px-3 py-2 text-[var(--text-secondary)]", children: i.tenantType }),
                    /* @__PURE__ */ e("td", { className: "px-3 py-2 text-[var(--text-secondary)]", children: i.tenantTemplateName ? /* @__PURE__ */ r(Xe, { children: [
                      i.tenantTemplateName,
                      i.tenantTemplateCode && /* @__PURE__ */ r("code", { className: "ml-1 text-xs font-mono text-[var(--text-muted)]", children: [
                        "(",
                        i.tenantTemplateCode,
                        ")"
                      ] })
                    ] }) : /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: a("admin:uiConfiguration.noTemplate", { defaultValue: "—" }) }) }),
                    /* @__PURE__ */ e("td", { className: "px-3 py-2 text-[var(--text-secondary)]", children: i.tenantStatus })
                  ]
                },
                i.tenantId
              );
            }) })
          ] }) })
        ]
      }
    ),
    /* @__PURE__ */ e(
      we,
      {
        title: a("admin:uiConfiguration.themePermissionsTitle", { defaultValue: "Permissions utilisateurs" }),
        icon: /* @__PURE__ */ e(jt, { className: "w-4 h-4" }),
        description: a("admin:uiConfiguration.themePermissionsHint", {
          defaultValue: "Ces règles s’appliquent à tous les thèmes au niveau plateforme. Les tenants peuvent les restreindre (jamais les élargir)."
        }),
        headerExtra: /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: ee,
            disabled: K || !le,
            className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-sm font-medium hover:bg-[var(--color-accent-600)] disabled:opacity-50",
            children: [
              K ? /* @__PURE__ */ e(te, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(ke, { className: "w-4 h-4" }),
              O ? a("common:saved", { defaultValue: "Enregistré" }) : a("common:save", { defaultValue: "Enregistrer" })
            ]
          }
        ),
        children: /* @__PURE__ */ r("div", { className: "space-y-3 p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]", children: [
          /* @__PURE__ */ e(
            Ue,
            {
              label: a("admin:uiConfiguration.permCanChangeTheme", { defaultValue: "Autoriser les utilisateurs à changer de thème" }),
              checked: h.canUsersChangeTheme,
              onChange: (i) => z({ ...h, canUsersChangeTheme: i })
            }
          ),
          /* @__PURE__ */ e(
            Ue,
            {
              label: a("admin:uiConfiguration.permCanChangePreset", { defaultValue: "Autoriser les utilisateurs à changer de preset" }),
              checked: h.canUsersChangePreset,
              onChange: (i) => z({ ...h, canUsersChangePreset: i })
            }
          ),
          /* @__PURE__ */ e(
            Ue,
            {
              label: a("admin:uiConfiguration.permCanCreatePresets", { defaultValue: "Autoriser les utilisateurs à créer leurs presets" }),
              checked: h.canUsersCreatePresets,
              onChange: (i) => z({ ...h, canUsersCreatePresets: i })
            }
          ),
          /* @__PURE__ */ e(
            Ue,
            {
              label: a("admin:uiConfiguration.permAllowCustomization", { defaultValue: "Personnalisation utilisateur autorisée" }),
              checked: h.allowUserCustomization,
              onChange: (i) => z({ ...h, allowUserCustomization: i })
            }
          )
        ] })
      }
    )
  ] });
}
function we({
  title: t,
  description: o,
  icon: s,
  headerExtra: a,
  children: u
}) {
  return /* @__PURE__ */ r("section", { className: "rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-5 space-y-4", children: [
    /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-4 flex-wrap", children: [
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ r("h3", { className: "text-base font-semibold text-[var(--text-primary)] flex items-center gap-2", children: [
          s,
          t
        ] }),
        o && /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: o })
      ] }),
      a
    ] }),
    u
  ] });
}
function Ue({
  label: t,
  checked: o,
  onChange: s
}) {
  return /* @__PURE__ */ r("label", { className: "flex items-center gap-2 cursor-pointer", children: [
    /* @__PURE__ */ e(
      "input",
      {
        type: "checkbox",
        checked: o,
        onChange: (a) => s(a.target.checked),
        className: "w-4 h-4 accent-[var(--color-accent-500)] cursor-pointer"
      }
    ),
    /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-primary)]", children: t })
  ] });
}
function yr(t) {
  const o = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t.trim());
  return o ? [parseInt(o[1], 16), parseInt(o[2], 16), parseInt(o[3], 16)] : [0, 0, 0];
}
function Cr(t, o, s) {
  t /= 255, o /= 255, s /= 255;
  const a = Math.max(t, o, s), u = Math.min(t, o, s), c = (a + u) / 2;
  if (a === u) return [0, 0, c * 100];
  const b = a - u, l = c > 0.5 ? b / (2 - a - u) : b / (a + u);
  let p;
  switch (a) {
    case t:
      p = (o - s) / b + (o < s ? 6 : 0);
      break;
    case o:
      p = (s - t) / b + 2;
      break;
    default:
      p = (t - o) / b + 4;
  }
  return [p * 60, l * 100, c * 100];
}
function H(t, o, s) {
  const a = o / 100, u = s / 100, c = (1 - Math.abs(2 * u - 1)) * a, b = c * (1 - Math.abs(t / 60 % 2 - 1)), l = u - c / 2;
  let p = 0, d = 0, y = 0;
  t < 60 ? (p = c, d = b) : t < 120 ? (p = b, d = c) : t < 180 ? (d = c, y = b) : t < 240 ? (d = b, y = c) : t < 300 ? (p = b, y = c) : (p = c, y = b);
  const C = (g) => Math.max(0, Math.min(255, Math.round((g + l) * 255))).toString(16).padStart(2, "0");
  return `#${C(p)}${C(d)}${C(y)}`;
}
const Nr = {
  monochrome: [0, 0, 0, 0, 0, 0],
  analogous: [-45, -25, -10, 10, 25, 45],
  distinct: [0, 60, 120, 180, 240, 300]
}, wr = [80, 70, 60, 50, 40, 30], Tr = [40, 35, 30, 25, 20, 15];
function kr(t, o, s = "distinct") {
  const [a, u, c] = yr(t), [b, l] = Cr(a, u, c), p = Nr[s], d = s === "monochrome" ? Math.max(40, l) : 65, y = o === "dark" ? wr : Tr, C = {};
  for (let g = 0; g < gt.length; g++) {
    const I = gt[g], m = ((b + p[g]) % 360 + 360) % 360;
    if (s === "monochrome") {
      const S = y[g];
      o === "dark" ? C[I] = {
        bg: H(m, d * 0.35, Math.min(20, S - 60)),
        text: H(m, d, Math.max(60, S)),
        border: H(m, d * 0.5, Math.min(32, S - 45))
      } : C[I] = {
        bg: H(m, d * 0.5, Math.min(96, S + 60)),
        text: H(m, d, Math.min(45, S)),
        border: H(m, d * 0.45, Math.min(88, S + 50))
      };
      continue;
    }
    o === "dark" ? C[I] = {
      bg: H(m, d * 0.35, 16),
      text: H(m, d, 72),
      border: H(m, d * 0.5, 28)
    } : C[I] = {
      bg: H(m, d * 0.55, 95),
      text: H(m, d, 32),
      border: H(m, d * 0.45, 85)
    };
  }
  return C;
}
const wt = {
  global: { label: "Global", description: "Rôles transversaux à toutes les applications", Icon: Gt, sample: "Super Admin" },
  admin: { label: "Admin", description: "Administrateurs d'une application", Icon: $t, sample: "Administrateur" },
  manager: { label: "Manager", description: "Opérateurs courants", Icon: Kt, sample: "Opérateur" },
  contributor: { label: "Contributor", description: "Contributeurs / éditeurs métier", Icon: Jt, sample: "Contributeur" },
  viewer: { label: "Viewer", description: "Lecteurs / auditeurs", Icon: xt, sample: "Lecteur" },
  custom: { label: "Custom", description: "Rôles personnalisés créés par les admins", Icon: _e, sample: "Rôle personnalisé" }
}, Fe = {
  bg: { label: "Arrière-plan", description: "Fond du badge" },
  text: { label: "Texte / icône", description: "Couleur du texte et de l'icône" },
  border: { label: "Bordure", description: "Contour du badge" }
}, Sr = ["global", "admin", "manager", "contributor", "viewer", "custom"], Ar = [
  { id: "monochrome", labelKey: "categoryEditor.styleMonochrome" },
  { id: "analogous", labelKey: "categoryEditor.styleAnalogous" },
  { id: "distinct", labelKey: "categoryEditor.styleDistinct" }
];
function Er({ value: t, onChange: o, seedAccentHex: s, mode: a }) {
  const { t: u } = Se("admin"), [c, b] = f(null), [l, p] = f("distinct"), d = (g, I, m) => {
    o({ ...t, [g]: { ...t[g], [I]: m } });
  }, y = re(
    () => kr(s, a, l),
    [s, a, l]
  ), C = () => {
    o(y);
  };
  return /* @__PURE__ */ r("div", { className: "space-y-4", children: [
    /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-3 flex-wrap", children: [
      /* @__PURE__ */ r("div", { className: "min-w-0", children: [
        /* @__PURE__ */ e("h3", { className: "text-base font-semibold text-[var(--text-primary)]", children: u("categories.title", { defaultValue: "Catégories de rôles" }) }),
        /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: u("categories.hint", { defaultValue: "Cliquez sur un badge ou un échantillon pour modifier sa couleur. Ces couleurs sont utilisées pour les avatars et les badges de catégorie des rôles dans toute l'application." }) })
      ] }),
      /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ e(
          "select",
          {
            value: l,
            onChange: (g) => p(g.target.value),
            className: "text-xs px-2 py-1.5 rounded-[var(--radius-input)] bg-[var(--bg-primary)] border border-[var(--border-color)] text-[var(--text-primary)]",
            title: u("categoryEditor.styleLabel", { defaultValue: "Style de palette" }),
            "aria-label": u("categoryEditor.styleLabel", { defaultValue: "Style de palette" }),
            children: Ar.map((g) => /* @__PURE__ */ e("option", { value: g.id, children: u(g.labelKey, {
              defaultValue: g.id === "monochrome" ? "Monochrome" : g.id === "analogous" ? "Analogues" : "Distincts"
            }) }, g.id))
          }
        ),
        /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: C,
            className: "inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--accent-bg)] border border-[var(--accent-border)] text-[var(--color-accent-500)] hover:bg-[var(--color-accent-500)] hover:text-white transition-colors",
            title: u("uiConfiguration.syncFromThemeAccentHint", {
              defaultValue: "Régénère les 6 catégories à partir de l'accent du thème + style sélectionné."
            }),
            children: [
              /* @__PURE__ */ e(_e, { className: "w-3.5 h-3.5" }),
              u("uiConfiguration.syncFromThemeAccent", { defaultValue: "Synchroniser depuis l'accent du thème" })
            ]
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3", children: Sr.map((g) => {
      const I = wt[g], m = t[g], S = I.Icon;
      return /* @__PURE__ */ r("div", { className: "rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-3 space-y-3", children: [
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h4", { className: "text-sm font-semibold text-[var(--text-primary)]", children: I.label }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-muted)]", children: I.description })
        ] }),
        /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: () => b({ kind: g, swatch: "bg" }),
            className: "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-[var(--radius-badge)] text-xs font-medium border transition-transform hover:scale-105",
            style: { backgroundColor: m.bg, color: m.text, borderColor: m.border },
            title: "Modifier le fond",
            children: [
              /* @__PURE__ */ e(S, { className: "w-3.5 h-3.5" }),
              I.sample
            ]
          }
        ),
        /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-1.5", children: Object.keys(Fe).map((k) => {
          const T = m[k];
          return /* @__PURE__ */ r(
            "button",
            {
              type: "button",
              onClick: () => b({ kind: g, swatch: k }),
              className: "group flex flex-col items-center gap-1 p-1.5 rounded-[var(--radius-button)] hover:bg-[var(--bg-tertiary)] transition-colors",
              title: Fe[k].description,
              children: [
                /* @__PURE__ */ e(
                  "span",
                  {
                    className: "w-full h-6 rounded border border-[var(--border-color)] group-hover:ring-2 group-hover:ring-[var(--color-accent-500)]",
                    style: { backgroundColor: T }
                  }
                ),
                /* @__PURE__ */ e("span", { className: "text-[10px] text-[var(--text-muted)] leading-none", children: Fe[k].label })
              ]
            },
            k
          );
        }) })
      ] }, g);
    }) }),
    c && /* @__PURE__ */ e(
      Pr,
      {
        kind: c.kind,
        swatch: c.swatch,
        color: t[c.kind][c.swatch],
        suggestedColor: y[c.kind][c.swatch],
        onChange: (g) => d(c.kind, c.swatch, g),
        onClose: () => b(null)
      }
    )
  ] });
}
function Pr({
  kind: t,
  swatch: o,
  color: s,
  suggestedColor: a,
  onChange: u,
  onClose: c
}) {
  const b = Ze(null);
  ge(() => {
    const d = (y) => {
      b.current && !b.current.contains(y.target) && c();
    };
    return window.addEventListener("mousedown", d), () => window.removeEventListener("mousedown", d);
  }, [c]);
  const l = wt[t], p = Fe[o];
  return /* @__PURE__ */ r(Xe, { children: [
    /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/40 z-50", onClick: c }),
    /* @__PURE__ */ r(
      "div",
      {
        ref: b,
        className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] w-80 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)] shadow-2xl p-4 space-y-3",
        onClick: (d) => d.stopPropagation(),
        children: [
          /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-2", children: [
            /* @__PURE__ */ r("div", { children: [
              /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)]", children: l.label }),
              /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: p.label })
            ] }),
            /* @__PURE__ */ e("button", { type: "button", onClick: c, className: "p-1 rounded hover:bg-[var(--bg-secondary)] text-[var(--text-muted)]", children: /* @__PURE__ */ e(vt, { className: "w-4 h-4" }) })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: p.description }),
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(
              "input",
              {
                type: "color",
                value: Ir(s),
                onChange: (d) => u(d.target.value),
                className: "w-12 h-12 rounded-[var(--radius-input)] border border-[var(--border-color)] cursor-pointer"
              }
            ),
            /* @__PURE__ */ e(
              "input",
              {
                type: "text",
                value: s,
                onChange: (d) => u(d.target.value),
                className: "flex-1 font-mono text-sm px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--text-primary)]"
              }
            )
          ] }),
          a && a.toLowerCase() !== s.toLowerCase() && /* @__PURE__ */ r("div", { className: "flex items-center gap-2 p-2 rounded-[var(--radius-input)] bg-[var(--bg-secondary)] border border-[var(--border-subtle)]", children: [
            /* @__PURE__ */ e(_e, { className: "w-3.5 h-3.5 text-[var(--color-accent-500)] flex-shrink-0" }),
            /* @__PURE__ */ e("span", { className: "text-[11px] text-[var(--text-secondary)] flex-1 min-w-0 truncate", children: "Suggéré (accent du thème) :" }),
            /* @__PURE__ */ r(
              "button",
              {
                type: "button",
                onClick: () => u(a),
                className: "inline-flex items-center gap-1.5 px-2 py-1 rounded text-[11px] font-mono text-[var(--text-primary)] bg-[var(--bg-primary)] border border-[var(--border-color)] hover:border-[var(--color-accent-500)]",
                title: "Appliquer cette suggestion",
                children: [
                  /* @__PURE__ */ e(
                    "span",
                    {
                      className: "inline-block w-3 h-3 rounded border border-[var(--border-color)]",
                      style: { backgroundColor: a }
                    }
                  ),
                  a.toUpperCase()
                ]
              }
            )
          ] }),
          /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: c,
              className: "w-full px-3 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-sm font-medium hover:bg-[var(--color-accent-600)]",
              children: "Valider"
            }
          )
        ]
      }
    )
  ] });
}
function Ir(t) {
  if (t.startsWith("#") && (t.length === 7 || t.length === 9)) return t.slice(0, 7);
  const o = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(t);
  if (o) {
    const s = (a) => Math.max(0, Math.min(255, parseInt(a, 10))).toString(16).padStart(2, "0");
    return `#${s(o[1])}${s(o[2])}${s(o[3])}`;
  }
  return "#000000";
}
const Ve = {
  app: "#161618",
  primary: "#1c1c1f",
  secondary: "#232326",
  tertiary: "#2a2a2e",
  card: "#1c1c1f",
  hover: "#27272a",
  active: "#3f3f46"
}, Le = {
  primary: "#fafafa",
  secondary: "#d4d4d8",
  tertiary: "#a1a1aa",
  muted: "#71717a",
  inverse: "#18181b"
}, De = { default: "#3f3f46", subtle: "#27272a", strong: "#52525b", width: 1 }, Me = {
  success: { bg: "#14b8a626", text: "#5eead4", border: "#14b8a64d", dot: "#14b8a6" },
  warning: { bg: "#f59e0b26", text: "#fbbf24", border: "#f59e0b4d", dot: "#f59e0b" },
  error: { bg: "#f43f5e26", text: "#fb7185", border: "#f43f5e4d", dot: "#f43f5e" },
  info: { bg: "#0ea5e926", text: "#7dd3fc", border: "#0ea5e94d", dot: "#0ea5e9" }
}, Oe = { fontFamily: "inter", baseSize: 16, scale: 1.25, headingWeight: 700 }, Re = {
  card: "large",
  button: "medium",
  badge: "medium",
  input: "medium",
  modal: "xlarge",
  menuItem: "medium"
};
function de(t) {
  return /^#([0-9a-f]{6}|[0-9a-f]{3})$/i.test(t.trim());
}
const Ur = ["identity", "colors", "status", "categories", "dashboard", "typography", "spacing", "logos", "access"];
function Te(t) {
  const o = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
  if (!o) return "dark";
  const s = parseInt(o[1], 16), a = parseInt(o[2], 16), u = parseInt(o[3], 16);
  return (s * 299 + a * 587 + u * 114) / 1e3 > 128 ? "light" : "dark";
}
function ue(t, o) {
  if (!t) return o;
  try {
    return JSON.parse(t);
  } catch {
    return o;
  }
}
function ze(t) {
  return JSON.stringify([
    t.name.trim(),
    t.description.trim(),
    t.icon.trim(),
    t.accent,
    t.backgrounds,
    t.textColors,
    t.borderColors,
    t.status,
    t.dataViz,
    t.categories,
    t.typography,
    t.borderRadius,
    t.generatorSeed
  ]);
}
function Jr() {
  const { t } = Se("admin"), o = It(), { id: s } = Ut(), [a] = Vt(), u = a.get("fromThemeId"), c = !s || s === "new", { loadFromServer: b } = Yt(), [l, p] = f(null), [d, y] = f(!0), [C, g] = f(!1), [I, m] = f(!1), [S, k] = f(null), { activeTab: T, setActiveTab: ae } = Lt("identity", Ur), [R, fe] = f("Nouveau thème"), [J, me] = f(""), [W, ne] = f("Palette"), [w, he] = f("indigo"), ve = "neutral", [h, z] = f(Ve), [K, oe] = f(Le), [O, Q] = f(De), [q, ie] = f(Me), [L, D] = f(Oe), [$, xe] = f(Re), [B, _] = f(Ie), [G, ye] = f(Je), [Y, Ce] = f(Ke), [je, se] = f(null), [M, be] = f({}), ce = Ze(""), [j, le] = f(null), ee = F((n, v = "") => {
    const A = n.name + v, V = n.description ?? "", P = n.icon ?? "Palette", Ne = ue(n.backgroundsJson, Ve), Pe = ue(n.textColorsJson, Le), nt = ue(n.borderColorsJson, De), ot = ue(n.statusColorsJson, Me), it = ue(n.defaultTypographyJson, Oe), st = ue(n.defaultBorderRadiusJson, Re), ct = ue(n.generatorSeedJson, Ie), lt = Te(Ne.app), Et = lt === "dark" ? Je : Zt, dt = Xt(n.dataVizColorsJson, Et), Pt = lt === "dark" ? Ke : er, ut = Qt(n.categoryColorsJson, Pt);
    fe(A), me(V), ne(P), he(n.defaultAccentColorKey), z(Ne), oe(Pe), Q(nt), ie(ot), D(it), xe(st), _(ct), ye(dt), Ce(ut), se(null), ce.current = ze({
      name: A,
      description: V,
      icon: P,
      accent: n.defaultAccentColorKey,
      backgrounds: Ne,
      textColors: Pe,
      borderColors: nt,
      status: ot,
      dataViz: dt,
      categories: ut,
      typography: it,
      borderRadius: st,
      generatorSeed: ct
    }), v && (ce.current = "");
  }, []), i = F(() => {
    const n = "Nouveau thème", v = Je, A = Ke;
    fe(n), me(""), ne("Palette"), he("indigo"), z(Ve), oe(Le), Q(De), ie(Me), D(Oe), xe(Re), _(Ie), ye(v), Ce(A), se(null), ce.current = ze({
      name: n,
      description: "",
      icon: "Palette",
      accent: "indigo",
      backgrounds: Ve,
      textColors: Le,
      borderColors: De,
      status: Me,
      dataViz: v,
      categories: A,
      typography: Oe,
      borderRadius: Re,
      generatorSeed: Ie
    });
  }, []), N = F(async () => {
    y(!0), k(null);
    try {
      if (c)
        if (u) {
          const n = await E.uiThemes.getById(u);
          ee(n, " (copie)");
        } else
          i();
      else {
        const n = await E.uiThemes.getById(s);
        p(n), ee(n);
      }
    } catch (n) {
      k(Z(n));
    } finally {
      y(!1);
    }
  }, [c, s, u, ee, i]);
  ge(() => {
    N();
  }, [N]), ge(() => {
    tr(L.fontFamily);
  }, [L.fontFamily]);
  const x = F(async () => {
    g(!0), k(null);
    try {
      const n = {
        name: R.trim() || "Thème",
        description: J.trim() || null,
        icon: W.trim() || null,
        backgroundsJson: JSON.stringify(h),
        textColorsJson: JSON.stringify(K),
        borderColorsJson: JSON.stringify(O),
        statusColorsJson: JSON.stringify(q),
        dataVizColorsJson: JSON.stringify(G),
        categoryColorsJson: JSON.stringify(Y),
        defaultTypographyJson: JSON.stringify(L),
        defaultBorderRadiusJson: JSON.stringify($),
        defaultItemPaletteKey: ve,
        defaultAccentColorKey: w,
        sortOrder: l?.sortOrder ?? 100,
        generatorSeedJson: JSON.stringify(B),
        isPublic: l?.isPublic ?? !0
      };
      if (c) {
        const v = await E.uiThemes.create(n), A = ["logo", "favicon"];
        for (const V of A) {
          const P = M[V];
          P && await E.uiThemes.uploadAsset(v, V, P.file, P.width, P.height);
        }
        Object.values(M).forEach((V) => {
          V && URL.revokeObjectURL(V.previewUrl);
        }), be({}), m(!0), b(), setTimeout(() => o(`/administration/uiconfiguration/themes/${v}/edit`), 400);
      } else
        await E.uiThemes.update(s, n), ce.current = ze({
          name: R.trim() || "Thème",
          description: J.trim(),
          icon: W.trim() || "Palette",
          accent: w,
          backgrounds: h,
          textColors: K,
          borderColors: O,
          status: q,
          dataViz: G,
          categories: Y,
          typography: L,
          borderRadius: $,
          generatorSeed: B
        }), m(!0), b(), setTimeout(() => m(!1), 2e3);
    } catch (n) {
      k(Z(n));
    } finally {
      g(!1);
    }
  }, [c, s, R, J, W, w, h, K, O, q, G, Y, L, $, B, l?.sortOrder, l?.isPublic, o, b, M]), U = re(() => ze({
    name: R,
    description: J,
    icon: W,
    accent: w,
    backgrounds: h,
    textColors: K,
    borderColors: O,
    status: q,
    dataViz: G,
    categories: Y,
    typography: L,
    borderRadius: $,
    generatorSeed: B
  }) !== ce.current, [R, J, W, w, h, K, O, q, G, Y, L, $, B]), X = F(async () => {
    try {
      if (k(null), Object.values(M).forEach((n) => {
        n && URL.revokeObjectURL(n.previewUrl);
      }), be({}), c)
        if (u) {
          const n = await E.uiThemes.getById(u);
          ee(n, " (copie)");
        } else
          i();
      else if (s) {
        const n = await E.uiThemes.getById(s);
        p(n), ee(n);
      }
    } catch (n) {
      k(Z(n));
    } finally {
      le(null);
    }
  }, [c, s, u, M, ee, i]), Tt = F(async () => {
    await x(), le(null);
  }, [x]);
  ge(() => {
    _((n) => {
      const v = de(w) ? w : pe[w]?.shades[500] ?? "#6366f1";
      return n.accent === v ? n : { ...n, accent: v };
    });
  }, [w]);
  const Qe = F(async (n, v, A, V) => {
    const P = M[n];
    P && URL.revokeObjectURL(P.previewUrl);
    const Ne = URL.createObjectURL(v);
    be((Pe) => ({ ...Pe, [n]: { file: v, width: A, height: V, previewUrl: Ne } }));
  }, [M]), et = F((n) => {
    be((v) => {
      const A = v[n];
      A && URL.revokeObjectURL(A.previewUrl);
      const V = { ...v };
      return delete V[n], V;
    });
  }, []), Ae = re(() => h.app && Vr(h.app) ? "light" : "dark", [h.app]), tt = F(
    async (n, v, A, V) => {
      if (c || !s) return;
      const P = await E.uiThemes.uploadAsset(s, n, v, A, V);
      p(P), b();
    },
    [c, s, b]
  ), rt = F(
    async (n) => {
      if (c || !s) return;
      const v = await E.uiThemes.deleteAsset(s, n);
      p(v), b();
    },
    [c, s, b]
  ), kt = F(async () => {
    if (c || !s) return;
    const n = await E.uiThemes.getById(s);
    p(n), b();
  }, [c, s, b]);
  if (d)
    return /* @__PURE__ */ e(ft, { title: t("common:loading"), children: /* @__PURE__ */ e(te, { className: "w-5 h-5 animate-spin" }) });
  const St = !!l?.isBuiltin, Ee = !1, at = [
    { id: "identity", label: t("uiConfiguration.tabIdentity") },
    { id: "colors", label: t("uiConfiguration.tabColors") },
    { id: "status", label: t("uiConfiguration.tabStatus") },
    { id: "categories", label: t("uiConfiguration.tabCategories", { defaultValue: "Catégories" }) },
    { id: "dashboard", label: t("uiConfiguration.dataViz.tabLabel") },
    { id: "typography", label: t("uiConfiguration.tabTypography") },
    { id: "spacing", label: t("uiConfiguration.tabSpacing") }
  ], At = c ? [...at, { id: "logos", label: t("uiConfiguration.tabLogos") }] : [
    ...at,
    { id: "logos", label: t("uiConfiguration.tabLogos") },
    { id: "access", label: t("uiConfiguration.tabAccess") }
  ];
  return /* @__PURE__ */ r(
    ft,
    {
      title: c ? t("uiConfiguration.newTheme") : R,
      subtitle: J || void 0,
      icon: /* @__PURE__ */ e(_e, { className: "w-6 h-6" }),
      actions: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
        U && !C && /* @__PURE__ */ r("span", { className: "hidden sm:inline-flex items-center gap-1.5 px-2 py-1 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-text)]" }),
          t("uiConfiguration.dirtyIndicator")
        ] }),
        /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: () => o("/administration/uiconfiguration/themes"),
            className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)]",
            children: [
              /* @__PURE__ */ e(Wt, { className: "w-4 h-4" }),
              " ",
              t("common:back")
            ]
          }
        ),
        /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: () => le("reset"),
            disabled: !U || Ee || C,
            className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] text-sm text-[var(--text-secondary)] border border-[var(--border-color)] hover:bg-[var(--bg-secondary)] disabled:opacity-40 disabled:cursor-not-allowed",
            children: [
              /* @__PURE__ */ e(qt, { className: "w-4 h-4" }),
              " ",
              t("common:reset")
            ]
          }
        ),
        /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: () => le("save"),
            disabled: C || Ee,
            className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white text-sm font-medium hover:bg-[var(--color-accent-600)] disabled:opacity-50",
            children: [
              C ? /* @__PURE__ */ e(te, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(ke, { className: "w-4 h-4" }),
              t(I ? "common:saved" : "common:save")
            ]
          }
        )
      ] }),
      children: [
        S && /* @__PURE__ */ e("div", { className: "mb-4 p-3 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)] text-sm text-[var(--error-text)]", children: S }),
        St && /* @__PURE__ */ e("div", { className: "mb-4 p-3 rounded-[var(--radius-card)] bg-[var(--info-bg)] border border-[var(--info-border)] text-sm text-[var(--info-text)]", children: t("uiConfiguration.builtinInfoHint") }),
        /* @__PURE__ */ e("div", { className: "flex gap-6 border-b border-[var(--border-color)] overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden mb-6", children: At.map((n) => {
          const v = n.id === T;
          return /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: () => ae(n.id),
              className: [
                "flex items-center gap-1.5 py-3 text-sm font-medium whitespace-nowrap transition-colors border-b-2 -mb-px",
                v ? "text-[var(--text-primary)] border-[var(--color-accent-500)]" : "text-[var(--text-muted)] border-transparent hover:text-[var(--text-secondary)]"
              ].join(" "),
              children: n.label
            },
            n.id
          );
        }) }),
        T === "access" && !c && s && l && /* @__PURE__ */ e(xr, { themeId: s, theme: l, onThemeChanged: kt }),
        T !== "access" && /* @__PURE__ */ r("div", { className: "grid lg:grid-cols-2 gap-6", children: [
          /* @__PURE__ */ r("fieldset", { disabled: Ee, className: "space-y-6 disabled:opacity-60 min-w-0", children: [
            T === "identity" && /* @__PURE__ */ r("div", { className: "space-y-6", 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-1 md:grid-cols-[auto_1fr] gap-4 items-end", children: [
                  /* @__PURE__ */ e(We, { label: t("uiConfiguration.fieldIcon"), children: /* @__PURE__ */ e(or, { value: W, onChange: ne }) }),
                  /* @__PURE__ */ e(We, { label: t("uiConfiguration.fieldName"), children: /* @__PURE__ */ e(
                    "input",
                    {
                      type: "text",
                      value: R,
                      onChange: (n) => fe(n.target.value),
                      className: "w-full px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-primary)] border border-[var(--border-color)] text-[var(--text-primary)]"
                    }
                  ) })
                ] }),
                /* @__PURE__ */ e(We, { label: t("uiConfiguration.fieldDescription"), children: /* @__PURE__ */ e(
                  "textarea",
                  {
                    rows: 2,
                    value: J,
                    onChange: (n) => me(n.target.value),
                    className: "w-full px-3 py-2 rounded-[var(--radius-input)] bg-[var(--bg-primary)] border border-[var(--border-color)] text-[var(--text-secondary)] resize-none"
                  }
                ) })
              ] }),
              /* @__PURE__ */ e(
                Be,
                {
                  title: t("uiConfiguration.colorSources.title"),
                  description: t("uiConfiguration.colorSources.description"),
                  children: /* @__PURE__ */ e(
                    ir,
                    {
                      value: w,
                      onChange: he,
                      sourceBackground: B.background,
                      onChangeSourceBackground: (n) => _((v) => ({ ...v, background: n })),
                      sourceText: B.text,
                      onChangeSourceText: (n) => _((v) => ({ ...v, text: n })),
                      prefersDark: B.prefersDark,
                      onChangePrefersDark: (n) => _((v) => ({ ...v, prefersDark: n })),
                      onGenerate: (n) => {
                        z(n.backgrounds), oe(n.text), Q(n.border), ie(n.status);
                      },
                      readOnly: Ee
                    }
                  )
                }
              )
            ] }),
            T === "colors" && /* @__PURE__ */ r("div", { className: "space-y-6", children: [
              /* @__PURE__ */ e(
                pr,
                {
                  value: je,
                  mode: Ae,
                  accentColorKey: de(w) ? "indigo" : w,
                  sourceBackground: B.background,
                  currentBackgrounds: {
                    app: h.app,
                    primary: h.primary,
                    secondary: h.secondary,
                    card: h.card
                  },
                  onChangeCurrentBackground: (n, v) => {
                    z({ ...h, [n]: v }), se(null);
                  },
                  onChange: (n) => {
                    se(n);
                    const v = de(w) ? "indigo" : w, A = Ae === "dark" ? yt(v) : Ct(v), V = de(w) ? w : pe[w]?.shades[500] ?? "#6366f1", P = Nt(Ae, A.backgrounds, V, n);
                    z({
                      app: P.app,
                      primary: P.primary,
                      secondary: P.secondary,
                      tertiary: P.tertiary,
                      card: P.card,
                      hover: P.hover,
                      active: P.active
                    });
                  }
                }
              ),
              /* @__PURE__ */ e(
                sr,
                {
                  mode: Te(h.app),
                  values: {
                    backgrounds: h,
                    text: K,
                    border: O,
                    accentHex: de(w) ? w : pe[w]?.shades[500] ?? "#6366f1",
                    borderWidth: O.width ?? 1
                  },
                  onChange: (n) => {
                    n.backgrounds && z(n.backgrounds), n.text && oe(n.text), n.border && Q({ ...O, ...n.border }), n.borderWidth != null && Q({ ...O, width: n.borderWidth });
                  }
                }
              )
            ] }),
            T === "status" && /* @__PURE__ */ e(
              fr,
              {
                value: q,
                onChange: ie,
                mode: Te(h.app)
              }
            ),
            T === "categories" && /* @__PURE__ */ e(
              Er,
              {
                value: Y,
                onChange: Ce,
                seedAccentHex: de(w) ? w : pe[w]?.shades[500] ?? "#6366f1",
                mode: Te(h.app)
              }
            ),
            T === "dashboard" && /* @__PURE__ */ e(
              cr,
              {
                value: G,
                onChange: ye,
                mode: Te(h.app),
                seedAccentHex: de(w) ? w : pe[w]?.shades[500] ?? "#6366f1",
                sourceBackground: B.background,
                themeAppBackground: h.app,
                themeCardBackground: h.card
              }
            ),
            T === "typography" && /* @__PURE__ */ e(Be, { title: t("uiConfiguration.tabTypography"), children: /* @__PURE__ */ e(rr, { value: L, onChange: D }) }),
            T === "spacing" && /* @__PURE__ */ e(Be, { title: t("uiConfiguration.borderRadius"), children: /* @__PURE__ */ e(lr, { value: $, onChange: xe }) }),
            T === "logos" && /* @__PURE__ */ r(
              Be,
              {
                title: t("uiConfiguration.themeLogosTitle"),
                description: t("uiConfiguration.themeLogosHint"),
                children: [
                  c && /* @__PURE__ */ e("div", { className: "p-3 rounded-[var(--radius-card)] bg-[var(--info-bg)] border border-[var(--info-border)] text-xs text-[var(--info-text)]", children: t("uiConfiguration.pendingUploadHint") }),
                  /* @__PURE__ */ e(
                    ht,
                    {
                      label: t("uiConfiguration.logo"),
                      currentUrl: c ? M.logo?.previewUrl ?? null : l?.logoUrl ?? null,
                      currentWidth: c ? M.logo?.width ?? null : l?.logoWidth ?? null,
                      currentHeight: c ? M.logo?.height ?? null : l?.logoHeight ?? null,
                      recommendedWidth: 256,
                      recommendedHeight: 64,
                      sampleKind: "logo",
                      sampleLabel: R || "Your Brand",
                      onUpload: (n, v, A) => c ? Qe("logo", n, v, A) : tt("logo", n, v, A),
                      onDelete: () => c ? Promise.resolve(et("logo")) : rt("logo")
                    }
                  ),
                  /* @__PURE__ */ e(
                    ht,
                    {
                      label: t("uiConfiguration.favicon"),
                      currentUrl: c ? M.favicon?.previewUrl ?? null : l?.faviconUrl ?? null,
                      currentWidth: c ? M.favicon?.width ?? null : l?.faviconWidth ?? null,
                      currentHeight: c ? M.favicon?.height ?? null : l?.faviconHeight ?? null,
                      recommendedWidth: 64,
                      recommendedHeight: 64,
                      sampleKind: "favicon",
                      sampleLabel: R || "Your Brand",
                      accept: "image/png,image/x-icon,image/svg+xml,image/webp",
                      onUpload: (n, v, A) => c ? Qe("favicon", n, v, A) : tt("favicon", n, v, A),
                      onDelete: () => c ? Promise.resolve(et("favicon")) : rt("favicon")
                    }
                  )
                ]
              }
            )
          ] }),
          /* @__PURE__ */ e(
            "div",
            {
              className: "lg:sticky lg:top-6 lg:self-start lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
              children: /* @__PURE__ */ e(
                dr,
                {
                  displayName: R,
                  tagline: "",
                  subdomain: "",
                  defaultAccentColorKey: w,
                  defaultThemeMode: Ae,
                  defaultBorderRadius: $,
                  borderWidth: typeof O.width == "number" ? O.width : 1,
                  customAccentColors: [],
                  itemPaletteKey: ve,
                  overridePalette: {
                    backgrounds: h,
                    text: K,
                    border: O,
                    status: q
                  },
                  typography: {
                    fontStack: ar(L.fontFamily),
                    baseSize: L.baseSize,
                    headingWeight: L.headingWeight,
                    scale: L.scale,
                    fontLabel: L.fontFamily
                  },
                  secondarySection: T === "typography" ? "typography" : T === "dashboard" ? "dataviz" : T === "spacing" || T === "logos" ? "none" : "palettes",
                  dataViz: G
                }
              )
            }
          )
        ] }),
        /* @__PURE__ */ e(
          nr,
          {
            isOpen: j !== null,
            variant: j === "reset" ? "warning" : "info",
            title: t(j === "reset" ? "uiConfiguration.resetConfirmTitle" : "uiConfiguration.saveConfirmTitle"),
            message: t(j === "reset" ? "uiConfiguration.resetConfirmMessage" : c ? "uiConfiguration.saveConfirmCreate" : "uiConfiguration.saveConfirmUpdate"),
            confirmLabel: t(j === "reset" ? "common:reset" : "common:save"),
            loading: C,
            onConfirm: j === "reset" ? X : Tt,
            onCancel: () => le(null)
          }
        )
      ]
    }
  );
}
function Be({ title: t, description: o, children: s }) {
  return /* @__PURE__ */ r("section", { 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__ */ e("h3", { className: "text-base font-semibold text-[var(--text-primary)]", children: t }),
      o && /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: o })
    ] }),
    s
  ] });
}
function We({ label: t, children: o }) {
  return /* @__PURE__ */ r("div", { className: "space-y-1.5", children: [
    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-[var(--text-primary)]", children: t }),
    o
  ] });
}
function Vr(t) {
  const o = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
  if (!o) return !1;
  const s = parseInt(o[1], 16), a = parseInt(o[2], 16), u = parseInt(o[3], 16);
  return (s * 299 + a * 587 + u * 114) / 1e3 > 128;
}
export {
  Jr as ThemeEditorPage
};
//# sourceMappingURL=ThemeEditorPage-D81pQvoB.js.map
