import { jsxs as r, jsx as e, Fragment as C } from "react/jsx-runtime";
import { useState as a } from "react";
import { CheckCircle2 as V, AlertCircle as A, User as L, Mail as I, Lock as S, EyeOff as P, Eye as E, Loader2 as T } from "lucide-react";
import { Link as D } from "react-router-dom";
import { T as R, l as h, c as U, N as Z } from "./index-CwSaRXXg.js";
function G() {
  const [i, p] = a(""), [o, b] = a(""), [d, f] = a(""), [c, x] = a(""), [m, y] = a(""), [u, j] = a(!1), [g, z] = a(!1), [l, v] = a(!1), [N, n] = a(null), [w, k] = a(null), F = () => !i || !o || !d || !c || !m ? (n("Tous les champs sont requis"), !1) : o !== d ? (n("Les mots de passe ne correspondent pas"), !1) : o.length < 8 ? (n("Le mot de passe doit contenir au moins 8 caractères"), !1) : !0, q = async (t) => {
    if (t.preventDefault(), n(null), k(null), !!F()) {
      v(!0);
      try {
        h.logEvent("register_attempt", "auth", { email: i });
        const s = await U.register({
          email: i,
          password: o,
          firstName: c,
          lastName: m
        });
        h.logEvent("register_success", "auth", { email: i }), k(s.message), p(""), b(""), f(""), x(""), y("");
      } catch (s) {
        if (s instanceof Z)
          n(s.message);
        else {
          const M = s instanceof Error ? s.message : "Une erreur inattendue est survenue";
          n(M);
        }
        h.logError(
          s instanceof Error ? s : new Error(String(s)),
          "RegisterPage.handleSubmit",
          { email: i }
        );
      } finally {
        v(!1);
      }
    }
  };
  return /* @__PURE__ */ r("div", { className: "min-h-screen flex", children: [
    /* @__PURE__ */ r("div", { className: "hidden lg:flex lg:w-1/2 bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-600 p-12 text-white flex-col justify-between relative overflow-hidden", children: [
      /* @__PURE__ */ e("div", { className: "absolute inset-0 opacity-10", children: /* @__PURE__ */ e("div", { className: "absolute inset-0", style: {
        backgroundImage: "radial-gradient(circle at 2px 2px, white 1px, transparent 0)",
        backgroundSize: "40px 40px"
      } }) }),
      /* @__PURE__ */ r("div", { className: "relative z-10", children: [
        /* @__PURE__ */ r("div", { className: "flex items-center gap-3 mb-12", children: [
          /* @__PURE__ */ e("div", { className: "p-2 bg-white/20 backdrop-blur-sm rounded-lg", children: /* @__PURE__ */ e("div", { className: "w-8 h-8 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ e("path", { d: "M12 2L2 7V17L12 22L22 17V7L12 2ZM12 4.5L19 8.27V15.73L12 19.5L5 15.73V8.27L12 4.5Z" }) }) }) }),
          /* @__PURE__ */ e("div", { className: "text-2xl font-bold tracking-tight", children: "SmartStack" })
        ] }),
        /* @__PURE__ */ r("div", { className: "space-y-6", children: [
          /* @__PURE__ */ r("h1", { className: "text-4xl font-bold leading-tight", children: [
            "Créez votre compte",
            /* @__PURE__ */ e("br", {}),
            /* @__PURE__ */ e("span", { className: "text-white/80", children: "et rejoignez-nous" })
          ] }),
          /* @__PURE__ */ e("p", { className: "text-white/80 text-lg max-w-md", children: "Accédez à une plateforme complète de gestion avec authentification sécurisée et tableau de bord personnalisé." })
        ] })
      ] }),
      /* @__PURE__ */ r("div", { className: "relative z-10 text-sm text-white/60", children: [
        "© ",
        (/* @__PURE__ */ new Date()).getFullYear(),
        " SmartStack. Tous droits réservés."
      ] })
    ] }),
    /* @__PURE__ */ e("div", { className: "w-full lg:w-1/2 flex items-center justify-center p-8 bg-white dark:bg-gray-900", children: /* @__PURE__ */ r("div", { className: "w-full max-w-md", children: [
      /* @__PURE__ */ e("div", { className: "flex justify-end mb-8", children: /* @__PURE__ */ e(R, {}) }),
      /* @__PURE__ */ r("div", { className: "text-center mb-8", children: [
        /* @__PURE__ */ e("h2", { className: "text-3xl font-bold text-gray-900 dark:text-white mb-2", children: "Créer un compte" }),
        /* @__PURE__ */ e("p", { className: "text-gray-600 dark:text-gray-400", children: "Remplissez vos informations pour commencer" })
      ] }),
      w && /* @__PURE__ */ r("div", { className: "mb-6 p-4 bg-green-500/10 border border-green-500/20 rounded-lg flex items-start gap-3", children: [
        /* @__PURE__ */ e(V, { className: "w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" }),
        /* @__PURE__ */ r("div", { className: "flex-1", children: [
          /* @__PURE__ */ e("p", { className: "text-sm text-green-600 dark:text-green-400", children: w }),
          /* @__PURE__ */ e("p", { className: "text-xs text-green-600/80 dark:text-green-400/80 mt-1", children: "Consultez vos emails pour confirmer votre adresse." })
        ] })
      ] }),
      N && /* @__PURE__ */ r("div", { className: "mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg flex items-start gap-3", children: [
        /* @__PURE__ */ e(A, { className: "w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" }),
        /* @__PURE__ */ e("p", { className: "text-sm text-red-500 flex-1", children: N })
      ] }),
      /* @__PURE__ */ r("form", { onSubmit: q, className: "space-y-4", children: [
        /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-4", children: [
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("label", { htmlFor: "firstName", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Prénom" }),
            /* @__PURE__ */ r("div", { className: "relative", children: [
              /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(L, { className: "h-5 w-5 text-gray-400" }) }),
              /* @__PURE__ */ e(
                "input",
                {
                  id: "firstName",
                  type: "text",
                  value: c,
                  onChange: (t) => x(t.target.value),
                  className: "block w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
                  placeholder: "Jean",
                  required: !0,
                  autoComplete: "given-name",
                  disabled: l
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ e("label", { htmlFor: "lastName", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Nom" }),
            /* @__PURE__ */ r("div", { className: "relative", children: [
              /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(L, { className: "h-5 w-5 text-gray-400" }) }),
              /* @__PURE__ */ e(
                "input",
                {
                  id: "lastName",
                  type: "text",
                  value: m,
                  onChange: (t) => y(t.target.value),
                  className: "block w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
                  placeholder: "Dupont",
                  required: !0,
                  autoComplete: "family-name",
                  disabled: l
                }
              )
            ] })
          ] })
        ] }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Adresse email" }),
          /* @__PURE__ */ r("div", { className: "relative", children: [
            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(I, { className: "h-5 w-5 text-gray-400" }) }),
            /* @__PURE__ */ e(
              "input",
              {
                id: "email",
                type: "email",
                value: i,
                onChange: (t) => p(t.target.value),
                className: "block w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
                placeholder: "vous@exemple.com",
                required: !0,
                autoComplete: "email",
                disabled: l
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Mot de passe" }),
          /* @__PURE__ */ r("div", { className: "relative", children: [
            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(S, { className: "h-5 w-5 text-gray-400" }) }),
            /* @__PURE__ */ e(
              "input",
              {
                id: "password",
                type: u ? "text" : "password",
                value: o,
                onChange: (t) => b(t.target.value),
                className: "block w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
                placeholder: "••••••••",
                required: !0,
                autoComplete: "new-password",
                disabled: l
              }
            ),
            /* @__PURE__ */ e(
              "button",
              {
                type: "button",
                onClick: () => j(!u),
                className: "absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
                tabIndex: -1,
                children: u ? /* @__PURE__ */ e(P, { className: "h-5 w-5" }) : /* @__PURE__ */ e(E, { className: "h-5 w-5" })
              }
            )
          ] }),
          /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: "Minimum 8 caractères" })
        ] }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("label", { htmlFor: "confirmPassword", className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Confirmer le mot de passe" }),
          /* @__PURE__ */ r("div", { className: "relative", children: [
            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(S, { className: "h-5 w-5 text-gray-400" }) }),
            /* @__PURE__ */ e(
              "input",
              {
                id: "confirmPassword",
                type: g ? "text" : "password",
                value: d,
                onChange: (t) => f(t.target.value),
                className: "block w-full pl-10 pr-10 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors",
                placeholder: "••••••••",
                required: !0,
                autoComplete: "new-password",
                disabled: l
              }
            ),
            /* @__PURE__ */ e(
              "button",
              {
                type: "button",
                onClick: () => z(!g),
                className: "absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
                tabIndex: -1,
                children: g ? /* @__PURE__ */ e(P, { className: "h-5 w-5" }) : /* @__PURE__ */ e(E, { className: "h-5 w-5" })
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ e(
          "button",
          {
            type: "submit",
            disabled: l,
            className: "w-full flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-medium hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed",
            children: l ? /* @__PURE__ */ r(C, { children: [
              /* @__PURE__ */ e(T, { className: "h-5 w-5 animate-spin" }),
              "Création en cours..."
            ] }) : /* @__PURE__ */ e(C, { children: "Créer mon compte" })
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "mt-6 text-center space-y-2", children: /* @__PURE__ */ r("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
        "Vous avez déjà un compte ?",
        " ",
        /* @__PURE__ */ e(D, { to: "/login", className: "text-blue-600 dark:text-blue-400 hover:underline font-medium", children: "Se connecter" })
      ] }) })
    ] }) })
  ] });
}
export {
  G as RegisterPage
};
//# sourceMappingURL=RegisterPage-bXCcJD88.js.map
