import { jsxs as a, jsx as e, Fragment as w } from "react/jsx-runtime";
import { useState as o, useRef as S, useEffect as B, useCallback as fe } from "react";
import { useNavigate as he } from "react-router-dom";
import { u as be } from "./useTabNavigation-Bsbskz0i.js";
import { useTranslation as pe } from "react-i18next";
import * as ge from "lucide-react";
import { Palette as xe, Globe as ye, Bell as Ne, Star as V, Loader2 as O, Check as q, GripVertical as we, X as Se, Search as Ce } from "lucide-react";
import { aa as ke, a as Le, u as Re, a9 as Te, f as U, ab as De, ac as Fe } from "./index-CwSaRXXg.js";
const Ae = ["appearance", "language", "notifications", "favorites"];
function C({ name: i, className: m }) {
  const l = ge[i];
  return l ? /* @__PURE__ */ e(l, { className: m }) : /* @__PURE__ */ e(V, { className: m });
}
function je(i, m) {
  return i ? "bg-[var(--accent-bg)] border-2 border-[var(--color-accent-500)]" : m ? "opacity-50 cursor-not-allowed bg-[var(--bg-tertiary)] border border-[var(--border-color)]" : "bg-[var(--bg-primary)] border border-[var(--border-color)] hover:border-[var(--color-accent-500)]";
}
function Be() {
  const { t: i, i18n: m } = pe(["navigation", "common"]), k = he(), { activeTab: l, setActiveTab: W } = be("appearance", Ae), { loadFromServer: X, isSyncing: _, selectedThemeTenant: H } = ke(), { currentTenant: L, isLoading: R } = Le(), { menu: J } = Re(), { favorites: v, toggleFavorite: T, isFavorite: K, canAddMore: Q, maxFavorites: Y, reorderFavorites: Z, loading: D } = Te(), [ee, g] = o(!1), [n, re] = o(""), [F, A] = o(null), [ae, x] = o(null), u = S(null), [h, j] = o(!0), [b, P] = o(!0), [te, se] = o(!1), [E, I] = o(!1), [ce, y] = o(!1), f = S(null), N = S(!0);
  B(() => {
    !R && L && M();
  }, [R, L]);
  const M = async () => {
    try {
      const r = await U.preferences.get();
      j(r.emailNotifications), P(r.pushNotifications), N.current = !1;
    } catch {
      N.current = !1;
    }
  }, $ = fe(async () => {
    I(!0), y(!1);
    try {
      await U.preferences.updateNotifications({
        emailNotifications: h,
        pushNotifications: b
      }), y(!0), setTimeout(() => y(!1), 2e3);
    } catch {
      console.error("[PreferencesPage] Failed to save notifications");
    } finally {
      I(!1);
    }
  }, [h, b]);
  B(() => {
    if (!N.current)
      return f.current && clearTimeout(f.current), f.current = setTimeout(() => {
        $();
      }, 1e3), () => {
        f.current && clearTimeout(f.current);
      };
  }, [h, b, $]);
  const ne = async () => {
    const r = H === null ? "global" : "tenant";
    g(!1);
    try {
      await X(r), await M(), g(!0), setTimeout(() => g(!1), 3e3);
    } catch (t) {
      console.error("[PreferencesPage] Sync failed:", t);
    }
  }, ie = [
    { id: "appearance", label: "Apparence", icon: xe, description: "Personnaliser le thème et les couleurs" },
    { id: "language", label: "Langue", icon: ye, description: "Changer la langue de l'interface" },
    { id: "notifications", label: "Notifications", icon: Ne, description: "Gérer les notifications" },
    { id: "favorites", label: i("common:favorites.quickAccess"), icon: V, description: "Gérer vos modules favoris" }
  ], p = [];
  J?.applications.forEach((r) => {
    (r.modules?.length ?? 0) > 0 && p.push({
      app: r,
      modules: r.modules
    });
  });
  const oe = (r, t) => {
    const s = {
      id: r.id,
      code: r.code,
      label: r.label,
      icon: r.icon || "Star",
      route: `/${t.code}/${r.code}`,
      applicationCode: t.code,
      applicationLabel: t.label
    };
    T(s);
  }, le = (r) => {
    r.route && k(r.route);
  }, de = (r, t) => {
    A(t), u.current = r.currentTarget, r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", t.toString()), setTimeout(() => {
      u.current && (u.current.style.opacity = "0.4");
    }, 0);
  }, G = () => {
    u.current && (u.current.style.opacity = "1"), A(null), x(null), u.current = null;
  }, me = (r, t) => {
    r.preventDefault(), r.dataTransfer.dropEffect = "move", t !== F && x(t);
  }, ue = () => {
    x(null);
  }, ve = (r, t) => {
    r.preventDefault();
    const s = F;
    if (s === null || s === t) return;
    const c = [...v], [d] = c.splice(s, 1);
    c.splice(t, 0, d), Z(c), G();
  };
  return /* @__PURE__ */ a("div", { className: "space-y-6", children: [
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e("h1", { className: "text-2xl font-bold text-[var(--text-primary)]", children: i("navigation:sidebar.preferences") }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)] mt-1", children: "Personnalisez votre expérience SmartStack" })
    ] }),
    /* @__PURE__ */ e("div", { className: "border-b border-[var(--item-color-border)]", children: /* @__PURE__ */ e("nav", { className: "flex gap-1", "aria-label": "Tabs", children: ie.map((r) => {
      const t = r.icon;
      return /* @__PURE__ */ a(
        "button",
        {
          onClick: () => W(r.id),
          className: `flex items-center gap-2 px-4 py-3 text-sm font-medium transition-all border-b-2 ${l === r.id ? "border-[var(--color-accent-500)] text-[var(--color-accent-600)] bg-[var(--accent-bg)]" : "border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]"}`,
          style: { borderRadius: "var(--radius-button) var(--radius-button) 0 0" },
          children: [
            /* @__PURE__ */ e(t, { className: "w-5 h-5" }),
            /* @__PURE__ */ e("span", { children: r.label })
          ]
        },
        r.id
      );
    }) }) }),
    /* @__PURE__ */ a(
      "div",
      {
        className: "bg-[var(--bg-card)] border border-[var(--item-color-border)] p-6",
        style: { borderRadius: "var(--radius-card)" },
        children: [
          l === "appearance" && /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ e(
            De,
            {
              onSync: ne,
              isSyncing: _,
              syncSuccess: ee
            }
          ) }),
          l === "language" && /* @__PURE__ */ a("div", { className: "space-y-6", children: [
            /* @__PURE__ */ a("div", { children: [
              /* @__PURE__ */ e("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: "Langue" }),
              /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: "Sélectionnez la langue de l'interface" })
            ] }),
            /* @__PURE__ */ e(
              "div",
              {
                className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)]",
                style: { borderRadius: "var(--radius-card)" },
                children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
                  /* @__PURE__ */ a("div", { children: [
                    /* @__PURE__ */ e("h3", { className: "font-semibold text-[var(--text-primary)]", children: m.language?.startsWith("fr") ? "Français" : "English" }),
                    /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: "Langue actuelle de l'interface" })
                  ] }),
                  /* @__PURE__ */ e(Fe, {})
                ] })
              }
            )
          ] }),
          l === "notifications" && /* @__PURE__ */ a("div", { className: "space-y-6", children: [
            /* @__PURE__ */ a("div", { className: "flex items-start justify-between", children: [
              /* @__PURE__ */ a("div", { children: [
                /* @__PURE__ */ e("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: "Notifications" }),
                /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: "Gérez vos préférences de notifications" })
              ] }),
              /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-xs text-[var(--text-muted)]", children: [
                E && /* @__PURE__ */ a(w, { children: [
                  /* @__PURE__ */ e(O, { className: "w-3 h-3 animate-spin" }),
                  /* @__PURE__ */ e("span", { children: "Sauvegarde..." })
                ] }),
                ce && !E && /* @__PURE__ */ a(w, { children: [
                  /* @__PURE__ */ e(q, { className: "w-3 h-3 text-green-500" }),
                  /* @__PURE__ */ e("span", { className: "text-green-600", children: "Sauvegardé" })
                ] })
              ] })
            ] }),
            /* @__PURE__ */ a("div", { className: "space-y-4", children: [
              /* @__PURE__ */ e(
                "div",
                {
                  className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)]",
                  style: { borderRadius: "var(--radius-card)" },
                  children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
                    /* @__PURE__ */ a("div", { children: [
                      /* @__PURE__ */ e("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Notifications par email" }),
                      /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: "Recevoir des notifications par email" })
                    ] }),
                    /* @__PURE__ */ a("label", { className: "relative inline-flex items-center cursor-pointer", children: [
                      /* @__PURE__ */ e(
                        "input",
                        {
                          type: "checkbox",
                          className: "sr-only peer",
                          checked: h,
                          onChange: (r) => j(r.target.checked)
                        }
                      ),
                      /* @__PURE__ */ e(
                        "div",
                        {
                          className: "w-11 h-6 bg-[var(--bg-tertiary)] peer peer-checked:bg-[var(--color-accent-500)] after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full",
                          style: { borderRadius: "var(--radius-button)" },
                          children: /* @__PURE__ */ e("span", { className: "after:rounded-full" })
                        }
                      )
                    ] })
                  ] })
                }
              ),
              /* @__PURE__ */ e(
                "div",
                {
                  className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)]",
                  style: { borderRadius: "var(--radius-card)" },
                  children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
                    /* @__PURE__ */ a("div", { children: [
                      /* @__PURE__ */ e("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Alertes de sécurité" }),
                      /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: "Être notifié des événements de sécurité" })
                    ] }),
                    /* @__PURE__ */ a("label", { className: "relative inline-flex items-center cursor-pointer", children: [
                      /* @__PURE__ */ e(
                        "input",
                        {
                          type: "checkbox",
                          className: "sr-only peer",
                          checked: b,
                          onChange: (r) => P(r.target.checked)
                        }
                      ),
                      /* @__PURE__ */ e(
                        "div",
                        {
                          className: "w-11 h-6 bg-[var(--bg-tertiary)] peer peer-checked:bg-[var(--color-accent-500)] after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full",
                          style: { borderRadius: "var(--radius-button)" },
                          children: /* @__PURE__ */ e("span", { className: "after:rounded-full" })
                        }
                      )
                    ] })
                  ] })
                }
              ),
              /* @__PURE__ */ e(
                "div",
                {
                  className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)]",
                  style: { borderRadius: "var(--radius-card)" },
                  children: /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
                    /* @__PURE__ */ a("div", { children: [
                      /* @__PURE__ */ e("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Mises à jour produit" }),
                      /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: "Nouvelles fonctionnalités et améliorations" })
                    ] }),
                    /* @__PURE__ */ a("label", { className: "relative inline-flex items-center cursor-pointer", children: [
                      /* @__PURE__ */ e(
                        "input",
                        {
                          type: "checkbox",
                          className: "sr-only peer",
                          checked: te,
                          onChange: (r) => se(r.target.checked)
                        }
                      ),
                      /* @__PURE__ */ e(
                        "div",
                        {
                          className: "w-11 h-6 bg-[var(--bg-tertiary)] peer peer-checked:bg-[var(--color-accent-500)] after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full",
                          style: { borderRadius: "var(--radius-button)" },
                          children: /* @__PURE__ */ e("span", { className: "after:rounded-full" })
                        }
                      )
                    ] })
                  ] })
                }
              )
            ] })
          ] }),
          l === "favorites" && /* @__PURE__ */ a("div", { className: "space-y-6", children: [
            /* @__PURE__ */ a("div", { children: [
              /* @__PURE__ */ e("h2", { className: "text-xl font-bold text-[var(--text-primary)]", children: i("common:favorites.quickAccess") }),
              /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: i("common:favorites.selectModules", { count: v.length, max: Y }) })
            ] }),
            D && /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-8", children: [
              /* @__PURE__ */ e(O, { className: "w-6 h-6 animate-spin text-[var(--color-accent-500)]" }),
              /* @__PURE__ */ e("span", { className: "ml-2 text-[var(--text-secondary)]", children: "Chargement des favoris..." })
            ] }),
            !D && /* @__PURE__ */ a(w, { children: [
              /* @__PURE__ */ a(
                "div",
                {
                  className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)]",
                  style: { borderRadius: "var(--radius-card)" },
                  children: [
                    /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-3", children: [
                      /* @__PURE__ */ e("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Vos favoris actuels" }),
                      v.length > 1 && /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: "Glissez pour réorganiser" })
                    ] }),
                    v.length === 0 ? /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: "Aucun favori sélectionné" }) : /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: v.map((r, t) => /* @__PURE__ */ a(
                      "div",
                      {
                        draggable: !0,
                        onDragStart: (s) => de(s, t),
                        onDragEnd: G,
                        onDragOver: (s) => me(s, t),
                        onDragLeave: ue,
                        onDrop: (s) => ve(s, t),
                        className: `flex items-center gap-2 px-3 py-2 bg-[var(--accent-bg)] border text-[var(--color-accent-500)] cursor-grab active:cursor-grabbing transition-all ${ae === t ? "border-[var(--color-accent-500)] border-2 scale-[1.02]" : "border-[var(--color-accent-500)]/50"}`,
                        style: { borderRadius: "var(--radius-button)" },
                        children: [
                          /* @__PURE__ */ e(we, { className: "w-4 h-4 text-[var(--color-accent-400)] flex-shrink-0" }),
                          /* @__PURE__ */ e("span", { className: "text-xs text-[var(--color-accent-500)] font-mono w-4", children: t + 1 }),
                          /* @__PURE__ */ a(
                            "button",
                            {
                              onClick: () => le(r),
                              className: "flex items-center gap-2 hover:underline flex-1",
                              children: [
                                /* @__PURE__ */ e(C, { name: r.icon, className: "w-4 h-4" }),
                                /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: r.label }),
                                /* @__PURE__ */ a("span", { className: "text-xs text-[var(--text-muted)]", children: [
                                  "(",
                                  r.applicationLabel,
                                  ")"
                                ] })
                              ]
                            }
                          ),
                          /* @__PURE__ */ e(
                            "button",
                            {
                              onClick: () => T(r),
                              className: "p-1 hover:bg-[var(--bg-tertiary)] rounded flex-shrink-0",
                              title: "Retirer des favoris",
                              children: /* @__PURE__ */ e(Se, { className: "w-3.5 h-3.5" })
                            }
                          )
                        ]
                      },
                      r.id
                    )) })
                  ]
                }
              ),
              /* @__PURE__ */ a("div", { className: "space-y-4", children: [
                /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
                  /* @__PURE__ */ e("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Modules disponibles" }),
                  /* @__PURE__ */ a("div", { className: "relative", children: [
                    /* @__PURE__ */ e(Ce, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)]" }),
                    /* @__PURE__ */ e(
                      "input",
                      {
                        type: "text",
                        placeholder: "Rechercher un module...",
                        value: n,
                        onChange: (r) => re(r.target.value),
                        className: "pl-9 pr-3 py-2 w-64 bg-[var(--bg-primary)] border border-[var(--border-color)] text-sm focus:outline-none focus:border-[var(--color-accent-500)]",
                        style: { borderRadius: "var(--radius-input)" }
                      }
                    )
                  ] })
                ] }),
                p.map(({ app: r, modules: t }) => {
                  const s = n ? t.filter(
                    (c) => c.label.toLowerCase().includes(n.toLowerCase()) || c.code.toLowerCase().includes(n.toLowerCase()) || r.label.toLowerCase().includes(n.toLowerCase())
                  ) : t;
                  return s.length === 0 ? null : /* @__PURE__ */ a(
                    "div",
                    {
                      className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)]",
                      style: { borderRadius: "var(--radius-card)" },
                      children: [
                        /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-3", children: [
                          /* @__PURE__ */ e(C, { name: r.icon || "Folder", className: "w-4 h-4 text-[var(--text-secondary)]" }),
                          /* @__PURE__ */ e("span", { className: "font-medium text-[var(--text-primary)]", children: r.label }),
                          /* @__PURE__ */ a("span", { className: "text-xs text-[var(--text-muted)]", children: [
                            "(",
                            s.length,
                            " module",
                            s.length > 1 ? "s" : "",
                            ")"
                          ] })
                        ] }),
                        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2", children: s.map((c) => {
                          const d = K(c.id), z = !d && !Q;
                          return /* @__PURE__ */ a(
                            "button",
                            {
                              onClick: () => oe(c, r),
                              disabled: z,
                              className: `flex items-center gap-3 p-3 transition-all ${je(d, z)}`,
                              style: { borderRadius: "var(--radius-button)" },
                              children: [
                                /* @__PURE__ */ e("div", { className: `w-8 h-8 flex items-center justify-center ${d ? "bg-[var(--color-accent-600)] text-white" : "bg-[var(--bg-tertiary)] text-[var(--text-secondary)]"}`, style: { borderRadius: "var(--radius-button)" }, children: /* @__PURE__ */ e(C, { name: c.icon || "Star", className: "w-4 h-4" }) }),
                                /* @__PURE__ */ e("span", { className: `text-sm ${d ? "font-medium text-[var(--color-accent-500)]" : "text-[var(--text-primary)]"}`, children: c.label }),
                                d && /* @__PURE__ */ e(q, { className: "w-4 h-4 text-[var(--color-accent-500)] ml-auto" })
                              ]
                            },
                            c.id
                          );
                        }) })
                      ]
                    },
                    r.id
                  );
                }),
                (p.length === 0 || n && p.every(
                  ({ modules: r }) => !r.some(
                    (t) => t.label.toLowerCase().includes(n.toLowerCase()) || t.code.toLowerCase().includes(n.toLowerCase())
                  )
                )) && /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: n ? `Aucun module trouvé pour "${n}"` : i("common:favorites.noModules") })
              ] })
            ] })
          ] })
        ]
      }
    )
  ] });
}
export {
  Be as PreferencesPage
};
//# sourceMappingURL=PreferencesPage-BBu8yZQB.js.map
