/* global React, ReactDOM, Sidebar, TopBar, HelpDrawer, ControlRoom, Harmonizer, Exceptions, Workpaper, Capital, Credit, Market, OpRisk, StressLab, Recovery, ExportGate, Evidence, Onboarding, BANK */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const CRUMBS = {
  control: ["Meskel Bank S.C.", "Control Room"],
  harmonizer: ["Meskel Bank S.C.", "Data foundation", "Data Harmonizer"],
  exceptions: ["Meskel Bank S.C.", "Exceptions"],
  workpaper: ["Meskel Bank S.C.", "Prudential Risk", "ALM / Liquidity"],
  lcr: ["Meskel Bank S.C.", "Prudential Risk", "LCR / NSFR"],
  irrbb: ["Meskel Bank S.C.", "Prudential Risk", "IRRBB"],
  behavioral: ["Meskel Bank S.C.", "Prudential Risk", "Behavioral ALM"],
  ftp: ["Meskel Bank S.C.", "Treasury", "FTP / Profitability"],
  admin: ["Meskel Bank S.C.", "Governance", "Admin & Governance"],
  ela: ["Meskel Bank S.C.", "Governance", "Emergency Liquidity Assistance"],
  templatehub: ["Meskel Bank S.C.", "Governance", "Template Hub"],
  capital: ["Meskel Bank S.C.", "Prudential Risk", "Capital Adequacy"],
  credit: ["Meskel Bank S.C.", "Prudential Risk", "Credit Risk"],
  market: ["Meskel Bank S.C.", "Prudential Risk", "Market / FX"],
  oprisk: ["Meskel Bank S.C.", "Prudential Risk", "Operational Risk"],
  stress: ["Meskel Bank S.C.", "Governance", "Stress Lab"],
  recovery: ["Meskel Bank S.C.", "Governance", "Recovery Planning"],
  export: ["Meskel Bank S.C.", "Governance", "Reg Reporting"],
  evidence: ["Meskel Bank S.C.", "Governance", "Rule Evidence"],
};

function App() {
  const [route, setRoute] = useStateApp(() => localStorage.getItem("tos_route") || "control");
  const [authed, setAuthed] = useStateApp(() => localStorage.getItem("tos_auth") === "active");
  const [helpOpen, setHelpOpen] = useStateApp(false);
  const [help, setHelp] = useStateApp(null);
  const [loading, setLoading] = useStateApp(false);

  useEffectApp(() => { localStorage.setItem("tos_route", route); }, [route]);

  const go = (r) => { setRoute(r); setLoading(true); setTimeout(() => setLoading(false), 280); document.querySelector(".main") && (document.querySelector(".main").scrollTop = 0); };
  const login = () => { localStorage.setItem("tos_auth", "active"); localStorage.setItem("tos_auth_user", "treasury@bankos.com"); setAuthed(true); if (route === "login") go("control"); };
  const info = (h) => { setHelp(h); setHelpOpen(true); };
  const ctx = { go, info };

  if (!authed || route === "login") return <LoginScreen onLogin={login} authed={authed} onContinue={() => go("control")} />;
  if (route === "onboarding") return <Onboarding go={go} />;

  const SCREENS = {
    control: ControlRoom, harmonizer: Harmonizer, exceptions: Exceptions, workpaper: Workpaper,
    capital: Capital, credit: Credit, market: OpenPosition, oprisk: OpRiskSheet, stress: StressLab,
    lcr: LCRSheet, alm: ALMSheet,
    irrbb: IRRBB, behavioral: BehavioralALM, ftp: FTP,
    admin: Admin,
    ela: ELA, templatehub: TemplateHub,
    recovery: Recovery, export: ExportGate, evidence: Evidence,
  };
  const Screen = SCREENS[route] || ControlRoom;
  const isRoadmap = route && route.indexOf("rm-") === 0;

  return (
    <div className="app">
      <Sidebar route={route} go={go} />
      <div className="main">
        <TopBar crumbs={isRoadmap ? ["Meskel Bank S.C.", ROADMAP[route] ? ROADMAP[route].eyebrow : "Roadmap", ROADMAP[route] ? ROADMAP[route].title : ""] : (CRUMBS[route] || CRUMBS.control)} onHelp={() => { setHelp(null); setHelpOpen(true); }} />
        {loading ? <div className="main-inner"><StateView kind="loading" title="Loading workpaper…" body="Binding to the latest approved source snapshot." /></div> : isRoadmap ? <Roadmap route={route} {...ctx} /> : <Screen {...ctx} />}
      </div>
      <HelpDrawer open={helpOpen && !!help} onClose={() => setHelpOpen(false)} help={help} />
      {helpOpen && !help && <DefaultHelp onClose={() => setHelpOpen(false)} />}
    </div>
  );
}

function LoginScreen({ onLogin, authed, onContinue }) {
  const [email, setEmail] = useStateApp("treasury@bankos.com");
  const [password, setPassword] = useStateApp("");
  const [error, setError] = useStateApp("");
  const submit = () => {
    if (authed) { onContinue(); return; }
    if (email.trim().toLowerCase() === "treasury@bankos.com" && password === "password123") {
      setError("");
      onLogin();
      return;
    }
    setError("Use authorized TreasuryOS credentials.");
  };

  return (
    <div className="login-wrap">
      <section className="login-brand">
        <div className="login-mark">T</div>
        <div>
          <div className="login-kicker">Treasury by Safy Labs</div>
          <h1>Prudential treasury control, built for regulated banking teams.</h1>
        </div>
        <div className="login-proof">
          <div className="section-label">Control perimeter</div>
          <div className="login-proof-grid">
            <div><b>Controlled workspace</b><span>Treasury, liquidity and risk governance</span></div>
            <div><b>Source lineage</b><span>Mapped snapshots, evidence and approvals</span></div>
            <div><b>Export gate</b><span>Six-gate readiness before official packs</span></div>
          </div>
        </div>
        <div className="login-address">
          <div className="section-label">Safy Labs offices</div>
          <div>San Francisco, USA</div>
          <div>Addis Ababa, Ethiopia</div>
        </div>
      </section>

      <section className="login-panel" aria-label="Sign in">
        <div className="login-card">
          <div className="login-card-head">
            <div>
              <div className="section-label">Authorized access</div>
              <h2>Sign in to TreasuryOS</h2>
            </div>
            <span className="chip chip-slate"><span className="dot" />Secure</span>
          </div>
          <div className="banner banner-indigo">
            <Icon name="lock" size={18} className="ic" />
            <div>Access is restricted to authorized treasury and liquidity teams.</div>
          </div>
          <form onSubmit={(e) => { e.preventDefault(); submit(); }} className="login-form">
            <label>
              <span>Email</span>
              <input value={email} onChange={e => setEmail(e.target.value)} autoComplete="username" />
            </label>
            <label>
              <span>Password</span>
              <input value={password} onChange={e => setPassword(e.target.value)} type="password" autoComplete="current-password" placeholder="Enter password" />
            </label>
            {error && <div className="login-error"><Icon name="alert" size={14} /> {error}</div>}
            <button type="button" className="btn btn-dark" onClick={submit}>{authed ? "Continue to Control Room" : "Sign in"}</button>
          </form>
          <div className="login-foot">
            <span>Authorized user</span>
            <b className="mono">treasury@bankos.com</b>
          </div>
        </div>
      </section>
    </div>
  );
}

function DefaultHelp({ onClose }) {
  return (
    <React.Fragment>
      <div className="scrim" onClick={onClose} />
      <aside className="drawer" role="dialog">
        <div className="drawer-h">
          <div><div style={{ fontSize: 17, fontWeight: 800 }}>TreasuryOS</div><div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>How this platform thinks</div></div>
          <button className="icon-btn x" onClick={onClose}><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg></button>
        </div>
        <div className="drawer-body">
          <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--ink-2)" }}>Templates are outputs. <b>Source data, mappings, lineage, rule evidence, approvals, and export artifacts are the system of record.</b> Every major number can be traced from a source file → workpaper cell → NBE rule → approval and export readiness.</p>
          <div className="banner banner-amber mt16"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" className="ic"><path d="M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4" /></svg><div>This is a controlled internal workspace. It makes no official NBE calculation, has no export writer, and offers no regulator submission. Open any screen's <b>info</b> icon for its specific guardrails.</div></div>
        </div>
      </aside>
    </React.Fragment>
  );
}

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