/* innerbloom — onboarding (welcome → birth → reveal → enter) */
const { useState: useStateO, useRef: useRefO } = React;

function Onboarding({ lang, setLang, onDone }) {
  const [step, setStep] = useStateO(0);
  const [d, setD] = useStateO({ y: "", m: "", d: "" });
  const obMRef = useRefO(null), obDRef = useRefO(null);

  function obHandleYear(raw) {
    const v = raw.replace(/\D/g, "").slice(0, 4);
    setD((prev) => ({ ...prev, y: v }));
    if (v.length === 4 && obMRef.current) obMRef.current.focus();
  }
  function obHandleMonth(raw) {
    const v = raw.replace(/\D/g, "").slice(0, 2);
    if (v === "") { setD((prev) => ({ ...prev, m: "" })); return; }
    const num = +v;
    if (v.length === 2 && (num < 1 || num > 12)) return;
    if (v.length === 1 && num >= 2) {
      setD((prev) => ({ ...prev, m: "0" + v }));
      if (obDRef.current) obDRef.current.focus();
      return;
    }
    setD((prev) => ({ ...prev, m: v }));
    if (v.length === 2 && obDRef.current) obDRef.current.focus();
  }
  function obHandleDay(raw) {
    const v = raw.replace(/\D/g, "").slice(0, 2);
    if (v === "") { setD((prev) => ({ ...prev, d: "" })); return; }
    const num = +v;
    if (v.length === 2 && (num < 1 || num > 31)) return;
    if (v.length === 1 && num >= 4) {
      setD((prev) => ({ ...prev, d: "0" + v }));
      return;
    }
    setD((prev) => ({ ...prev, d: v }));
  }
  const g = (k) => tt(lang, k);

  const sum = (+d.y || 0) + (+d.m || 0) + (+d.d || 0);
  const solar = digitRoot(sum || 6);
  const lunar = digitRoot((sum || 6) + 8 + 3);
  const valid = d.y.length === 4 && +d.m >= 1 && +d.m <= 12 && +d.d >= 1 && +d.d <= 31;

  const finish = () => onDone({ solar: valid ? solar : 6, lunar: valid ? lunar : 3 });

  return (
    <div className="ob">
      {/* top-right lang */}
      <div style={{ position: "absolute", top: 60, right: 22, zIndex: 5 }}>
        <div className="lang-pill">
          <button className={lang === "zh" ? "on" : ""} onClick={() => setLang("zh")}>中文</button>
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
      </div>

      <div className="ob-body">
        {step === 0 && (
          <div className="fade-soft" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <img className="ob-icon" src="src/images/icon.jpg" alt="inner bloom" />
            <div className="ob-brand-name">inner bloom</div>
            <h1 className="ob-tagline">{lang === "zh" ? "向内，轻轻绽放" : "Look Gently Inward"}</h1>
            <p className="ob-sub">{g("ob_welcome_s")}</p>
          </div>
        )}

        {step === 1 && (
          <div className="fade-soft" style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center" }}>
            <div className="ob-step-icon">✦</div>
            <div className="ob-eyebrow">{g("ob_birth_ey")}</div>
            <h1 className="ob-title">{g("ob_birth_t")}</h1>
            <p className="ob-sub" style={{ marginBottom: 26 }}>{g("ob_birth_s")}</p>
            <div className="ob-form">
              <div className="ob-field-label">☀ {g("ob_solar")}</div>
              <div className="ob-date">
                <input className="yy" inputMode="numeric" placeholder="YYYY" maxLength="4" value={d.y} onChange={(e) => obHandleYear(e.target.value)} />
                <span className="sep">/</span>
                <input className="mm" inputMode="numeric" placeholder="MM" maxLength="2" ref={obMRef} value={d.m} onChange={(e) => obHandleMonth(e.target.value)} />
                <span className="sep">/</span>
                <input className="dd" inputMode="numeric" placeholder="DD" maxLength="2" ref={obDRef} value={d.d} onChange={(e) => obHandleDay(e.target.value)} />
              </div>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="fade-soft" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <div className="ob-eyebrow">{g("ob_reveal_ey")}</div>
            <div className="ob-reveal-num">{solar}</div>
            <div className="ob-reveal-label">{g("ob_reveal_label_pre")}{CONTENT.meaning[solar][lang]}</div>
            <p className="ob-reveal-tx">{lang === "zh" ? CONTENT.meaning[solar].txt_zh : CONTENT.meaning[solar].txt_en}</p>
            <p className="ob-reveal-tx" style={{ marginTop: 8, color: "var(--text-dim)" }}>{g("ob_reveal_tx")}</p>
          </div>
        )}
      </div>

      <div className="ob-foot">
        <div className="ob-dots">
          {[0, 1, 2].map((i) => <span key={i} className={"ob-dot" + (i === step ? " on" : "")}></span>)}
        </div>
        {step === 0 && (
          <>
            <button className="btn-primary" onClick={() => setStep(1)}>{g("ob_begin")}</button>
            <button className="btn-ghost" onClick={finish}>{g("ob_skip")}</button>
          </>
        )}
        {step === 1 && (
          <button className="btn-primary" style={{ opacity: valid ? 1 : 0.5, pointerEvents: valid ? "auto" : "none" }} onClick={() => setStep(2)}>{g("ob_next")}</button>
        )}
        {step === 2 && (
          <button className="btn-primary" onClick={finish}>{g("ob_enter")} →</button>
        )}
      </div>
    </div>
  );
}
window.Onboarding = Onboarding;