/* app.jsx — Main App: layout (cockpit), theme, accent, console drawer state.
   Production build for the marketing site demo — no Tweaks panel, no edit-mode protocol. */

const PROD_SETTINGS = {
  layout: "cockpit",
  density: "compact",
  accent: "#22d3ee",
  theme: "dark",
  consoleHeight: 220,
  consoleCollapsed: false,
  showPulse: true,
  showHeatRail: true,
};

function App() {
  // Theme is the only user-controllable setting in the demo build — the topbar
  // switcher writes it; everything else is locked to PROD_SETTINGS.
  const [theme, setTheme] = React.useState(PROD_SETTINGS.theme);
  const [consoleHeight, setConsoleHeight] = React.useState(PROD_SETTINGS.consoleHeight);
  const [consoleCollapsed, setConsoleCollapsed] = React.useState(PROD_SETTINGS.consoleCollapsed);

  // theme propagation
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    document.documentElement.setAttribute("data-density", PROD_SETTINGS.density);
    document.documentElement.style.setProperty("--accent-base", PROD_SETTINGS.accent);
  }, [theme]);

  // console resize via drag
  const onConsoleResize = (e) => {
    e.preventDefault();
    const startY = e.clientY;
    const startH = consoleHeight;
    const onMove = (ev) => {
      const next = Math.max(120, Math.min(window.innerHeight * 0.7, startH - (ev.clientY - startY)));
      setConsoleHeight(next);
    };
    const onUp = () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
  };

  const onToggleConsole = () => setConsoleCollapsed((v) => !v);

  return (
    <div className="app">
      <Topbar theme={theme} onThemeChange={setTheme} />

      {PROD_SETTINGS.showPulse && <SystemPulse />}
      <KpiStrip />

      <main style={{ flex: 1, minHeight: 0, padding: "var(--gutter)", overflow: "hidden" }}>
        <CockpitLayout />
      </main>

      <ConsoleDrawer
        height={consoleHeight}
        onResize={onConsoleResize}
        collapsed={consoleCollapsed}
        onToggle={onToggleConsole}
      />
    </div>
  );
}

// Cockpit: 3-column splittable layout (production-locked)
function CockpitLayout() {
  return (
    <Splitter direction="row"
              initialSizes={[28, 44, 28]}
              minSizes={[280, 360, 280]}
              style={{ gap: 0, flex: 1, height: "100%" }}>
      <div style={{ display: "flex", flexDirection: "column", height: "100%", gap: "var(--gutter)" }}>
        <SignalsGrid layout="rail" />
      </div>
      <div style={{ marginLeft: "var(--gutter)", marginRight: "var(--gutter)", height: "100%" }}>
        <Splitter direction="col"
                  initialSizes={[55, 45]}
                  minSizes={[180, 180]}
                  style={{ height: "100%" }}>
          <ChartPane />
          <div style={{ marginTop: "var(--gutter)", height: "100%" }}>
            <OnchainPane />
          </div>
        </Splitter>
      </div>
      <div style={{ height: "100%" }}>
        <RiskPane />
      </div>
    </Splitter>
  );
}

window.App = App;