const { useState, useEffect } = React;
const { Sidebar, TopBar } = window.Chrome;
const {
  LogsScreen, DashboardScreen, TracesScreen, TraceDetailScreen,
  MetricsScreen, TweaksPanel, useTweaks, TweakSection, TweakRadio,
} = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "screen": "logs-default",
  "theme": "light",
  "density": "regular"
}/*EDITMODE-END*/;

function applyTokens(t) {
  const root = document.documentElement;
  root.setAttribute("data-theme", t.theme);
  root.setAttribute("data-density", t.density);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyTokens(t); }, [t.theme, t.density]);

  // Sidebar key → screen
  const navToScreen = {
    home: "home",
    logs: "logs-default",
    metrics: "metrics",
    traces: "traces",
    dashboards: "dashboards",
  };
  const screenToNav = {
    "home": "home",
    "logs-default": "logs", "logs-sql": "logs",
    "metrics": "metrics",
    "traces": "traces", "trace-detail": "traces",
    "dashboards": "dashboards",
  };
  const activeNav = screenToNav[t.screen] || "logs";

  function selectNav(key) {
    if (navToScreen[key]) setTweak("screen", navToScreen[key]);
  }

  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      <TopBar theme={t.theme} onToggleTheme={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")} />
      <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
        <Sidebar active={activeNav} onSelect={selectNav} />
        {t.screen === "home" && <window.HomeScreen />}
        {t.screen === "dashboards" && <DashboardScreen />}
        {t.screen === "traces" && <TracesScreen onOpenTrace={() => setTweak("screen", "trace-detail")} />}
        {t.screen === "trace-detail" && <TraceDetailScreen onBack={() => setTweak("screen", "traces")} />}
        {t.screen === "metrics" && <MetricsScreen />}
        {(t.screen === "logs-default" || t.screen === "logs-sql") && (
          <LogsScreen sqlOn={t.screen === "logs-sql"}
                      onToggleSql={() => setTweak("screen", t.screen === "logs-sql" ? "logs-default" : "logs-sql")} />
        )}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Screen" />
        <TweakRadio label="View" value={t.screen} onChange={v => setTweak("screen", v)}
          options={[
            { value: "home",          label: "Home" },
            { value: "logs-default",  label: "Logs" },
            { value: "logs-sql",      label: "SQL" },
            { value: "metrics",       label: "Metrics" },
            { value: "traces",        label: "Trace Map" },
            { value: "trace-detail",  label: "Trace Detail" },
            { value: "dashboards",    label: "Dash" },
          ]} />

        <TweakSection label="Appearance" />
        <TweakRadio label="Theme" value={t.theme} onChange={v => setTweak("theme", v)}
          options={[
            { value: "light", label: "Light" },
            { value: "dark",  label: "Dark" },
          ]} />
      </TweaksPanel>
    </div>
  );
}

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