import { escapeHtml } from "./format.js";

const listeners = new Set();
let rootElement = null;
let routeElement = null;
let current = null;
let routeTable = [];

export function parseLocation() {
  const raw = window.location.hash.replace(/^#/, "") || "/home";
  const [pathPart, queryPart = ""] = raw.split("?");
  const path = pathPart.startsWith("/") ? pathPart : `/${pathPart}`;
  return { path, query: new URLSearchParams(queryPart) };
}

export function navigate(path, query) {
  const params = new URLSearchParams();
  if (query) {
    for (const [key, value] of Object.entries(query)) {
      if (value === null || value === undefined || value === "") continue;
      params.set(key, String(value));
    }
  }
  const text = params.toString();
  window.location.hash = `${path}${text ? `?${text}` : ""}`;
}

export function replaceQuery(changes) {
  const { path, query } = parseLocation();
  for (const [key, value] of Object.entries(changes)) {
    if (value === null || value === undefined || value === "") query.delete(key);
    else query.set(key, String(value));
  }
  const text = query.toString();
  window.location.hash = `${path}${text ? `?${text}` : ""}`;
}

export function onRoute(listener) {
  listeners.add(listener);
}

export function startRouter({ root, outlet, routes }) {
  rootElement = root;
  routeElement = outlet;
  routeTable = routes;
  window.addEventListener("hashchange", render);
  render();
}

export function currentRoute() {
  return current;
}

function matchRoute(path, routes) {
  for (const route of routes) {
    const match = route.pattern.exec(path);
    if (match) return { route, match };
  }
  return null;
}

async function render() {
  const { path, query } = parseLocation();
  if (!path || path === "/") {
    navigate("/home");
    return;
  }
  const matched = matchRoute(path, routeTable);
  if (!matched) {
    routeElement.innerHTML = `
      <section class="page">
        <div class="empty-state"><strong>页面不存在</strong>
        <p>${escapeHtml(path)}</p><a class="button" href="#/home">回到首页</a></div>
      </section>`;
    return;
  }
  current = { path, query, route: matched.route };
  for (const listener of listeners) {
    try {
      listener(current);
    } catch {
      // 导航状态更新不应阻断页面渲染
    }
  }
  window.scrollTo({ top: 0, behavior: "auto" });
  routeElement.innerHTML = `<div class="page-loading"><div class="skeleton skeleton-title"></div>
    <div class="skeleton skeleton-card"></div><div class="skeleton skeleton-card"></div></div>`;
  try {
    await matched.route.view(routeElement, {
      params: matched.match.slice(1),
      query,
      path,
    });
  } catch (error) {
    routeElement.innerHTML = `
      <section class="page">
        <div class="empty-state error-state">
          <strong>加载失败</strong>
          <p>${escapeHtml(error.message || "未知错误")}</p>
          <button class="button" id="retry-button" type="button">重试</button>
        </div>
      </section>`;
    routeElement.querySelector("#retry-button")?.addEventListener("click", render);
  }
  rootElement?.classList.remove("is-loading");
}