Comtropy_CargoRadar/apps/web/public/app.js

const state = {
  map: null,
  markers: new Map(),
  infoOverlay: null,
  drivers: new Map(),
  locations: new Map(),
  selectedDriverId: "",
  eventSource: null,
  activeView: "locations",
  adminToken: new URLSearchParams(window.location.search).get("adminToken") ||
    window.localStorage.getItem("cargoRadarAdminToken") ||
    ""
};

const elements = {
  connectionStatus: document.getElementById("connectionStatus"),
  refreshButton: document.getElementById("refreshButton"),
  demoButton: document.getElementById("demoButton"),
  locationsTab: document.getElementById("locationsTab"),
  driversTab: document.getElementById("driversTab"),
  locationsPanel: document.getElementById("locationsPanel"),
  driversPanel: document.getElementById("driversPanel"),
  vehicleList: document.getElementById("vehicleList"),
  mapMessage: document.getElementById("mapMessage"),
  totalCount: document.getElementById("totalCount"),
  activeCount: document.getElementById("activeCount"),
  staleCount: document.getElementById("staleCount"),
  lastUpdated: document.getElementById("lastUpdated"),
  driverForm: document.getElementById("driverForm"),
  driverNameInput: document.getElementById("driverNameInput"),
  vehicleNoInput: document.getElementById("vehicleNoInput"),
  phoneInput: document.getElementById("phoneInput"),
  driverIdInput: document.getElementById("driverIdInput"),
  driverCount: document.getElementById("driverCount"),
  driverList: document.getElementById("driverList"),
  historyDrawer: document.getElementById("historyDrawer"),
  historyCloseButton: document.getElementById("historyCloseButton"),
  historyTitle: document.getElementById("historyTitle"),
  historySummary: document.getElementById("historySummary"),
  historyList: document.getElementById("historyList")
};

document.addEventListener("DOMContentLoaded", () => {
  initializeMap();
  bindActions();
  refreshDrivers();
  refreshLatestLocations();
  connectEvents();
});

async function initializeMap() {
  const kakaoJavaScriptKey = window.CARGORADAR_CONFIG?.kakaoJavaScriptKey || "";

  if (!kakaoJavaScriptKey) {
    showMapMessage("Kakao JavaScript 키가 설정되지 않았습니다.");
    return;
  }

  try {
    await loadKakaoMapsSdk(kakaoJavaScriptKey);
    const center = new kakao.maps.LatLng(36.45, 127.85);
    state.map = new kakao.maps.Map(document.getElementById("map"), {
      center,
      level: 13
    });

    state.map.addControl(new kakao.maps.ZoomControl(), kakao.maps.ControlPosition.RIGHT);
    state.map.addControl(new kakao.maps.MapTypeControl(), kakao.maps.ControlPosition.TOPRIGHT);
    hideMapMessage();
    updateMarkers({ fitBounds: state.locations.size > 0 });
  } catch (error) {
    console.error(error);
    showMapMessage("Kakao 지도 키 또는 허용 도메인을 확인하세요.");
  }
}

function loadKakaoMapsSdk(appKey) {
  return new Promise((resolve, reject) => {
    if (window.kakao?.maps) {
      kakao.maps.load(resolve);
      return;
    }

    const script = document.createElement("script");
    script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${encodeURIComponent(appKey)}&autoload=false`;
    script.async = true;
    script.onload = () => kakao.maps.load(resolve);
    script.onerror = () => reject(new Error("kakao_maps_load_failed"));
    document.head.appendChild(script);
  });
}

function bindActions() {
  elements.refreshButton.addEventListener("click", refreshLatestLocations);
  elements.demoButton.addEventListener("click", postDemoLocation);
  elements.locationsTab.addEventListener("click", () => setActiveView("locations"));
  elements.driversTab.addEventListener("click", () => setActiveView("drivers"));
  elements.driverForm.addEventListener("submit", submitDriverForm);
  elements.historyCloseButton.addEventListener("click", closeHistoryDrawer);
}

function setActiveView(view) {
  state.activeView = view;
  elements.locationsTab.classList.toggle("is-active", view === "locations");
  elements.driversTab.classList.toggle("is-active", view === "drivers");
  elements.locationsPanel.classList.toggle("is-hidden", view !== "locations");
  elements.driversPanel.classList.toggle("is-hidden", view !== "drivers");
}

async function refreshLatestLocations() {
  try {
    setConnectionStatus("연결됨", "online");
    const data = await fetchJson("/api/v1/locations/latest", {
      headers: adminHeaders()
    });
    replaceLocations(data.locations || []);
  } catch (error) {
    console.error(error);
    if (error.message === "invalid_admin_token") {
      requestAdminToken();
      return;
    }
    setConnectionStatus("조회 실패", "error");
  }
}

async function refreshDrivers() {
  try {
    const data = await fetchJson("/api/v1/drivers", {
      headers: adminHeaders()
    });
    replaceDrivers(data.drivers || []);
  } catch (error) {
    console.error(error);
    if (error.message === "invalid_admin_token") {
      requestAdminToken();
    }
  }
}

function connectEvents() {
  if (state.eventSource) {
    state.eventSource.close();
  }

  state.eventSource = new EventSource(withAdminToken("/api/v1/events"));
  state.eventSource.addEventListener("open", () => setConnectionStatus("실시간 연결", "online"));
  state.eventSource.addEventListener("snapshot", (event) => {
    const payload = JSON.parse(event.data);
    replaceLocations(payload.locations || []);
  });
  state.eventSource.addEventListener("location.updated", (event) => {
    upsertLocation(JSON.parse(event.data), { focus: true });
  });
  state.eventSource.addEventListener("drivers.updated", (event) => {
    const payload = JSON.parse(event.data);
    replaceDrivers(payload.drivers || []);
  });
  state.eventSource.addEventListener("error", () => setConnectionStatus("재연결 중", "error"));
}

async function postDemoLocation() {
  const driver = getDemoDriver();
  const now = Date.now();
  const latitude = 37.5665 + Math.sin(now / 60000) * 0.03;
  const longitude = 126.978 + Math.cos(now / 60000) * 0.04;

  try {
    await fetchJson("/api/v1/locations", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Device-Token": driver.token
      },
      body: JSON.stringify({
        driverId: driver.driverId,
        vehicleNo: driver.vehicleNo,
        latitude,
        longitude,
        accuracy: 12,
        speed: 42,
        heading: Math.round((now / 1000) % 360),
        provider: "demo",
        recordedAt: new Date().toISOString()
      })
    });
  } catch (error) {
    console.error(error);
    setConnectionStatus("전송 실패", "error");
  }
}

function getDemoDriver() {
  const enabledDriver = [...state.drivers.values()].find((driver) => driver.enabled && driver.token);
  return enabledDriver || {
    driverId: "demo-driver",
    vehicleNo: "SEOUL-12-3456",
    token: "demo-token"
  };
}

function replaceLocations(locations) {
  state.locations.clear();
  for (const location of locations) {
    state.locations.set(location.driverId, location);
  }
  render();
  updateMarkers({ fitBounds: locations.length > 0 });
}

function replaceDrivers(drivers) {
  state.drivers.clear();
  for (const driver of drivers) {
    state.drivers.set(driver.driverId, driver);
  }
  renderDrivers();
}

function upsertLocation(location, options = {}) {
  state.locations.set(location.driverId, location);
  render();
  updateMarker(location);

  if (state.selectedDriverId === location.driverId && !elements.historyDrawer.classList.contains("is-hidden")) {
    loadLocationHistory(location);
  }

  if (options.focus && state.map && window.kakao?.maps) {
    state.map.setCenter(new kakao.maps.LatLng(location.latitude, location.longitude));
  }
}

function render() {
  const locations = [...state.locations.values()].sort((left, right) => {
    return new Date(right.receivedAt).getTime() - new Date(left.receivedAt).getTime();
  });

  const counts = locations.reduce(
    (accumulator, location) => {
      const status = getLocationStatus(location);
      accumulator.total += 1;
      if (status.key === "active") accumulator.active += 1;
      if (status.key !== "active") accumulator.stale += 1;
      return accumulator;
    },
    { total: 0, active: 0, stale: 0 }
  );

  elements.totalCount.textContent = String(counts.total);
  elements.activeCount.textContent = String(counts.active);
  elements.staleCount.textContent = String(counts.stale);
  elements.lastUpdated.textContent = locations[0] ? formatDateTime(locations[0].receivedAt) : "-";

  elements.vehicleList.replaceChildren();

  if (!locations.length) {
    const empty = document.createElement("div");
    empty.className = "empty-state";
    empty.textContent = "수신된 차량 위치가 없습니다.";
    elements.vehicleList.append(empty);
    return;
  }

  for (const location of locations) {
    elements.vehicleList.append(createVehicleItem(location));
  }
}

function renderDrivers() {
  const drivers = [...state.drivers.values()].sort((left, right) => {
    return String(left.vehicleNo || left.driverId).localeCompare(String(right.vehicleNo || right.driverId), "ko");
  });

  elements.driverCount.textContent = `${drivers.length}명`;
  elements.driverList.replaceChildren();

  if (!drivers.length) {
    const empty = document.createElement("div");
    empty.className = "empty-state";
    empty.textContent = "등록된 기사가 없습니다.";
    elements.driverList.append(empty);
    return;
  }

  for (const driver of drivers) {
    elements.driverList.append(createDriverItem(driver));
  }
}

function createVehicleItem(location) {
  const status = getLocationStatus(location);
  const item = document.createElement("article");
  item.className = "vehicle-item";
  item.tabIndex = 0;

  const main = document.createElement("div");
  main.className = "vehicle-main";

  const title = document.createElement("div");
  title.className = "vehicle-title";

  const badge = document.createElement("span");
  badge.className = `badge ${status.key}`;
  badge.textContent = status.label;

  const vehicleNo = document.createElement("strong");
  vehicleNo.textContent = location.vehicleNo || location.driverId;

  title.append(badge, vehicleNo);

  const meta = document.createElement("div");
  meta.className = "vehicle-meta";
  meta.textContent = `${location.driverName || location.driverId} · ${formatDateTime(location.receivedAt)} · ${formatCoordinate(location.latitude)}, ${formatCoordinate(location.longitude)}`;

  const speed = document.createElement("div");
  speed.className = "speed";
  speed.textContent = location.speed === null || location.speed === undefined ? "-" : `${Math.round(location.speed)} km/h`;

  main.append(title, meta);
  item.append(main, speed);

  item.addEventListener("click", () => focusLocation(location));
  item.addEventListener("keydown", (event) => {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      focusLocation(location);
    }
  });

  return item;
}

function createDriverItem(driver) {
  const item = document.createElement("article");
  item.className = "driver-item";

  const head = document.createElement("div");
  head.className = "driver-head";

  const title = document.createElement("div");
  title.className = "driver-title";

  const name = document.createElement("strong");
  name.textContent = `${driver.vehicleNo || driver.driverId} · ${driver.name}`;

  const meta = document.createElement("div");
  meta.className = "vehicle-meta";
  meta.textContent = [driver.driverId, driver.phone].filter(Boolean).join(" · ");

  title.append(name, meta);

  const badge = document.createElement("span");
  badge.className = `badge ${driver.enabled ? "active" : "offline"}`;
  badge.textContent = driver.enabled ? "사용" : "중지";

  head.append(title, badge);

  const tokenRow = document.createElement("div");
  tokenRow.className = "driver-token";

  const token = document.createElement("code");
  token.textContent = driver.token || "-";

  const copyButton = document.createElement("button");
  copyButton.type = "button";
  copyButton.textContent = "복사";
  copyButton.addEventListener("click", () => copyToken(driver.token));

  tokenRow.append(token, copyButton);

  const actions = document.createElement("div");
  actions.className = "driver-actions";

  const toggleButton = document.createElement("button");
  toggleButton.type = "button";
  toggleButton.textContent = driver.enabled ? "중지" : "사용";
  toggleButton.addEventListener("click", () => updateDriver(driver.driverId, { enabled: !driver.enabled }));

  const tokenButton = document.createElement("button");
  tokenButton.type = "button";
  tokenButton.textContent = "토큰 재발급";
  tokenButton.addEventListener("click", () => updateDriver(driver.driverId, { regenerateToken: true }));

  const deleteButton = document.createElement("button");
  deleteButton.type = "button";
  deleteButton.textContent = "삭제";
  deleteButton.addEventListener("click", () => deleteDriver(driver));

  actions.append(toggleButton, tokenButton, deleteButton);
  item.append(head, tokenRow, actions);
  return item;
}

async function submitDriverForm(event) {
  event.preventDefault();

  const payload = {
    name: elements.driverNameInput.value.trim(),
    vehicleNo: elements.vehicleNoInput.value.trim(),
    phone: elements.phoneInput.value.trim(),
    driverId: elements.driverIdInput.value.trim()
  };

  try {
    await fetchJson("/api/v1/drivers", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        ...adminHeaders()
      },
      body: JSON.stringify(payload)
    });
    elements.driverForm.reset();
    await refreshDrivers();
  } catch (error) {
    console.error(error);
    window.alert(`등록 실패: ${error.message}`);
  }
}

async function updateDriver(driverId, patch) {
  try {
    const data = await fetchJson(`/api/v1/drivers/${encodeURIComponent(driverId)}`, {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
        ...adminHeaders()
      },
      body: JSON.stringify(patch)
    });
    state.drivers.set(data.driver.driverId, data.driver);
    renderDrivers();
  } catch (error) {
    console.error(error);
    window.alert(`수정 실패: ${error.message}`);
  }
}

async function deleteDriver(driver) {
  const confirmed = window.confirm(`${driver.vehicleNo || driver.driverId} 삭제`);
  if (!confirmed) return;

  try {
    await fetchJson(`/api/v1/drivers/${encodeURIComponent(driver.driverId)}`, {
      method: "DELETE",
      headers: adminHeaders()
    });
    state.drivers.delete(driver.driverId);
    renderDrivers();
  } catch (error) {
    console.error(error);
    window.alert(`삭제 실패: ${error.message}`);
  }
}

async function copyToken(token) {
  if (!token) return;

  try {
    await navigator.clipboard.writeText(token);
    setConnectionStatus("토큰 복사됨", "online");
  } catch {
    window.prompt("기기 토큰", token);
  }
}

function updateMarkers({ fitBounds = false } = {}) {
  if (!state.map || !window.kakao?.maps) return;

  const activeIds = new Set(state.locations.keys());

  for (const [driverId, markerOverlay] of state.markers) {
    if (!activeIds.has(driverId)) {
      markerOverlay.setMap(null);
      state.markers.delete(driverId);
    }
  }

  for (const location of state.locations.values()) {
    updateMarker(location);
  }

  if (fitBounds && state.markers.size > 0) {
    const bounds = new kakao.maps.LatLngBounds();
    for (const location of state.locations.values()) {
      bounds.extend(new kakao.maps.LatLng(location.latitude, location.longitude));
    }
    state.map.setBounds(bounds);
  }
}

function updateMarker(location) {
  if (!state.map || !window.kakao?.maps) return;

  const position = new kakao.maps.LatLng(location.latitude, location.longitude);
  const status = getLocationStatus(location);
  const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4);

  const markerElement = document.createElement("button");
  markerElement.className = `kakao-marker ${status.key}`;
  markerElement.type = "button";
  markerElement.textContent = label;
  markerElement.title = location.vehicleNo || location.driverId;
  markerElement.addEventListener("click", () => focusLocation(location));

  let markerOverlay = state.markers.get(location.driverId);

  if (!markerOverlay) {
    markerOverlay = new kakao.maps.CustomOverlay({
      position,
      content: markerElement,
      yAnchor: 1
    });
    markerOverlay.setMap(state.map);
    state.markers.set(location.driverId, markerOverlay);
  } else {
    markerOverlay.setPosition(position);
    markerOverlay.setContent(markerElement);
  }
}

function focusLocation(location) {
  loadLocationHistory(location);

  if (!state.map || !window.kakao?.maps) return;

  const position = new kakao.maps.LatLng(location.latitude, location.longitude);
  state.map.setCenter(position);
  if (state.map.getLevel() > 4) {
    state.map.setLevel(4);
  }
  showInfoOverlay(location);
}

async function loadLocationHistory(location) {
  state.selectedDriverId = location.driverId;
  elements.historyDrawer.classList.remove("is-hidden");
  elements.historyTitle.textContent = `${location.vehicleNo || location.driverId} 위치 이력`;
  elements.historySummary.textContent = "조회 중";
  elements.historyList.replaceChildren();

  try {
    const data = await fetchJson(
      `/api/v1/locations/history?driverId=${encodeURIComponent(location.driverId)}&limit=80`,
      { headers: adminHeaders() }
    );
    renderHistory(location, data.locations || []);
  } catch (error) {
    console.error(error);
    elements.historySummary.textContent = `조회 실패: ${error.message}`;
  }
}

function renderHistory(location, records) {
  elements.historyList.replaceChildren();
  elements.historySummary.textContent = `${records.length}건 · ${location.driverName || location.driverId}`;

  if (!records.length) {
    const empty = document.createElement("div");
    empty.className = "empty-state";
    empty.textContent = "위치 이력이 없습니다.";
    elements.historyList.append(empty);
    return;
  }

  for (const record of records.reverse()) {
    const row = document.createElement("div");
    row.className = "history-row";

    const time = document.createElement("time");
    time.textContent = formatTime(record.receivedAt);

    const coordinate = document.createElement("span");
    coordinate.textContent = `${formatCoordinate(record.latitude)}, ${formatCoordinate(record.longitude)}`;

    const speed = document.createElement("span");
    speed.textContent = record.speed === null || record.speed === undefined ? "-" : `${Math.round(record.speed)} km/h`;

    row.append(time, coordinate, speed);
    elements.historyList.append(row);
  }
}

function closeHistoryDrawer() {
  state.selectedDriverId = "";
  elements.historyDrawer.classList.add("is-hidden");
}

function showInfoOverlay(location) {
  const status = getLocationStatus(location);
  const position = new kakao.maps.LatLng(location.latitude, location.longitude);
  const content = createPopupElement(location, status);

  if (!state.infoOverlay) {
    state.infoOverlay = new kakao.maps.CustomOverlay({
      yAnchor: 1.25
    });
  }

  state.infoOverlay.setContent(content);
  state.infoOverlay.setPosition(position);
  state.infoOverlay.setMap(state.map);
}

function createPopupElement(location, status) {
  const container = document.createElement("div");
  container.className = "kakao-popup";

  const title = document.createElement("strong");
  title.className = "popup-title";
  title.textContent = location.vehicleNo || location.driverId;

  const driver = document.createElement("div");
  driver.textContent = `${location.driverName || location.driverId} · ${status.label}`;

  const receivedAt = document.createElement("div");
  receivedAt.textContent = formatDateTime(location.receivedAt);

  const coordinate = document.createElement("div");
  coordinate.textContent = `${formatCoordinate(location.latitude)}, ${formatCoordinate(location.longitude)}`;

  container.append(title, driver, receivedAt, coordinate);
  return container;
}

async function fetchJson(url, options) {
  const response = await fetch(url, options);
  const data = await response.json().catch(() => ({}));

  if (!response.ok) {
    throw new Error(data.error || `HTTP ${response.status}`);
  }

  return data;
}

function adminHeaders() {
  return state.adminToken ? { "X-Admin-Token": state.adminToken } : {};
}

function withAdminToken(url) {
  if (!state.adminToken) return url;

  const parsedUrl = new URL(url, window.location.origin);
  parsedUrl.searchParams.set("adminToken", state.adminToken);
  return `${parsedUrl.pathname}${parsedUrl.search}`;
}

function requestAdminToken() {
  const token = window.prompt("관리자 토큰");
  if (!token) {
    setConnectionStatus("토큰 필요", "error");
    return;
  }

  state.adminToken = token.trim();
  window.localStorage.setItem("cargoRadarAdminToken", state.adminToken);
  refreshDrivers();
  refreshLatestLocations();
  connectEvents();
}

function setConnectionStatus(text, mode) {
  elements.connectionStatus.textContent = text;
  elements.connectionStatus.classList.toggle("is-online", mode === "online");
  elements.connectionStatus.classList.toggle("is-error", mode === "error");
}

function showMapMessage(text) {
  elements.mapMessage.textContent = text;
  elements.mapMessage.classList.remove("is-hidden");
}

function hideMapMessage() {
  elements.mapMessage.classList.add("is-hidden");
}

function getLocationStatus(location) {
  const receivedAt = new Date(location.receivedAt).getTime();
  const ageMs = Date.now() - receivedAt;

  if (ageMs <= 2 * 60 * 1000) return { key: "active", label: "수신중" };
  if (ageMs <= 10 * 60 * 1000) return { key: "stale", label: "지연" };
  return { key: "offline", label: "미수신" };
}

function formatDateTime(value) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "-";
  return new Intl.DateTimeFormat("ko-KR", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  }).format(date);
}

function formatTime(value) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "-";
  return new Intl.DateTimeFormat("ko-KR", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  }).format(date);
}

function formatCoordinate(value) {
  return Number(value).toFixed(5);
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}