const servicesEl = document.querySelector("#services");
const statusBar = document.querySelector("#statusBar");
const searchInput = document.querySelector("#searchInput");
const refreshButton = document.querySelector("#refreshButton");
const groupTemplate = document.querySelector("#groupTemplate");
const cardTemplate = document.querySelector("#cardTemplate");
const appBrand = document.querySelector("#appBrand");
const appTitle = document.querySelector("#appTitle");
const appSubtitle = document.querySelector("#appSubtitle");

let services = [];
let settings = {};

function formatTime(value) {
  if (!value) return "尚未更新";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit"
  }).format(date);
}

function setStatus(message, isError = false) {
  statusBar.textContent = message;
  statusBar.classList.toggle("error", isError);
}

function applySettings(nextSettings = {}) {
  settings = nextSettings;
  document.title = settings.browserTitle || "家中服务导航";
  appBrand.textContent = settings.brand || "STUN NAV";
  appTitle.textContent = settings.title || "家中服务";
  appSubtitle.textContent = settings.subtitle || "";
  appSubtitle.hidden = !appSubtitle.textContent.trim();
}

function serviceMatches(service, keyword) {
  if (!keyword) return true;
  const text = `${service.name} ${service.group} ${service.note} ${service.url}`.toLowerCase();
  return text.includes(keyword.toLowerCase());
}

function groupServices(items) {
  return items.reduce((groups, service) => {
    const group = service.group || "默认";
    if (!groups.has(group)) groups.set(group, []);
    groups.get(group).push(service);
    return groups;
  }, new Map());
}

async function copyUrl(url, button) {
  await navigator.clipboard.writeText(url);
  const oldTitle = button.title;
  button.title = "已复制";
  setTimeout(() => {
    button.title = oldTitle;
  }, 1200);
}

function render() {
  const keyword = searchInput.value.trim();
  const filtered = services.filter((service) => serviceMatches(service, keyword));
  servicesEl.replaceChildren();

  if (!filtered.length) {
    setStatus(services.length ? "没有匹配的服务" : "还没有收到 Lucky 推送的地址");
    return;
  }

  setStatus(`${filtered.length} 个服务可用，最近刷新 ${formatTime(new Date().toISOString())}`);

  for (const [group, items] of groupServices(filtered)) {
    const groupNode = groupTemplate.content.firstElementChild.cloneNode(true);
    groupNode.querySelector("h2").textContent = group;
    const grid = groupNode.querySelector(".grid");

    for (const service of items) {
      const card = cardTemplate.content.firstElementChild.cloneNode(true);
      card.querySelector(".service-mark").dataset.initial = (service.name || service.id || "?").trim().slice(0, 1).toUpperCase();
      card.querySelector("h3").textContent = service.name;
      card.querySelector(".note").textContent = service.note || "";
      card.querySelector(".meta").textContent = `${service.url} · ${formatTime(service.updatedAt)}`;

      const openButton = card.querySelector(".open-button");
      openButton.href = service.url;

      const copyButton = card.querySelector(".copy-button");
      copyButton.addEventListener("click", () => copyUrl(service.url, copyButton));
      grid.append(card);
    }

    servicesEl.append(groupNode);
  }
}

async function loadServices() {
  try {
    setStatus("正在读取最新地址...");
    const response = await fetch("/api/services", { cache: "no-store" });
    if (!response.ok) throw new Error(`读取失败：${response.status}`);
    const data = await response.json();
    services = Array.isArray(data.services) ? data.services : [];
    applySettings(data.settings || {});
    render();
  } catch (error) {
    setStatus(error.message || "读取失败", true);
  }
}

searchInput.addEventListener("input", render);
refreshButton.addEventListener("click", loadServices);

loadServices();
setInterval(loadServices, 30000);