/* eslint-disable */
/* =============================================================
   PendingPage — شاشة «طلبك قيد المراجعة» (نسخة المستخدم)
   -------------------------------------------------------------
   في النسخة المصدَّرة بدور `user` يبدأ الحساب قيد المراجعة. زرّ
   «تحقّق من الحالة» يستدعي القبول محليًّا (محاكاة، بلا خادم)، ثم
   ينتقل المستخدم لإدخال بيانات ميلاده.

   الزرّ يتظاهر بفحصٍ قصير قبل أن يقلب الحالة: القبول الفوريّ عند
   الضغط يبدو عطبًا لا نتيجة. الانتظار هنا تمثيلٌ للشكل النهائيّ،
   لا تأخيرٌ مصطنع لذاته.
   ============================================================= */
(function () {
  const { useState } = React;

  window.PendingPage = function PendingPage({ lang, onRoute, onLangToggle }) {
    const ar = lang === "ar";
    const P = (I18N[lang] && I18N[lang].pending_screen) || {};
    const A = (I18N[lang] && I18N[lang].auth) || {};
    const [busy, setBusy] = useState(false);

    const check = () => {
      if (busy) return;
      setBusy(true);
      setTimeout(() => {
        if (window.SpadeBuild) SpadeBuild.approve();
        setBusy(false);
        onRoute && onRoute("create");
      }, 900);
    };

    return (
      <div className="auth-page auth-centered" data-galaxy-ui>
        <button className="auth-lang" onClick={onLangToggle}>
          <Icon.globe size={15} /> {I18N[lang].topbar.lang_toggle}
        </button>

        <div className="auth-brand auth-brand-top">
          <BrandOrb size={56} energy={1.4} />
          <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">
          <div className="auth-verify-ic"><Icon.eye size={34} /></div>
          <h2 className="auth-verify-title">{P.title}</h2>
          <p className="auth-verify-sub">{P.sub}</p>

          <div className="auth-verify-steps">
            {[
              { ic: <Icon.check size={18} />, t: (A.pending && A.pending.steps[0].t), s: (A.pending && A.pending.steps[0].s) },
              { ic: <Icon.eye size={18} />, t: (A.pending && A.pending.steps[1].t), s: (A.pending && A.pending.steps[1].s) },
              { ic: <Icon.mail size={18} />, t: (A.pending && A.pending.steps[2].t), s: (A.pending && A.pending.steps[2].s) },
            ].map((s, i) => (
              <div key={i} className="auth-vstep">
                <span className="auth-vstep-ic">{s.ic}</span>
                <strong>{s.t}</strong><span>{s.s}</span>
              </div>
            ))}
          </div>

          <button type="button" className="btn-gold auth-submit" onClick={check} disabled={busy}>
            {busy ? P.checking : P.check}
          </button>
          <p className="auth-foot">{P.mock_note}</p>
        </div>
      </div>
    );
  };
})();