import "./styles/tokens.css";
import "./styles/base.css";
import "./styles/border.css";
import "./styles/glass.css";
import "./styles/network.css";

import { applyFrame } from "./ui/frame";

import { renderWelcome } from "./views/welcome";
import { renderCreateAccount } from "./views/createAccount";
import { renderRoleSetup } from "./views/roleSetup";
import { renderNetwork } from "./views/network";
import { renderFlowDetails } from "./views/flowDetails";
import { renderCreateFlow } from "./views/createFlow";
import { renderColorMapping } from "./views/colorMapping";
import { renderNotifications } from "./views/notifications";
import { renderForums } from "./views/forums";
import { renderProfileSettings } from "./views/profileSettings";

const BASE = "/wireframes";

type RouteKey =
  | "/"
  | "/create-account"
  | "/role-setup"
  | "/network"
  | "/flow-details"
  | "/create-flow"
  | "/color-mapping"
  | "/notifications"
  | "/forums"
  | "/profile-settings";

function normalizePath(path: string): RouteKey {
  // Expect paths like /wireframes/... ; strip base
  if (path === BASE || path === BASE + "/") return "/";
  if (!path.startsWith(BASE + "/")) return "/";
  const sub = path.slice(BASE.length);
  const allowed = new Set([
    "/create-account",
    "/role-setup",
    "/network",
    "/flow-details",
    "/create-flow",
    "/color-mapping",
    "/notifications",
    "/forums",
    "/profile-settings",
  ]);
  return (allowed.has(sub) ? (sub as RouteKey) : "/");
}

function navigate(to: string) {
  history.pushState({}, "", to);
  mount();
}

function mount() {
  const app = document.getElementById("app")!;
  app.innerHTML = "";

  const r = normalizePath(window.location.pathname);
  // Use route key as the stable color mapping seed
  applyFrame(app, r);

  if (r === "/") renderWelcome(app, navigate);
  else if (r === "/create-account") renderCreateAccount(app, navigate);
  else if (r === "/role-setup") renderRoleSetup(app, navigate);
  else if (r === "/network") renderNetwork(app, navigate);
  else if (r === "/flow-details") renderFlowDetails(app, navigate);
  else if (r === "/create-flow") renderCreateFlow(app, navigate);
  else if (r === "/color-mapping") renderColorMapping(app, navigate);
  else if (r === "/notifications") renderNotifications(app, navigate);
  else if (r === "/forums") renderForums(app, navigate);
  else if (r === "/profile-settings") renderProfileSettings(app, navigate);
}

window.addEventListener("popstate", mount);
mount();