/* eslint-disable */
/* =============================================================
   JoinPage — magic-link redemption (#/join/<token>)
   Beta applicants approved by the admin land here from their email
   link; the token activates the account and signs them in.
   ============================================================= */
(function () {
  const { useState, useEffect } = React;

  window.JoinPage = function JoinPage({ lang, onRoute, param }) {
    const ar = lang === "ar";
    const tt = (a, e) => (ar ? a : e);
    const [state, setState] = useState("checking"); // checking | ok | bad

    useEffect(() => {
      const t = setTimeout(() => {
        const r = window.ChartStore ? ChartStore.redeemMagic(param) : { error: "x" };
        setState(r && r.ok ? "ok" : "bad");
      }, 700);
      return () => clearTimeout(t);
    }, []);

    return (
      <div className="auth-page auth-centered" data-galaxy-ui>
        <div className="auth-brand auth-brand-top">
          <BrandOrb size={56} energy={1.6} />
          <div className="auth-brand-text"><strong>{I18N[lang].brand.title}</strong><em>{I18N[lang].brand.subtitle}</em></div>
        </div>
        <div className="auth-card auth-verify">
          {state === "checking" && (
            <React.Fragment>
              <div className="auth-verify-ic spin-soft"><Icon.sparkle size={32} /></div>
              <h2 className="auth-verify-title">{tt("جارٍ تفعيل دخولك…", "Activating your access…")}</h2>
              <p className="auth-verify-sub">{tt("لحظات ونفتح لك بوابة البيتا.", "One moment while we open the beta gate.")}</p>
            </React.Fragment>
          )}
          {state === "ok" && (
            <React.Fragment>
              <div className="auth-verify-ic" style={{ color: "#5FD6B5", borderColor: "rgba(95,214,181,0.5)", background: "rgba(95,214,181,0.1)" }}><Icon.check size={34} /></div>
              <h2 className="auth-verify-title">{tt("أهلاً بك في بيتا سبيد ✦", "Welcome to the Spade beta ✦")}</h2>
              <p className="auth-verify-sub">{tt("تم تفعيل حسابك بنجاح. أنت الآن من أوائل المستكشفين — هيا نبدأ ببناء خريطتك.", "Your account is active. You're one of the first explorers — let's build your chart.")}</p>
              <button type="button" className="btn-gold auth-submit" onClick={() => onRoute(ChartStore.hasComputedChart() ? "home" : "create")}>
                <Icon.compass size={15} /> {tt("ابدأ رحلتك", "Start your journey")}
              </button>
            </React.Fragment>
          )}
          {state === "bad" && (
            <React.Fragment>
              <div className="auth-verify-ic" style={{ color: "#FF78B5", borderColor: "rgba(255,120,181,0.5)", background: "rgba(255,120,181,0.08)" }}><Icon.lock size={30} /></div>
              <h2 className="auth-verify-title">{tt("الرابط غير صالح", "This link isn't valid")}</h2>
              <p className="auth-verify-sub">{tt("قد يكون الرابط منتهيًا أو سبق استخدامه. سجّل الدخول إن كان حسابك مفعّلاً، أو قدّم طلبًا جديدًا.", "It may have expired or already been used. Sign in if your account is active, or apply again.")}</p>
              <button type="button" className="btn-gold auth-submit" onClick={() => onRoute("auth")}>
                <Icon.chevLeft size={15} /> {tt("الذهاب لتسجيل الدخول", "Go to sign in")}
              </button>
            </React.Fragment>
          )}
        </div>
      </div>
    );
  };
})();