// app.jsx — main app shell + routing + tweaks

const NAV_TOP = [
  { id: "dash", label: "Dashboard", ico: I.dash },
  { id: "console", label: "RCON Console", ico: I.term, kbd: "⌘K" },
  { id: "logs", label: "Live Logs", ico: I.logs },
  { id: "players", label: "Players", ico: I.users },
];
const NAV_CFG = [
  { id: "maps", label: "Maps", ico: I.map },
  { id: "cvars", label: "CVAR Presets", ico: I.sliders },
  { id: "config", label: "Config Editor", ico: I.code },
];
const NAV_SYS = [
  {
    id: "plugins",
    label: "Plugins",
    ico: I.plug,
    badge: (
      <span className="badge warn" style={{ marginLeft: "auto" }}>
        1
      </span>
    ),
  },
  { id: "sched", label: "Scheduler", ico: I.clock },
  { id: "admin", label: "Admin", ico: I.shield },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  accent: "#b8e85a",
  density: "regular",
}; /*EDITMODE-END*/

// accent palette options (oklch-derived hex)
const ACCENT_PRESETS = [
  "#b8e85a", // lime — terminal
  "#7ad9ff", // cyan
  "#ffb463", // amber
  "#ff7a8c", // rose
  "#a896ff", // purple
  "#e8e8ec", // monochrome
];

function applyAccent(hex) {
  // build matching soft + line tokens from hex
  document.documentElement.style.setProperty("--ac", hex);
  document.documentElement.style.setProperty("--ac-soft", hex + "24");
  document.documentElement.style.setProperty("--ac-line", hex + "5a");
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("dash");
  const [server, setServer] = React.useState("fra1");
  const [servers, setServers] = React.useState(SERVERS);

  React.useEffect(() => {
    applyAccent(t.accent);
  }, [t.accent]);
  React.useEffect(() => {
    document.documentElement.dataset.density = t.density;
  }, [t.density]);

  // ⌘K opens console
  React.useEffect(() => {
    const k = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        setRoute("console");
      }
    };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, []);

  const cur = servers.find((s) => s.id === server) || servers[0];

  return (
    <div className="app">
      {/* ── Header ── */}
      <header className="hdr">
        <div className="brand">
          <span className="mark">n</span>
          <span className="name">
            <b>nokit</b>
          </span>
        </div>

        <ServerSwitcher
          current={server}
          servers={servers}
          onPick={setServer}
          onRemove={(id) => setServers((s) => s.filter((x) => x.id !== id))}
          onAdd={(f) =>
            f.name &&
            f.addr &&
            setServers((s) => [
              ...s,
              {
                id: f.name.replace(/\W/g, "").slice(0, 8) || "srv",
                name: f.name,
                addr: f.addr,
                region: "—",
                status: "offline",
                players: "—",
                map: "—",
              },
            ])
          }
        />

        <div className="row" style={{ marginLeft: 4 }}>
          <span className="hint m">tickrate</span>
          <span className="m" style={{ color: "var(--fg)" }}>
            127.8
          </span>
          <span className="sep-v" style={{ margin: "0 6px" }} />
          <span className="hint m">players</span>
          <span className="m" style={{ color: "var(--fg)" }}>
            {cur.players}
          </span>
          <span className="sep-v" style={{ margin: "0 6px" }} />
          <span className="hint m">map</span>
          <span className="m" style={{ color: "var(--fg)" }}>
            {cur.map}
          </span>
        </div>

        <div className="spacer" />

        <div className="right">
          <button
            className="hb"
            title="Search (cmd-k)"
            onClick={() => setRoute("console")}
          >
            <span className="ico">{I.search}</span>
            <span className="m" style={{ color: "var(--fg-3)" }}>
              cvars, players…
            </span>
            <kbd
              style={{
                fontFamily: "var(--mono)",
                fontSize: 10,
                color: "var(--fg-3)",
                padding: "1px 5px",
                border: "1px solid var(--br-1)",
                borderRadius: 4,
                marginLeft: 18,
              }}
            >
              ⌘K
            </kbd>
          </button>
          <span className="sep-v" style={{ margin: "0 2px" }} />
          <button className="hb" title="Docs">
            <span className="ico">{I.out}</span>
          </button>
          <button className="hb" title="Settings">
            <span className="ico">{I.cog}</span>
          </button>
          <span className="sep-v" style={{ margin: "0 2px" }} />
          <div className="hb" style={{ paddingLeft: 4 }}>
            <span
              style={{
                width: 22,
                height: 22,
                borderRadius: "50%",
                background: "linear-gradient(135deg, #4a4a52, #2a2a30)",
                color: "var(--fg)",
                display: "grid",
                placeItems: "center",
                fontFamily: "var(--mono)",
                fontSize: 10,
                fontWeight: 600,
              }}
            >
              m0
            </span>
            <span className="m" style={{ fontSize: 12 }}>
              m0use@
            </span>
          </div>
          <a className="hb danger" href="/" title="Sign out">
            <span className="ico">{I.power}</span>
          </a>
        </div>
      </header>

      {/* ── Sidebar ── */}
      <nav className="side">
        <div className="group">Server</div>
        {NAV_TOP.map((n) => (
          <NavItem
            key={n.id}
            item={n}
            active={route === n.id}
            onClick={() => setRoute(n.id)}
          />
        ))}

        <div className="group">Configuration</div>
        {NAV_CFG.map((n) => (
          <NavItem
            key={n.id}
            item={n}
            active={route === n.id}
            onClick={() => setRoute(n.id)}
          />
        ))}

        <div className="group">System</div>
        {NAV_SYS.map((n) => (
          <NavItem
            key={n.id}
            item={n}
            active={route === n.id}
            onClick={() => setRoute(n.id)}
          />
        ))}

        <div style={{ flex: 1 }} />

        <div className="hr" />
        <div
          style={{
            padding: "10px 6px 0",
            display: "flex",
            alignItems: "center",
            gap: 8,
            fontSize: 11,
            color: "var(--fg-2)",
          }}
        >
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="m" style={{ color: "var(--fg)", fontSize: 11.5 }}>
              relay v0.4.2
            </div>
            <div className="m fg3" style={{ fontSize: 10 }}>
              ↑ 2.1 kb/s · ↓ 18 kb/s
            </div>
          </div>
          <span className="badge ok pulsing">
            <span className="dot" />
            ws
          </span>
        </div>
      </nav>

      {/* ── Main ── */}
      <main className="main" key={route}>
        {route === "dash" && <DashboardPanel srv={cur} />}
        {route === "console" && <ConsolePanel />}
        {route === "logs" && <LogsPanel />}
        {route === "players" && <PlayersPanel />}
        {route === "maps" && <MapsPanel />}
        {route === "cvars" && <CvarsPanel />}
        {route === "config" && <ConfigPanel />}
        {route === "plugins" && <PluginsPanel />}
        {route === "sched" && <SchedulerPanel />}
        {route === "admin" && <AdminPanel />}
      </main>

      {/* ── Footer ── */}
      <footer className="ft">
        <span className="m">nokit</span>
        <span className="m fg3">v0.1.0-rc.1</span>
        <span className="sep">·</span>
        <a className="m" href="#">
          MIT
        </a>
        <span className="sep">·</span>
        <a
          className="m row"
          href="https://github.com/codevski/nokit"
          style={{ gap: 6, display: "inline-flex" }}
        >
          <span className="ico" style={{ width: 12, height: 12 }}>
            {I.git}
          </span>
          github
        </a>
        <span className="sep">·</span>
        <a className="m" href="#">
          docs
        </a>
        <span className="sep">·</span>
        <a className="m" href="#">
          changelog
        </a>
        <div className="grow" />
        <span className="pulse m">
          <i />
          srcds OK · relay OK ·{" "}
          {new Date()
            .toLocaleString("en-GB", { hour12: false })
            .replace(",", " ·")}
        </span>
        <span className="sep">·</span>
        <span className="m fg3">Europe/Berlin (UTC+2)</span>
      </footer>

      {/* ── Tweaks ── */}
      <TweaksPanel title="nokit · tweaks">
        <TweakSection label="Accent" />
        <TweakColor
          label="color"
          value={t.accent}
          options={ACCENT_PRESETS}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
        <div
          className="hint m"
          style={{ paddingTop: 6, fontSize: 10.5, color: "rgba(41,38,27,.45)" }}
        >
          ⌘K — open console · / — focus search
        </div>
      </TweaksPanel>
    </div>
  );
}

function NavItem({ item, active, onClick }) {
  return (
    <button className={"nav " + (active ? "active" : "")} onClick={onClick}>
      <span className="ico">{item.ico}</span>
      <span>{item.label}</span>
      {item.kbd && <span className="kbd">{item.kbd}</span>}
      {item.badge}
    </button>
  );
}

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