// Top-level app. Shell + mode router + tweak state.

const { useState, useEffect, useMemo, useRef, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "persona": "salim",
  "lang": "en",
  "showExplainability": true,
  "decisionSpeed": "instant"
}/*EDITMODE-END*/;

function App() {
  const [mode, setMode] = useState("citizen");
  const [citizenScreen, setCitizenScreen] = useState("onboarding");
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  const citizens = window.OHB_DATA.citizens;
  const citizen = citizens.find((c) => c.id === tweaks.persona) || citizens[0];

  const rtl = tweaks.lang === "ar";

  // Sync html dir attribute when language changes; restore on cleanup.
  useEffect(() => {
    const prev = document.documentElement.dir;
    document.documentElement.dir = rtl ? "rtl" : "ltr";
    return () => { document.documentElement.dir = prev; };
  }, [rtl]);

  const personas = citizens.map((c) => ({
    value: c.id, label: `${c.avatar} · ${c.name.split(" ")[0]} (${c.outcome === "eligible" ? "STP" : c.outcome === "manual_review" ? "Review" : "Reject"})`
  }));

  return (
    <div className="app">
      <div className="disclaimer-banner">
        This POC is the property of <strong>K-Labs Technology Solutions WLL</strong> · All logos &amp; images are property of their respective owners · Not for commercial use
      </div>
      <header className="shell-top">
        <div className="shell-top-left">
          <div className="brand-lockup">
            <img src="assets/ohb-logo-white.png" alt="OHB" />
            <span className="brand-lockup-name">Housing Ecosystem</span>
          </div>
          <nav className="mode-switch" role="tablist">
            {[
              ["citizen", "Citizen", "globe"],
              ["mobile", "Mobile", "phone_icon"],
              ["admin", "Admin", "command"],
              ["builder", "Program Studio", "flow"],
            ].map(([id, label, icon]) => (
              <button key={id} className={mode === id ? "active" : ""} onClick={() => setMode(id)} role="tab" aria-selected={mode === id}>
                <Icon name={icon} size={14} />
                <span>{label}</span>
              </button>
            ))}
          </nav>
        </div>
        <div className="shell-top-right">
          <button className="shell-pill" onClick={() => setTweak("lang", rtl ? "en" : "ar")} title="Toggle language">
            <Icon name="globe" size={14} />
            <span>{rtl ? "العربية" : "EN"}</span>
          </button>
          {citizenScreen !== "onboarding" && (
            <div className="persona-pill">
              <span className="avatar">{citizen.avatar}</span>
              <span>{citizen.name.split(" ")[0]}</span>
            </div>
          )}
        </div>
      </header>

      {mode === "citizen" && citizenScreen === "onboarding" && (
        <button className="onb-skip" onClick={() => setCitizenScreen("home")}>
          {rtl ? "تخطي للوحة" : "Skip to demo dashboard"} <Icon name="arrow_right" size={12} className="arrow-flip"/>
        </button>
      )}
      <main className="surface" data-mode={mode}>
        {mode === "citizen" && <CitizenWeb citizen={citizen} tweaks={tweaks} rtl={rtl} setMode={setMode} screen={citizenScreen} setScreen={setCitizenScreen} />}
        {mode === "mobile" && <CitizenMobile citizen={citizen} tweaks={tweaks} rtl={rtl} />}
        {mode === "admin" && <AdminConsole citizen={citizen} tweaks={tweaks} setMode={setMode} />}
        {mode === "builder" && <ProgramStudio citizen={citizen} tweaks={tweaks} setTweak={setTweak} />}
      </main>

      <TweaksPanel title="Demo Tweaks">
        <TweakSection title="Persona" hint="Each persona triggers a different decision outcome">
          <TweakRadio
            value={tweaks.persona}
            onChange={(v) => setTweak("persona", v)}
            options={[
              { value: "salim", label: "Salim · STP" },
              { value: "maryam", label: "Maryam · Review" },
              { value: "ahmed", label: "Ahmed · Reject" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Language">
          <TweakRadio
            value={tweaks.lang}
            onChange={(v) => setTweak("lang", v)}
            options={[{value:"en", label:"English"}, {value:"ar", label:"العربية"}]}
          />
        </TweakSection>
        <TweakSection title="Decision speed" hint="Instant STP demonstrates straight-through; staged shows the Non-STP queue flow">
          <TweakRadio
            value={tweaks.decisionSpeed}
            onChange={(v) => setTweak("decisionSpeed", v)}
            options={[{value:"instant", label:"Instant"}, {value:"staged", label:"Staged"}]}
          />
        </TweakSection>
        <TweakSection title="Explainability">
          <TweakToggle value={tweaks.showExplainability} onChange={(v) => setTweak("showExplainability", v)} label="Show rule trace + integration sources" />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);