// App.jsx — top-level router. Provides AppState. Wires panels.

// React hooks (Babel-standalone — make hooks visible per-script)
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

const LIST_FLAG_MAP = {
  partners:    "partner_candidate",
  supporters:  "supporter_candidate",
  investment:  "investment_candidate",
  support:     "support_candidate",
  recruiting:  "recruiting_candidate",
  competitors: "competitor_candidate",
};
const LIST_TITLE_MAP = {
  partners:    "Partners",
  supporters:  "Supporters",
  investment:  "Investment targets",
  support:     "Support targets",
  recruiting:  "Recruiting targets",
  competitors: "Competitors",
};

function ApiErrorBanner() {
  const mode = useApiMode();
  if (mode !== "error" && mode !== "preview") return null;
  if (mode === "preview") {
    return (
      <div style={{
        padding: "6px 16px", background: "rgba(240,153,61,0.10)",
        color: "var(--vk-warning)", fontSize: 11,
        borderBottom: "1px solid rgba(240,153,61,0.18)",
        display: "flex", alignItems: "center", gap: 8,
      }}>
        <Icon name="FlaskConical" size={12} />
        Preview mode — backend at <span className="vk-mono">{window.VK_API.BASE}</span> unreachable, falling back to local seed data.
      </div>
    );
  }
  return (
    <div style={{
      padding: "6px 16px", background: "rgba(226,75,106,0.10)",
      color: "var(--vk-danger)", fontSize: 11,
      borderBottom: "1px solid rgba(226,75,106,0.18)",
      display: "flex", alignItems: "center", gap: 8,
    }}>
      <Icon name="TriangleAlert" size={12} />
      Cannot reach the backend at <span className="vk-mono">{window.VK_API.BASE}</span>. Check that the API is running and that you're on the Tailscale network.
    </div>
  );
}

function AppInner() {
  const app = useAppState();
  const [page, setPage] = useState("exec");
  const [panelEntityId, setPanelEntityId] = useState(null);
  const [drawerEvidence, setDrawerEvidence] = useState(null);

  function openEntity(e) {
    if (!e) return;
    setPanelEntityId(e.entity_id || e);  // accepts entity object OR raw id
  }
  function openEvidence(ev) {
    setDrawerEvidence(ev || { source_title: "Evidence not yet loaded.", snippet: "Open the entity profile for full source list.", confidence: "low", source_type: "stub", evidence_id: "" });
  }
  function handleSavedView(v) {
    setPage("directory");
    // saved view filters could be applied to state here in V2
  }

  function renderPage() {
    if (page === "exec")      return <ExecDashboard setPage={setPage} openEntity={openEntity} openEvidence={openEvidence} />;
    if (page === "directory") return <EntityDirectory openEntity={openEntity} />;
    if (page === "graph")     return <RelationshipGraph openEntity={openEntity} />;
    if (page === "briefs")    return <Briefs openEntity={openEntity} openEvidence={openEvidence} />;
    if (page === "feed")      return <ResearchFeed />;
    if (page === "evidence")  return <Evidence openEvidence={openEvidence} />;
    if (page === "blockers")  return <BlockersRisk openEntity={openEntity} openEvidence={openEvidence} />;
    if (page === "admin")     return <Admin openEntity={openEntity} />;
    if (LIST_FLAG_MAP[page])  return <EntityDirectory openEntity={openEntity} listFlag={LIST_FLAG_MAP[page]} title={LIST_TITLE_MAP[page]} />;
    return <div style={{ padding: 40, color: "var(--vk-text-tertiary)" }}>Page not found.</div>;
  }

  return (
    <div style={{ display: "flex", width: "100vw", height: "100vh", minWidth: 1280, overflow: "hidden" }}>
      <Sidebar
        page={page}
        setPage={setPage}
        savedViews={(window.VK_DATA && window.VK_DATA.SAVED_VIEWS) || []}
        onSavedView={handleSavedView}
        onNewView={() => alert("New view — not wired in V1")}
      />

      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, height: "100vh" }}>
        <Header onOpenEntity={openEntity} />
        <ApiErrorBanner />
        <div style={{ flex: 1, minHeight: 0, overflow: "hidden", display: "flex" }}>
          <div style={{ flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
            {renderPage()}
          </div>
        </div>
      </div>

      {panelEntityId && (
        <EntityPanel
          entityId={panelEntityId}
          onClose={() => setPanelEntityId(null)}
          openEvidence={openEvidence}
          openEntity={openEntity}
        />
      )}
      {drawerEvidence && (
        <EvidenceDrawer evidence={drawerEvidence} onClose={() => setDrawerEvidence(null)} />
      )}

      <Chatbot />
    </div>
  );
}

function App() {
  return (
    <AppStateProvider initialCity="Philadelphia">
      <AppInner />
    </AppStateProvider>
  );
}

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