Comtropy_CargoRadar/apps/web/public/app.js

const state = {
  map: null,
  mapProvider: "",
  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"),
  vehicleTypeInput: document.getElementById("vehicleTypeInput"),
  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")
};

const VEHICLE_TYPES = {
  "cargo-truck": {
    label: "카고트럭",
    shortLabel: "카고",
    className: "type-cargo"
  },
  "tractor-trailer": {
    label: "트레일러",
    shortLabel: "트레",
    className: "type-trailer"
  },
  "box-truck": {
    label: "탑차",
    shortLabel: "탑차",
    className: "type-box"
  },
  "van": {
    label: "용달차",
    shortLabel: "용달",
    className: "type-van"
  },
  "refrigerated": {
    label: "냉동탑차",
    shortLabel: "냉동",
    className: "type-cold"
  },
  "container": {
    label: "컨테이너",
    shortLabel: "컨",
    className: "type-container"
  },
  "wingbody": {
    label: "윙바디",
    shortLabel: "윙",
    className: "type-wing"
  }
};

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

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

  if (kakaoJavaScriptKey) {
    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.mapProvider = "kakao";

      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 });
      return;
    } catch (error) {
      console.warn("Kakao map unavailable. Falling back to OpenStreetMap.", error);
    }
  }

  try {
    await initializeLeafletMap();
  } catch (error) {
    console.error(error);
    showMapMessage("지도 로딩에 실패했습니다. 네트워크 상태를 확인하세요.");
  }
}

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 = () => {
      if (!window.kakao?.maps) {
        reject(new Error("kakao_maps_not_authorized"));
        return;
      }
      kakao.maps.load(resolve);
    };
    script.onerror = () => reject(new Error("kakao_maps_load_failed"));
    document.head.appendChild(script);
  });
}

async function initializeLeafletMap() {
  await loadLeafletAssets();
  state.mapProvider = "leaflet";
  state.map = L.map("map", {
    attributionControl: true,
    zoomControl: true
  }).setView([36.45, 127.85], 7);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(state.map);

  showMapMessage("카카오맵 권한 전까지 OpenStreetMap으로 표시 중");
  window.setTimeout(hideMapMessage, 4500);
  updateMarkers({ fitBounds: state.locations.size > 0 });
}

function loadLeafletAssets() {
  if (window.L?.map) return Promise.resolve();

  const version = "1.9.4";
  const stylesheet = loadStylesheet(
    "leaflet-stylesheet",
    `https://unpkg.com/leaflet@${version}/dist/leaflet.css`
  );
  const script = loadScript(
    "leaflet-script",
    `https://unpkg.com/leaflet@${version}/dist/leaflet.js`
  );

  return Promise.all([stylesheet, script]).then(() => {
    if (!window.L?.map) throw new Error("leaflet_load_failed");
  });
}

function loadStylesheet(id, href) {
  return new Promise((resolve, reject) => {
    if (document.getElementById(id)) {
      resolve();
      return;
    }

    const link = document.createElement("link");
    link.id = id;
    link.rel = "stylesheet";
    link.href = href;
    link.onload = resolve;
    link.onerror = () => reject(new Error(`${id}_load_failed`));
    document.head.appendChild(link);
  });
}

function loadScript(id, src) {
  return new Promise((resolve, reject) => {
    if (document.getElementById(id)) {
      resolve();
      return;
    }

    const script = document.createElement("script");
    script.id = id;
    script.src = src;
    script.async = true;
    script.onload = resolve;
    script.onerror = () => reject(new Error(`${id}_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) => {
    const location = JSON.parse(event.data);
    upsertLocation(location, { focus: state.selectedDriverId === location.driverId });
  });
  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,
        vehicleType: driver.vehicleType || "cargo-truck",
        latitude,
        longitude,
        accuracy: 12,
        speed: 42,
        heading: Math.round((now / 1000) % 360),
        cargoName: "전자부품",
        cargoQuantity: "36박스",
        cargoWeight: "1.2t",
        origin: "서울 상차지",
        destination: "평택 물류센터",
        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) {
    centerMapOnLocation(location);
  }
}

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 vehicleType = getVehicleType(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 typeBadge = document.createElement("span");
  typeBadge.className = `vehicle-type-chip ${vehicleType.className}`;
  typeBadge.textContent = vehicleType.label;

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

  title.append(badge, typeBadge, vehicleNo);

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

  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 vehicleType = getVehicleType(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 = [vehicleType.label, 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(),
    vehicleType: elements.vehicleTypeInput.value,
    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 || !state.mapProvider) return;

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

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

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

  if (fitBounds && state.markers.size > 0) {
    fitMapToLocations();
  }
}

function updateMarker(location) {
  if (!state.map || !state.mapProvider) return;

  if (state.mapProvider === "leaflet") {
    updateLeafletMarker(location);
    return;
  }

  updateKakaoMarker(location);
}

function updateKakaoMarker(location) {
  const position = new kakao.maps.LatLng(location.latitude, location.longitude);
  const status = getLocationStatus(location);
  const markerElement = createTruckMarkerElement(location, status);

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

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

function updateLeafletMarker(location) {
  const status = getLocationStatus(location);
  const vehicleType = getVehicleType(location);
  const position = [location.latitude, location.longitude];
  const icon = L.divIcon({
    className: `leaflet-truck-marker truck-marker ${status.key} ${vehicleType.className}`,
    html: createTruckMarkerHtml(location, vehicleType),
    iconSize: [74, 38],
    iconAnchor: [37, 38],
    popupAnchor: [0, -30]
  });

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

  if (!marker) {
    marker = {
      provider: "leaflet",
      marker: L.marker(position, { icon, title: location.vehicleNo || location.driverId })
    };
    marker.marker.on("click", () => focusLocation(location));
    marker.marker.addTo(state.map);
    state.markers.set(location.driverId, marker);
  } else {
    marker.marker.setLatLng(position);
    marker.marker.setIcon(icon);
    marker.marker.off("click");
    marker.marker.on("click", () => focusLocation(location));
  }
}

function createTruckMarkerElement(location, status) {
  const vehicleType = getVehicleType(location);
  const markerElement = document.createElement("button");
  markerElement.className = `truck-marker ${status.key} ${vehicleType.className}`;
  markerElement.type = "button";
  markerElement.title = `${vehicleType.label} ${location.vehicleNo || location.driverId}`;
  markerElement.setAttribute("aria-label", `${vehicleType.label} ${location.vehicleNo || location.driverId} 위치 보기`);
  markerElement.innerHTML = createTruckMarkerHtml(location, vehicleType);
  markerElement.addEventListener("click", () => focusLocation(location));
  return markerElement;
}

function createTruckMarkerHtml(location, vehicleType = getVehicleType(location)) {
  const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4);
  return `
    <span class="truck-marker__body">
      <span class="truck-marker__type">${escapeHtml(vehicleType.shortLabel)}</span>
      <span class="truck-marker__plate">${escapeHtml(label)}</span>
    </span>
    <span class="truck-marker__cab"></span>
  `;
}

function removeMarker(marker) {
  if (marker.provider === "kakao") {
    marker.overlay.setMap(null);
    return;
  }

  if (marker.provider === "leaflet") {
    marker.marker.remove();
  }
}

function fitMapToLocations() {
  if (state.mapProvider === "kakao") {
    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);
    return;
  }

  if (state.mapProvider === "leaflet") {
    const bounds = L.latLngBounds([...state.locations.values()].map((location) => {
      return [location.latitude, location.longitude];
    }));
    state.map.fitBounds(bounds, {
      maxZoom: 14,
      padding: [40, 40]
    });
  }
}

function centerMapOnLocation(location, options = {}) {
  if (!state.map || !state.mapProvider) return;

  if (state.mapProvider === "kakao") {
    const position = new kakao.maps.LatLng(location.latitude, location.longitude);
    state.map.setCenter(position);
    if (options.zoom && state.map.getLevel() > 4) {
      state.map.setLevel(4);
    }
    return;
  }

  if (state.mapProvider === "leaflet") {
    const nextZoom = options.zoom ? Math.max(state.map.getZoom(), 14) : state.map.getZoom();
    state.map.setView([location.latitude, location.longitude], nextZoom, { animate: true });
  }
}

function focusLocation(location) {
  loadLocationHistory(location);

  if (!state.map || !state.mapProvider) return;

  centerMapOnLocation(location, { zoom: true });
  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 content = createPopupElement(location, status);

  if (state.mapProvider === "leaflet") {
    state.infoOverlay = L.popup({
      closeButton: true,
      offset: [0, -24]
    })
      .setLatLng([location.latitude, location.longitude])
      .setContent(content)
      .openOn(state.map);
    return;
  }

  const position = new kakao.maps.LatLng(location.latitude, location.longitude);

  if (!state.infoOverlay) {
    state.infoOverlay = new kakao.maps.CustomOverlay({ yAnchor: 1.35 });
  }
  state.infoOverlay.setContent(content);
  state.infoOverlay.setPosition(position);
  state.infoOverlay.setMap(state.map);
}

function createPopupElement(location, status) {
  const vehicleType = getVehicleType(location);
  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 = `${vehicleType.label} · ${location.driverName || location.driverId} · ${status.label}`;

  const cargo = document.createElement("div");
  cargo.className = "popup-cargo";
  cargo.textContent = `제품: ${getCargoName(location) || "미등록"}`;

  const quantity = document.createElement("div");
  quantity.textContent = `수량: ${getCargoQuantity(location) || "미등록"}`;

  const weight = document.createElement("div");
  weight.textContent = `중량: ${getCargoWeight(location) || "미등록"}`;

  const destination = document.createElement("div");
  destination.textContent = getRouteSummary(location);

  const receivedAt = document.createElement("div");
  receivedAt.textContent = `수신: ${formatDateTime(location.receivedAt)}`;

  const movement = document.createElement("div");
  movement.textContent = `속도: ${formatSpeed(location.speed)}`;

  container.append(title, driver, cargo, quantity, weight, destination, movement, receivedAt);
  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 getVehicleType(source) {
  const key = String(source.vehicleType || "cargo-truck").trim();
  return VEHICLE_TYPES[key] || VEHICLE_TYPES["cargo-truck"];
}

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 formatSpeed(value) {
  if (value === null || value === undefined || value === "") return "-";
  const speed = Number(value);
  if (!Number.isFinite(speed)) return "-";
  return `${Math.round(speed)} km/h`;
}

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

function getCargoSummary(location) {
  return [getCargoName(location), getCargoQuantity(location), getCargoWeight(location)]
    .filter(Boolean)
    .join(" · ") || "미등록";
}

function getCargoName(location) {
  return firstString(location.cargoName, location.cargoItem, location.cargo, location.itemName);
}

function getCargoQuantity(location) {
  return firstString(location.cargoQuantity, location.quantity, location.qty, location.count);
}

function getCargoWeight(location) {
  return firstString(location.cargoWeight, location.weight);
}

function getRouteSummary(location) {
  const origin = firstString(location.origin, location.departure);
  const destination = firstString(location.destination, location.arrival);

  if (origin && destination) return `구간: ${origin} -> ${destination}`;
  if (destination) return `도착지: ${destination}`;
  if (origin) return `상차지: ${origin}`;
  return "도착지: 미등록";
}

function firstString(...values) {
  for (const value of values) {
    if (value === undefined || value === null) continue;
    const text = String(value).trim();
    if (text) return text;
  }
  return "";
}

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