// Agio Compliance — root app. Wires section routing, state, side panel,
// command palette, and Tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "density": "compact",
  "flags": true,
  "auditorMode": false,
  "accent": "#2563eb"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [section, setSection]   = React.useState("queue");
  const [openId, setOpenId]     = React.useState(null);
  const [cmdOpen, setCmdOpen]   = React.useState(false);
  const [applicants, setApplicants] = React.useState(window.applicants);

  // Apply theme + density to root + body
  React.useEffect(() => { document.documentElement.dataset.theme = t.theme; }, [t.theme]);
  React.useEffect(() => { document.body.dataset.density = t.density; }, [t.density]);
  React.useEffect(() => { document.body.dataset.flags = t.flags ? "on" : "off"; }, [t.flags]);
  React.useEffect(() => { document.body.dataset.auditor = String(!!t.auditorMode); }, [t.auditorMode]);
  React.useEffect(() => {
    if (t.accent) {
      // override accent var
      document.documentElement.style.setProperty("--accent", t.accent);
    }
  }, [t.accent]);

  // ⌘K listener
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setCmdOpen(o => !o);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // Side panel navigation
  const openDetail = (id) => setOpenId(id);
  const closeDetail = () => setOpenId(null);
  const openIndex = openId ? applicants.findIndex(a => a.id === openId) : -1;
  const onNext = () => {
    if (openIndex < 0) return;
    setOpenId(applicants[(openIndex + 1) % applicants.length].id);
  };
  const onPrev = () => {
    if (openIndex < 0) return;
    setOpenId(applicants[(openIndex - 1 + applicants.length) % applicants.length].id);
  };

  // Decision handler — mutates the row's status, removes from queue for terminal decisions
  const onDecision = (id, kind, reason) => {
    setApplicants(prev => prev.map(a => a.id === id ? {
      ...a,
      status: kind === "approved" ? "approved" : kind === "rejected" ? "rejected" : kind === "escalated" ? "on_hold" : a.status,
      action: kind === "requested_docs" ? "Awaiting client" : a.action,
    } : a));
  };

  // Counts for sub-nav badges
  const counts = {
    queue:       applicants.filter(a => a.status === "pending").length,
    withdrawals: window.withdrawals.filter(w => w.tier !== "low").length,
    coverage:    window.ORGS.filter(o => o.uboCoverage < 1).length,
    docs:        (window.DOC_EXPIRY["0-7"] || []).length,
  };

  const openApplicant = (id) => setOpenId(id);

  // Render current surface
  let surface = null;
  if (section === "queue") {
    surface = <PendingReviewQueue applicants={applicants} openDetail={openDetail} openId={openId}
      auditorMode={t.auditorMode} density={t.density} />;
  } else if (section === "vitals") {
    surface = <OpsVitals vitals={window.VITALS} applicants={applicants} withdrawals={window.withdrawals} />;
  } else if (section === "withdrawals") {
    surface = <WithdrawalApprovals withdrawals={window.withdrawals} auditorMode={t.auditorMode} />;
  } else if (section === "withdrawals-auto") {
    surface = <AutoApprovedLog />;
  } else if (section === "coverage") {
    surface = <CoverageGaps orgs={window.ORGS} auditorMode={t.auditorMode} />;
  } else if (section === "docs") {
    surface = <DocumentExpiration buckets={window.DOC_EXPIRY} auditorMode={t.auditorMode} />;
  } else if (section === "kyt") {
    surface = <KYTTransactions auditorMode={t.auditorMode} />;
  } else if (section === "audit") {
    surface = <AuditTrail audit={window.audit} auditorMode={t.auditorMode} />;
  } else if (section === "settings-thresholds") {
    surface = <SettingsThresholds auditorMode={t.auditorMode} />;
  } else if (section === "settings-cadence") {
    surface = <SettingsReKycCadence auditorMode={t.auditorMode} />;
  } else if (section === "settings-questionnaire") {
    surface = <SettingsQuestionnaire auditorMode={t.auditorMode} />;
  } else if (section === "glossary") {
    surface = <GlossarySurface />;
  } else {
    surface = <GenericStub title="Settings" hint="Coming soon" />;
  }

  const sidePanelApplicant = openId ? applicants.find(a => a.id === openId) : null;

  return (
    <AppShell
      section={section} setSection={setSection}
      applicantCounts={counts}
      openCmdK={() => setCmdOpen(true)}
      auditorMode={t.auditorMode}
    >
      <div className="app-body">
        <div className="surface-col">{surface}</div>
        {sidePanelApplicant && section === "queue" && (
          <SidePanel
            applicant={sidePanelApplicant}
            onClose={closeDetail}
            onNext={onNext} onPrev={onPrev}
            total={applicants.length} index={openIndex}
            onDecision={onDecision}
            auditorMode={t.auditorMode}
          />
        )}
      </div>

      <CommandPalette
        open={cmdOpen}
        onClose={() => setCmdOpen(false)}
        applicants={applicants}
        setSection={setSection}
        openApplicant={openApplicant}
      />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme}
          options={["light","dark"]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Accent" value={t.accent}
          options={["#2563eb","#0ea5e9","#0f766e","#7c3aed","#0f172a"]}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Density" />
        <TweakRadio label="Row height" value={t.density}
          options={["compact","regular"]}
          onChange={(v) => setTweak("density", v)} />

        <TweakSection label="Display" />
        <TweakToggle label="Country flag emojis" value={t.flags}
          onChange={(v) => setTweak("flags", v)} />

        <TweakSection label="Session" />
        <TweakToggle label="Auditor mode (read-only)" value={t.auditorMode}
          onChange={(v) => setTweak("auditorMode", v)} />
        <div style={{fontSize:11, color:"rgba(41,38,27,.55)", padding:"4px 0 8px"}}>
          Toggles the read-only watermark, banner, and disables every write action across the dashboard.
        </div>

        <TweakSection label="Shortcuts" />
        <div style={{fontSize:11, color:"rgba(41,38,27,.55)", display:"flex", flexDirection:"column", gap:4}}>
          <span><kbd className="kbd">⌘K</kbd> command palette</span>
          <span><kbd className="kbd">J</kbd> / <kbd className="kbd">K</kbd> next / prev applicant</span>
          <span><kbd className="kbd">Esc</kbd> close side panel</span>
        </div>
      </TweaksPanel>
    </AppShell>
  );
}

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