import { apiFetch } from "./api.js";
import { dom } from "./dom.js";
import { state } from "./state.js";

function formatTime(value) {
  if (!value) {
    return "--";
  }
  return value;
}

export function renderEvents() {
  dom.eventList.innerHTML = "";

  if (!state.events.length) {
    dom.eventList.innerHTML = '<div class="list-item"><div class="muted">暂无事件</div></div>';
    return;
  }

  state.events.forEach((item) => {
    const row = document.createElement("div");
    row.className = "event-card";
    row.innerHTML = `<div class="event-meta"><span class="badge">${(item.level || "info").toUpperCase()}</span><span class="muted event-time">${formatTime(item.created_at)}</span><strong class="event-type">${item.event_type}</strong></div><div class="event-message">${item.message}</div>`;
    dom.eventList.appendChild(row);
  });
}

function matchesCurrentFilter(item) {
  if (state.selectedUnitId && item.unit_id !== state.selectedUnitId) {
    return false;
  }
  return true;
}

export function prependEvent(item) {
  if (!matchesCurrentFilter(item)) {
    return;
  }

  state.events = [item, ...state.events.filter((existing) => existing.id !== item.id)].slice(0, 20);
  renderEvents();
}

export async function loadEvents() {
  const params = new URLSearchParams({
    page: "1",
    page_size: "20",
  });

  if (state.selectedUnitId) {
    params.set("unit_id", state.selectedUnitId);
  }

  const response = await apiFetch(`/api/event?${params.toString()}`);
  state.events = response.data || [];
  renderEvents();
}