"use strict";

const state = {
  token: "",
  siteId: "",
  config: { page_size: 16, max_active_previews: 4, webrtc_base_url: "" },
  items: [],
  quota: null,
  cursors: [null],
  pageIndex: 0,
  nextCursor: null,
  selected: new Map(),
  previewing: new Set(),
  loading: false,
};

const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => Array.from(document.querySelectorAll(selector));

const labels = {
  modality: { video: "视频", radar: "雷达", contact: "门磁", button: "按钮", wearable: "可穿戴", other: "其他" },
  desired: { enabled: "启用", disabled: "停用" },
  actual: { online: "在线", offline: "离线", failed: "失败", pending: "收敛中" },
  adapter: { ready: "适配器就绪", pending: "适配器处理中", adapter_not_ready: "适配器未交付", authentication_failed: "认证失败", unavailable: "适配器不可用" },
  capability: { video_capture: "成像", audio_capture: "音频", spatial_rule: "空间配置", telemetry: "遥测" },
};

function showToast(message) {
  const toast = $("#toast");
  toast.textContent = message;
  toast.hidden = false;
  window.clearTimeout(showToast.timer);
  showToast.timer = window.setTimeout(() => { toast.hidden = true; }, 4200);
}

function setText(selector, value) {
  const target = $(selector);
  if (target) target.textContent = String(value);
}

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

function isPreviewEligible(device) {
  return Array.isArray(device.capabilities) && device.capabilities.includes("video_capture") &&
    device.desired_state === "enabled" && device.actual_state === "online" && device.converged === true;
}

function attentionNeeded(device) {
  return device.converged !== true || device.actual_state === "offline" || device.actual_state === "failed" ||
    device.adapter_status === "authentication_failed" || device.adapter_status === "unavailable";
}

function statusFor(device) {
  if (device.actual_state === "online" && device.converged) return { text: "在线 · 已收敛", tone: "success" };
  if (device.actual_state === "failed" || device.adapter_status === "authentication_failed") return { text: labels.adapter[device.adapter_status] || "失败", tone: "danger" };
  if (device.actual_state === "offline") return { text: "离线", tone: "danger" };
  return { text: device.converged ? (labels.actual[device.actual_state] || "未知") : "等待收敛", tone: "warning" };
}

function createStatusBadge(device) {
  const value = statusFor(device);
  const badge = document.createElement("span");
  badge.className = `status-badge ${value.tone}`;
  badge.textContent = value.text;
  return badge;
}

function setConnected(connected) {
  const pill = $("#connectionPill");
  const foot = $(".sidebar-foot");
  pill.classList.toggle("connected", connected);
  foot.classList.toggle("connected", connected);
  setText("#connectionText", connected ? "已连接" : "未连接");
  setText("#sessionState", connected ? "会话仅驻留当前页面" : "尚未建立会话");
}

function setLoading(loading) {
  state.loading = loading;
  $("#refreshDevices").disabled = loading || !state.token;
  $("#refreshOperations").disabled = loading || !state.token;
  $("#retryLoad").disabled = loading || !state.token;
  $("#prevPage").disabled = loading || state.pageIndex === 0;
  $("#nextPage").disabled = loading || !state.nextCursor;
  setText("#deviceTableStatus", loading ? "正在读取最新状态…" : state.token ? "已读取当前页真实设备状态。" : "请先建立会话。");
}

function showDegraded(title, message) {
  setText("#degradedTitle", title);
  setText("#degradedMessage", message);
  $("#degradedBanner").hidden = false;
}

function clearDegraded() {
  $("#degradedBanner").hidden = true;
}

async function apiFetch(path) {
  const response = await fetch(path, {
    headers: { Authorization: `Bearer ${state.token}`, Accept: "application/json" },
    cache: "no-store",
  });
  let payload = null;
  try { payload = await response.json(); } catch (_) { payload = null; }
  if (!response.ok) {
    const error = new Error(payload && payload.code ? payload.code : `http_${response.status}`);
    error.status = response.status;
    error.payload = payload;
    throw error;
  }
  return payload;
}

function buildDevicePath(cursor) {
  const params = new URLSearchParams();
  params.set("limit", String(state.config.page_size));
  const modality = $("#modalityFilter").value;
  const desired = $("#desiredFilter").value;
  const actual = $("#actualFilter").value;
  if (modality) params.set("modality", modality);
  if (desired) params.set("desired_state", desired);
  if (actual) params.set("actual_state", actual);
  if (cursor) params.set("cursor", cursor);
  return `/api/v1/sites/${encodeURIComponent(state.siteId)}/devices?${params.toString()}`;
}

async function loadDevices(options = {}) {
  if (!state.token || state.loading) return;
  const cursor = state.cursors[state.pageIndex] || null;
  setLoading(true);
  clearDegraded();
  try {
    const payload = await apiFetch(buildDevicePath(cursor));
    state.items = Array.isArray(payload.items) ? payload.items : [];
    state.quota = payload.quota || null;
    state.nextCursor = payload.page && payload.page.has_more ? payload.page.next_cursor : null;
    for (const device of state.items) {
      if (state.selected.has(device.id)) {
        if (isPreviewEligible(device)) state.selected.set(device.id, device);
        else state.selected.delete(device.id);
      }
    }
    setConnected(true);
    renderAll();
    if (options.announce !== false) showToast(`已刷新第 ${state.pageIndex + 1} 页，共 ${state.items.length} 台设备`);
    return true;
  } catch (error) {
    handleLoadError(error);
    throw error;
  } finally {
    setLoading(false);
  }
}

function handleLoadError(error) {
  let title = "无法读取最新状态";
  let message = "未知不会显示为在线。请检查 Sense 进程、网络和依赖后重试。";
  if (error.status === 401) {
    state.token = "";
    setConnected(false);
    title = "会话无效或已过期";
    message = "Bearer token 已从页面内存清除，请重新建立会话。";
  } else if (error.status === 403) {
    title = "当前角色没有设备读取权限";
    message = "页面不会尝试绕过权限；请使用具备 devices:read 的会话。";
  } else if (error.status === 404) {
    title = "无法访问该站点";
    message = "目标不存在或当前会话无权访问，页面不会区分这两种情况。";
  } else if (error.payload && ["quota_projection_unavailable", "area_policy_unavailable"].includes(error.payload.code)) {
    title = "策略投影暂时不可用";
    message = "已有链路不会因此被静默停用；相关新写入应保持禁用。";
  }
  showDegraded(title, message);
  state.items = [];
  state.quota = null;
  renderAll();
}

function visibleItems() {
  const query = $("#deviceSearch").value.trim().toLocaleLowerCase("zh-CN");
  if (!query) return state.items;
  return state.items.filter((device) => `${device.name} ${device.serial_number}`.toLocaleLowerCase("zh-CN").includes(query));
}

function renderAll() {
  renderDevices();
  renderMetrics();
  renderHealth();
  renderOperations();
  renderSelection();
}

function renderMetrics() {
  const used = state.quota && Number.isInteger(state.quota.used_video_channels) ? state.quota.used_video_channels : null;
  const max = state.quota && Number.isInteger(state.quota.max_video_channels) ? state.quota.max_video_channels : null;
  setText("#quotaMetric", used === null || max === null ? "—" : `${used} / ${max}`);
  setText("#quotaHint", state.quota ? `投影状态：${state.quota.status || "未知"}` : "连接后读取 Bell 投影");
  setText("#pageMetric", state.items.length);
  setText("#convergedMetric", state.items.filter((device) => device.converged === true).length);
  const attention = state.items.filter(attentionNeeded).length;
  setText("#attentionMetric", attention);
  setText("#deviceCount", state.items.length);
  setText("#issueCount", attention);
}

function addTextCell(row, primary, secondary) {
  const cell = document.createElement("td");
  const strong = document.createElement("strong");
  strong.textContent = primary || "—";
  cell.appendChild(strong);
  if (secondary) {
    const small = document.createElement("small");
    small.textContent = secondary;
    cell.appendChild(small);
  }
  row.appendChild(cell);
}

function createPreviewCheckbox(device) {
  const label = document.createElement("label");
  label.className = "select-preview";
  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.checked = state.selected.has(device.id);
  checkbox.disabled = !isPreviewEligible(device);
  checkbox.setAttribute("aria-label", checkbox.disabled ? `${device.name} 当前不可预览` : `选择 ${device.name} 进行预览`);
  checkbox.addEventListener("change", () => toggleSelection(device, checkbox));
  label.appendChild(checkbox);
  return label;
}

function renderDevices() {
  const rows = $("#deviceRows");
  const cards = $("#deviceCards");
  rows.replaceChildren();
  cards.replaceChildren();
  const items = visibleItems();
  for (const device of items) {
    const row = document.createElement("tr");
    const selectCell = document.createElement("td");
    selectCell.appendChild(createPreviewCheckbox(device));
    row.appendChild(selectCell);
    addTextCell(row, device.name, device.serial_number);
    addTextCell(row, labels.modality[device.modality] || device.modality, (device.capabilities || []).map((value) => labels.capability[value] || value).join(" / "));
    const statusCell = document.createElement("td");
    statusCell.appendChild(createStatusBadge(device));
    row.appendChild(statusCell);
    addTextCell(row, labels.desired[device.desired_state] || device.desired_state, labels.actual[device.actual_state] || device.actual_state);
    addTextCell(row, device.area_id || "—", device.projection_versions && device.projection_versions.area_policy_source_version ? `策略 v${device.projection_versions.area_policy_source_version}` : "策略版本未知");
    addTextCell(row, formatTime(device.updated_at), device.next_attempt_at ? `重试 ${formatTime(device.next_attempt_at)}` : "");
    rows.appendChild(row);

    const card = document.createElement("article");
    card.className = "device-card";
    const cardHead = document.createElement("div");
    cardHead.className = "device-card-head";
    const identity = document.createElement("div");
    const name = document.createElement("strong");
    const serial = document.createElement("small");
    name.textContent = device.name;
    serial.textContent = device.serial_number;
    identity.append(name, serial);
    cardHead.append(identity, createPreviewCheckbox(device));
    const status = createStatusBadge(device);
    const details = document.createElement("dl");
    const pairs = [
      ["状态", "", status],
      ["模态", labels.modality[device.modality] || device.modality],
      ["期望 / 实际", `${labels.desired[device.desired_state] || device.desired_state} / ${labels.actual[device.actual_state] || device.actual_state}`],
      ["Area", device.area_id || "—"],
    ];
    for (const [term, value, node] of pairs) {
      const wrapper = document.createElement("div");
      const dt = document.createElement("dt");
      const dd = document.createElement("dd");
      dt.textContent = term;
      if (node) dd.appendChild(node); else dd.textContent = value;
      wrapper.append(dt, dd);
      details.appendChild(wrapper);
    }
    card.append(cardHead, details);
    cards.appendChild(card);
  }
  if (items.length === 0) {
    const empty = document.createElement("div");
    empty.className = "empty-compact";
    empty.textContent = state.token ? "当前页没有符合条件的设备。" : "请先建立会话。";
    cards.appendChild(empty.cloneNode(true));
    const cell = document.createElement("td");
    cell.colSpan = 7;
    cell.appendChild(empty);
    const row = document.createElement("tr");
    row.appendChild(cell);
    rows.appendChild(row);
  }
  setText("#pageLabel", `第 ${state.pageIndex + 1} 页 · 每页 ${state.config.page_size} · 当前显示 ${items.length} 项`);
  $("#prevPage").disabled = state.loading || state.pageIndex === 0;
  $("#nextPage").disabled = state.loading || !state.nextCursor;
}

function toggleSelection(device, checkbox) {
  if (checkbox.checked) {
    if (!isPreviewEligible(device)) {
      checkbox.checked = false;
      showToast("只有在线、已启用且已收敛的视频设备可以预览");
      return;
    }
    if (!state.selected.has(device.id) && state.selected.size >= state.config.max_active_previews) {
      checkbox.checked = false;
      showToast(`最多同时选择 ${state.config.max_active_previews} 路预览`);
      return;
    }
    state.selected.set(device.id, device);
  } else {
    state.selected.delete(device.id);
    if (state.previewing.has(device.id)) stopPreview(device.id);
  }
  renderSelection();
  renderDevices();
}

function renderSelection() {
  setText("#selectionCount", state.selected.size);
  setText("#previewCount", `${state.previewing.size}/${state.config.max_active_previews}`);
  $("#startPreview").disabled = state.selected.size === 0;
  $("#stopAll").disabled = state.previewing.size === 0;
}

function previewURL(deviceID) {
  const url = new URL(`${state.config.webrtc_base_url}/devices/${encodeURIComponent(deviceID)}`);
  url.searchParams.set("controls", "true");
  url.searchParams.set("muted", "true");
  url.searchParams.set("autoplay", "true");
  url.searchParams.set("playsInline", "true");
  return url.toString();
}

function startSelectedPreviews() {
  if (state.selected.size === 0) return;
  state.previewing = new Set(state.selected.keys());
  const grid = $("#previewGrid");
  grid.replaceChildren();
  for (const device of state.selected.values()) {
    const card = document.createElement("article");
    card.className = "preview-card";
    card.dataset.deviceId = device.id;
    const frame = document.createElement("div");
    frame.className = "preview-frame";
    const iframe = document.createElement("iframe");
    iframe.title = `${device.name} 实时预览`;
    iframe.loading = "eager";
    iframe.allow = "autoplay; fullscreen";
    iframe.sandbox = "allow-scripts allow-same-origin";
    iframe.referrerPolicy = "no-referrer";
    iframe.src = previewURL(device.id);
    frame.appendChild(iframe);
    const meta = document.createElement("div");
    meta.className = "preview-meta";
    const identity = document.createElement("div");
    const name = document.createElement("strong");
    const note = document.createElement("small");
    name.textContent = device.name;
    note.textContent = "MediaMTX WebRTC · 按需读取";
    identity.append(name, note);
    const stop = document.createElement("button");
    stop.type = "button";
    stop.className = "button secondary";
    stop.textContent = "停止";
    stop.addEventListener("click", () => stopPreview(device.id));
    meta.append(identity, stop);
    card.append(frame, meta);
    grid.appendChild(card);
  }
  switchView("monitor");
  renderSelection();
  showToast(`已按需启动 ${state.previewing.size} 路预览`);
}

function stopPreview(deviceID) {
  state.previewing.delete(deviceID);
  const card = $(`[data-device-id="${CSS.escape(deviceID)}"]`);
  if (card) {
    const iframe = card.querySelector("iframe");
    if (iframe) iframe.removeAttribute("src");
    card.remove();
  }
  if (state.previewing.size === 0) renderPreviewEmpty();
  renderSelection();
}

function stopAllPreviews() {
  for (const iframe of $$("#previewGrid iframe")) iframe.removeAttribute("src");
  state.previewing.clear();
  renderPreviewEmpty();
  renderSelection();
  showToast("全部预览已停止");
}

function renderPreviewEmpty() {
  const grid = $("#previewGrid");
  grid.replaceChildren();
  const empty = document.createElement("div");
  empty.className = "preview-empty";
  const mark = document.createElement("span");
  mark.setAttribute("aria-hidden", "true");
  mark.textContent = "▷";
  const title = document.createElement("strong");
  title.textContent = "尚未启动预览";
  const note = document.createElement("p");
  note.textContent = "前往设备页选择最多 4 路运行中的视频设备。";
  empty.append(mark, title, note);
  grid.appendChild(empty);
}

function renderHealth() {
  const container = $("#overviewHealth");
  container.replaceChildren();
  if (!state.token || state.items.length === 0) {
    const empty = document.createElement("div");
    empty.className = "empty-compact";
    empty.textContent = state.token ? "当前页没有设备事实。" : "建立会话后显示真实状态。";
    container.appendChild(empty);
    return;
  }
  const groups = [
    ["在线且已收敛", state.items.filter((device) => device.actual_state === "online" && device.converged).length, "设备可用于按需预览"],
    ["等待收敛", state.items.filter((device) => !device.converged).length, "期望 generation 尚未被完整观察"],
    ["离线或失败", state.items.filter((device) => ["offline", "failed"].includes(device.actual_state)).length, "查看重试时间和稳定错误码"],
  ];
  for (const [title, count, note] of groups) container.appendChild(createHealthItem(title, count, note));
}

function createHealthItem(title, count, note) {
  const item = document.createElement("div");
  item.className = "health-item";
  const text = document.createElement("div");
  const strong = document.createElement("strong");
  const small = document.createElement("small");
  strong.textContent = title;
  small.textContent = note;
  text.append(strong, small);
  const value = document.createElement("span");
  value.className = "value";
  value.textContent = String(count);
  item.append(text, value);
  return item;
}

function renderOperations() {
  const container = $("#operationIssues");
  container.replaceChildren();
  const issues = state.items.filter(attentionNeeded);
  if (issues.length === 0) {
    const empty = document.createElement("div");
    empty.className = "empty-compact";
    empty.textContent = state.token ? "当前页没有已知对账差异；这不代表未加载设备或其他基础设施正常。" : "建立会话后显示。";
    container.appendChild(empty);
    return;
  }
  for (const device of issues) {
    const message = device.last_error_code ? `错误 ${device.last_error_code}` : `generation ${device.observed_generation || 0} / ${device.generation || 0}`;
    container.appendChild(createHealthItem(device.name, device.failure_count || 0, device.next_attempt_at ? `${message} · 下次 ${formatTime(device.next_attempt_at)}` : message));
  }
}

function switchView(name) {
  $$(".view").forEach((view) => {
    const active = view.dataset.page === name;
    view.hidden = !active;
    view.classList.toggle("active", active);
  });
  $$('[data-view]').forEach((button) => {
    const active = button.dataset.view === name;
    button.toggleAttribute("aria-current", active);
  });
  $("#main-content").focus({ preventScroll: true });
  window.scrollTo({ top: 0, behavior: "auto" });
}

function resetPaging() {
  state.cursors = [null];
  state.pageIndex = 0;
  state.nextCursor = null;
}

async function connect(event) {
  event.preventDefault();
  const siteInput = $("#siteInput");
  const tokenInput = $("#tokenInput");
  const site = siteInput.value.trim();
  const token = tokenInput.value;
  const errorBox = $("#contextError");
  errorBox.hidden = true;
  if (!/^[A-Za-z0-9][A-Za-z0-9._:-]{0,63}$/.test(site)) {
    errorBox.textContent = "Site ID 格式无效：只能使用 1～64 位字母、数字、点、下划线、冒号或连字符。";
    errorBox.hidden = false;
    siteInput.focus();
    return;
  }
  if (!token || token.length > 4096) {
    errorBox.textContent = "请输入有效的 Bearer token。";
    errorBox.hidden = false;
    tokenInput.focus();
    return;
  }
  state.siteId = site;
  state.token = token;
  tokenInput.value = "";
  setText("#siteContext", site);
  resetPaging();
  try {
    await loadDevices({ announce: false });
    $("#contextDialog").close();
    showToast("会话已建立；token 仅驻留当前页面内存");
  } catch (error) {
    errorBox.textContent = error.status === 401 ? "认证失败，请检查 token 后重试。" : "无法读取该站点，请按页面提示检查权限或服务状态。";
    errorBox.hidden = false;
    $("#contextDialog").showModal();
  }
}

async function initialize() {
  try {
    const response = await fetch("/sense-console/config", { cache: "no-store" });
    if (!response.ok) throw new Error("config unavailable");
    state.config = await response.json();
    if (state.config.page_size !== 16 || state.config.max_active_previews !== 4 || state.config.recording_and_playback !== false) {
      throw new Error("unsafe console bounds");
    }
  } catch (_) {
    showDegraded("控制台配置不可用", "页面保持只读且不会尝试连接视频，请检查 Sense 启动配置。");
    $$("button, input, select").forEach((control) => { control.disabled = true; });
    return;
  }
  setConnected(false);
  renderAll();
  $("#contextDialog").showModal();
}

$$('[data-view]').forEach((button) => button.addEventListener("click", () => switchView(button.dataset.view)));
$$('[data-view-target]').forEach((button) => button.addEventListener("click", () => switchView(button.dataset.viewTarget)));
$("#changeContext").addEventListener("click", () => $("#contextDialog").showModal());
$("#closeContext").addEventListener("click", () => $("#contextDialog").close());
$("#cancelContext").addEventListener("click", () => $("#contextDialog").close());
$("#contextForm").addEventListener("submit", connect);
$("#refreshDevices").addEventListener("click", () => loadDevices());
$("#refreshOperations").addEventListener("click", () => loadDevices());
$("#retryLoad").addEventListener("click", () => state.token ? loadDevices() : $("#contextDialog").showModal());
$("#startPreview").addEventListener("click", startSelectedPreviews);
$("#stopAll").addEventListener("click", stopAllPreviews);
$("#deviceSearch").addEventListener("input", renderDevices);

for (const selector of ["#modalityFilter", "#desiredFilter", "#actualFilter"]) {
  $(selector).addEventListener("change", () => {
    resetPaging();
    if (state.token) loadDevices();
  });
}

$("#clearFilters").addEventListener("click", () => {
  $("#deviceSearch").value = "";
  $("#modalityFilter").value = "";
  $("#desiredFilter").value = "";
  $("#actualFilter").value = "";
  resetPaging();
  if (state.token) loadDevices(); else renderDevices();
});

$("#nextPage").addEventListener("click", async () => {
  if (!state.nextCursor) return;
  state.cursors[state.pageIndex + 1] = state.nextCursor;
  state.pageIndex += 1;
  try { await loadDevices(); } catch (_) { state.pageIndex -= 1; }
});

$("#prevPage").addEventListener("click", async () => {
  if (state.pageIndex === 0) return;
  state.pageIndex -= 1;
  try { await loadDevices(); } catch (_) { state.pageIndex += 1; }
});

window.addEventListener("beforeunload", () => {
  state.token = "";
  for (const iframe of $$("#previewGrid iframe")) iframe.removeAttribute("src");
});

initialize();