// Citizen Web mode — top-level router + sub-nav.

const CITIZEN_STEPS = [
  { id: "intro", label: "Welcome" },
  { id: "eligibility", label: "Eligibility check" },
  { id: "calculator", label: "Affordability" },
  { id: "browse", label: "Find a home" },
  { id: "reserve", label: "Reservation" },
  { id: "finance", label: "Bank offer" },
  { id: "agreement", label: "Disbursement" },
];

function CitizenWeb({ citizen, tweaks, rtl, setMode, screen, setScreen }) {
  if (!screen) screen = "onboarding";
  const [selectedUnit, setSelectedUnit] = React.useState("u-irfan-a204");
  const [saved, setSaved] = React.useState(new Set(["u-irfan-a204", "u-seeb-v112"]));

  const program = window.OHB_DATA.programs[0]; // ISKAN
  const decision = React.useMemo(
    () => window.evaluateProgram(citizen, window.OHB_DATA.iskanProgram, window.OHB_DATA.ruleLibrary),
    [citizen]
  );

  const unit = window.OHB_DATA.units.find((u) => u.id === selectedUnit);
  const calc = window.calculateLoan(
    citizen,
    unit?.priceOmr || 60000,
    unit?.project?.includes("Irfan") ? "integrated" : "normal"
  );

  const t = (en, ar) => (rtl ? ar : en);

  const tabs = [
    ["onboarding", t("Onboarding", "التسجيل"), "sparkles"],
    ["home", t("My journey", "رحلتي"), "home"],
    ["eligibility", t("Eligibility", "الأهلية"), "shield"],
    ["browse", t("Find a home", "ابحث عن منزل"), "map"],
    ["finance", t("Finance", "التمويل"), "wallet"],
    ["docs", t("Documents", "المستندات"), "doc"],
  ];

  // Onboarding gets a full-bleed surface (no subnav), then routes to home on completion.
  if (screen === "onboarding") {
    return (
      <div className={`citizen-mode ${rtl ? "rtl" : ""}`}>
        <CitizenOnboarding citizen={citizen} t={t} onComplete={() => setScreen("home")}/>
      </div>
    );
  }

  return (
    <div className={`mode-wrap citizen-mode ${rtl ? "rtl" : ""}`}>
      <div className="citizen-subnav">
        <div className="row" style={{gap:6, flexWrap:"wrap"}}>
          {tabs.map(([id, label, icon]) => (
            <button key={id} className={`citizen-tab ${screen === id ? "active" : ""}`} onClick={() => setScreen(id)}>
              <Icon name={icon} size={15} />
              <span>{label}</span>
            </button>
          ))}
        </div>
        <div className="row" style={{gap:8}}>
          <button className="btn ghost sm" title="Notifications"><Icon name="bell" size={14}/> 3</button>
        </div>
      </div>

      {screen === "home" && (
        <CitizenHome citizen={citizen} decision={decision} setScreen={setScreen} t={t} rtl={rtl} program={program} tweaks={tweaks}/>
      )}
      {screen === "eligibility" && (
        <CitizenEligibility citizen={citizen} decision={decision} t={t} setScreen={setScreen} tweaks={tweaks} program={program}/>
      )}
      {screen === "browse" && (
        <CitizenBrowse t={t} decision={decision} selectedUnit={selectedUnit} setSelectedUnit={setSelectedUnit} setScreen={setScreen} saved={saved} setSaved={setSaved} citizen={citizen}/>
      )}
      {screen === "finance" && (
        <CitizenFinance citizen={citizen} unit={unit} calc={calc} t={t} setScreen={setScreen} decision={decision} tweaks={tweaks}/>
      )}
      {screen === "docs" && (
        <CitizenDocs citizen={citizen} t={t}/>
      )}
    </div>
  );
}

window.CitizenWeb = CitizenWeb;
window.CITIZEN_STEPS = CITIZEN_STEPS;