import { jsx as e, jsxs as r } from "react/jsx-runtime";
import { useRef as U, useState as c, useCallback as k, useEffect as q } from "react";
import { useNavigate as J } from "react-router-dom";
import { useTranslation as z } from "react-i18next";
import { X as _, Upload as B, FileJson as X, Package as Z, Image as G, Loader2 as F, Check as M, EyeOff as R, Eye as H, Download as Q, Copy as W, Pencil as Y, Trash2 as ee, Plus as te, Sparkles as ae } from "lucide-react";
import { v as V, P as re, $ as ie, a0 as ne } from "./index-CeEMms9z.js";
import { p as oe, T as se, t as le } from "./themeExport-BLRx1foC.js";
import { e as y } from "./extractErrorMessage-C0uxTGn5.js";
import { C as ce } from "./ConfirmModal-Ve-8m7xp.js";
function de({ isOpen: a, onClose: h, onImported: j }) {
  const { t: s } = z(["admin", "common"]), v = U(null), [l, g] = c(null), [d, N] = c(null), [u, C] = c(!1), [m, f] = c(null), [D, p] = c(!1), b = k(() => {
    g(null), N(null), C(!1), f(null), p(!1), v.current && (v.current.value = "");
  }, []), w = k(() => {
    u || (b(), h());
  }, [u, h, b]), T = k(async (i) => {
    f(null), g(null), N(i.name);
    try {
      const o = await oe(i);
      g(o);
    } catch (o) {
      if (o instanceof se) {
        const P = s(`uiConfiguration.${o.i18nKey}`, { defaultValue: o.message, ...o.context ?? {} });
        f(P);
      } else
        f(y(o));
    }
  }, [s]), x = (i) => {
    const o = i.target.files?.[0];
    o && T(o);
  }, I = (i) => {
    i.preventDefault(), p(!1);
    const o = i.dataTransfer.files?.[0];
    o && T(o);
  }, S = (i) => {
    i.preventDefault(), p(!0);
  }, A = (i) => {
    i.preventDefault(), p(!1);
  }, L = async () => {
    if (l) {
      C(!0), f(null);
      try {
        const i = await V.uiThemes.importTheme(l);
        j(i.themeId, i.finalName, l.theme.name), b(), h();
      } catch (i) {
        f(y(i)), C(!1);
      }
    }
  };
  if (!a) return null;
  const E = l?.presets.length ?? 0, O = l ? [l.assets.logo, l.assets.favicon].filter(Boolean).length : 0;
  return /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm", children: /* @__PURE__ */ r("div", { className: "relative w-full max-w-lg bg-[var(--bg-card)] rounded-2xl shadow-2xl border border-[var(--border-color)] overflow-hidden", children: [
    /* @__PURE__ */ e(
      "button",
      {
        type: "button",
        onClick: w,
        disabled: u,
        className: "absolute top-4 right-4 p-1.5 rounded-lg text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors disabled:opacity-50",
        "aria-label": s("common:close", { defaultValue: "Fermer" }),
        children: /* @__PURE__ */ e(_, { className: "w-5 h-5" })
      }
    ),
    /* @__PURE__ */ e("div", { className: "px-6 pt-6 pb-4 border-b border-[var(--border-color)]", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
      /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-[var(--color-accent-500)]/10 text-[var(--color-accent-600)]", children: /* @__PURE__ */ e(B, { className: "w-5 h-5" }) }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: s("admin:uiConfiguration.importModalTitle", { defaultValue: "Importer un thème" }) }),
        /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-muted)] mt-0.5", children: s("admin:uiConfiguration.importModalDescription", {
          defaultValue: "Sélectionnez un fichier .smartstack-theme.json précédemment exporté."
        }) })
      ] })
    ] }) }),
    /* @__PURE__ */ r("div", { className: "px-6 py-5 space-y-4", children: [
      l ? /* @__PURE__ */ r("div", { className: "rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4 space-y-3", children: [
        /* @__PURE__ */ r("div", { className: "flex items-start justify-between gap-3", children: [
          /* @__PURE__ */ r("div", { className: "min-w-0", children: [
            /* @__PURE__ */ e("div", { className: "text-sm font-semibold text-[var(--text-primary)] truncate", children: l.theme.name }),
            d && /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)] truncate mt-0.5", children: d })
          ] }),
          /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: b,
              disabled: u,
              className: "text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] underline disabled:opacity-50",
              children: s("common:change", { defaultValue: "Changer" })
            }
          )
        ] }),
        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 text-xs text-[var(--text-muted)]", children: [
          /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1", children: [
            /* @__PURE__ */ e(Z, { className: "w-3.5 h-3.5" }),
            s("admin:uiConfiguration.presetsCount", {
              defaultValue: "{{count}} preset(s)",
              count: E
            })
          ] }),
          /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1", children: [
            /* @__PURE__ */ e(G, { className: "w-3.5 h-3.5", "aria-hidden": !0 }),
            s("admin:uiConfiguration.assetsCount", {
              defaultValue: "{{count}} asset(s)",
              count: O
            })
          ] })
        ] })
      ] }) : /* @__PURE__ */ r(
        "button",
        {
          type: "button",
          onClick: () => v.current?.click(),
          onDrop: I,
          onDragOver: S,
          onDragLeave: A,
          className: `w-full flex flex-col items-center justify-center gap-2 px-6 py-10 rounded-[var(--radius-card)] border-2 border-dashed transition-colors ${D ? "border-[var(--color-accent-500)] bg-[var(--color-accent-500)]/5" : "border-[var(--border-color)] hover:bg-[var(--bg-hover)]"}`,
          children: [
            /* @__PURE__ */ e(X, { className: "w-10 h-10 text-[var(--text-muted)]" }),
            /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: s("admin:uiConfiguration.importDropZone", {
              defaultValue: "Cliquez ou déposez le fichier ici"
            }) }),
            /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: ".smartstack-theme.json" })
          ]
        }
      ),
      /* @__PURE__ */ e(
        "input",
        {
          ref: v,
          type: "file",
          accept: ".json,application/json",
          onChange: x,
          className: "hidden"
        }
      ),
      m && /* @__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: m })
    ] }),
    /* @__PURE__ */ r("div", { className: "px-6 py-4 bg-[var(--bg-secondary)] border-t border-[var(--border-color)] flex items-center justify-end gap-2", children: [
      /* @__PURE__ */ e(
        "button",
        {
          type: "button",
          onClick: w,
          disabled: u,
          className: "px-3 py-2 rounded-[var(--radius-button)] text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-hover)] disabled:opacity-50",
          children: s("common:cancel", { defaultValue: "Annuler" })
        }
      ),
      /* @__PURE__ */ r(
        "button",
        {
          type: "button",
          onClick: L,
          disabled: !l || u,
          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: [
            u ? /* @__PURE__ */ e(F, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ e(B, { className: "w-4 h-4" }),
            s("admin:uiConfiguration.import", { defaultValue: "Importer" })
          ]
        }
      )
    ] })
  ] }) });
}
function Ne() {
  const { t: a } = z("admin"), h = J(), [j, s] = c([]), [v, l] = c(!0), [g, d] = c(null), [N, u] = c(null), [C, m] = c(null), [f, D] = c(!1), [p, b] = c(null), [w, T] = c(!1), x = k(async () => {
    l(!0), d(null);
    try {
      const t = await V.uiThemes.list(!0);
      s(t);
    } catch (t) {
      d(y(t));
    } finally {
      l(!1);
    }
  }, []);
  q(() => {
    x();
  }, [x]);
  const I = (t) => h(`/administration/uiconfiguration/themes/${encodeURIComponent(t)}/edit`), S = (t) => h(`/administration/uiconfiguration/themes/new/edit?fromThemeId=${encodeURIComponent(t)}`), A = (t) => {
    t.isBuiltin || b(t);
  }, L = () => {
    w || b(null);
  }, E = async () => {
    if (!p) return;
    const t = p;
    T(!0), m(t.id);
    try {
      await V.uiThemes.remove(t.id), b(null), await x();
    } catch (n) {
      d(y(n));
    } finally {
      m(null), T(!1);
    }
  }, O = async (t) => {
    m(t.id);
    try {
      await V.uiThemes.setDisabled(t.id, !t.isDisabled), await x();
    } catch (n) {
      d(y(n));
    } finally {
      m(null);
    }
  }, i = async (t) => {
    m(t.id), d(null);
    try {
      const n = await V.uiThemes.exportTheme(t.id);
      le(n, t.name);
    } catch (n) {
      d(y(n));
    } finally {
      m(null);
    }
  }, o = k(
    (t, n, $) => {
      const K = n !== $ ? a("uiConfiguration.importRenamed", {
        defaultValue: "Le nom existait déjà. Le thème a été importé sous « {{name}} ».",
        name: n
      }) : a("uiConfiguration.importSuccess", {
        defaultValue: "Thème « {{name}} » importé avec succès.",
        name: n
      });
      u(K), d(null), x();
    },
    [a, x]
  ), P = (t) => t.stopPropagation();
  return /* @__PURE__ */ r(
    re,
    {
      title: a("uiConfiguration.themesPageTitle", { defaultValue: "Thèmes" }),
      subtitle: a("uiConfiguration.themesPageSubtitle", {
        defaultValue: "Thèmes structurels (fond, texte, bordures). Dark et Light sont fournis, vous pouvez en ajouter."
      }),
      icon: /* @__PURE__ */ e(ae, { className: "w-6 h-6" }),
      actions: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: () => D(!0),
            className: "flex items-center gap-1.5 px-3 py-2 rounded-[var(--radius-button)] border border-[var(--border-color)] bg-[var(--bg-card)] text-[var(--text-primary)] text-sm font-medium hover:bg-[var(--bg-hover)]",
            title: a("uiConfiguration.import", { defaultValue: "Importer un thème" }),
            children: [
              /* @__PURE__ */ e(B, { className: "w-4 h-4" }),
              a("uiConfiguration.import", { defaultValue: "Importer" })
            ]
          }
        ),
        /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: () => h("/administration/uiconfiguration/themes/new/edit"),
            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)]",
            children: [
              /* @__PURE__ */ e(te, { className: "w-4 h-4" }),
              a("uiConfiguration.createTheme", { defaultValue: "Créer un thème" })
            ]
          }
        )
      ] }),
      children: [
        g && /* @__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: g }),
        N && /* @__PURE__ */ r("div", { className: "mb-4 p-3 rounded-[var(--radius-card)] bg-[var(--success-bg)] border border-[var(--success-border)] text-sm text-[var(--success-text)] flex items-start justify-between gap-3", children: [
          /* @__PURE__ */ e("span", { children: N }),
          /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: () => u(null),
              className: "text-[var(--success-text)] hover:opacity-80",
              "aria-label": a("common:close", { defaultValue: "Fermer" }),
              children: /* @__PURE__ */ e(M, { className: "w-4 h-4" })
            }
          )
        ] }),
        v ? /* @__PURE__ */ r("div", { className: "flex items-center justify-center py-12 text-[var(--text-muted)]", children: [
          /* @__PURE__ */ e(F, { className: "w-5 h-5 animate-spin mr-2" }),
          a("common:loading", { defaultValue: "Chargement…" })
        ] }) : /* @__PURE__ */ e("div", { className: "rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-secondary)] 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-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] w-12" }),
            /* @__PURE__ */ e("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("uiConfiguration.colName", { defaultValue: "Nom" }) }),
            /* @__PURE__ */ e("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("uiConfiguration.colAccent", { defaultValue: "Accent" }) }),
            /* @__PURE__ */ e("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("uiConfiguration.colState", { defaultValue: "État" }) }),
            /* @__PURE__ */ e("th", { className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: a("uiConfiguration.colActions", { defaultValue: "Actions" }) })
          ] }) }),
          /* @__PURE__ */ e("tbody", { children: j.map((t) => {
            const n = C === t.id;
            return /* @__PURE__ */ r(
              "tr",
              {
                onClick: () => I(t.id),
                className: "border-b border-[var(--border-color)] hover:bg-[var(--bg-tertiary)] transition-colors cursor-pointer",
                title: a("uiConfiguration.editTheme", { defaultValue: "Modifier ce thème" }),
                children: [
                  /* @__PURE__ */ e("td", { className: "px-4 py-3 w-12", children: /* @__PURE__ */ e(
                    "span",
                    {
                      className: "flex items-center justify-center w-9 h-9 rounded-[var(--radius-card)]",
                      style: { backgroundColor: ie[t.defaultAccentColorKey]?.shades[500] ?? "#6366f1" },
                      children: /* @__PURE__ */ e(ne, { icon: t.icon, className: "w-4 h-4 text-white" })
                    }
                  ) }),
                  /* @__PURE__ */ r("td", { className: "px-4 py-3", children: [
                    /* @__PURE__ */ r("div", { className: "font-medium text-[var(--text-primary)] flex items-center gap-2", children: [
                      t.name,
                      t.isBuiltin && /* @__PURE__ */ e("span", { className: "text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-[var(--bg-primary)] text-[var(--text-muted)] border border-[var(--border-color)] font-bold", children: "Built-in" })
                    ] }),
                    t.description && /* @__PURE__ */ e("div", { className: "text-xs text-[var(--text-muted)] line-clamp-1 mt-0.5", children: t.description })
                  ] }),
                  /* @__PURE__ */ e("td", { className: "px-4 py-3", children: /* @__PURE__ */ e("code", { className: "text-xs font-mono text-[var(--text-muted)]", children: t.defaultAccentColorKey }) }),
                  /* @__PURE__ */ e("td", { className: "px-4 py-3", children: t.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-primary)] text-[var(--text-muted)] border border-[var(--border-color)]", children: [
                    /* @__PURE__ */ e(R, { className: "w-3 h-3" }),
                    " ",
                    a("uiConfiguration.disabledLabel", { defaultValue: "Désactivé" })
                  ] }) : /* @__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(M, { className: "w-3 h-3" }),
                    " ",
                    a("uiConfiguration.activeLabel", { defaultValue: "Actif" })
                  ] }) }),
                  /* @__PURE__ */ e("td", { className: "px-4 py-3", onClick: P, children: /* @__PURE__ */ r("div", { className: "flex items-center justify-end gap-1", children: [
                    n && /* @__PURE__ */ e(F, { className: "w-4 h-4 animate-spin text-[var(--text-muted)]" }),
                    /* @__PURE__ */ e(
                      "button",
                      {
                        type: "button",
                        onClick: () => O(t),
                        disabled: n,
                        className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-primary)] disabled:opacity-50",
                        title: t.isDisabled ? a("uiConfiguration.activateTheme", { defaultValue: "Activer" }) : a("uiConfiguration.deactivateTheme", { defaultValue: "Désactiver" }),
                        children: t.isDisabled ? /* @__PURE__ */ e(H, { className: "w-4 h-4" }) : /* @__PURE__ */ e(R, { className: "w-4 h-4" })
                      }
                    ),
                    /* @__PURE__ */ e(
                      "button",
                      {
                        type: "button",
                        onClick: () => i(t),
                        disabled: n,
                        className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-primary)] disabled:opacity-50",
                        title: a("uiConfiguration.exportTooltip", { defaultValue: "Exporter ce thème (avec presets et logos) en JSON" }),
                        children: /* @__PURE__ */ e(Q, { className: "w-4 h-4" })
                      }
                    ),
                    /* @__PURE__ */ e(
                      "button",
                      {
                        type: "button",
                        onClick: () => S(t.id),
                        disabled: n,
                        className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-primary)] disabled:opacity-50",
                        title: a("uiConfiguration.duplicateTheme", { defaultValue: "Dupliquer ce thème" }),
                        children: /* @__PURE__ */ e(W, { className: "w-4 h-4" })
                      }
                    ),
                    /* @__PURE__ */ e(
                      "button",
                      {
                        type: "button",
                        onClick: () => I(t.id),
                        disabled: n,
                        className: "p-1.5 rounded hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-primary)] disabled:opacity-50",
                        title: a("common:edit", { defaultValue: "Modifier" }),
                        children: /* @__PURE__ */ e(Y, { className: "w-4 h-4" })
                      }
                    ),
                    !t.isBuiltin && /* @__PURE__ */ e(
                      "button",
                      {
                        type: "button",
                        onClick: () => A(t),
                        disabled: n,
                        className: "p-1.5 rounded hover:bg-[var(--error-bg)] text-[var(--text-muted)] hover:text-[var(--error-text)] disabled:opacity-50",
                        title: a("common:delete", { defaultValue: "Supprimer" }),
                        children: /* @__PURE__ */ e(ee, { className: "w-4 h-4" })
                      }
                    )
                  ] }) })
                ]
              },
              t.id
            );
          }) })
        ] }) }),
        /* @__PURE__ */ e(
          de,
          {
            isOpen: f,
            onClose: () => D(!1),
            onImported: o
          }
        ),
        /* @__PURE__ */ e(
          ce,
          {
            isOpen: p !== null,
            variant: "danger",
            title: a("uiConfiguration.confirmDeleteThemeTitle", { defaultValue: "Supprimer le thème ?" }),
            message: a("uiConfiguration.confirmDeleteTheme", {
              defaultValue: "Supprimer le thème « {{name}} » ? Cette action est irréversible.",
              name: p?.name ?? ""
            }),
            confirmLabel: a("common:delete", { defaultValue: "Supprimer" }),
            cancelLabel: a("common:cancel", { defaultValue: "Annuler" }),
            loading: w,
            onConfirm: E,
            onCancel: L
          }
        )
      ]
    }
  );
}
export {
  Ne as ThemesListPage
};
//# sourceMappingURL=ThemesListPage-D5ar0nVT.js.map
