(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 startButton = qs("[data-action='start-alert']");
  startButton?.addEventListener("click", () => {
    if (started) return;
    started = true;
    startButton.disabled = true;
    startButton.textContent = "已由你开始处理";
    const state = qs("[data-alert-state]");
    state.textContent = "处理中";
    state.className = "status status-warning el-tag";
    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);
    qs("[data-owned-alert]").hidden = false;
    qs("[data-working-total]").textContent = "3 条";
    toast("已开始处理；其他人会看到这条预警由王老师负责");
  });

  qs("[data-simulate-conflict]")?.addEventListener("click", () => {
    toast("这条预警已由李老师开始处理，你可以查看进展但不能重复领取");
  });

  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 note = qs("#result-note").value.trim();
    const tbody = qs("[data-history-body]");
    const row = document.createElement("tr");
    const statusClass = selected.value === "确认有危险" ? "status-danger" : selected.value === "现场正常" ? "status-success" : "status-neutral";
    row.innerHTML = `<td><span class="table-title">危险区域有人进入</span><span class="table-subtitle"></span></td><td>北围墙 01</td><td><span class="status ${statusClass} el-tag"></span></td><td>王老师</td><td>刚刚</td><td><button class="btn btn-quiet el-button-link">查看记录</button></td>`;
    qs(".table-subtitle", row).textContent = note || "未填写补充说明";
    qs(".status", row).textContent = selected.value;
    qs("button", row).addEventListener("click", () => toast("已打开完整处理记录"));
    tbody.prepend(row);
    qs("[data-owned-alert]").hidden = true;
    qs("[data-working-total]").textContent = "2 条";
    qs("[data-working-count]").textContent = String(Math.max(0, number("[data-working-count]") - 1));
    qs("[data-completed-count]").textContent = String(number("[data-completed-count]") + 1);
    qs("[data-close-modal]", qs("#finish-alert"))?.click();
    toast(`处理已完成，现场结果：${selected.value}`);
  });
})();