import { jsx as e, jsxs as r, Fragment as N } from "react/jsx-runtime";
import { useState as c, useEffect as k } from "react";
import { useNavigate as D } from "react-router-dom";
import { useTranslation as F } from "react-i18next";
import { CheckCircle as w, Loader2 as C, Sparkles as S, Globe as j, Palette as K, ArrowLeft as M, ArrowRight as z } from "lucide-react";
import { c as G, b as L } from "./index-Bs-WcWsP.js";
const I = [
  { code: "fr", name: "Francais", flag: "🇫🇷" },
  { code: "en", name: "English", flag: "🇬🇧" },
  { code: "de", name: "Deutsch", flag: "🇩🇪" },
  { code: "it", name: "Italiano", flag: "🇮🇹" }
], b = [
  { value: "light", labelKey: "themeLight", icon: "☀️" },
  { value: "dark", labelKey: "themeDark", icon: "🌙" },
  { value: "system", labelKey: "themeSystem", icon: "💻" }
], h = [
  { key: "indigo", color: "#6366f1", name: "Indigo" },
  { key: "blue", color: "#3b82f6", name: "Blue" },
  { key: "emerald", color: "#10b981", name: "Emerald" },
  { key: "amber", color: "#f59e0b", name: "Amber" },
  { key: "rose", color: "#f43f5e", name: "Rose" },
  { key: "purple", color: "#a855f7", name: "Purple" }
];
function V() {
  const { t, i18n: g } = F("auth"), u = D(), [o, f] = c("language"), [n, $] = c(g.language?.substring(0, 2) || "fr"), [s, O] = c("dark"), [i, T] = c("indigo"), [x, p] = c(!1), [v, y] = c(null), [A, E] = c(!1);
  k(() => {
    (async () => {
      try {
        (await L.get("/api/onboarding/status")).hasCompletedOnboarding && u("/myspace", { replace: !0 });
      } catch {
      }
    })();
  }, [u]), k(() => {
    n && n !== g.language?.substring(0, 2) && G(n);
  }, [n, g]);
  const l = [
    { key: "language", labelKey: "stepLanguage", icon: /* @__PURE__ */ e(j, { className: "w-5 h-5" }) },
    { key: "theme", labelKey: "stepTheme", icon: /* @__PURE__ */ e(K, { className: "w-5 h-5" }) },
    { key: "complete", labelKey: "stepComplete", icon: /* @__PURE__ */ e(S, { className: "w-5 h-5" }) }
  ], d = l.findIndex((a) => a.key === o), P = () => {
    const a = d + 1;
    a < l.length && f(l[a].key);
  }, R = () => {
    const a = d - 1;
    a >= 0 && f(l[a].key);
  }, B = async () => {
    p(!0), y(null);
    try {
      await L.post("/api/onboarding/complete", {
        language: n,
        theme: s,
        accentColorKey: i
      }), localStorage.setItem("i18nextLng", n), localStorage.setItem(
        "smartstack-theme-config",
        JSON.stringify({
          mode: s,
          accentColorKey: i,
          borderRadius: {},
          itemPaletteKey: "neutral"
        })
      ), E(!0), setTimeout(() => {
        window.location.href = "/myspace";
      }, 2e3);
    } catch (a) {
      console.error("Onboarding error:", a), y(t("onboarding.errorMessage"));
    } finally {
      p(!1);
    }
  };
  return A ? /* @__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__ */ r("div", { className: "text-center", children: [
    /* @__PURE__ */ e("div", { className: "w-20 h-20 mx-auto bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ e(w, { className: "w-12 h-12 text-green-600 dark:text-green-400" }) }),
    /* @__PURE__ */ e("h2", { className: "text-2xl font-bold mb-3", children: t("onboarding.successTitle") }),
    /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: t("onboarding.successMessage") }),
    /* @__PURE__ */ e("div", { className: "mt-6", children: /* @__PURE__ */ e(C, { 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__ */ r("div", { className: "max-w-lg w-full", children: [
    /* @__PURE__ */ r("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-blue-500 to-purple-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: t("onboarding.title") }),
      /* @__PURE__ */ e("p", { className: "text-[var(--text-secondary)]", children: t("onboarding.subtitle") })
    ] }),
    /* @__PURE__ */ e("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: l.map((a, m) => /* @__PURE__ */ r("div", { className: "flex items-center", children: [
      /* @__PURE__ */ e(
        "div",
        {
          className: `w-10 h-10 rounded-full flex items-center justify-center transition-all ${m <= d ? "bg-[var(--color-accent-500)] text-white" : "bg-[var(--bg-tertiary)] text-[var(--text-secondary)]"}`,
          children: a.icon
        }
      ),
      m < l.length - 1 && /* @__PURE__ */ e(
        "div",
        {
          className: `w-12 h-1 mx-1 rounded transition-all ${m < d ? "bg-[var(--color-accent-500)]" : "bg-[var(--bg-tertiary)]"}`
        }
      )
    ] }, a.key)) }) }),
    /* @__PURE__ */ r("div", { className: "bg-[var(--bg-secondary)] rounded-2xl p-8 shadow-lg border border-[var(--border-color)]", children: [
      o === "language" && /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-6 text-center", children: t("onboarding.languageLabel") }),
        /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-4", children: I.map((a) => /* @__PURE__ */ r(
          "button",
          {
            onClick: () => $(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
        )) })
      ] }),
      o === "theme" && /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-6 text-center", children: t("onboarding.themeLabel") }),
        /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-3 mb-8", children: b.map((a) => /* @__PURE__ */ r(
          "button",
          {
            onClick: () => O(a.value),
            className: `p-4 rounded-xl border-2 transition-all ${s === a.value ? "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-2xl mb-2 block", children: a.icon }),
              /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: t(`onboarding.${a.labelKey}`) })
            ]
          },
          a.value
        )) }),
        /* @__PURE__ */ r("div", { children: [
          /* @__PURE__ */ e("h3", { className: "text-sm font-medium mb-3 text-[var(--text-secondary)]", children: t("onboarding.accentColorLabel") }),
          /* @__PURE__ */ e("div", { className: "flex justify-center gap-3", children: h.map((a) => /* @__PURE__ */ e(
            "button",
            {
              onClick: () => T(a.key),
              className: `w-10 h-10 rounded-full transition-all ${i === a.key ? "ring-2 ring-offset-2 ring-[var(--color-accent-500)] ring-offset-[var(--bg-secondary)]" : "hover:scale-110"}`,
              style: { backgroundColor: a.color },
              title: a.name
            },
            a.key
          )) })
        ] })
      ] }),
      o === "complete" && /* @__PURE__ */ r("div", { className: "text-center", children: [
        /* @__PURE__ */ e("div", { className: "w-20 h-20 mx-auto bg-[var(--color-accent-100)] dark:bg-[var(--color-accent-900)]/30 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ e(S, { className: "w-10 h-10 text-[var(--color-accent-500)]" }) }),
        /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-4", children: t("onboarding.stepComplete") }),
        /* @__PURE__ */ r("div", { className: "text-[var(--text-secondary)] mb-6 space-y-2", children: [
          /* @__PURE__ */ e("p", { children: /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-2", children: [
            /* @__PURE__ */ e(j, { className: "w-4 h-4" }),
            I.find((a) => a.code === n)?.name
          ] }) }),
          /* @__PURE__ */ e("p", { children: /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-2", children: [
            /* @__PURE__ */ e(K, { className: "w-4 h-4" }),
            b.find((a) => a.value === s)?.icon,
            " ",
            t(`onboarding.${b.find((a) => a.value === s)?.labelKey}`)
          ] }) }),
          /* @__PURE__ */ e("p", { children: /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-2", children: [
            /* @__PURE__ */ e(
              "span",
              {
                className: "w-4 h-4 rounded-full",
                style: { backgroundColor: h.find((a) => a.key === i)?.color }
              }
            ),
            h.find((a) => a.key === i)?.name
          ] }) })
        ] }),
        v && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded-lg p-3 mb-4 text-sm", children: v })
      ] }),
      /* @__PURE__ */ r("div", { className: "flex justify-between mt-8", children: [
        d > 0 ? /* @__PURE__ */ r(
          "button",
          {
            onClick: R,
            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" }),
              t("onboarding.back")
            ]
          }
        ) : /* @__PURE__ */ e("div", {}),
        o === "complete" ? /* @__PURE__ */ e(
          "button",
          {
            onClick: B,
            disabled: x,
            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: x ? /* @__PURE__ */ r(N, { children: [
              /* @__PURE__ */ e(C, { className: "w-4 h-4 animate-spin" }),
              t("onboarding.completing")
            ] }) : /* @__PURE__ */ r(N, { children: [
              t("onboarding.complete"),
              /* @__PURE__ */ e(w, { className: "w-4 h-4" })
            ] })
          }
        ) : /* @__PURE__ */ r(
          "button",
          {
            onClick: 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",
            children: [
              t("onboarding.continue"),
              /* @__PURE__ */ e(z, { className: "w-4 h-4" })
            ]
          }
        )
      ] })
    ] })
  ] }) });
}
export {
  V as OnboardingWizardPage
};
//# sourceMappingURL=OnboardingWizardPage-Do4FCsl1.js.map
