/* eslint-disable */
/* =============================================================
   OnboardingPage — birth-data capture (full-screen flow)
   3 steps: about you → birth → confirm + "generating chart".
   Browser build: classic <script type="text/babel">; window.OnboardingPage
   ============================================================= */
(function () {
  const { useState } = React;

  window.OnboardingPage = function OnboardingPage({ lang, onRoute }) {
    const O = I18N[lang].onboarding;
    const [step, setStep] = useState(0);
    const [gen, setGen] = useState(0); // gender index
    const [unknownTime, setUnknownTime] = useState(false);
    const [generating, setGenerating] = useState(false);

    const next = () => {
      if (step < 2) return setStep(step + 1);
      setGenerating(true);
      setTimeout(() => onRoute("home"), 2600);
    };
    const back = () => (step === 0 ? onRoute("auth") : setStep(step - 1));

    if (generating) {
      return (
        <div className="onb-page onb-generating" data-galaxy-ui>
          <BrandOrb size={140} energy={2.1} />
          <h2>{lang === "ar" ? "نحسب خريطتك…" : "Calculating your chart…"}</h2>
          <p>{lang === "ar" ? "نُسقِط مواقع الكواكب على شبكة مراكزك." : "Projecting planetary positions onto your centers."}</p>
          <div className="onb-progress"><span /></div>
        </div>
      );
    }

    return (
      <div className="onb-page" data-galaxy-ui>
        <div className="onb-card">
          <header className="onb-head">
            <BrandOrb size={56} />
            <div>
              <span className="eyebrow">{O.eyebrow}</span>
              <h1 className="onb-title">{O.title}</h1>
            </div>
          </header>
          <p className="onb-sub">{O.sub}</p>

          {/* stepper */}
          <div className="onb-steps">
            {O.steps.map((s, i) => (
              <div key={i} className={`onb-step ${i === step ? "active" : ""} ${i < step ? "done" : ""}`}>
                <span className="onb-step-dot">{i < step ? <Icon.check size={13} /> : i + 1}</span>
                <span className="onb-step-label">{s}</span>
              </div>
            ))}
          </div>

          <div className="onb-body">
            {step === 0 && (
              <div className="onb-fields">
                <label className="field">
                  <span className="field-label">{O.name}</span>
                  <span className="field-wrap"><span className="field-icon"><Icon.profile size={16} /></span>
                    <input type="text" placeholder={O.name_ph} /></span>
                </label>
                <div className="field">
                  <span className="field-label">{O.gender}</span>
                  <div className="seg">
                    {O.gender_opts.map((g, i) => (
                      <button key={i} type="button" className={`seg-opt ${gen === i ? "active" : ""}`} onClick={() => setGen(i)}>{g}</button>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {step === 1 && (
              <div className="onb-fields">
                <div className="onb-2col">
                  <label className="field">
                    <span className="field-label">{O.date}</span>
                    <span className="field-wrap"><span className="field-icon"><Icon.calendar size={16} /></span>
                      <input type="date" defaultValue="1995-06-12" /></span>
                  </label>
                  <label className="field">
                    <span className="field-label">{O.time}</span>
                    <span className="field-wrap"><span className="field-icon"><Icon.clock size={16} /></span>
                      <input type="time" defaultValue="08:30" disabled={unknownTime} /></span>
                  </label>
                </div>
                <label className="check-inline">
                  <input type="checkbox" checked={unknownTime} onChange={(e) => setUnknownTime(e.target.checked)} />
                  <span>{O.time_unknown}</span>
                </label>
                <p className="onb-hint"><Icon.help size={13} /> {O.time_hint}</p>
                <label className="field">
                  <span className="field-label">{O.place}</span>
                  <span className="field-wrap"><span className="field-icon"><Icon.pin size={16} /></span>
                    <input type="text" placeholder={O.place_ph} defaultValue={lang === "ar" ? "القاهرة، مصر" : "Cairo, Egypt"} /></span>
                </label>
              </div>
            )}

            {step === 2 && (
              <div className="onb-confirm">
                <div className="onb-summary">
                  {[[O.name, lang === "ar" ? "سبيد" : "Spade", "profile"],
                    [O.date, "12 / 06 / 1995", "calendar"],
                    [O.time, unknownTime ? "—" : "08:30", "clock"],
                    [O.place, lang === "ar" ? "القاهرة، مصر" : "Cairo, Egypt", "pin"]].map(([k, v, ic], i) => (
                    <div key={i} className="onb-sum-row">
                      <span className="onb-sum-ic">{React.createElement(Icon[ic], { size: 15 })}</span>
                      <span className="onb-sum-k">{k}</span>
                      <span className="onb-sum-v">{v}</span>
                    </div>
                  ))}
                </div>
                <label className="check-inline onb-consent"><input type="checkbox" defaultChecked /><span>{O.consent}</span></label>
                <p className="onb-reassure"><Icon.lock size={13} /> {O.reassure}</p>
              </div>
            )}
          </div>

          <div className="onb-actions">
            <button className="btn-ghost" onClick={back}>{step === 0 ? O.back : `← ${O.back}`}</button>
            <button className="btn-gold" onClick={next}>
              {step === 2 ? <><Icon.sparkle size={15} /> {O.submit}</> : O.next}
            </button>
          </div>
        </div>
      </div>
    );
  };
})();