(function () {
  "use strict";

  const qs = (selector, root = document) => root.querySelector(selector);
  const qsa = (selector, root = document) => [...root.querySelectorAll(selector)];
  const toastRegion = qs("[data-toast-region]");
  let lastFocused = null;

  function toast(message) {
    if (!toastRegion) return;
    const item = document.createElement("div");
    item.className = "toast";
    item.setAttribute("role", "status");
    item.textContent = message;
    toastRegion.appendChild(item);
    window.setTimeout(() => item.remove(), 3600);
  }

  function setView(name) {
    qsa("[data-view]").forEach((view) => {
      const active = view.dataset.view === name;
      view.classList.toggle("active", active);
      view.hidden = !active;
    });
    qsa("[data-view-target]").forEach((button) => {
      const active = button.dataset.viewTarget === name;
      button.classList.toggle("active", active);
      if (active) button.setAttribute("aria-current", "page");
      else button.removeAttribute("aria-current");
    });
    const selected = qs(`[data-view-target="${name}"]`);
    const title = selected?.dataset.title || selected?.textContent.trim();
    const pageName = qs("[data-page-name]");
    if (pageName && title) pageName.textContent = title;
    qs("#main-content")?.focus({ preventScroll: true });
    qs("[data-sidebar]")?.classList.remove("open");
    qs("[data-mobile-menu]")?.setAttribute("aria-expanded", "false");
  }

  qsa("[data-view-target]").forEach((button) => {
    button.addEventListener("click", () => setView(button.dataset.viewTarget));
  });

  qs("[data-mobile-menu]")?.addEventListener("click", () => {
    const sidebar = qs("[data-sidebar]");
    const open = sidebar.classList.toggle("open");
    qs("[data-mobile-menu]").setAttribute("aria-expanded", String(open));
  });

  function openModal(id, trigger) {
    const backdrop = qs(`#${id}`);
    if (!backdrop) return;
    lastFocused = trigger || document.activeElement;
    backdrop.classList.add("open");
    backdrop.setAttribute("aria-hidden", "false");
    document.body.style.overflow = "hidden";
    qs("input, select, textarea, button", qs(".modal", backdrop))?.focus();
  }

  function closeModal(backdrop) {
    if (!backdrop) return;
    backdrop.classList.remove("open");
    backdrop.setAttribute("aria-hidden", "true");
    document.body.style.overflow = "";
    lastFocused?.focus();
  }

  qsa("[data-open-modal]").forEach((trigger) => {
    trigger.addEventListener("click", () => openModal(trigger.dataset.openModal, trigger));
  });
  qsa("[data-close-modal]").forEach((trigger) => {
    trigger.addEventListener("click", () => closeModal(trigger.closest(".modal-backdrop")));
  });
  qsa(".modal-backdrop").forEach((backdrop) => {
    backdrop.addEventListener("mousedown", (event) => {
      if (event.target === backdrop) closeModal(backdrop);
    });
  });
  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") closeModal(qs(".modal-backdrop.open"));
  });

  qsa("[role='tab'][data-tab-target]").forEach((tab) => {
    tab.addEventListener("click", () => {
      const group = tab.closest("[data-tabs]");
      qsa("[role='tab']", group).forEach((item) => {
        item.setAttribute("aria-selected", String(item === tab));
        item.tabIndex = item === tab ? 0 : -1;
      });
      qsa(".tab-panel", group.parentElement).forEach((panel) => {
        const active = panel.id === tab.dataset.tabTarget;
        panel.classList.toggle("active", active);
        panel.hidden = !active;
      });
    });
  });

  qsa("[data-filter-input]").forEach((input) => {
    input.addEventListener("input", () => {
      const table = qs(input.dataset.filterInput);
      const query = input.value.trim().toLocaleLowerCase("zh-CN");
      qsa("tbody tr", table).forEach((row) => {
        row.hidden = query && !row.textContent.toLocaleLowerCase("zh-CN").includes(query);
      });
    });
  });

  qsa("[data-toast]").forEach((button) => {
    button.addEventListener("click", () => toast(button.dataset.toast));
  });

  const addDevice = qs("[data-action='add-device']");
  addDevice?.addEventListener("click", () => {
    const name = qs("#device-name")?.value.trim() || "新摄像头";
    const address = qs("#device-address")?.value.trim() || "192.168.10.88";
    const tbody = qs("#device-table tbody");
    if (tbody) {
      const row = document.createElement("tr");
      row.innerHTML = `<td><span class="table-title"></span><span class="table-subtitle">待探测 · video</span></td><td></td><td><span class="status status-warning">待激活</span></td><td>尚未选择</td><td><button class="btn btn-quiet" data-toast="已打开设备探测流程">查看</button></td>`;
      qs(".table-title", row).textContent = name;
      row.children[1].textContent = address;
      qs("button", row).addEventListener("click", () => toast("已打开设备探测流程"));
      tbody.prepend(row);
    }
    closeModal(addDevice.closest(".modal-backdrop"));
    toast(`${name} 已保存为待激活设备`);
  });

  let frameCount = 12842;
  qs("[data-action='run-frame']")?.addEventListener("click", (event) => {
    event.currentTarget.disabled = true;
    event.currentTarget.textContent = "处理中…";
    window.setTimeout(() => {
      frameCount += 1;
      const counter = qs("[data-frame-count]");
      if (counter) counter.textContent = frameCount.toLocaleString("zh-CN");
      const events = qs("[data-brain-events]");
      if (events) {
        const item = document.createElement("div");
        item.className = "activity-item";
        item.innerHTML = `<div class="activity-icon"><svg aria-hidden="true"><use href="#icon-activity"></use></svg></div><div><div class="activity-title">方向越线候选</div><div class="activity-meta">synthetic-camera-01 · 置信度 0.91 · 项目内事件</div></div><div class="activity-time">刚刚</div>`;
        events.prepend(item);
      }
      event.currentTarget.disabled = false;
      event.currentTarget.textContent = "处理下一帧";
      toast("已完成一帧推理并生成项目内候选事件");
    }, 520);
  });

  qs("[data-action='inject-event']")?.addEventListener("click", (event) => {
    const button = event.currentTarget;
    const idleText = button.textContent;
    button.disabled = true;
    button.textContent = "注入中…";
    window.setTimeout(() => {
      const count = qs("[data-alert-count]");
      if (count) count.textContent = String(Number(count.textContent) + 1);
      button.disabled = false;
      button.textContent = idleText;
      closeModal(button.closest(".modal-backdrop"));
      toast("合成事件已校验并生成新的 Alert");
    }, 520);
  });

  const alertState = qs("[data-alert-state]");
  const ackButton = qs("[data-action='ack-alert']");
  const closeButton = qs("[data-action='close-alert']");
  ackButton?.addEventListener("click", () => {
    alertState.textContent = "已确认";
    alertState.className = "status status-warning el-tag";
    ackButton.disabled = true;
    closeButton.disabled = false;
    const timeline = qs("[data-alert-timeline]");
    timeline?.insertAdjacentHTML("beforeend", `<div class="timeline-item"><div class="timeline-title">王值班员确认预警</div><div class="timeline-meta">刚刚 · 首个成功 ack · 已写入审计</div></div>`);
    toast("预警已由王值班员确认");
  });
  closeButton?.addEventListener("click", () => {
    alertState.textContent = "已关闭";
    alertState.className = "status status-success el-tag";
    closeButton.disabled = true;
    qs("[data-alert-timeline]")?.insertAdjacentHTML("beforeend", `<div class="timeline-item"><div class="timeline-title">处置完成并关闭</div><div class="timeline-meta">刚刚 · 原始 Event 保持不变</div></div>`);
    toast("Alert 已关闭，原始 Event 未修改");
  });

  qsa("[data-select-alert]").forEach((row) => {
    const select = () => {
      qsa("[data-select-alert]").forEach((item) => item.classList.toggle("selected", item === row));
      toast(`已选择：${row.dataset.selectAlert}`);
    };
    row.addEventListener("click", select);
    if (row.tagName !== "BUTTON") {
      row.addEventListener("keydown", (event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          select();
        }
      });
    }
  });

  const initial = qs("[data-view-target].active")?.dataset.viewTarget || qs("[data-view]")?.dataset.view;
  if (initial) setView(initial);
})();