// Citizen Onboarding — guided multi-step flow.
// Sign up → ID + OTP → personal info → income → housing history → documents
// → live eligibility scan → program matches → select & confirm.
//
// Designed to work identically (with reflow) on both web and mobile.

const ONBOARDING_STEPS = [
  { id: "welcome",    label: "Welcome",     short: "Start" },
  { id: "identity",   label: "Identity",    short: "ID" },
  { id: "personal",   label: "About you",   short: "About" },
  { id: "income",     label: "Income",      short: "Income" },
  { id: "housing",    label: "Housing",     short: "Housing" },
  { id: "documents",  label: "Documents",   short: "Docs" },
  { id: "scanning",   label: "Eligibility", short: "Check" },
  { id: "matches",    label: "Programs",    short: "Match" },
];

function CitizenOnboarding({ citizen, t, onComplete, compact = false }) {
  const [stepIdx, setStepIdx] = React.useState(0);
  const [data, setData] = React.useState({
    nationalId: "",
    otp: "",
    name: citizen.name,
    nameAr: citizen.nameAr,
    age: citizen.age,
    maritalStatus: citizen.maritalStatus,
    governorate: citizen.governorate,
    wilayat: citizen.wilayat,
    monthlyIncome: citizen.monthlyIncomeOmr,
    employer: citizen.employer,
    employerType: citizen.employerType,
    existingProperty: citizen.existingProperty,
    activeBenefit: citizen.activeBenefit,
    spousePriorSupport: citizen.spousePriorSupport,
    docs: { id: true, salary: citizen.missingDocs.length === 0, marriage: true, statement: true },
  });

  const step = ONBOARDING_STEPS[stepIdx];
  const next = () => setStepIdx((i) => Math.min(i + 1, ONBOARDING_STEPS.length - 1));
  const prev = () => setStepIdx((i) => Math.max(i - 1, 0));
  const goTo = (id) => {
    const idx = ONBOARDING_STEPS.findIndex(s => s.id === id);
    if (idx >= 0) setStepIdx(idx);
  };

  return (
    <div className={`onb-wrap ${compact ? "onb-compact" : ""}`}>
      {!compact && <OnbProgress steps={ONBOARDING_STEPS} stepIdx={stepIdx} onJump={goTo} t={t}/>}

      <div className="onb-screen">
        {step.id === "welcome" && <OnbWelcome onNext={next} t={t}/>}
        {step.id === "identity" && <OnbIdentity data={data} setData={setData} onNext={next} onPrev={prev} t={t}/>}
        {step.id === "personal" && <OnbPersonal data={data} setData={setData} citizen={citizen} onNext={next} onPrev={prev} t={t}/>}
        {step.id === "income" && <OnbIncome data={data} setData={setData} onNext={next} onPrev={prev} t={t}/>}
        {step.id === "housing" && <OnbHousing data={data} setData={setData} onNext={next} onPrev={prev} t={t}/>}
        {step.id === "documents" && <OnbDocuments data={data} setData={setData} onNext={next} onPrev={prev} t={t}/>}
        {step.id === "scanning" && <OnbScanning data={data} onNext={next} t={t} citizen={citizen}/>}
        {step.id === "matches" && <OnbMatches data={data} citizen={citizen} onComplete={onComplete} t={t}/>}
      </div>
    </div>
  );
}

/* ─── Progress rail ─────────────────────────── */

function OnbProgress({ steps, stepIdx, onJump, t }) {
  return (
    <div className="onb-progress">
      <div className="onb-track">
        {steps.map((s, i) => {
          const state = i < stepIdx ? "done" : i === stepIdx ? "current" : "pending";
          return (
            <button key={s.id} className={`onb-step ${state}`} onClick={() => i < stepIdx && onJump(s.id)} disabled={i > stepIdx}>
              <div className="onb-step-pip">
                {state === "done" ? <Icon name="check" size={11}/> :
                 state === "current" ? <span className="pulse"/> : i + 1}
              </div>
              <span className="onb-step-label">{t(s.short, s.short)}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ─── Step shells ──────────────────────────── */

function OnbStep({ eyebrow, title, sub, children, primary, secondary, onPrimary, onSecondary, primaryDisabled }) {
  return (
    <div className="onb-step-shell">
      <div className="onb-step-head">
        <div className="label-eyebrow">{eyebrow}</div>
        <h1 className="h2 onb-title">{title}</h1>
        {sub && <p className="onb-sub">{sub}</p>}
      </div>
      <div className="onb-step-body">{children}</div>
      <div className="onb-step-foot">
        {secondary && <button className="btn ghost" onClick={onSecondary}><Icon name="arrow_left" size={14} className="arrow-flip"/> {secondary}</button>}
        <div style={{flex:1}}/>
        {primary && (
          <button className="btn copper lg" onClick={onPrimary} disabled={primaryDisabled}>
            {primary} <Icon name="arrow_right" size={14} className="arrow-flip"/>
          </button>
        )}
      </div>
    </div>
  );
}

/* ─── 1. Welcome ───────────────────────────── */

function OnbWelcome({ onNext, t }) {
  return (
    <div className="onb-welcome">
      <div className="onb-welcome-art">
        <div style={{
          position: "relative",
          width: "100%",
          aspectRatio: "1",
          borderRadius: "50%",
          overflow: "hidden",
          maxWidth: 380,
        }}>
          <img
            src="https://ohb.co.om/media/2025/08/landing-mainpage.jpg"
            alt="OHB Housing"
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              objectPosition: "center",
              display: "block",
            }}
          />
          {/* soft vignette to blend edges */}
          <div style={{
            position: "absolute",
            inset: 0,
            borderRadius: "50%",
            background: "radial-gradient(circle at 60% 40%, transparent 40%, rgba(245,243,240,0.55) 100%)",
            pointerEvents: "none",
          }}/>
        </div>
      </div>
      <div className="onb-welcome-text">
        <h1 className="h1 onb-h1">
          {t("Your home,","منزلك،")}
          <br/>
          <em className="onb-italic">{t("7 steps away.","على بُعد 7 خطوات.")}</em>
        </h1>
        <p className="onb-welcome-sub">
          {t(
            "We'll check your eligibility against every active housing program, then show you exactly which homes you can finance and at what monthly cost. It takes 8 minutes.",
            "سنتحقق من أهليتك مقابل كل برنامج إسكان نشط ثم نعرض لك المنازل."
          )}
        </p>
        <div className="row" style={{gap:10, marginTop:24, flexWrap:"wrap"}}>
          <button className="btn copper lg" onClick={onNext}>
            {t("Create account","إنشاء حساب")} <Icon name="arrow_right" size={14} className="arrow-flip"/>
          </button>
          <button className="btn ghost lg">{t("I already have an account","لدي حساب")}</button>
        </div>
      </div>
    </div>
  );
}

window.CitizenOnboarding = CitizenOnboarding;
window.OnbStep = OnbStep;
window.ONBOARDING_STEPS = ONBOARDING_STEPS;