(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]");
  const 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);
  };
  const number = (selector) => Number(qs(selector)?.textContent || 0);

  qsa("[data-select-alert]").forEach((row) => row.addEventListener("click", () => {
    qs("[data-detail-title]").textContent = row.dataset.selectAlert;
    qs("[data-detail-what]").textContent = row.dataset.selectAlert;
    qs("[data-detail-location]").textContent = row.dataset.location;
    qs("[data-detail-meta]").textContent = `${row.dataset.location} · ${row.dataset.time}`;
    qs("[data-detail-suggestion]").textContent = row.dataset.suggestion;
    const state = qs("[data-alert-state]");
    state.textContent = row.dataset.risk;
    state.className = `status ${row.dataset.risk === "高风险" ? "status-danger" : "status-warning"} el-tag`;
  }));

  let started = false;
  const startButtons = qsa("[data-action='start-alert'], [data-action='table-start-alert']");
  const startAlert = () => {
    if (started) {
      toast("该预警已由王值班员开始处理");
      return;
    }
    started = true;
    startButtons.forEach((button) => {
      button.disabled = true;
      button.textContent = "已确认";
    });
    const dashboardState = qs("[data-alert-state]");
    dashboardState.textContent = "处理中";
    dashboardState.className = "status status-warning el-tag";
    const tableState = qs("[data-table-alert-state]");
    tableState.textContent = "处理中";
    tableState.className = "status status-warning el-tag";
    qs("[data-table-owner]").textContent = "王值班员";
    qs("[data-finish-from-table]").disabled = false;
    qs("[data-pending-count]").textContent = String(Math.max(0, number("[data-pending-count]") - 1));
    qs("[data-working-count]").textContent = String(number("[data-working-count]") + 1);
    toast("预警已确认并由王值班员开始处理");
  };
  startButtons.forEach((button) => button.addEventListener("click", startAlert));

  qsa("input[name='result']").forEach((input) => input.addEventListener("change", () => {
    qs("[data-result-error]").hidden = true;
  }));

  qs("[data-action='finish-alert']")?.addEventListener("click", () => {
    const selected = qs("input[name='result']:checked");
    const error = qs("[data-result-error]");
    if (!selected) {
      error.hidden = false;
      qs("input[name='result']")?.focus();
      return;
    }
    const tableState = qs("[data-table-alert-state]");
    tableState.textContent = "已关闭";
    tableState.className = "status status-success el-tag";
    qs("[data-finish-from-table]").disabled = true;
    qs("[data-completed-count]").textContent = String(number("[data-completed-count]") + 1);
    qs("[data-working-count]").textContent = String(Math.max(0, number("[data-working-count]") - 1));
    qs("[data-close-modal]", qs("#finish-alert"))?.click();
    toast(`预警已关闭，处理结果：${selected.value}`);
  });
})();