import { jsx as e, jsxs as r } from "react/jsx-runtime";
import { useState as l, useEffect as k } from "react";
import { useTranslation as N } from "react-i18next";
import { X as x, User as w, Loader2 as P, Key as S, CheckCircle as F, Mail as j, Calendar as L, ShieldCheck as E } from "lucide-react";
import { i as M, d as T, x as q, P as A } from "./index-CeEMms9z.js";
import { e as C } from "./extractErrorMessage-C0uxTGn5.js";
function z({
  isOpen: a,
  initialFirstName: t,
  initialLastName: p,
  onSaved: s,
  onClose: c
}) {
  const { t: n } = N(["navigation", "common"]), [m, f] = l(t), [v, g] = l(p), [o, b] = l(!1), [h, u] = l(null);
  return a ? /* @__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(
    "form",
    {
      onSubmit: async (i) => {
        if (i.preventDefault(), u(null), !m.trim() || !v.trim()) {
          u(n("navigation:profile.edit.requiredFields", "Le prénom et le nom sont obligatoires"));
          return;
        }
        b(!0);
        try {
          await M.profile.update({ firstName: m.trim(), lastName: v.trim() }), s(), c();
        } catch (d) {
          u(C(d));
        } finally {
          b(!1);
        }
      },
      className: "relative w-full max-w-md bg-[var(--bg-card)] rounded-2xl shadow-2xl border border-[var(--border-color)] overflow-hidden",
      children: [
        /* @__PURE__ */ e(
          "button",
          {
            type: "button",
            onClick: c,
            disabled: o,
            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": n("common:close"),
            children: /* @__PURE__ */ e(x, { 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(w, { className: "w-5 h-5" }) }),
          /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: n("navigation:profile.edit.title", "Modifier mon profil") })
        ] }) }),
        /* @__PURE__ */ r("div", { className: "px-6 py-5 space-y-4", children: [
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("label", { htmlFor: "profile-firstName", className: "block text-sm font-medium text-[var(--text-primary)] mb-1", children: n("navigation:profile.edit.firstName", "Prénom") }),
            /* @__PURE__ */ e(
              "input",
              {
                id: "profile-firstName",
                name: "firstName",
                type: "text",
                value: m,
                onChange: (i) => f(i.target.value),
                disabled: o,
                autoComplete: "given-name",
                className: "w-full px-3 py-2 border border-[var(--border-color)] rounded-[var(--radius-button)] bg-[var(--bg-card)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-accent-500)] focus:border-[var(--color-accent-500)] disabled:opacity-50",
                required: !0,
                maxLength: 100
              }
            )
          ] }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("label", { htmlFor: "profile-lastName", className: "block text-sm font-medium text-[var(--text-primary)] mb-1", children: n("navigation:profile.edit.lastName", "Nom") }),
            /* @__PURE__ */ e(
              "input",
              {
                id: "profile-lastName",
                name: "lastName",
                type: "text",
                value: v,
                onChange: (i) => g(i.target.value),
                disabled: o,
                autoComplete: "family-name",
                className: "w-full px-3 py-2 border border-[var(--border-color)] rounded-[var(--radius-button)] bg-[var(--bg-card)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-accent-500)] focus:border-[var(--color-accent-500)] disabled:opacity-50",
                required: !0,
                maxLength: 100
              }
            )
          ] }),
          h && /* @__PURE__ */ e("div", { className: "p-2 rounded-[var(--radius-button)] bg-[var(--error-bg)] text-[var(--error-text)] text-sm", children: h })
        ] }),
        /* @__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: c,
              disabled: o,
              className: "px-4 py-2 rounded-[var(--radius-button)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors disabled:opacity-50",
              children: n("common:buttons.cancel", "Annuler")
            }
          ),
          /* @__PURE__ */ r(
            "button",
            {
              type: "submit",
              disabled: o,
              className: "inline-flex items-center gap-2 px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] text-white font-medium hover:bg-[var(--color-accent-700)] transition-colors disabled:opacity-50",
              children: [
                o && /* @__PURE__ */ e(P, { className: "w-4 h-4 animate-spin" }),
                n("common:buttons.save", "Enregistrer")
              ]
            }
          )
        ] })
      ]
    }
  ) }) : null;
}
function U({
  isOpen: a,
  onSaved: t,
  onClose: p
}) {
  const { t: s } = N(["navigation", "common"]), [c, n] = l(""), [m, f] = l(""), [v, g] = l(""), [o, b] = l(!1), [h, u] = l(null);
  return a ? /* @__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(
    "form",
    {
      onSubmit: async (i) => {
        if (i.preventDefault(), u(null), m.length < 8) {
          u(s("navigation:profile.security.changePassword.tooShort", "Le nouveau mot de passe doit contenir au moins 8 caractères"));
          return;
        }
        if (m !== v) {
          u(s("navigation:profile.security.changePassword.mismatch", "Les mots de passe ne correspondent pas"));
          return;
        }
        if (m === c) {
          u(s("navigation:profile.security.changePassword.samePassword", "Le nouveau mot de passe doit être différent de l'ancien"));
          return;
        }
        b(!0);
        try {
          const d = await T.changePassword(c, m);
          t(d.requireRelogin ?? !0), p();
        } catch (d) {
          u(C(d));
        } finally {
          b(!1);
        }
      },
      className: "relative w-full max-w-md bg-[var(--bg-card)] rounded-2xl shadow-2xl border border-[var(--border-color)] overflow-hidden",
      children: [
        /* @__PURE__ */ e(
          "button",
          {
            type: "button",
            onClick: p,
            disabled: o,
            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"),
            children: /* @__PURE__ */ e(x, { 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(S, { className: "w-5 h-5" }) }),
          /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: s("navigation:profile.security.changePassword.title", "Changer le mot de passe") })
        ] }) }),
        /* @__PURE__ */ r("div", { className: "px-6 py-5 space-y-4", children: [
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("label", { htmlFor: "current-password", className: "block text-sm font-medium text-[var(--text-primary)] mb-1", children: s("navigation:profile.security.changePassword.currentPassword", "Mot de passe actuel") }),
            /* @__PURE__ */ e(
              "input",
              {
                id: "current-password",
                name: "currentPassword",
                type: "password",
                value: c,
                onChange: (i) => n(i.target.value),
                disabled: o,
                autoComplete: "current-password",
                className: "w-full px-3 py-2 border border-[var(--border-color)] rounded-[var(--radius-button)] bg-[var(--bg-card)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-accent-500)] focus:border-[var(--color-accent-500)] disabled:opacity-50",
                required: !0
              }
            )
          ] }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("label", { htmlFor: "new-password", className: "block text-sm font-medium text-[var(--text-primary)] mb-1", children: s("navigation:profile.security.changePassword.newPassword", "Nouveau mot de passe") }),
            /* @__PURE__ */ e(
              "input",
              {
                id: "new-password",
                name: "newPassword",
                type: "password",
                value: m,
                onChange: (i) => f(i.target.value),
                disabled: o,
                autoComplete: "new-password",
                minLength: 8,
                className: "w-full px-3 py-2 border border-[var(--border-color)] rounded-[var(--radius-button)] bg-[var(--bg-card)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-accent-500)] focus:border-[var(--color-accent-500)] disabled:opacity-50",
                required: !0
              }
            ),
            /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: s("navigation:profile.security.changePassword.minLength", "Minimum 8 caractères") })
          ] }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("label", { htmlFor: "confirm-password", className: "block text-sm font-medium text-[var(--text-primary)] mb-1", children: s("navigation:profile.security.changePassword.confirmPassword", "Confirmer le nouveau mot de passe") }),
            /* @__PURE__ */ e(
              "input",
              {
                id: "confirm-password",
                name: "confirmPassword",
                type: "password",
                value: v,
                onChange: (i) => g(i.target.value),
                disabled: o,
                autoComplete: "new-password",
                className: "w-full px-3 py-2 border border-[var(--border-color)] rounded-[var(--radius-button)] bg-[var(--bg-card)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-accent-500)] focus:border-[var(--color-accent-500)] disabled:opacity-50",
                required: !0
              }
            )
          ] }),
          h && /* @__PURE__ */ e("div", { className: "p-2 rounded-[var(--radius-button)] bg-[var(--error-bg)] text-[var(--error-text)] text-sm", children: h })
        ] }),
        /* @__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: p,
              disabled: o,
              className: "px-4 py-2 rounded-[var(--radius-button)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors disabled:opacity-50",
              children: s("common:buttons.cancel", "Annuler")
            }
          ),
          /* @__PURE__ */ r(
            "button",
            {
              type: "submit",
              disabled: o,
              className: "inline-flex items-center gap-2 px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] text-white font-medium hover:bg-[var(--color-accent-700)] transition-colors disabled:opacity-50",
              children: [
                o && /* @__PURE__ */ e(P, { className: "w-4 h-4 animate-spin" }),
                s("navigation:profile.security.changePassword.submit", "Changer le mot de passe")
              ]
            }
          )
        ] })
      ]
    }
  ) }) : null;
}
function R() {
  const { t: a } = N(["navigation", "common"]), { user: t, refreshPermissions: p, logout: s } = q(), [c, n] = l(null), [m, f] = l(!1), [v, g] = l(!1), [o, b] = l(!1);
  k(() => {
    if (c) {
      const d = setTimeout(() => n(null), 4e3);
      return () => clearTimeout(d);
    }
  }, [c]);
  const h = t?.firstName && t?.lastName ? `${t.firstName} ${t.lastName}` : t?.email || a("common:name"), u = t?.firstName && t?.lastName ? `${t.firstName.at(0)}${t.lastName.at(0)}`.toUpperCase() : t?.email?.at(0)?.toUpperCase() || "U", y = async () => {
    n(a("navigation:profile.edit.success", "Profil mis à jour avec succès")), await p();
  }, i = (d) => {
    n(a("navigation:profile.security.changePassword.success", "Mot de passe modifié. Veuillez vous reconnecter.")), d && setTimeout(() => {
      s();
    }, 1500);
  };
  return /* @__PURE__ */ r(
    A,
    {
      title: a("navigation:sidebar.profile"),
      subtitle: a("navigation:profile.subtitle"),
      icon: /* @__PURE__ */ e(w, { className: "w-6 h-6" }),
      children: [
        c && /* @__PURE__ */ r(
          "div",
          {
            className: "flex items-center gap-3 p-4 bg-[var(--success-bg)] border border-[var(--success-border)] text-[var(--success-text)] rounded-[var(--radius-card)]",
            role: "status",
            children: [
              /* @__PURE__ */ e(F, { className: "w-5 h-5 flex-shrink-0" }),
              /* @__PURE__ */ e("span", { className: "flex-1 text-sm", children: c }),
              /* @__PURE__ */ e(
                "button",
                {
                  type: "button",
                  onClick: () => n(null),
                  className: "p-1 hover:bg-[var(--success-bg)]/80 rounded transition-colors",
                  "aria-label": a("common:close"),
                  children: /* @__PURE__ */ e(x, { className: "w-4 h-4" })
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ r(
          "div",
          {
            className: "bg-[var(--bg-card)] border border-[var(--border-color)] p-6 rounded-[var(--radius-card)]",
            children: [
              /* @__PURE__ */ r("div", { className: "flex items-center gap-6 mb-6", children: [
                /* @__PURE__ */ e(
                  "div",
                  {
                    className: "w-20 h-20 bg-gradient-to-br from-[var(--color-accent-500)] to-[var(--color-accent-600)] flex items-center justify-center text-white text-2xl font-bold rounded-[var(--radius-card)]",
                    children: u
                  }
                ),
                /* @__PURE__ */ r("div", { children: [
                  /* @__PURE__ */ e("h2", { className: "text-xl font-semibold text-[var(--text-primary)]", children: h }),
                  /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: t?.email }),
                  t?.roles && t.roles.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2 mt-2", children: t.roles.map((d) => /* @__PURE__ */ e(
                    "span",
                    {
                      className: "px-2 py-1 text-xs font-medium bg-[var(--accent-bg)] text-[var(--color-accent-600)] rounded-[var(--radius-badge)]",
                      children: d
                    },
                    d
                  )) })
                ] })
              ] }),
              /* @__PURE__ */ r("div", { className: "space-y-4", children: [
                /* @__PURE__ */ r("div", { className: "flex items-center gap-3 text-[var(--text-secondary)]", children: [
                  /* @__PURE__ */ e(j, { className: "w-5 h-5" }),
                  /* @__PURE__ */ e("span", { children: t?.email || a("navigation:profile.notProvided") })
                ] }),
                /* @__PURE__ */ r("div", { className: "flex items-center gap-3 text-[var(--text-secondary)]", children: [
                  /* @__PURE__ */ e(L, { className: "w-5 h-5" }),
                  /* @__PURE__ */ e("span", { children: a("navigation:profile.memberSince", { date: "janvier 2024" }) })
                ] })
              ] }),
              /* @__PURE__ */ e("div", { className: "mt-6 pt-6 border-t border-[var(--border-color)]", children: /* @__PURE__ */ e(
                "button",
                {
                  type: "button",
                  onClick: () => f(!0),
                  className: "px-4 py-2 bg-[var(--color-accent-500)] hover:bg-[var(--color-accent-600)] text-white font-medium transition-colors rounded-[var(--radius-button)]",
                  children: a("common:buttons.edit")
                }
              ) })
            ]
          }
        ),
        /* @__PURE__ */ r(
          "div",
          {
            className: "bg-[var(--bg-card)] border border-[var(--border-color)] p-6 rounded-[var(--radius-card)]",
            children: [
              /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-[var(--text-primary)] mb-4", children: a("navigation:profile.security.title") }),
              /* @__PURE__ */ r("div", { className: "space-y-4", children: [
                /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
                  /* @__PURE__ */ r("div", { children: [
                    /* @__PURE__ */ e("p", { className: "font-medium text-[var(--text-primary)]", children: a("navigation:profile.security.password") }),
                    /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: a("navigation:profile.security.lastChanged", { days: 30 }) })
                  ] }),
                  /* @__PURE__ */ e(
                    "button",
                    {
                      type: "button",
                      onClick: () => g(!0),
                      className: "px-3 py-1.5 text-sm bg-[var(--bg-tertiary)] hover:bg-[var(--bg-hover)] text-[var(--text-primary)] transition-colors rounded-[var(--radius-button)]",
                      children: a("common:buttons.edit")
                    }
                  )
                ] }),
                /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
                  /* @__PURE__ */ r("div", { children: [
                    /* @__PURE__ */ e("p", { className: "font-medium text-[var(--text-primary)]", children: a("navigation:profile.security.twoFactor") }),
                    /* @__PURE__ */ e("p", { className: "text-sm text-[var(--text-secondary)]", children: a("navigation:profile.security.notEnabled") })
                  ] }),
                  /* @__PURE__ */ e(
                    "button",
                    {
                      type: "button",
                      onClick: () => b(!0),
                      className: "px-3 py-1.5 text-sm bg-[var(--bg-tertiary)] hover:bg-[var(--bg-hover)] text-[var(--text-primary)] transition-colors rounded-[var(--radius-button)]",
                      children: a("navigation:profile.security.enable")
                    }
                  )
                ] })
              ] })
            ]
          }
        ),
        /* @__PURE__ */ e(
          z,
          {
            isOpen: m,
            initialFirstName: t?.firstName ?? "",
            initialLastName: t?.lastName ?? "",
            onSaved: y,
            onClose: () => f(!1)
          }
        ),
        /* @__PURE__ */ e(
          U,
          {
            isOpen: v,
            onSaved: i,
            onClose: () => g(!1)
          }
        ),
        o && /* @__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-md bg-[var(--bg-card)] rounded-2xl shadow-2xl border border-[var(--border-color)] overflow-hidden", children: [
          /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: () => b(!1),
              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",
              "aria-label": a("common:close"),
              children: /* @__PURE__ */ e(x, { className: "w-5 h-5" })
            }
          ),
          /* @__PURE__ */ r("div", { className: "px-6 pt-6 pb-4 border-b border-[var(--border-color)] 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(E, { className: "w-5 h-5" }) }),
            /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: a("navigation:profile.security.twoFactor") })
          ] }),
          /* @__PURE__ */ e("div", { className: "px-6 py-5 text-sm text-[var(--text-secondary)]", children: /* @__PURE__ */ e("p", { children: a("navigation:profile.security.twoFactorComingSoon", "L'authentification à deux facteurs (TOTP) sera disponible prochainement. Elle utilisera une application telle que Google Authenticator ou Microsoft Authenticator.") }) }),
          /* @__PURE__ */ e("div", { className: "px-6 py-4 bg-[var(--bg-secondary)] border-t border-[var(--border-color)] flex justify-end", children: /* @__PURE__ */ e(
            "button",
            {
              type: "button",
              onClick: () => b(!1),
              className: "px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] text-white font-medium hover:bg-[var(--color-accent-700)] transition-colors",
              children: a("common:buttons.close", "Fermer")
            }
          ) })
        ] }) })
      ]
    }
  );
}
export {
  R as ProfilePage
};
//# sourceMappingURL=ProfilePage-Cbb1FEt5.js.map
