import { apiFetch } from "./api.js";
import { dom } from "./dom.js";
import { loadEvents } from "./events.js";
import { renderEquipments } from "./equipment.js";
import { state } from "./state.js";

function equipmentCount(unitId) {
  return state.equipments.filter((item) => {
    const equipment = item.equipment || item;
    return equipment.unit_id === unitId;
  }).length;
}

export function renderUnitOptions(selected = "", target = dom.equipmentUnitId, includeEmpty = true) {
  if (!target) {
    return;
  }

  const options = [];
  if (includeEmpty) {
    options.push('<option value="">未绑定单元</option>');
  }

  state.units.forEach((unit) => {
    const isSelected = unit.id === selected ? "selected" : "";
    options.push(`<option value="${unit.id}" ${isSelected}>${unit.code} / ${unit.name}</option>`);
  });

  target.innerHTML = options.join("");
}

export function resetUnitForm() {
  dom.unitForm.reset();
  dom.unitId.value = "";
  dom.unitEnabled.checked = true;
  dom.unitManualAck.checked = true;
  dom.unitRunTimeSec.value = "0";
  dom.unitStopTimeSec.value = "0";
  dom.unitAccTimeSec.value = "0";
  dom.unitBlTimeSec.value = "0";
}

function openUnitModal() {
  dom.unitModal.classList.remove("hidden");
}

export function closeUnitModal() {
  dom.unitModal.classList.add("hidden");
}

export function openCreateUnitModal() {
  resetUnitForm();
  openUnitModal();
}

function openEditUnitModal(unit) {
  dom.unitId.value = unit.id || "";
  dom.unitCode.value = unit.code || "";
  dom.unitName.value = unit.name || "";
  dom.unitDescription.value = unit.description || "";
  dom.unitEnabled.checked = !!unit.enabled;
  dom.unitRunTimeSec.value = String(unit.run_time_sec ?? 0);
  dom.unitStopTimeSec.value = String(unit.stop_time_sec ?? 0);
  dom.unitAccTimeSec.value = String(unit.acc_time_sec ?? 0);
  dom.unitBlTimeSec.value = String(unit.bl_time_sec ?? 0);
  dom.unitManualAck.checked = !!unit.require_manual_ack_after_fault;
  openUnitModal();
}

async function selectUnit(unitId) {
  state.selectedUnitId = state.selectedUnitId === unitId ? null : unitId;
  renderUnits();
  renderEquipments();
  await loadEvents();
}

export function renderUnits() {
  dom.unitList.innerHTML = "";

  if (!state.units.length) {
    dom.unitList.innerHTML = '<div class="list-item"><div class="muted">暂无控制单元</div></div>';
    return;
  }

  state.units.forEach((unit) => {
    const card = document.createElement("div");
    const selected = state.selectedUnitId === unit.id;
    card.className = `list-item unit-card ${selected ? "selected" : ""}`;
    card.innerHTML = `
      <div class="row">
        <strong>${unit.code}</strong>
        <span class="badge ${unit.enabled ? "" : "offline"}">${unit.enabled ? "ENABLED" : "DISABLED"}</span>
      </div>
      <div>${unit.name}</div>
      <div class="muted">设备 ${equipmentCount(unit.id)} 台</div>
      <div class="muted">Run ${unit.run_time_sec}s / Stop ${unit.stop_time_sec}s / Acc ${unit.acc_time_sec}s / BL ${unit.bl_time_sec}s</div>
      <div class="row unit-card-actions"></div>
    `;

    card.addEventListener("click", () => {
      selectUnit(unit.id).catch((error) => {
        dom.statusText.textContent = error.message;
      });
    });

    const actions = card.querySelector(".unit-card-actions");

    const editBtn = document.createElement("button");
    editBtn.className = "secondary";
    editBtn.textContent = "Edit";
    editBtn.addEventListener("click", (event) => {
      event.stopPropagation();
      openEditUnitModal(unit);
    });

    const deleteBtn = document.createElement("button");
    deleteBtn.className = "danger";
    deleteBtn.textContent = "Delete";
    deleteBtn.addEventListener("click", (event) => {
      event.stopPropagation();
      deleteUnit(unit.id).catch((error) => {
        dom.statusText.textContent = error.message;
      });
    });

    actions.append(editBtn, deleteBtn);
    dom.unitList.appendChild(card);
  });
}

export async function loadUnits() {
  const response = await apiFetch("/api/unit?page=1&page_size=-1");
  state.units = response.data || [];
  state.unitMap = new Map(state.units.map((unit) => [unit.id, unit]));

  if (state.selectedUnitId && !state.unitMap.has(state.selectedUnitId)) {
    state.selectedUnitId = null;
  }

  renderUnits();
  renderUnitOptions(dom.equipmentUnitId?.value || "", dom.equipmentUnitId);
  renderUnitOptions(dom.equipmentBatchUnitId?.value || "", dom.equipmentBatchUnitId);
}

export async function saveUnit(event) {
  event.preventDefault();

  const payload = {
    code: dom.unitCode.value.trim(),
    name: dom.unitName.value.trim(),
    description: dom.unitDescription.value.trim() || null,
    enabled: dom.unitEnabled.checked,
    run_time_sec: Number(dom.unitRunTimeSec.value || 0),
    stop_time_sec: Number(dom.unitStopTimeSec.value || 0),
    acc_time_sec: Number(dom.unitAccTimeSec.value || 0),
    bl_time_sec: Number(dom.unitBlTimeSec.value || 0),
    require_manual_ack_after_fault: dom.unitManualAck.checked,
  };

  const id = dom.unitId.value;
  await apiFetch(id ? `/api/unit/${id}` : "/api/unit", {
    method: id ? "PUT" : "POST",
    body: JSON.stringify(payload),
  });

  closeUnitModal();
  await loadUnits();
  renderEquipments();
  await loadEvents();
}

export async function deleteUnit(unitId) {
  if (!window.confirm("Delete this unit?")) {
    return;
  }

  await apiFetch(`/api/unit/${unitId}`, { method: "DELETE" });
  if (state.selectedUnitId === unitId) {
    state.selectedUnitId = null;
  }
  closeUnitModal();
  await loadUnits();
  renderEquipments();
  await loadEvents();
}