// App shell — composes nav, top bar, view, alerts rail, tweaks panel.

const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "charcoal",
  "density": "balanced",
  "accentHue": 220,
  "fsmStyle": "graph",
  "tickRateSec": 2,
  "showAlertsRail": true,
  "showSparklines": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  // Theme tilt
  const themes = {
    charcoal: { bg0: "0.16 0.004 250", bg1: "0.19 0.005 250", bg2: "0.22 0.006 250", bg3: "0.26 0.007 250" },
    slate:    { bg0: "0.17 0.012 240", bg1: "0.20 0.013 240", bg2: "0.23 0.014 240", bg3: "0.27 0.015 240" },
    zinc:     { bg0: "0.16 0.002 280", bg1: "0.19 0.003 280", bg2: "0.22 0.004 280", bg3: "0.26 0.005 280" },
  };
  const th = themes[t.theme] || themes.charcoal;
  root.style.setProperty("--bg-0", `oklch(${th.bg0})`);
  root.style.setProperty("--bg-1", `oklch(${th.bg1})`);
  root.style.setProperty("--bg-2", `oklch(${th.bg2})`);
  root.style.setProperty("--bg-3", `oklch(${th.bg3})`);

  // Accent hue
  root.style.setProperty("--alice", `oklch(0.72 0.12 ${t.accentHue})`);

  // Density tweak — adjust base font + row height
  if (t.density === "dense") {
    document.body.style.fontSize = "12px";
    root.style.setProperty("--row-h", "28px");
  } else if (t.density === "spacious") {
    document.body.style.fontSize = "14px";
    root.style.setProperty("--row-h", "40px");
  } else {
    document.body.style.fontSize = "13px";
    root.style.setProperty("--row-h", "34px");
  }
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  const [nav, setNav] = useState("dashboard");
  const [selectedSwapId, setSelectedSwapId] = useState(null);
  const [paused, setPaused] = useState(false);
  const [fakeFault, setFakeFault] = useState(false);
  const [seed, setSeed] = useState(7);
  const [tickN, setTickN] = useState(0);

  const baseData = useMemo(() => ZW.buildAll(seed + tickN * 0.001), [seed, tickN, fakeFault]);
  const live = useLiveOverlay({ tickRateSec: Math.max(2, tweaks.tickRateSec) });
  const data = useMemo(() => mergeOverlay(baseData, live), [baseData, live]);

  // Live tick — re-derive "now"
  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setTickN((n) => n + 1), Math.max(500, tweaks.tickRateSec * 1000));
    return () => clearInterval(id);
  }, [paused, tweaks.tickRateSec]);

  // Inject fake fault — append a critical alert
  const dataAdj = useMemo(() => {
    if (!fakeFault) return data;
    const extras = [
      { id: "fake_btc_rpc", severity: "err", ts: Date.now() - 8000, title: "BTC RPC offline",
        body: "btc-core.internal:8332 → ECONNREFUSED. 3 retries failed. Locking new swaps." },
      { id: "fake_zec_lag", severity: "warn", ts: Date.now() - 14000, title: "Orchard scan stalled",
        body: "Scan height 2,612,389 unchanged for 6m (tip advanced by 8 blocks)." },
    ];
    return { ...data, alerts: [...extras, ...data.alerts] };
  }, [data, fakeFault]);

  function onSelectSwap(id) {
    setSelectedSwapId(id);
    setNav("detail");
  }
  function onAction(kind, swap) {
    console.log("[mock action]", kind, swap?.id);
  }

  const selectedSwap = dataAdj.swaps.find((s) => s.id === selectedSwapId);
  const activeCount = dataAdj.swaps.filter((s) => !ZW.TERMINAL.has(s.state)).length;
  const alertCount = dataAdj.alerts.filter((a) => a.severity === "warn" || a.severity === "err").length;

  return (
    <div style={{ display: "flex", height: "100%", minHeight: 0 }}>
      <SideNav active={nav} onNav={setNav} alertCount={alertCount} swapCount={activeCount} />
      <div style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
        <TopBar
          data={dataAdj}
          paused={paused}
          onPause={() => setPaused((p) => !p)}
          onTickNow={() => setTickN((n) => n + 1)}
          fakeFault={fakeFault}
          setFakeFault={setFakeFault}
          live={live}
        />
        <main style={{ flex: 1, minHeight: 0, overflow: "auto", display: "flex", flexDirection: "column" }}>
          {nav === "dashboard" && <ViewDashboard data={dataAdj} onSelectSwap={onSelectSwap} onNav={setNav} />}
          {nav === "swaps" && <ViewSwaps data={dataAdj} onSelectSwap={onSelectSwap} />}
          {nav === "detail" && (
            <ViewSwapDetail
              swap={selectedSwap}
              now={dataAdj.now}
              onBack={() => setNav("swaps")}
              onAction={onAction}
            />
          )}
          {nav === "health" && <ViewHealth data={dataAdj} />}
          {nav === "orderbook" && <ViewOrderbook data={dataAdj} now={dataAdj.now} />}
          {nav === "logs" && <ViewLogs data={dataAdj} onSelectSwap={onSelectSwap} />}
        </main>
      </div>

      {tweaks.showAlertsRail && (
        <AlertsRail alerts={dataAdj.alerts} onSelectSwap={onSelectSwap} now={dataAdj.now} />
      )}

      <TweaksPanel title="Tweaks" defaultPos={{ right: 24, bottom: 24 }}>
        <TweakSection title="Appearance">
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            options={[{ value: "charcoal", label: "Charcoal" }, { value: "slate", label: "Slate" }, { value: "zinc", label: "Zinc" }]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            options={[{ value: "dense", label: "Dense" }, { value: "balanced", label: "Balanced" }, { value: "spacious", label: "Spacious" }]}
            onChange={(v) => setTweak("density", v)}
          />
          <TweakSlider
            label="Accent hue"
            value={tweaks.accentHue}
            min={0} max={360} step={5}
            onChange={(v) => setTweak("accentHue", v)}
          />
        </TweakSection>
        <TweakSection title="Live behavior">
          <TweakSlider
            label="Tick rate (s)"
            value={tweaks.tickRateSec}
            min={1} max={10} step={1}
            onChange={(v) => setTweak("tickRateSec", v)}
          />
          <TweakToggle
            label="Show alerts rail"
            value={tweaks.showAlertsRail}
            onChange={(v) => setTweak("showAlertsRail", v)}
          />
          <TweakToggle
            label="Show sparklines"
            value={tweaks.showSparklines}
            onChange={(v) => setTweak("showSparklines", v)}
          />
        </TweakSection>
        <TweakSection title="Demo">
          <TweakToggle
            label="Inject chaos (RPC down + scan stall)"
            value={fakeFault}
            onChange={setFakeFault}
          />
          <TweakButton onClick={() => setSeed((s) => s + 1)}>Reshuffle data</TweakButton>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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