import { jsxs as t, jsx as e, Fragment as y } from "react/jsx-runtime";
import { useState as o, useRef as w, useEffect as G, useCallback as oe } from "react";
import { useNavigate as le } from "react-router-dom";
import { u as de } from "./useTabNavigation-Bsbskz0i.js";
import { useTranslation as me } from "react-i18next";
import * as ue from "lucide-react";
import { Palette as ve, Globe as fe, Bell as he, Star as q, Loader2 as z, Check as B, GripVertical as be, X as pe, Search as ge, Settings as xe } from "lucide-react";
import { j as Ne, a as ye, u as we, aL as Se, i as O, P as Ce, m as ke, aM as Le } from "./index-CeEMms9z.js";
const Te = ["appearance", "language", "notifications", "favorites"];
function S({ name: i, className: m }) {
  const l = ue[i];
  return l ? /* @__PURE__ */ e(l, { className: m }) : /* @__PURE__ */ e(q, { className: m });
}
function De(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 ze() {
  const { t: i, i18n: m } = me(["navigation", "common"]), C = le(), { activeTab: l, setActiveTab: U } = de("appearance", Te), { loadFromServer: Fe, selectedThemeTenant: Ae } = Ne(), { currentTenant: k, isLoading: L } = ye(), { menu: V } = we(), { favorites: v, toggleFavorite: T, isFavorite: W, canAddMore: X, maxFavorites: _, reorderFavorites: H, loading: D } = Se(), [, je] = o(!1), [c, J] = o(""), [F, A] = o(null), [K, g] = o(null), u = w(null), [h, j] = o(!0), [b, P] = o(!0), [Q, Y] = o(!1), [E, I] = o(!1), [Z, x] = o(!1), f = w(null), N = w(!0);
  G(() => {
    !L && k && ee();
  }, [L, k]);
  const ee = async () => {
    try {
      const r = await O.preferences.get();
      j(r.emailNotifications), P(r.pushNotifications), N.current = !1;
    } catch {
      N.current = !1;
    }
  }, M = oe(async () => {
    I(!0), x(!1);
    try {
      await O.preferences.updateNotifications({
        emailNotifications: h,
        pushNotifications: b
      }), x(!0), setTimeout(() => x(!1), 2e3);
    } catch {
      console.error("[PreferencesPage] Failed to save notifications");
    } finally {
      I(!1);
    }
  }, [h, b]);
  G(() => {
    if (!N.current)
      return f.current && clearTimeout(f.current), f.current = setTimeout(() => {
        M();
      }, 1e3), () => {
        f.current && clearTimeout(f.current);
      };
  }, [h, b, M]);
  const re = [
    { id: "appearance", label: "Apparence", icon: ve, description: "Personnaliser le thème et les couleurs" },
    { id: "language", label: "Langue", icon: fe, description: "Changer la langue de l'interface" },
    { id: "notifications", label: "Notifications", icon: he, description: "Gérer les notifications" },
    { id: "favorites", label: i("common:favorites.quickAccess"), icon: q, description: "Gérer vos modules favoris" }
  ], p = [];
  V?.applications.forEach((r) => {
    (r.modules?.length ?? 0) > 0 && p.push({
      app: r,
      modules: r.modules
    });
  });
  const te = (r, a) => {
    const s = {
      id: r.id,
      code: r.code,
      label: r.label,
      icon: r.icon || "Star",
      route: `/${a.code}/${r.code}`,
      applicationCode: a.code,
      applicationLabel: a.label
    };
    T(s);
  }, ae = (r) => {
    r.route && C(r.route);
  }, se = (r, a) => {
    A(a), u.current = r.currentTarget, r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", a.toString()), setTimeout(() => {
      u.current && (u.current.style.opacity = "0.4");
    }, 0);
  }, R = () => {
    u.current && (u.current.style.opacity = "1"), A(null), g(null), u.current = null;
  }, ne = (r, a) => {
    r.preventDefault(), r.dataTransfer.dropEffect = "move", a !== F && g(a);
  }, ce = () => {
    g(null);
  }, ie = (r, a) => {
    r.preventDefault();
    const s = F;
    if (s === null || s === a) return;
    const n = [...v], [d] = n.splice(s, 1);
    n.splice(a, 0, d), H(n), R();
  };
  return /* @__PURE__ */ t(
    Ce,
    {
      title: i("navigation:sidebar.preferences"),
      subtitle: "Personnalisez votre expérience SmartStack",
      icon: /* @__PURE__ */ e(xe, { className: "w-6 h-6" }),
      children: [
        /* @__PURE__ */ e("div", { className: "border-b border-[var(--item-color-border)]", children: /* @__PURE__ */ e("nav", { className: "flex gap-1", "aria-label": "Tabs", children: re.map((r) => {
          const a = r.icon;
          return /* @__PURE__ */ t(
            "button",
            {
              onClick: () => U(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)]"} rounded-[var(--radius-button) var(--radius-button) 0 )]`,
              children: [
                /* @__PURE__ */ e(a, { className: "w-5 h-5" }),
                /* @__PURE__ */ e("span", { children: r.label })
              ]
            },
            r.id
          );
        }) }) }),
        /* @__PURE__ */ t(
          "div",
          {
            className: "bg-[var(--bg-card)] border border-[var(--item-color-border)] p-6 rounded-[var(--radius-card)]",
            children: [
              l === "appearance" && /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ e(ke, {}) }),
              l === "language" && /* @__PURE__ */ t("div", { className: "space-y-6", children: [
                /* @__PURE__ */ t("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)] rounded-[var(--radius-card)]",
                    children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                      /* @__PURE__ */ t("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(Le, {})
                    ] })
                  }
                )
              ] }),
              l === "notifications" && /* @__PURE__ */ t("div", { className: "space-y-6", children: [
                /* @__PURE__ */ t("div", { className: "flex items-start justify-between", children: [
                  /* @__PURE__ */ t("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__ */ t("div", { className: "flex items-center gap-2 text-xs text-[var(--text-muted)]", children: [
                    E && /* @__PURE__ */ t(y, { children: [
                      /* @__PURE__ */ e(z, { className: "w-3 h-3 animate-spin" }),
                      /* @__PURE__ */ e("span", { children: "Sauvegarde..." })
                    ] }),
                    Z && !E && /* @__PURE__ */ t(y, { children: [
                      /* @__PURE__ */ e(B, { className: "w-3 h-3 text-[var(--success-dot)]" }),
                      /* @__PURE__ */ e("span", { className: "text-[var(--success-text)]", children: "Sauvegardé" })
                    ] })
                  ] })
                ] }),
                /* @__PURE__ */ t("div", { className: "space-y-4", children: [
                  /* @__PURE__ */ e(
                    "div",
                    {
                      className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)] rounded-[var(--radius-card)]",
                      children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                        /* @__PURE__ */ t("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__ */ t("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 rounded-[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)] rounded-[var(--radius-card)]",
                      children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                        /* @__PURE__ */ t("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__ */ t("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 rounded-[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)] rounded-[var(--radius-card)]",
                      children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                        /* @__PURE__ */ t("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__ */ t("label", { className: "relative inline-flex items-center cursor-pointer", children: [
                          /* @__PURE__ */ e(
                            "input",
                            {
                              type: "checkbox",
                              className: "sr-only peer",
                              checked: Q,
                              onChange: (r) => Y(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 rounded-[var(--radius-button)]",
                              children: /* @__PURE__ */ e("span", { className: "after:rounded-full" })
                            }
                          )
                        ] })
                      ] })
                    }
                  )
                ] })
              ] }),
              l === "favorites" && /* @__PURE__ */ t("div", { className: "space-y-6", children: [
                /* @__PURE__ */ t("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: _ }) })
                ] }),
                D && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-8", children: [
                  /* @__PURE__ */ e(z, { 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__ */ t(y, { children: [
                  /* @__PURE__ */ t(
                    "div",
                    {
                      className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)] rounded-[var(--radius-card)]",
                      children: [
                        /* @__PURE__ */ t("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, a) => /* @__PURE__ */ t(
                          "div",
                          {
                            draggable: !0,
                            onDragStart: (s) => se(s, a),
                            onDragEnd: R,
                            onDragOver: (s) => ne(s, a),
                            onDragLeave: ce,
                            onDrop: (s) => ie(s, a),
                            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 ${K === a ? "border-[var(--color-accent-500)] border-2 scale-[1.02]" : "border-[var(--color-accent-500)]/50"} rounded-[var(--radius-button)]`,
                            children: [
                              /* @__PURE__ */ e(be, { 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: a + 1 }),
                              /* @__PURE__ */ t(
                                "button",
                                {
                                  onClick: () => ae(r),
                                  className: "flex items-center gap-2 hover:underline flex-1",
                                  children: [
                                    /* @__PURE__ */ e(S, { name: r.icon, className: "w-4 h-4" }),
                                    /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: r.label }),
                                    /* @__PURE__ */ t("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(pe, { className: "w-3.5 h-3.5" })
                                }
                              )
                            ]
                          },
                          r.id
                        )) })
                      ]
                    }
                  ),
                  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
                    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
                      /* @__PURE__ */ e("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Modules disponibles" }),
                      /* @__PURE__ */ t("div", { className: "relative", children: [
                        /* @__PURE__ */ e(ge, { 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: c,
                            onChange: (r) => J(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)] rounded-[var(--radius-input)]"
                          }
                        )
                      ] })
                    ] }),
                    p.map(({ app: r, modules: a }) => {
                      const s = c ? a.filter(
                        (n) => n.label.toLowerCase().includes(c.toLowerCase()) || n.code.toLowerCase().includes(c.toLowerCase()) || r.label.toLowerCase().includes(c.toLowerCase())
                      ) : a;
                      return s.length === 0 ? null : /* @__PURE__ */ t(
                        "div",
                        {
                          className: "p-4 bg-[var(--bg-secondary)] border border-[var(--item-color-border)] rounded-[var(--radius-card)]",
                          children: [
                            /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-3", children: [
                              /* @__PURE__ */ e(S, { 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__ */ t("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((n) => {
                              const d = W(n.id), $ = !d && !X;
                              return /* @__PURE__ */ t(
                                "button",
                                {
                                  onClick: () => te(n, r),
                                  disabled: $,
                                  className: `flex items-center gap-3 p-3 transition-all ${De(d, $)} rounded-[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)]"} rounded-[var(--radius-button)]`, children: /* @__PURE__ */ e(S, { name: n.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: n.label }),
                                    d && /* @__PURE__ */ e(B, { className: "w-4 h-4 text-[var(--color-accent-500)] ml-auto" })
                                  ]
                                },
                                n.id
                              );
                            }) })
                          ]
                        },
                        r.id
                      );
                    }),
                    (p.length === 0 || c && p.every(
                      ({ modules: r }) => !r.some(
                        (a) => a.label.toLowerCase().includes(c.toLowerCase()) || a.code.toLowerCase().includes(c.toLowerCase())
                      )
                    )) && /* @__PURE__ */ e("div", { className: "text-center py-8 text-[var(--text-secondary)]", children: c ? `Aucun module trouvé pour "${c}"` : i("common:favorites.noModules") })
                  ] })
                ] })
              ] })
            ]
          }
        )
      ]
    }
  );
}
export {
  ze as PreferencesPage
};
//# sourceMappingURL=PreferencesPage-BuemY9ZT.js.map
