import { jsx as e, jsxs as t, Fragment as y } from "react/jsx-runtime";
import { useState as o, useEffect as g } from "react";
import { useNavigate as z } from "react-router-dom";
import { useTranslation as A } from "react-i18next";
import { CheckCircle as w, Loader2 as k, Sparkles as h, Globe as S, Palette as j, ArrowLeft as M, ArrowRight as B } from "lucide-react";
import { j as D, k as G, m as R, o as C } from "./index-CeEMms9z.js";
const I = [
  { code: "fr", name: "Francais", flag: "🇫🇷" },
  { code: "en", name: "English", flag: "🇬🇧" },
  { code: "de", name: "Deutsch", flag: "🇩🇪" },
  { code: "it", name: "Italiano", flag: "🇮🇹" }
];
function V() {
  const { t: r, i18n: d } = A("auth"), b = z(), { selectedTheme: u, selectedPreset: m, availableThemes: L, loadFromServer: T } = D(), [s, x] = o("language"), [n, O] = o(d.language?.substring(0, 2) || "fr"), [p, f] = o(!1), [v, N] = o(null), [E, F] = o(!1);
  g(() => {
    L.length === 0 && T();
  }, []), g(() => {
    (async () => {
      try {
        (await C.get("/api/onboarding/status")).hasCompletedOnboarding && b("/myspace", { replace: !0 });
      } catch {
      }
    })();
  }, [b]), g(() => {
    n && n !== d.language?.substring(0, 2) && G(n);
  }, [n, d]);
  const c = [
    { key: "language", labelKey: "stepLanguage", icon: /* @__PURE__ */ e(S, { className: "w-5 h-5" }) },
    { key: "theme", labelKey: "stepTheme", icon: /* @__PURE__ */ e(j, { className: "w-5 h-5" }) },
    { key: "complete", labelKey: "stepComplete", icon: /* @__PURE__ */ e(h, { className: "w-5 h-5" }) }
  ], l = c.findIndex((a) => a.key === s), K = () => {
    const a = l + 1;
    a < c.length && x(c[a].key);
  }, P = () => {
    const a = l - 1;
    a >= 0 && x(c[a].key);
  }, $ = async () => {
    f(!0), N(null);
    try {
      await C.post("/api/onboarding/complete", {
        language: n,
        themeId: u?.id ?? null,
        presetId: m?.id ?? null
      }), localStorage.setItem("i18nextLng", n), F(!0), setTimeout(() => {
        window.location.href = "/myspace";
      }, 2e3);
    } catch (a) {
      console.error("Onboarding error:", a), N(r("onboarding.errorMessage"));
    } finally {
      f(!1);
    }
  };
  return E ? /* @__PURE__ */ e("div", { className: "min-h-screen flex items-center justify-center bg-[var(--bg-primary)]", children: /* @__PURE__ */ e("div", { className: "max-w-md w-full mx-4", children: /* @__PURE__ */ e("div", { className: "bg-[var(--bg-secondary)] rounded-2xl p-8 shadow-lg border border-[var(--border-color)]", children: /* @__PURE__ */ t("div", { className: "text-center", children: [
    /* @__PURE__ */ e("div", { className: "w-20 h-20 mx-auto bg-[var(--success-bg)] rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ e(w, { className: "w-12 h-12 text-[var(--success-text)]" }) }),
    /* @__PURE__ */ e("h2", { className: "text-2xl font-bold mb-3", children: r("onboarding.successTitle") }),
    /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: r("onboarding.successMessage") }),
    /* @__PURE__ */ e("div", { className: "mt-6", children: /* @__PURE__ */ e(k, { className: "w-6 h-6 mx-auto text-[var(--color-accent-500)] animate-spin" }) })
  ] }) }) }) }) : /* @__PURE__ */ e("div", { className: "min-h-screen flex items-center justify-center bg-[var(--bg-primary)] p-4", children: /* @__PURE__ */ t("div", { className: "max-w-lg w-full", children: [
    /* @__PURE__ */ t("div", { className: "text-center mb-8", children: [
      /* @__PURE__ */ e("div", { className: "flex items-center justify-center gap-2 mb-4", children: /* @__PURE__ */ e("div", { className: "w-12 h-12 bg-gradient-to-br from-[var(--info-border)] to-[var(--color-accent-600)] rounded-xl flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-white text-xl font-bold", children: "S" }) }) }),
      /* @__PURE__ */ e("h1", { className: "text-3xl font-bold mb-2", children: r("onboarding.title") }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: r("onboarding.subtitle") })
    ] }),
    /* @__PURE__ */ e("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: c.map((a, i) => /* @__PURE__ */ t("div", { className: "flex items-center", children: [
      /* @__PURE__ */ e(
        "div",
        {
          className: `w-10 h-10 rounded-full flex items-center justify-center transition-all ${i <= l ? "bg-[var(--color-accent-500)] text-white" : "bg-[var(--bg-tertiary)] text-[var(--text-secondary)]"}`,
          children: a.icon
        }
      ),
      i < c.length - 1 && /* @__PURE__ */ e(
        "div",
        {
          className: `w-12 h-1 mx-1 rounded transition-all ${i < l ? "bg-[var(--color-accent-500)]" : "bg-[var(--bg-tertiary)]"}`
        }
      )
    ] }, a.key)) }) }),
    /* @__PURE__ */ t("div", { className: "bg-[var(--bg-secondary)] rounded-2xl p-8 shadow-lg border border-[var(--border-color)]", children: [
      s === "language" && /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-6 text-center", children: r("onboarding.languageLabel") }),
        /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-4", children: I.map((a) => /* @__PURE__ */ t(
          "button",
          {
            type: "button",
            onClick: () => O(a.code),
            className: `p-4 rounded-xl border-2 transition-all ${n === a.code ? "border-[var(--color-accent-500)] bg-[var(--color-accent-50)] dark:bg-[var(--color-accent-900)]/20" : "border-[var(--border-color)] hover:border-[var(--color-accent-300)]"}`,
            children: [
              /* @__PURE__ */ e("span", { className: "text-3xl mb-2 block", children: a.flag }),
              /* @__PURE__ */ e("span", { className: "font-medium", children: a.name })
            ]
          },
          a.code
        )) })
      ] }),
      s === "theme" && /* @__PURE__ */ t("div", { children: [
        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-6 text-center", children: r("onboarding.themeLabel") }),
        /* @__PURE__ */ e(R, {})
      ] }),
      s === "complete" && /* @__PURE__ */ t("div", { className: "text-center", children: [
        /* @__PURE__ */ e("div", { className: "w-20 h-20 mx-auto bg-[var(--bg-secondary)] rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ e(h, { className: "w-10 h-10 text-[var(--color-accent-500)]" }) }),
        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-4", children: r("onboarding.stepComplete") }),
        /* @__PURE__ */ t("div", { className: "text-[var(--text-secondary)] mb-6 space-y-2", children: [
          /* @__PURE__ */ e("p", { children: /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-2", children: [
            /* @__PURE__ */ e(S, { className: "w-4 h-4" }),
            I.find((a) => a.code === n)?.name
          ] }) }),
          /* @__PURE__ */ e("p", { children: /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-2", children: [
            /* @__PURE__ */ e(j, { className: "w-4 h-4" }),
            u?.name ?? "—"
          ] }) }),
          m && /* @__PURE__ */ e("p", { children: /* @__PURE__ */ t("span", { className: "inline-flex items-center gap-2", children: [
            /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
            m.name
          ] }) })
        ] }),
        v && /* @__PURE__ */ e("div", { className: "bg-[var(--error-bg)] text-[var(--error-text)] rounded-lg p-3 mb-4 text-sm", children: v })
      ] }),
      /* @__PURE__ */ t("div", { className: "flex justify-between mt-8", children: [
        l > 0 ? /* @__PURE__ */ t(
          "button",
          {
            type: "button",
            onClick: P,
            className: "flex items-center gap-2 px-4 py-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors",
            children: [
              /* @__PURE__ */ e(M, { className: "w-4 h-4" }),
              r("onboarding.back")
            ]
          }
        ) : /* @__PURE__ */ e("div", {}),
        s === "complete" ? /* @__PURE__ */ e(
          "button",
          {
            type: "button",
            onClick: $,
            disabled: p,
            className: "flex items-center gap-2 px-6 py-2 bg-[var(--color-accent-500)] hover:bg-[var(--color-accent-600)] text-white rounded-lg font-medium transition-colors disabled:opacity-50",
            children: p ? /* @__PURE__ */ t(y, { children: [
              /* @__PURE__ */ e(k, { className: "w-4 h-4 animate-spin" }),
              r("onboarding.completing")
            ] }) : /* @__PURE__ */ t(y, { children: [
              r("onboarding.complete"),
              /* @__PURE__ */ e(w, { className: "w-4 h-4" })
            ] })
          }
        ) : /* @__PURE__ */ t(
          "button",
          {
            type: "button",
            onClick: K,
            className: "flex items-center gap-2 px-6 py-2 bg-[var(--color-accent-500)] hover:bg-[var(--color-accent-600)] text-white rounded-lg font-medium transition-colors",
            children: [
              r("onboarding.continue"),
              /* @__PURE__ */ e(B, { className: "w-4 h-4" })
            ]
          }
        )
      ] })
    ] })
  ] }) });
}
export {
  V as OnboardingWizardPage
};
//# sourceMappingURL=OnboardingWizardPage-BOejM_yk.js.map
