/* global React, ReactDOM, AppShell, FraudConsole, ScaConsole, OrchConsole, SettleConsole, DisputeFlow, CommandPalette, SignerOverlay, AuditorWatermark */

function App() {
  const [active, setActive] = React.useState(() => localStorage.getItem("ak.surface") || "fraud");
  const [tier, setTier] = React.useState("enterprise");
  const [role, setRole] = React.useState("operator");
  const [cmdOpen, setCmdOpen] = React.useState(false);
  const [signerOpen, setSignerOpen] = React.useState(false);

  React.useEffect(() => { localStorage.setItem("ak.surface", active); }, [active]);

  // expose signer overlay opener for command palette
  React.useEffect(() => { window.__openSignerOverlay = () => setSignerOpen(true); }, []);

  // keyboard nav + ⌘K
  React.useEffect(() => {
    const onKey = e => {
      if (e.target.matches("input,textarea,select")) {
        if (e.key === "Escape") { e.target.blur(); setCmdOpen(false); }
        return;
      }
      // ⌘K or Ctrl+K
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); setCmdOpen(o => !o); return; }
      if (e.key === "Escape") { setCmdOpen(false); setSignerOpen(false); return; }
      const map = { "1": "fraud", "2": "sca", "3": "orch", "4": "settle", "5": "flow" };
      if (map[e.key] && !cmdOpen) setActive(map[e.key]);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [cmdOpen]);

  const navAndClose = id => { setActive(id); setCmdOpen(false); };

  return (
    <React.Fragment>
      <AppShell
        active={active}
        tier={tier}
        role={role}
        onNav={setActive}
        onTierChange={setTier}
        onRoleChange={setRole}
        onCmdK={() => setCmdOpen(true)}
        onSignerClick={() => setSignerOpen(true)}
      >
        {active === "fraud"  && <FraudConsole tier={tier} role={role}/>}
        {active === "sca"    && <ScaConsole tier={tier} role={role}/>}
        {active === "orch"   && <OrchConsole tier={tier} role={role}/>}
        {active === "settle" && <SettleConsole tier={tier} role={role}/>}
        {active === "flow"   && <DisputeFlow tier={tier} role={role}/>}
      </AppShell>

      {/* overlays */}
      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} onNav={navAndClose}/>
      <SignerOverlay open={signerOpen} onClose={() => setSignerOpen(false)}/>
      {role === "auditor" && <AuditorWatermark/>}
    </React.Fragment>
  );
}

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