import * as THREE from "three";

import {
  CONFIG,
  HUD_CONFIG,
  CABLE_CONFIG,
  CABLE_STATE,
  SATELLITE_CONFIG,
  PATHS,
  BGP_CONFIG,
  CRUISE_CONFIG,
  ROTATION_MODE,
} from "./constants.js";
import { vector3ToLatLon, screenToEarthCoords } from "./utils.js";
import {
  showStatusMessage,
  queueStatusMessage,
  updateCoordinatesDisplay,
  updateZoomDisplay,
  updateEarthStats,
  setLoading,
  setLoadingMessage,
  showTooltip,
  hideTooltip,
  showError,
  hideError,
  clearUiState,
} from "./ui.js";
import {
  createEarth,
  createClouds,
  createTerrain,
  createGridLines,
  getEarth,
  loadEarthTexture,
  clearEarthTexture,
  setEarthSunDirection,
} from "./earth.js";
import { registerTerrainMesh, clearTerrainData } from "./terrain.js";
import {
  initCelestialLayer,
  updateCelestialLayer,
  disposeCelestialLayer,
  getCelestialDebugState,
  getSunDirection,
  setCelestialOrientation,
  setCelestialFollow,
} from "./celestial.js";
import {
  loadGeoJSONFromPath,
  loadLandingPoints,
  handleCableClick,
  clearCableSelection,
  getCableLines,
  getCableLegendItems,
  getCableState,
  setCableState,
  clearAllCableStates,
  applyLandingPointVisualState,
  resetLandingPointVisualState,
  getShowCables,
  clearCableData,
  getLandingPoints,
  toggleCables,
} from "./cables.js";
import {
  createSatellites,
  loadSatellites,
  updateSatellitePositions,
  toggleSatellites,
  getShowSatellites,
  getSatelliteLegendItems,
  setSelectedSatelliteLegend,
  clearSelectedSatelliteLegend,
  getSatelliteCount,
  selectSatellite,
  getSatellitePoints,
  setSatelliteRingState,
  updateLockedRingPosition,
  updateHoverRingPosition,
  getSatellitePositions,
  showPredictedOrbit,
  hidePredictedOrbit,
  highlightRelatedSatellites,
  clearRelatedSatelliteHighlights,
  getRelatedSatelliteIndicesForRegions,
  updateRelatedSatelliteHighlights,
  updateBreathingPhase,
  isSatelliteFrontFacing,
  setSatelliteCamera,
  setLockedSatelliteIndex,
  resetSatelliteState,
  clearSatelliteData,
} from "./satellites.js";
import {
  loadBGPAnomalies,
  getBGPAnomalyMarkers,
  getBGPCollectorMarkers,
  getBGPLegendItems,
  getBGPCount,
  getBGPCollectorCount,
  getBGPStatusSummary,
  getShowBGP,
  clearBGPSelection,
  setBGPMarkerState,
  updateBGPVisualState,
  clearBGPData,
  toggleBGP,
  formatBGPAnomalyTypeLabel,
  formatBGPASPath,
  formatBGPCollectorStatus,
  formatBGPConfidence,
  formatBGPImpactedScope,
  formatBGPLocation,
  formatBGPObservedTime,
  formatBGPObservedBy,
  formatBGPRelatedCables,
  formatBGPRouteChange,
  formatBGPTopEventTypes,
  formatBGPScope,
  formatBGPCollectorCoverageHalo,
  formatBGPSeverityLabel,
  formatBGPStatusLabel,
  showBGPEventOverlay,
  showBGPCollectorCoverageOverlay,
} from "./bgp.js";
import {
  setupControls,
  getAutoRotate,
  getRotationMode,
  getShowTerrain,
  setAutoRotate,
  applyImmediateView,
  focusEarthView,
  getZoomLevel,
  teardownControls,
} from "./controls.js";
import {
  setLayerButtonState,
} from "./layer-button-state.js";
import {
  initInfoCard,
  showInfoCard,
  hideInfoCard,
} from "./info-card.js";
import {
  initLegend,
  setLegendMode,
  refreshLegend,
  setLegendItems,
} from "./legend.js";
import { mountBrand } from "./brand.js";
import { initTVPanel } from "./tv.js";
import { initNewsPanel, updateNewsViewFocus } from "./news.js";

export let scene;
export let camera;
export let renderer;

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let targetRotation = { x: 0, y: 0 };
let inertialVelocity = { x: 0, y: 0 };
let hoveredCable = null;
let hoveredBGP = null;
let hoveredSatellite = null;
let hoveredSatelliteIndex = null;
let lockedSatellite = null;
let lockedSatelliteIndex = null;
let lockedObject = null;
let lockedObjectType = null;
let dragStartTime = 0;
let isLongDrag = false;
let lastSatClickTime = 0;
let lastSatClickIndex = 0;
let lastSatClickPos = { x: 0, y: 0 };
let lastBGPClickTime = 0;
let lastBGPClickCollector = null;
let lastBGPClickType = null;
let lastBGPClickPos = { x: 0, y: 0 };
let earthTexture = null;
let animationFrameId = null;
let initialized = false;
let destroyed = false;
let isDataLoading = false;
let currentLoadToken = 0;
let cablesEnabled = true;
let satellitesEnabled = true;
let cableToggleToken = 0;
let satelliteToggleToken = 0;
let satelliteHydrationToken = 0;
let sceneLights = null;
let cruiseTimerId = null;
let cruiseHideCardTimerId = null;
let cruisePollTimerId = null;
let cruiseCurrentMarkerId = null;
let cruiseCurrentIndex = -1;
let cruiseQueuedMarkerIds = [];
let cruiseKnownEventIds = new Set();
let cruiseCardPinned = false;
let cruiseConnectorEl = null;
let cruiseConnectorPolyline = null;
let cruiseConnectorStartpoint = null;
let cruiseConnectorEndpoint = null;
let cruiseConnectorNeedsAnimation = false;
let cruiseCardPlacement = null;
let cruiseSequenceToken = 0;
let cruisePresentationPhase = "hidden";
let cruiseAdvanceInFlight = false;
let cruiseAdvanceQueued = false;
let cruiseAdvanceInterrupt = false;
let cruiseCancelNotifier = null;

function createCruisePresentationTimer() {
  let endsAt = 0;
  return {
    start(durationMs) {
      endsAt = Date.now() + Math.max(0, durationMs);
    },
    stop() {
      endsAt = 0;
    },
    isActive() {
      return endsAt > 0 && Date.now() < endsAt;
    },
  };
}

const cruisePresentationTimer = createCruisePresentationTimer();

const clock = new THREE.Clock();
const interactionRaycaster = new THREE.Raycaster();
const interactionMouse = new THREE.Vector2();
const scratchCameraToEarth = new THREE.Vector3();
const scratchCableCenter = new THREE.Vector3();
const scratchCableDirection = new THREE.Vector3();
const scratchBGPDirection = new THREE.Vector3();
const scratchBGPWorldPosition = new THREE.Vector3();
const scratchViewCenterWorld = new THREE.Vector3();

const cleanupFns = [];
const DRAG_SMOOTHING_FACTOR = 0.18;
const INERTIA_DAMPING = 0.92;
const INERTIA_MIN_VELOCITY = 0.00008;
const CRUISE_CONNECTOR_DRAW_MS = 420;
const CRUISE_TRANSITION_GAP_MS = 24;
const CRUISE_PRESENTATION_HIDE_MS = 220;
const CRUISE_CONNECTOR_READY_TIMEOUT_MS = 1200;
const ACTIVE_BGP_TOOLTIP_TEXT = "隐藏BGP观测";
const TOOLTIP_CURSOR_OFFSET = 14;   // px offset from cursor for hover tooltips
const TOOLTIP_COORDS_OFFSET = 10;   // px offset for earth-coordinate tooltip
const RELATED_SATELLITE_HIGHLIGHT_COLOR = "#7dd3fc";
const HUD_INTERACTIVE_SELECTORS = [
  ".earth-left-column",
  ".earth-left-column *",
  "#info-panel",
  "#info-panel *",
  "#right-toolbar-group",
  "#right-toolbar-group *",
  "#legend",
  "#legend *",
  "#earth-stats",
  "#earth-stats *",
  "#media-panel",
  "#media-panel *",
];

function bindListener(target, eventName, handler, options) {
  if (!target) return;
  target.addEventListener(eventName, handler, options);
  cleanupFns.push(() =>
    target.removeEventListener(eventName, handler, options),
  );
}

function waitForCruiseDelay(durationMs, sequenceToken, { useHideTimer = false } = {}) {
  return new Promise((resolve) => {
    let settled = false;
    const settle = (ok) => {
      if (settled) return;
      settled = true;
      if (cruiseCancelNotifier === onCancel) cruiseCancelNotifier = null;
      resolve(ok);
    };
    const onCancel = () => settle(false);

    const timerId = window.setTimeout(() => {
      if (useHideTimer) {
        if (cruiseHideCardTimerId === timerId) cruiseHideCardTimerId = null;
      } else if (cruiseTimerId === timerId) {
        cruiseTimerId = null;
      }
      settle(sequenceToken === cruiseSequenceToken);
    }, durationMs);

    if (useHideTimer) {
      cruiseHideCardTimerId = timerId;
    } else {
      cruiseTimerId = timerId;
    }

    cruiseCancelNotifier = onCancel;
  });
}

async function waitForCruiseConnectorReady(sequenceToken) {
  const startedAt = performance.now();

  while (sequenceToken === cruiseSequenceToken) {
    if (!isCruiseModeActive() || !getAutoRotate()) {
      return false;
    }

    const ready = updateCruiseConnector();
    if (ready) {
      return true;
    }

    if (performance.now() - startedAt >= CRUISE_CONNECTOR_READY_TIMEOUT_MS) {
      return false;
    }

    await nextAnimationFrame();
  }

  return false;
}

function getViewportAspect() {
  return window.innerWidth / window.innerHeight;
}

function nextAnimationFrame() {
  return new Promise((resolve) => {
    window.requestAnimationFrame(() => resolve());
  });
}

function syncRendererViewport() {
  if (!camera || !renderer) return;
  camera.aspect = getViewportAspect();
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function isEventOnHud(event) {
  const target = event?.target;
  if (!(target instanceof Element)) return false;
  return HUD_INTERACTIVE_SELECTORS.some((selector) => target.closest(selector));
}

function getDragRotationFactor() {
  const zoom = Math.max(getZoomLevel(), 0.01);
  const scale = THREE.MathUtils.clamp(
    1 / zoom,
    CONFIG.dragRotationScaleMin,
    CONFIG.dragRotationScaleMax,
  );
  return CONFIG.dragRotationFactorBase * scale;
}

function disposeMaterial(material) {
  if (!material) return;
  if (Array.isArray(material)) {
    material.forEach(disposeMaterial);
    return;
  }

  if (material.map) material.map.dispose();
  if (material.alphaMap) material.alphaMap.dispose();
  if (material.aoMap) material.aoMap.dispose();
  if (material.bumpMap) material.bumpMap.dispose();
  if (material.displacementMap) material.displacementMap.dispose();
  if (material.emissiveMap) material.emissiveMap.dispose();
  if (material.envMap) material.envMap.dispose();
  if (material.lightMap) material.lightMap.dispose();
  if (material.metalnessMap) material.metalnessMap.dispose();
  if (material.normalMap) material.normalMap.dispose();
  if (material.roughnessMap) material.roughnessMap.dispose();
  if (material.specularMap) material.specularMap.dispose();
  material.dispose();
}

function disposeSceneObject(object) {
  if (!object) return;

  for (let i = object.children.length - 1; i >= 0; i -= 1) {
    disposeSceneObject(object.children[i]);
  }

  if (object.geometry) {
    object.geometry.dispose();
  }

  if (object.material) {
    disposeMaterial(object.material);
  }

  if (object.parent) {
    object.parent.remove(object);
  }
}

function clearRuntimeSelection() {
  hoveredCable = null;
  hoveredBGP = null;
  hoveredSatellite = null;
  hoveredSatelliteIndex = null;
  lockedObject = null;
  lockedObjectType = null;
  lockedSatellite = null;
  lockedSatelliteIndex = null;
  setLockedSatelliteIndex(null);
  clearSelectedSatelliteLegend();
}

export function clearLockedObject() {
  hidePredictedOrbit();
  clearAllCableStates();
  clearCableSelection();
  clearBGPSelection();
  clearRelatedSatelliteHighlights();
  setSatelliteRingState(null, "none", null);
  clearRuntimeSelection();
  setLegendItems("satellites", getSatelliteLegendItems());
}

export function clearLockedObjectAndInfo() {
  clearLockedObject();
  hideInfoCard();
  hideTooltip();
}

function isSameCable(cable1, cable2) {
  if (!cable1 || !cable2) return false;
  const id1 = cable1.userData?.cableId;
  const id2 = cable2.userData?.cableId;
  if (id1 === undefined || id2 === undefined) return false;
  return id1 === id2;
}

function isSameBGPMarker(marker1, marker2) {
  if (!marker1 || !marker2) return false;
  const type1 = marker1.userData?.type;
  const type2 = marker2.userData?.type;
  if (type1 !== type2) return false;

  if (type1 === "bgp") {
    return marker1.userData?.id === marker2.userData?.id;
  }
  if (type1 === "bgp_collector") {
    return marker1.userData?.collector === marker2.userData?.collector;
  }
  return false;
}

function getBGPCollectorMarkerByName(collector) {
  return getBGPCollectorMarkers().find(
    (marker) => marker.userData?.collector === collector,
  );
}

function resetTransientBGPStates() {
  getBGPCollectorMarkers().forEach((marker) => {
    if (marker !== lockedObject) {
      setBGPMarkerState(marker, "normal");
    }
  });
  getBGPAnomalyMarkers().forEach((marker) => {
    if (marker !== lockedObject) {
      setBGPMarkerState(marker, "normal");
    }
  });
}

function clearTransientHoverState() {
  resetTransientBGPStates();
  hoveredBGP = null;

  if (hoveredCable && !isSameCable(hoveredCable, lockedObject)) {
    setCableState(hoveredCable.userData.cableId, CABLE_STATE.NORMAL);
  }
  hoveredCable = null;

  if (hoveredSatelliteIndex !== null && hoveredSatelliteIndex !== lockedSatelliteIndex) {
    setSatelliteRingState(hoveredSatelliteIndex, "none", null);
  }
  hoveredSatellite = null;
  hoveredSatelliteIndex = null;
}

function applyBGPHoverState(marker) {
  resetTransientBGPStates();
  if (!marker) {
    hoveredBGP = null;
    return;
  }

  hoveredBGP = marker;
  if (marker !== lockedObject) {
    setBGPMarkerState(marker, "hover");
  }

  const relatedCollector =
    marker.userData?.type === "bgp_collector"
      ? marker
      : getBGPCollectorMarkerByName(marker.userData?.collector);

  if (relatedCollector && relatedCollector !== lockedObject && relatedCollector !== marker) {
    setBGPMarkerState(relatedCollector, "linked");
  }
}

function getPrimaryBGPHoverTarget(bgpAnomalyIntersects, bgpCollectorIntersects) {
  if (bgpAnomalyIntersects.length > 0) {
    return bgpAnomalyIntersects[0].object;
  }
  if (bgpCollectorIntersects.length > 0) {
    return bgpCollectorIntersects[0].object;
  }
  return null;
}

function getPrimaryBGPClickTarget(
  event,
  bgpAnomalyIntersects,
  bgpCollectorIntersects,
) {
  const anomalyMarker = bgpAnomalyIntersects[0]?.object || null;
  const collectorMarker = bgpCollectorIntersects[0]?.object || null;
  if (!anomalyMarker && !collectorMarker) return null;
  if (!anomalyMarker) return collectorMarker;
  if (!collectorMarker) return anomalyMarker;

  const clickCollector = anomalyMarker.userData?.collector || collectorMarker.userData?.collector;
  const isRepeatedClick =
    clickCollector &&
    clickCollector === lastBGPClickCollector &&
    Date.now() - lastBGPClickTime < 650 &&
    Math.abs(event.clientX - lastBGPClickPos.x) < 28 &&
    Math.abs(event.clientY - lastBGPClickPos.y) < 28;

  if (isRepeatedClick) {
    return lastBGPClickType === "bgp" ? collectorMarker : anomalyMarker;
  }

  return anomalyMarker;
}

function showCableInfo(cable, coords) {
  setLegendMode("cables");
  showInfoCard("cable", {
    name: cable.userData.name,
    owner: cable.userData.owner,
    status: cable.userData.status,
    length: cable.userData.length,
    coords: cable.userData.coords,
    rfs: cable.userData.rfs,
  }, coords);
}

function getCableBriefHtml(cable) {
  const name = cable.userData.name || "未知海缆";
  const status = cable.userData.status || "";
  return `<strong>${name}</strong>${status ? `<br>${status}` : ""}`;
}

function showSatelliteInfo(props, coords) {
  const meanMotion = props?.mean_motion || 0;
  const period = meanMotion > 0 ? (1440 / meanMotion).toFixed(1) : "-";
  const ecc = props?.eccentricity || 0;
  const perigee = (6371 * (1 - ecc)).toFixed(0);
  const apogee = (6371 * (1 + ecc)).toFixed(0);

  setSelectedSatelliteLegend(props);
  setLegendItems("satellites", getSatelliteLegendItems());
  setLegendMode("satellites");
  showInfoCard("satellite", {
    name: props?.name || "-",
    norad_id: props?.norad_cat_id,
    inclination: props?.inclination ? props.inclination.toFixed(2) : "-",
    period,
    perigee,
    apogee,
  }, coords);
}

function getSatelliteBriefHtml(props) {
  const name = props?.name || "未知卫星";
  const id = props?.norad_cat_id ? `NORAD: ${props.norad_cat_id}` : "";
  return `<strong>${name}</strong>${id ? `<br>${id}` : ""}`;
}

function showBGPInfo(marker, coords) {
  setLegendMode("bgp");
  const impactedRegions =
    Array.isArray(marker.userData.impacted_regions) &&
    marker.userData.impacted_regions.length > 0
      ? marker.userData.impacted_regions
      : [
          {
            city: marker.userData.city,
            country: marker.userData.country,
          },
        ];
  const observedBy =
    marker.userData.observed_by ||
    formatBGPObservedBy(marker.userData.collectors);
  const impactedScope = formatBGPImpactedScope(impactedRegions);
  const relatedCables = formatBGPRelatedCables(marker.userData.related_cables);
  const narrative =
    marker.userData.summary && marker.userData.summary !== "-"
      ? marker.userData.summary
      : buildBGPIncidentNarrative(marker, impactedRegions);
  showInfoCard("bgp", {
    anomaly_type: formatBGPAnomalyTypeLabel(
      marker.userData.incident_type || marker.userData.anomaly_type,
    ),
    severity: formatBGPSeverityLabel(
      marker.userData.rawSeverity || marker.userData.severity,
    ),
    status: formatBGPStatusLabel(marker.userData.status),
    route_change:
      marker.userData.route_change ||
      formatBGPRouteChange(
        marker.userData.origin_asn,
        marker.userData.new_origin_asn,
      ),
    prefix:
      Array.isArray(marker.userData.prefixes) && marker.userData.prefixes.length > 1
        ? `${marker.userData.prefixes[0]} 等${marker.userData.prefixes.length}个`
        : marker.userData.prefix,
    as_path_display:
      Array.isArray(marker.userData.as_path) && marker.userData.as_path.length > 0
        ? formatBGPASPath(marker.userData.as_path)
        : "-",
    origin_asn:
      Array.isArray(marker.userData.affected_asns) && marker.userData.affected_asns.length > 0
        ? marker.userData.affected_asns.slice(0, 3).map((asn) => `AS${asn}`).join(", ")
        : marker.userData.origin_asn,
    new_origin_asn:
      Array.isArray(marker.userData.affected_asns) && marker.userData.affected_asns.length > 3
        ? `共${marker.userData.affected_asns.length}个ASN`
        : marker.userData.new_origin_asn,
    confidence: formatBGPConfidence(marker.userData.confidence),
    collector: marker.userData.collector,
    observed_by: observedBy,
    impacted_scope: impactedScope,
    related_cables: relatedCables,
    related_satellites:
      marker.userData.related_satellite_count > 0
        ? `${marker.userData.related_satellite_count}颗事件附近卫星`
        : "-",
    location:
      marker.userData.location ||
      formatBGPLocation(marker.userData.city, marker.userData.country),
    created_at: formatBGPObservedTime(marker.userData.created_at_raw),
    summary: narrative,
  }, coords);
}

function getBGPBriefHtml(marker) {
  const type = formatBGPAnomalyTypeLabel(
    marker.userData.incident_type || marker.userData.anomaly_type,
  );
  const collector = marker.userData.collector || "";
  return `<strong>${type}</strong>${collector ? `<br>${collector}` : ""}`;
}

function showBGPCollectorInfo(marker, coords) {
  setLegendMode("bgp");
  showInfoCard("bgp_collector", {
    collector: marker.userData.collector,
    location: formatBGPLocation(marker.userData.city, marker.userData.country),
    anomaly_count: marker.userData.anomaly_count ?? 0,
    observation_count: marker.userData.observation_count ?? 0,
    recent_24h_observation_count: marker.userData.recent_24h_observation_count ?? 0,
    recent_7d_observation_count: marker.userData.recent_7d_observation_count ?? 0,
    prefix_count: marker.userData.prefix_count ?? 0,
    origin_asn_count: marker.userData.origin_asn_count ?? 0,
    top_event_types: formatBGPTopEventTypes(marker.userData.top_event_types),
    coverage_halo: formatBGPCollectorCoverageHalo(marker.userData),
    related_satellites: "-",
    latest_event_type: marker.userData.latest_event_type || "-",
    latest_observed_at: formatBGPObservedTime(marker.userData.latest_observed_at),
    baseline_scope: formatBGPScope(marker.userData.baseline_scope),
    status: formatBGPCollectorStatus(marker.userData.status || "online"),
  }, coords);
}

function getBGPCollectorBriefHtml(marker) {
  const name = marker.userData.collector || "观测站";
  const count = marker.userData.anomaly_count ?? 0;
  return `<strong>${name}</strong><br>${count} 条事件`;
}

function getBGPStatusText(bgpResult) {
  if (bgpResult.totalCount > 0) {
    return `${bgpResult.totalCount} 起活跃事件`;
  }
  if (bgpResult.anomalyCount > 0) {
    return `${bgpResult.anomalyCount} 条活跃异常`;
  }
  return "当前无活跃事件";
}

function updateBGPHud(bgpResult) {
  const bgpBtn = document.getElementById("toggle-bgp");
  if (bgpBtn) {
    bgpBtn.classList.add("active");
    const tooltip = bgpBtn.querySelector(".earth-toolbar-tooltip");
    if (tooltip) {
      tooltip.textContent = ACTIVE_BGP_TOOLTIP_TEXT;
    }
  }

  const bgpCountEl = document.getElementById("bgp-anomaly-count");
  if (bgpCountEl) {
    bgpCountEl.textContent = `${bgpResult.totalCount} 起`;
  }

  const bgpCollectorEl = document.getElementById("bgp-collector-count");
  if (bgpCollectorEl) {
    bgpCollectorEl.textContent = `${bgpResult.collectorCount} 个`;
  }

  const bgpStatusEl = document.getElementById("bgp-status-summary");
  if (bgpStatusEl) {
    bgpStatusEl.textContent = getBGPStatusText(bgpResult);
  }
}

function clearCruiseTimers() {
  if (cruiseTimerId) {
    clearTimeout(cruiseTimerId);
    cruiseTimerId = null;
  }
  if (cruiseHideCardTimerId) {
    clearTimeout(cruiseHideCardTimerId);
    cruiseHideCardTimerId = null;
  }
}

function ensureCruiseConnector() {
  if (cruiseConnectorEl instanceof SVGSVGElement) {
    return cruiseConnectorEl;
  }

  const container = document.getElementById("container");
  if (!(container instanceof HTMLElement)) return null;

  const connector = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  connector.id = "info-card-cruise-link";
  connector.setAttribute("class", "info-card-cruise-link");
  connector.setAttribute("viewBox", `0 0 ${window.innerWidth} ${window.innerHeight}`);
  connector.setAttribute("preserveAspectRatio", "none");

  const polyline = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
  const startpoint = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  const endpoint = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  startpoint.setAttribute("r", "4");
  endpoint.setAttribute("r", "4");
  connector.appendChild(startpoint);
  connector.appendChild(polyline);
  connector.appendChild(endpoint);

  container.appendChild(connector);
  cruiseConnectorEl = connector;
  cruiseConnectorPolyline = polyline;
  cruiseConnectorStartpoint = startpoint;
  cruiseConnectorEndpoint = endpoint;
  connector.addEventListener("animationend", (event) => {
    if (
      event.animationName === "cruiseConnectorDraw" &&
      cruiseConnectorEl?.classList.contains("is-visible")
    ) {
      if (cruiseConnectorPolyline) {
        cruiseConnectorPolyline.style.strokeDashoffset = "0";
      }
      cruiseConnectorEl.classList.remove("is-animating");
    }
  });
  return connector;
}

function hideCruiseConnector() {
  const connector = ensureCruiseConnector();
  if (!connector) return;
  connector.classList.remove("is-visible");
  connector.classList.remove("is-animating");
  cruiseCardPlacement = null;
  cruisePresentationPhase = "hidden";
}

function hideCruiseConnectorVisual() {
  const connector = ensureCruiseConnector();
  if (!connector) return;
  connector.classList.remove("is-visible");
  connector.classList.remove("is-animating");
}

function showCruiseConnectorVisual() {
  const connector = ensureCruiseConnector();
  if (!connector) return;
  connector.classList.add("is-visible");
}

function setCruiseCardPinned(pinned) {
  cruiseCardPinned = pinned;
  if (!pinned) {
    cruisePresentationTimer.stop();
    hideCruiseConnector();
  }
}

function interruptCruisePresentation() {
  ++cruiseSequenceToken;
  clearCruiseTimers();
  const notifier = cruiseCancelNotifier;
  cruiseCancelNotifier = null;
  notifier?.();
  setCruiseCardPinned(false);
}

function beginCruisePresentationHide() {
  if (!lockedObject) {
    hideInfoCard();
  }
  cruisePresentationPhase = "hidden";
  const connector = ensureCruiseConnector();
  connector?.classList.remove("is-visible");
  connector?.classList.remove("is-animating");
}

function scheduleCruiseCardHide() {
  if (cruiseHideCardTimerId) {
    clearTimeout(cruiseHideCardTimerId);
    cruiseHideCardTimerId = null;
  }
}

function clearCruiseMarkerHighlight() {
  if (!cruiseCurrentMarkerId) return;
  const marker = getBGPAnomalyMarkers().find(
    (item) => item.userData?.id === cruiseCurrentMarkerId,
  );
  if (marker && lockedObject !== marker) {
    setBGPMarkerState(marker, "normal");
  }
  cruiseCurrentMarkerId = null;
}

function getBGPMarkerTimestamp(marker) {
  const rawValue = marker?.userData?.created_at_raw;
  const parsedValue = rawValue ? new Date(rawValue).getTime() : 0;
  return Number.isFinite(parsedValue) ? parsedValue : 0;
}

function getCruiseMarkersSorted() {
  return getBGPAnomalyMarkers()
    .slice()
    .sort((a, b) => getBGPMarkerTimestamp(b) - getBGPMarkerTimestamp(a));
}

function getCruiseMarkerScreenCoords(marker) {
  if (!marker || !camera) return null;
  scratchBGPWorldPosition.copy(marker.position);
  marker.parent?.localToWorld(scratchBGPWorldPosition);
  const projected = scratchBGPWorldPosition.clone().project(camera);
  if (!Number.isFinite(projected.x) || !Number.isFinite(projected.y)) {
    return null;
  }

  return {
    x: ((projected.x + 1) * 0.5) * window.innerWidth,
    y: ((1 - projected.y) * 0.5) * window.innerHeight,
  };
}

function getCruiseCardScreenCoords(marker) {
  const markerCoords = getCruiseMarkerScreenCoords(marker);
  if (!markerCoords) return null;

  const hudScale =
    Number.parseFloat(
      getComputedStyle(document.documentElement).getPropertyValue("--hud-scale"),
    ) || 1;
  const estimatedCardHeight = Math.min(420 * hudScale, window.innerHeight * 0.7);
  const estimatedCardWidth = Math.min(300 * hudScale, window.innerWidth - 32);

  const x =
    window.innerWidth * CRUISE_CONFIG.cardAnchorXRatio - estimatedCardWidth * 0.5;
  const y =
    window.innerHeight * CRUISE_CONFIG.cardAnchorYRatio - estimatedCardHeight * 0.5;
  const margin = 12;
  const clampedX = Math.min(
    Math.max(margin, x),
    Math.max(margin, window.innerWidth - estimatedCardWidth - margin),
  );
  const clampedY = Math.min(
    Math.max(margin, y),
    Math.max(margin, window.innerHeight - estimatedCardHeight - margin),
  );
  const anchorY = clampedY + Math.max(18 * hudScale, estimatedCardHeight * 0.18);

  return {
    x: clampedX,
    y: clampedY,
    width: estimatedCardWidth,
    height: estimatedCardHeight,
    anchorX: clampedX - CRUISE_CONFIG.linkPanelGapPx,
    anchorY,
  };
}

function showCruiseEventCard(marker) {
  const coords = cruiseCardPlacement || getCruiseCardScreenCoords(marker);
  if (!coords) return;
  showBGPInfo(marker, {
    x: coords.x,
    y: coords.y,
    absolute: true,
  });
}

function isCruiseInfoCardVisible() {
  return document.getElementById("info-panel")?.classList.contains("is-visible") === true;
}

function computeCruiseConnectorPoints(marker) {
  const markerCoords = getCruiseMarkerScreenCoords(marker);
  if (!markerCoords) return null;

  const targetCardCoords = cruiseCardPlacement || getCruiseCardScreenCoords(marker);
  if (!targetCardCoords) return null;

  const panelAnchorX = targetCardCoords.anchorX;
  const panelAnchorY = targetCardCoords.anchorY;
  const horizontalDirection = markerCoords.x <= panelAnchorX ? 1 : -1;
  const startX = markerCoords.x + horizontalDirection * CRUISE_CONFIG.linkMarkerGapPx;
  const startY = markerCoords.y;
  const elbowX =
    panelAnchorX -
    horizontalDirection * (CRUISE_CONFIG.linkElbowOffsetPx + CRUISE_CONFIG.linkPanelGapPx);
  const elbowY = Math.min(startY, panelAnchorY) + CRUISE_CONFIG.linkElbowDropPx;

  if (Math.abs(panelAnchorX - startX) < 8 && Math.abs(panelAnchorY - startY) < 8) {
    return null;
  }

  return { startX, startY, elbowX, elbowY, panelAnchorX, panelAnchorY };
}

function applyCruiseConnectorPoints(pts) {
  const polyline = cruiseConnectorPolyline;
  const startpoint = cruiseConnectorStartpoint;
  const endpoint = cruiseConnectorEndpoint;
  if (!polyline || !startpoint || !endpoint) return 0;

  polyline.setAttribute(
    "points",
    `${pts.startX.toFixed(2)},${pts.startY.toFixed(2)} ` +
    `${pts.elbowX.toFixed(2)},${pts.elbowY.toFixed(2)} ` +
    `${pts.panelAnchorX.toFixed(2)},${pts.panelAnchorY.toFixed(2)}`,
  );
  startpoint.setAttribute("cx", pts.startX.toFixed(2));
  startpoint.setAttribute("cy", pts.startY.toFixed(2));
  endpoint.setAttribute("cx", pts.panelAnchorX.toFixed(2));
  endpoint.setAttribute("cy", pts.panelAnchorY.toFixed(2));

  const totalLength =
    typeof polyline.getTotalLength === "function" ? polyline.getTotalLength() : 0;
  return totalLength;
}

function updateCruiseConnector() {
  const connector = ensureCruiseConnector();
  if (
    !connector ||
    !cruiseConnectorPolyline ||
    !cruiseConnectorStartpoint ||
    !cruiseConnectorEndpoint ||
    !cruiseCardPinned ||
    cruisePresentationPhase === "hidden" ||
    !cruiseCurrentMarkerId
  ) {
    return false;
  }

  const marker = getBGPAnomalyMarkers().find(
    (item) => item.userData?.id === cruiseCurrentMarkerId,
  );
  if (!marker) return false;

  const pts = computeCruiseConnectorPoints(marker);
  if (!pts) return false;

  connector.setAttribute("viewBox", `0 0 ${window.innerWidth} ${window.innerHeight}`);
  const totalLength = applyCruiseConnectorPoints(pts);
  const polyline = cruiseConnectorPolyline;

  polyline.style.strokeDasharray = totalLength > 0 ? `${totalLength}` : "";
  polyline.style.strokeDashoffset =
    totalLength > 0 ? `${cruiseConnectorNeedsAnimation ? totalLength : 0}` : "";
  connector.style.setProperty(
    "--connector-length",
    totalLength > 0 ? `${totalLength}` : "0px",
  );
  connector.classList.add("is-visible");

  if (cruiseConnectorNeedsAnimation && totalLength > 0) {
    connector.classList.remove("is-animating");
    void connector.getBoundingClientRect();
    polyline.style.strokeDashoffset = `${totalLength}`;
    connector.classList.add("is-animating");
    cruiseConnectorNeedsAnimation = false;
  }

  return totalLength > 0;
}

function repositionCruiseConnector() {
  if (!cruiseCardPinned || cruisePresentationPhase === "hidden" || !cruiseCurrentMarkerId) return;
  const connector = cruiseConnectorEl;
  if (!connector || !connector.classList.contains("is-visible")) return;

  const marker = getBGPAnomalyMarkers().find(
    (item) => item.userData?.id === cruiseCurrentMarkerId,
  );
  if (!marker) return;

  const pts = computeCruiseConnectorPoints(marker);
  if (!pts) return;

  connector.setAttribute("viewBox", `0 0 ${window.innerWidth} ${window.innerHeight}`);
  applyCruiseConnectorPoints(pts);
}

function syncCruiseKnownEventIds() {
  cruiseKnownEventIds = new Set(
    getBGPAnomalyMarkers()
      .map((marker) => marker.userData?.id)
      .filter(Boolean),
  );
}

function isCruiseModeActive() {
  return getRotationMode() === ROTATION_MODE.CRUISE;
}

function stopCruiseMode({ preserveCard = false } = {}) {
  clearCruiseTimers();
  clearCruiseMarkerHighlight();
  clearBGPSelection();
  cruiseCurrentIndex = -1;
  cruiseQueuedMarkerIds = [];
  cruiseAdvanceQueued = false;
  cruiseAdvanceInterrupt = false;
  if (!preserveCard) {
    setCruiseCardPinned(false);
  }
  if (!preserveCard && !lockedObject) {
    hideInfoCard();
  }
}

async function focusCruiseMarker(marker, { interrupt = false } = {}) {
  const earth = getEarth();
  if (!marker || !earth || !isCruiseModeActive() || !getAutoRotate()) return;
  const sequenceToken = ++cruiseSequenceToken;
  const abortPresentation = () => {
    hideInfoCard();
    setCruiseCardPinned(false);
  };
  const shouldAbortSequence = () =>
    sequenceToken !== cruiseSequenceToken ||
    !isCruiseModeActive() ||
    !getAutoRotate();

  clearCruiseTimers();
  clearCruiseMarkerHighlight();
  clearLockedObject();
  hideInfoCard();
  setCruiseCardPinned(false);

  cruiseCurrentMarkerId = marker.userData?.id || null;
  cruiseConnectorNeedsAnimation = true;
  cruiseCardPlacement = getCruiseCardScreenCoords(marker);
  cruiseCurrentIndex = getCruiseMarkersSorted().findIndex(
    (item) => item.userData?.id === cruiseCurrentMarkerId,
  );
  setLegendMode("bgp");
  setBGPMarkerState(marker, "locked");
  showBGPEventOverlay(marker, earth);
  applyBGPEventSatelliteHighlights(marker);

  await focusEarthView(camera, {
    lat: marker.userData?.latitude ?? 0,
    lon: marker.userData?.longitude ?? 0,
    rotLon: (marker.userData?.longitude ?? 0) - 270,
    zoom: 1.0,
    duration: interrupt ? Math.round(CRUISE_CONFIG.focusDurationMs * 0.78) : CRUISE_CONFIG.focusDurationMs,
    suppressStatus: true,
  });

  if (
    shouldAbortSequence()
  ) {
    abortPresentation();
    return;
  }

  setCruiseCardPinned(true);
  cruisePresentationPhase = "connector";
  showCruiseConnectorVisual();

  const connectorReady = await waitForCruiseConnectorReady(sequenceToken);

  if (
    !connectorReady ||
    shouldAbortSequence()
  ) {
    abortPresentation();
    return;
  }

  const connectorDelayCompleted = await waitForCruiseDelay(
    CRUISE_CONNECTOR_DRAW_MS,
    sequenceToken,
  );

  if (
    !connectorDelayCompleted ||
    shouldAbortSequence()
  ) {
    abortPresentation();
    return;
  }

  cruisePresentationPhase = "card";
  showCruiseEventCard(marker);
  await nextAnimationFrame();
  if (!isCruiseInfoCardVisible()) {
    showCruiseEventCard(marker);
    await nextAnimationFrame();
  }
  if (!isCruiseInfoCardVisible() || shouldAbortSequence()) {
    abortPresentation();
    return;
  }
  cruisePresentationTimer.start(CRUISE_CONFIG.dwellMs);

  const dwellDelayCompleted = await waitForCruiseDelay(
    CRUISE_CONFIG.dwellMs,
    sequenceToken,
  );
  if (
    !dwellDelayCompleted ||
    shouldAbortSequence()
  ) {
    abortPresentation();
    return;
  }

  beginCruisePresentationHide();
  const hideDelayCompleted = await waitForCruiseDelay(
    CRUISE_PRESENTATION_HIDE_MS,
    sequenceToken,
    { useHideTimer: true },
  );
  if (
    !hideDelayCompleted ||
    shouldAbortSequence()
  ) {
    abortPresentation();
    return;
  }

  setCruiseCardPinned(false);
  const transitionGapCompleted = await waitForCruiseDelay(
    CRUISE_TRANSITION_GAP_MS,
    sequenceToken,
  );
  if (
    !transitionGapCompleted ||
    shouldAbortSequence()
  ) {
    abortPresentation();
    return;
  }

  void advanceCruiseEvent();
}

async function performCruiseAdvance({ interrupt = false } = {}) {
  if (!isCruiseModeActive() || !getAutoRotate()) return;

  const markers = getCruiseMarkersSorted();
  if (markers.length === 0) return;

  let targetMarker = null;

  while (cruiseQueuedMarkerIds.length > 0 && !targetMarker) {
    const queuedId = cruiseQueuedMarkerIds.shift();
    targetMarker = markers.find((marker) => marker.userData?.id === queuedId) || null;
  }

  if (!targetMarker) {
    const nextIndex =
      cruiseCurrentIndex >= 0
        ? (cruiseCurrentIndex + 1) % markers.length
        : 0;
    targetMarker = markers[nextIndex] || markers[0];
  }

  await focusCruiseMarker(targetMarker, { interrupt });
}

async function advanceCruiseEvent({ interrupt = false } = {}) {
  if (!isCruiseModeActive() || !getAutoRotate()) return;

  cruiseAdvanceQueued = true;
  cruiseAdvanceInterrupt = cruiseAdvanceInterrupt || interrupt;

  if (cruiseAdvanceInFlight) {
    return;
  }

  cruiseAdvanceInFlight = true;
  try {
    while (cruiseAdvanceQueued && isCruiseModeActive() && getAutoRotate()) {
      const nextInterrupt = cruiseAdvanceInterrupt;
      cruiseAdvanceQueued = false;
      cruiseAdvanceInterrupt = false;
      await performCruiseAdvance({ interrupt: nextInterrupt });
    }
  } finally {
    cruiseAdvanceInFlight = false;
  }
}

async function pollCruiseEventsIfNeeded() {
  if (!isCruiseModeActive() || !getAutoRotate() || !getShowBGP()) return;

  try {
    const [incidentResponse, anomalyResponse] = await Promise.all([
      fetch(`${PATHS.bgpIncidentsApi}?limit=${CRUISE_CONFIG.maxPolledEvents}`),
      fetch(`${PATHS.bgpApi}?limit=${CRUISE_CONFIG.maxPolledEvents}`),
    ]);

    if (!incidentResponse.ok || !anomalyResponse.ok) return;

    const [incidentPayload, anomalyPayload] = await Promise.all([
      incidentResponse.json(),
      anomalyResponse.json(),
    ]);

    const incidentFeatures = Array.isArray(incidentPayload?.features)
      ? incidentPayload.features
      : [];
    const anomalyFeatures = Array.isArray(anomalyPayload?.features)
      ? anomalyPayload.features
      : [];
    const selectedFeatures =
      incidentFeatures.length > 0 ? incidentFeatures : anomalyFeatures;

    const nextIds = selectedFeatures
      .map((feature) => {
        const properties = feature?.properties || {};
        const coords = feature?.geometry?.coordinates || [];
        return (
          properties.id ||
          properties.incident_key ||
          `${properties.collector || properties.incident_type || properties.anomaly_type || "event"}-${coords[1]}-${coords[0]}`
        );
      })
      .filter(Boolean);

    const newIds = nextIds.filter((id) => !cruiseKnownEventIds.has(id));
    if (newIds.length === 0) return;

    const bgpResult = await loadBGPAnomalies(scene, getEarth());
    updateBGPHud(bgpResult);
    setLegendItems("bgp", getBGPLegendItems());
    refreshLegend();
    syncCruiseKnownEventIds();
    cruiseQueuedMarkerIds = Array.from(
      new Set([...newIds, ...cruiseQueuedMarkerIds]),
    );
    if (
      cruisePresentationPhase === "hidden" &&
      !cruiseCardPinned &&
      !cruisePresentationTimer.isActive()
    ) {
      await advanceCruiseEvent({ interrupt: true });
    }
  } catch (error) {
    console.warn("巡航模式轮询 BGP 事件失败:", error);
  }
}

function ensureCruisePolling() {
  if (cruisePollTimerId) return;
  cruisePollTimerId = window.setInterval(
    () => {
      pollCruiseEventsIfNeeded().catch((error) => {
        console.warn("巡航轮询失败:", error);
      });
    },
    CRUISE_CONFIG.pollIntervalMs,
  );
  cleanupFns.push(() => {
    if (cruisePollTimerId) {
      clearInterval(cruisePollTimerId);
      cruisePollTimerId = null;
    }
  });
}

function handleRotationModeChange(event) {
  const detailMode = event?.detail?.mode || getRotationMode();
  const detailActive =
    typeof event?.detail?.active === "boolean"
      ? event.detail.active
      : getAutoRotate();

  if (detailMode !== ROTATION_MODE.CRUISE) {
    stopCruiseMode();
    return;
  }

  ensureCruisePolling();
  syncCruiseKnownEventIds();

  if (!detailActive) {
    stopCruiseMode({ preserveCard: true });
    return;
  }

  advanceCruiseEvent({ interrupt: true }).catch((error) => {
    console.warn("启动巡航模式失败:", error);
  });
}

function clearSelectionAndInfo() {
  clearLockedObject();
  interruptCruisePresentation();
  hideInfoCard();
}

function getBGPRelatedCableNames(marker) {
  const items = Array.isArray(marker?.userData?.related_cables)
    ? marker.userData.related_cables
    : [];

  const names = [];
  items.forEach((item) => {
    const cableNames = Array.isArray(item?.cable_names) ? item.cable_names : [];
    cableNames.forEach((name) => {
      if (name && !names.includes(name)) {
        names.push(name);
      }
    });
  });
  return names;
}

function getBGPInfrastructureSummary(marker) {
  return {
    cableCount: getBGPRelatedCableNames(marker).length,
    regionCount: getBGPRelatedRegions(marker).length,
  };
}

function buildBGPIncidentNarrative(marker, impactedRegions) {
  const eventLabel = formatBGPAnomalyTypeLabel(
    marker.userData.incident_type || marker.userData.anomaly_type,
  );
  const severityLabel = formatBGPSeverityLabel(
    marker.userData.rawSeverity || marker.userData.severity,
  );
  const observedBy =
    marker.userData.observed_by ||
    formatBGPObservedBy(marker.userData.collectors);
  const routeLabel =
    marker.userData.route_change ||
    formatBGPRouteChange(
      marker.userData.origin_asn,
      marker.userData.new_origin_asn,
    );
  const cableCount = getBGPRelatedCableNames(marker).length;
  const regionCount = impactedRegions.length;

  return `${eventLabel}，${severityLabel}；${observedBy}，影响${regionCount}个区域，关联${cableCount}条海缆线索${routeLabel && routeLabel !== "-" ? `，特征 ${routeLabel}` : ""}。`;
}

function getBGPRelatedRegions(marker) {
  if (Array.isArray(marker?.userData?.impacted_regions) && marker.userData.impacted_regions.length > 0) {
    return marker.userData.impacted_regions;
  }

  if (
    marker?.userData?.type === "bgp_collector" &&
    typeof marker.userData.latitude === "number" &&
    typeof marker.userData.longitude === "number"
  ) {
    return [
      {
        collector: marker.userData.collector,
        city: marker.userData.city,
        country: marker.userData.country,
        latitude: marker.userData.latitude,
        longitude: marker.userData.longitude,
      },
    ];
  }

  return [];
}

function applyBGPEventSatelliteHighlights(marker) {
  const relatedSatelliteIndices = getRelatedSatelliteIndicesForRegions(
    getBGPRelatedRegions(marker),
    { limit: 6, maxAngleDeg: 20 },
  );
  marker.userData.related_satellite_count = relatedSatelliteIndices.length;
  highlightRelatedSatellites(relatedSatelliteIndices, RELATED_SATELLITE_HIGHLIGHT_COLOR);
}

function applyBGPRelatedCablesAndLandingPoints(marker, camera) {
  const relatedCableNames = getBGPRelatedCableNames(marker);
  clearAllCableStates();
  relatedCableNames.forEach((name) => {
    getCableLines().forEach((cable) => {
      if (cable.userData?.name === name) {
        setCableState(cable.userData.cableId, CABLE_STATE.LOCKED);
      }
    });
  });
  applyLandingPointVisualState(
    relatedCableNames.length > 0 ? relatedCableNames : null,
    relatedCableNames.length === 0,
    camera,
  );
}

function applyCableVisualState() {
  const allCables = getCableLines();
  const pulse = (Math.sin(Date.now() * CABLE_CONFIG.pulseSpeed) + 1) * 0.5;

  allCables.forEach((cable) => {
    const cableId = cable.userData.cableId;
    const state = getCableState(cableId);

    const hasFocus =
      (lockedObjectType === "cable" && lockedObject) ||
      (lockedObjectType === "satellite" && lockedSatellite) ||
      (lockedObjectType === "bgp" && lockedObject) ||
      (isCruiseModeActive() && cruiseCardPinned);

    switch (state) {
      case CABLE_STATE.LOCKED:
      case CABLE_STATE.HOVERED:
        cable.material.opacity = 1;
        cable.material.color.setRGB(0.92, 0.98, 1.0);
        break;
      case CABLE_STATE.NORMAL:
      default:
        if (hasFocus) {
          cable.material.opacity = CABLE_CONFIG.otherOpacity;
          const origColor = cable.userData.originalColor;
          const brightness = CABLE_CONFIG.otherBrightness;
          cable.material.color.setRGB(
            (((origColor >> 16) & 255) / 255) * brightness,
            (((origColor >> 8) & 255) / 255) * brightness,
            ((origColor & 255) / 255) * brightness,
          );
        } else {
          cable.material.opacity = 1;
          cable.material.color.setHex(cable.userData.originalColor);
        }
    }
  });
}

function updatePointerFromEvent(event) {
  interactionMouse.set(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1,
  );
  interactionRaycaster.setFromCamera(interactionMouse, camera);
}

function buildLoadErrorMessage(errors) {
  if (errors.length === 0) return "";
  return errors
    .map(
      ({ label, reason }) =>
        `${label}加载失败: ${reason?.message || String(reason)}`,
    )
    .join("；");
}

function updateSatelliteToggleUi(enabled, satelliteCount = getSatelliteCount()) {
  const satBtn = document.getElementById("toggle-satellites");
  if (satBtn) {
    setLayerButtonState(satBtn, {
      active: enabled,
      loading: false,
      tooltip: enabled ? "隐藏卫星" : "显示卫星",
    });
  }

  const satelliteCountEl = document.getElementById("satellite-count");
  if (satelliteCountEl) {
    satelliteCountEl.textContent = `${satelliteCount} 颗`;
  }
}

function updateCableToggleUi(enabled) {
  const cableBtn = document.getElementById("toggle-cables");
  if (cableBtn) {
    setLayerButtonState(cableBtn, {
      active: enabled,
      loading: false,
      tooltip: enabled ? "隐藏线缆" : "显示线缆",
    });
  }

  const cableCountEl = document.getElementById("cable-count");
  if (cableCountEl) {
    cableCountEl.textContent = `${getCableLines().length}个`;
  }

  const landingPointCountEl = document.getElementById("landing-point-count");
  if (landingPointCountEl) {
    landingPointCountEl.textContent = `${getLandingPoints().length}个`;
  }
}

async function ensureCablesEnabled() {
  if (!scene || !camera || !renderer || destroyed) {
    return 0;
  }

  const earth = getEarth();
  if (!earth) return 0;

  cablesEnabled = true;
  if (getCableLines().length > 0 || getLandingPoints().length > 0) {
    toggleCables(true);
    updateCableToggleUi(true);
    setLegendItems("cables", getCableLegendItems());
    refreshLegend();
    return getCableLines().length;
  }

  const requestToken = ++cableToggleToken;

  clearCableData(earth);
  // Load landing points first so they appear before cable lines
  await loadLandingPoints(scene, earth, { silent: true });
  const cableCount = await loadGeoJSONFromPath(scene, earth, {
    silent: true,
  });

  if (requestToken !== cableToggleToken || !cablesEnabled || destroyed) {
    clearCableData(earth);
    return 0;
  }

  toggleCables(true);
  updateCableToggleUi(true);
  setLegendItems("cables", getCableLegendItems());
  refreshLegend();
  return cableCount;
}

function disableCables() {
  cablesEnabled = false;
  cableToggleToken += 1;
  toggleCables(false);
  updateCableToggleUi(false);
  setLegendItems("cables", getCableLegendItems());
  refreshLegend();
}

async function ensureSatellitesEnabled() {
  if (!scene || !camera || !renderer || destroyed) return 0;

  const earth = getEarth();
  if (!earth) return 0;

  satellitesEnabled = true;
  const requestToken = ++satelliteToggleToken;

  if (!getSatellitePoints()) {
    createSatellites(scene, earth);
  }

  clearSatelliteData();
  const loadResult = await loadSatellites({
    limit: getInitialSatelliteLoadLimit(),
  });

  if (
    requestToken !== satelliteToggleToken ||
    !satellitesEnabled ||
    destroyed
  ) {
    resetSatelliteState();
    return 0;
  }

  updateSatelliteToggleUi(true, loadResult.count);
  setLegendItems("satellites", getSatelliteLegendItems());
  refreshLegend();
  scheduleSatellitePositionWarmup(() => {
    if (
      requestToken === satelliteToggleToken &&
      satellitesEnabled &&
      !destroyed
    ) {
      toggleSatellites(true);
    }
  });

  if (shouldHydrateFullSatelliteSet(loadResult)) {
    const hydrationToken = ++satelliteHydrationToken;
    hydrateAllSatellitesInBackground(
      () =>
        hydrationToken === satelliteHydrationToken &&
        requestToken === satelliteToggleToken &&
        satellitesEnabled &&
        !destroyed,
    );
  }

  return loadResult.count;
}

function disableSatellites() {
  satellitesEnabled = false;
  satelliteToggleToken += 1;
  satelliteHydrationToken += 1;
  resetSatelliteState();
  updateSatelliteToggleUi(false, 0);
  setLegendItems("satellites", getSatelliteLegendItems());
  refreshLegend();
}

function updateStatsSummary() {
  updateEarthStats({
    cableCount: getCableLines().length,
    landingPointCount:
      document.getElementById("landing-point-count")?.textContent || 0,
    bgpAnomalyCount: `${getBGPCount()} 条`,
    bgpCollectorCount: `${getBGPCollectorCount()} 个`,
    bgpStatusSummary: getBGPStatusSummary(),
    terrainOn: getShowTerrain(),
    textureQuality: "8K 卫星图",
  });
}

function getCurrentViewCenterCoords() {
  const earth = getEarth();
  if (!earth || !camera) return null;

  scratchViewCenterWorld
    .copy(camera.position)
    .sub(earth.position)
    .normalize()
    .multiplyScalar(CONFIG.earthRadius);

  earth.worldToLocal(scratchViewCenterWorld);
  return vector3ToLatLon(scratchViewCenterWorld);
}

window.addEventListener("error", (event) => {
  console.error("全局错误:", event.error);
});

window.addEventListener("unhandledrejection", (event) => {
  console.error("未处理的 Promise 错误:", event.reason);
});

export function init() {
  if (initialized && !destroyed) return;

  destroyed = false;
  initialized = true;
  updateHudScale();
  const brandRoot = document.getElementById("brand-root");
  mountBrand(brandRoot, HUD_CONFIG.brandLanguage);
  initTVPanel();
  initNewsPanel();

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75,
    getViewportAspect(),
    0.1,
    5000,
  );
  camera.position.z = CONFIG.defaultCameraZ;
  setSatelliteCamera(camera);

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: false,
    powerPreference: "high-performance",
  });
  syncRendererViewport();
  renderer.setClearColor(0x02040a, 1);
  renderer.setPixelRatio(window.devicePixelRatio);

  const container = document.getElementById("container");
  if (container) {
    container.querySelector("canvas")?.remove();
    container.appendChild(renderer.domElement);
  }

  sceneLights = addLights();
  initInfoCard();
  initLegend();
  setLegendItems("cables", getCableLegendItems());
  setLegendItems("satellites", getSatelliteLegendItems());
  setLegendItems("bgp", getBGPLegendItems());
  const earthObj = createEarth(scene);
  applyImmediateView(earthObj, camera);
  targetRotation = {
    x: earthObj.rotation.x,
    y: earthObj.rotation.y,
  };
  inertialVelocity = { x: 0, y: 0 };
  createClouds(scene, earthObj);
  registerTerrainMesh(createTerrain(earthObj));
  initCelestialLayer(scene, {
    camera,
    sunLight: sceneLights?.sunLight ?? null,
    backLight: sceneLights?.backLight ?? null,
    earth: earthObj,
  });
  createGridLines(scene, earthObj);
  createSatellites(scene, earthObj);

  setupControls(camera, renderer, scene, earthObj);
  setupEventListeners();

  clock.start();
  loadData();
  animate();
  registerGlobalApi();
}

function registerGlobalApi() {
  window.__planetEarth = {
    reloadData,
    clearSelection: () => {
      hideInfoCard();
      clearLockedObject();
    },
    celestial: {
      getState: () => getCelestialDebugState(),
      setOrientation: (nextEuler) => setCelestialOrientation(nextEuler),
      setFollow: (nextFollow) => setCelestialFollow(nextFollow),
    },
    destroy,
    init,
  };
}

function addLights() {
  const ambientLight = new THREE.AmbientLight(0x404060);
  scene.add(ambientLight);

  const sunLight = new THREE.DirectionalLight(0xffffff, 1.2);
  sunLight.position.set(5, 3, 5);
  sunLight.target.position.set(0, 0, 0);
  scene.add(sunLight);
  scene.add(sunLight.target);

  const backLight = new THREE.DirectionalLight(0x446688, 0.3);
  backLight.position.set(-5, 0, -5);
  scene.add(backLight);

  const pointLight = new THREE.PointLight(0xffffff, 0.4);
  pointLight.position.set(10, 10, 10);
  scene.add(pointLight);

  return {
    ambientLight,
    sunLight,
    backLight,
    pointLight,
  };
}

// Yield control to the browser so the renderer can paint a frame before the next step
const yieldFrame = (ms = 24) => new Promise((r) => setTimeout(r, ms));

function scheduleSatellitePositionWarmup(onReady) {
  window.requestAnimationFrame(() => {
    updateSatellitePositions(POSITION_UPDATE_FORCE_DELTA, true);
    if (typeof onReady === "function") {
      onReady();
    }
  });
}

function getInitialSatelliteLoadLimit() {
  const configuredInitial = Number.isFinite(SATELLITE_CONFIG.initialLoadCount)
    ? Math.max(1, Math.floor(SATELLITE_CONFIG.initialLoadCount))
    : null;

  if (SATELLITE_CONFIG.maxCount > 0) {
    return configuredInitial === null
      ? SATELLITE_CONFIG.maxCount
      : Math.min(configuredInitial, SATELLITE_CONFIG.maxCount);
  }

  return configuredInitial;
}

function shouldHydrateFullSatelliteSet(loadResult) {
  if (!SATELLITE_CONFIG.hydrateFullAfterInitialLoad) return false;
  if (!loadResult || loadResult.requestedLimit === null) return false;
  return loadResult.count >= loadResult.requestedLimit;
}

async function hydrateAllSatellitesInBackground(guardFn) {
  try {
    const loadResult = await loadSatellites({ limit: null });
    if (!guardFn()) return;
    updateSatelliteToggleUi(true, loadResult.count);
    setLegendItems("satellites", getSatelliteLegendItems());
    refreshLegend();
    scheduleSatellitePositionWarmup();
  } catch (error) {
    console.warn("后台补全卫星全量数据失败:", error);
  }
}

async function loadData() {
  if (!scene || !camera || !renderer) return;
  if (isDataLoading) return;

  const earth = getEarth();
  if (!earth) return;

  const loadToken = ++currentLoadToken;
  isDataLoading = true;
  hideError();
  clearSelectionAndInfo();

  // Always begin as a white sphere so every layer appears explicitly
  clearEarthTexture();
  clearBGPData(earth);
  clearCableData(earth);
  clearSatelliteData();

  setLoadingMessage("正在初始化...");
  setLoading(true);
  await yieldFrame(18);
  if (loadToken !== currentLoadToken) { isDataLoading = false; return; }

  const errors = [];

  // Step 1 — Earth texture
  setLoadingMessage("正在加载地球纹理...");
  await yieldFrame(12);
  try {
    await loadEarthTexture();
  } catch (err) {
    // texture failure is non-fatal
  }
  if (loadToken !== currentLoadToken) { isDataLoading = false; return; }
  await yieldFrame(16);

  // Step 2 — Landing points
  if (cablesEnabled) {
    setLoadingMessage("正在加载登陆点...");
    await yieldFrame(12);
    try {
      await loadLandingPoints(scene, earth, { silent: true });
    } catch (err) {
      errors.push({ label: "登陆点", reason: err });
    }
    if (loadToken !== currentLoadToken) { isDataLoading = false; return; }
    await yieldFrame(16);
  }

  // Step 3 — Cables
  if (cablesEnabled) {
    setLoadingMessage("正在加载海缆...");
    await yieldFrame(12);
    try {
      const cableCount = await loadGeoJSONFromPath(scene, earth, {
        silent: true,
      });
      if (loadToken === currentLoadToken && cablesEnabled) {
        toggleCables(true);
        updateCableToggleUi(true);
        setLegendItems("cables", getCableLegendItems());
        refreshLegend();
      }
    } catch (err) {
      errors.push({ label: "海缆", reason: err });
    }
    if (loadToken !== currentLoadToken) { isDataLoading = false; return; }
    await yieldFrame(16);
  }

  // Step 4 — Satellites
  if (satellitesEnabled) {
    setLoadingMessage("正在加载卫星...");
    await yieldFrame(12);
    try {
      clearSatelliteData();
      const loadResult = await loadSatellites({
        limit: getInitialSatelliteLoadLimit(),
      });
      if (loadToken === currentLoadToken && satellitesEnabled) {
        updateSatelliteToggleUi(true, loadResult.count);
        setLegendItems("satellites", getSatelliteLegendItems());
        refreshLegend();
        scheduleSatellitePositionWarmup(() => {
          if (
            loadToken === currentLoadToken &&
            satellitesEnabled &&
            !destroyed
          ) {
            toggleSatellites(true);
          }
        });

        if (shouldHydrateFullSatelliteSet(loadResult)) {
          const hydrationToken = ++satelliteHydrationToken;
          hydrateAllSatellitesInBackground(
            () =>
              hydrationToken === satelliteHydrationToken &&
              loadToken === currentLoadToken &&
              satellitesEnabled &&
              !destroyed,
          );
        }
      }
    } catch (err) {
      errors.push({ label: "卫星", reason: err });
    }
    if (loadToken !== currentLoadToken) { isDataLoading = false; return; }
    await yieldFrame(16);
  }

  // Step 5 — BGP
  setLoadingMessage("正在加载BGP态势...");
  await yieldFrame(12);
  try {
    const bgpResult = await loadBGPAnomalies(scene, earth);
    if (loadToken === currentLoadToken) {
      toggleBGP(true);
      updateBGPHud(bgpResult);
      syncCruiseKnownEventIds();
    }
  } catch (err) {
    errors.push({ label: "BGP态势", reason: err });
  }
  if (loadToken !== currentLoadToken) { isDataLoading = false; return; }
  await yieldFrame(16);

  // Step 6 — Terrain (if enabled)
  if (getShowTerrain()) {
    setLoadingMessage("正在渲染地形...");
    await yieldFrame(24);
  }

  updateStatsSummary();
  updateCableToggleUi(cablesEnabled);
  updateSatelliteToggleUi(satellitesEnabled);
  setLegendItems("cables", getCableLegendItems());
  setLegendItems("satellites", getSatelliteLegendItems());
  setLegendItems("bgp", getBGPLegendItems());
  refreshLegend();
  setLoading(false);
  isDataLoading = false;

  if (getRotationMode() === ROTATION_MODE.CRUISE && getAutoRotate()) {
    advanceCruiseEvent({ interrupt: true }).catch((error) => {
      console.warn("初始化后启动巡航失败:", error);
    });
  }

  if (errors.length > 0) {
    const errorMessage = buildLoadErrorMessage(errors);
    showError(errorMessage);
    queueStatusMessage(errorMessage, "error");
  } else {
    hideError();
    queueStatusMessage("数据已加载", "success");
  }
}

const POSITION_UPDATE_FORCE_DELTA = 250;

export async function reloadData() {
  await loadData();
}

export async function setCablesEnabled(enabled) {
  if (enabled === cablesEnabled) {
    updateCableToggleUi(enabled);
    return getCableLines().length;
  }

  if (!enabled) {
    clearSelectionAndInfo();
    disableCables();
    showStatusMessage("线缆已隐藏", "info");
    return 0;
  }

  setLoadingMessage("正在加载线缆数据...");
  setLoading(true);
  hideError();

  try {
    const cableCount = await ensureCablesEnabled();
    showStatusMessage("线缆已显示", "info");
    return cableCount;
  } catch (error) {
    cablesEnabled = false;
    clearCableData(getEarth());
    updateCableToggleUi(false);
    const message = `线缆加载失败: ${error?.message || String(error)}`;
    showError(message);
    showStatusMessage(message, "error");
    throw error;
  } finally {
    setLoading(false);
  }
}

export async function setSatellitesEnabled(enabled) {
  if (enabled === satellitesEnabled) {
    updateSatelliteToggleUi(enabled);
    return getSatelliteCount();
  }

  if (!enabled) {
    clearSelectionAndInfo();
    disableSatellites();
    return 0;
  }

  setLoadingMessage("正在加载卫星数据...");
  setLoading(true);
  hideError();

  try {
    const satelliteCount = await ensureSatellitesEnabled();
    showStatusMessage("卫星已显示", "info");
    return satelliteCount;
  } catch (error) {
    satellitesEnabled = false;
    resetSatelliteState();
    updateSatelliteToggleUi(false, 0);
    const message = `卫星加载失败: ${error?.message || String(error)}`;
    showError(message);
    showStatusMessage(message, "error");
    throw error;
  } finally {
    setLoading(false);
  }
}

function setupEventListeners() {
  const handleResize = () => onWindowResize();
  const handleMouseMove = (event) => onMouseMove(event);
  const handleMouseDown = (event) => onMouseDown(event);
  const handleMouseUp = () => onMouseUp();
  const handleMouseLeave = () => onMouseLeave();
  const handleClick = (event) => onClick(event);
  const handlePageHide = () => destroy();
  const handleRotationMode = (event) => handleRotationModeChange(event);

  bindListener(window, "resize", handleResize);
  bindListener(window, "pagehide", handlePageHide);
  bindListener(window, "beforeunload", handlePageHide);
  bindListener(window, "earth:rotation-mode-change", handleRotationMode);
  bindListener(window, "mousemove", handleMouseMove);
  bindListener(renderer.domElement, "mousedown", handleMouseDown);
  bindListener(window, "mouseup", handleMouseUp);
  bindListener(renderer.domElement, "mouseleave", handleMouseLeave);
  bindListener(renderer.domElement, "click", handleClick);
}

function updateHudScale() {
  const widthScale = window.innerWidth / HUD_CONFIG.scaleReferenceWidth;
  const heightScale = window.innerHeight / HUD_CONFIG.scaleReferenceHeight;
  const nextScale = THREE.MathUtils.clamp(
    Math.min(widthScale, heightScale),
    HUD_CONFIG.minScale,
    HUD_CONFIG.maxScale,
  );

  document.documentElement.style.setProperty(
    "--hud-scale",
    nextScale.toFixed(3),
  );
}

function onWindowResize() {
  updateHudScale();
  syncRendererViewport();
  repositionCruiseConnector();
}

function getFrontFacingCables(cableLines) {
  const earth = getEarth();
  if (!earth) return cableLines;

  scratchCameraToEarth.subVectors(camera.position, earth.position).normalize();

  return cableLines.filter((cable) => {
    if (!cable.userData.localCenter) {
      return true;
    }

    scratchCableCenter.copy(cable.userData.localCenter);
    cable.localToWorld(scratchCableCenter);
    scratchCableDirection
      .subVectors(scratchCableCenter, earth.position)
      .normalize();
    return scratchCameraToEarth.dot(scratchCableDirection) > 0;
  });
}

function getFrontFacingBGPMarkers(markers) {
  const earth = getEarth();
  if (!earth) return markers;

  scratchCameraToEarth.subVectors(camera.position, earth.position).normalize();

  return markers.filter((marker) => {
    scratchBGPWorldPosition.copy(marker.position);
    marker.parent?.localToWorld(scratchBGPWorldPosition);
    scratchBGPDirection
      .subVectors(scratchBGPWorldPosition, earth.position)
      .normalize();
    return scratchCameraToEarth.dot(scratchBGPDirection) > 0;
  });
}

function onMouseMove(event) {
  const earth = getEarth();
  if (!earth) return;

  if (isEventOnHud(event)) {
    clearTransientHoverState();
    // Info card stays visible at its click position; just maintain BGP visual state
    if (lockedObjectType === "bgp" && lockedObject) {
      applyBGPHoverState(lockedObject);
    } else if (lockedObjectType === "bgp_collector" && lockedObject) {
      applyBGPHoverState(lockedObject);
    } else if (!lockedObject && !lockedSatellite && !cruiseCardPinned) {
      hideInfoCard();
    }
    hideTooltip();
    return;
  }

  if (isDragging) {
    if (Date.now() - dragStartTime > 500) {
      isLongDrag = true;
    }

    const deltaX = event.clientX - previousMousePosition.x;
    const deltaY = event.clientY - previousMousePosition.y;
    const dragRotationFactor = getDragRotationFactor();
    const rotationDeltaY = deltaX * dragRotationFactor;
    const rotationDeltaX = deltaY * dragRotationFactor;

    targetRotation.y += rotationDeltaY;
    targetRotation.x += rotationDeltaX;
    inertialVelocity.y = rotationDeltaY;
    inertialVelocity.x = rotationDeltaX;
    previousMousePosition = { x: event.clientX, y: event.clientY };
    hideTooltip();
    return;
  }

  updatePointerFromEvent(event);

  const frontCables = getFrontFacingCables(getCableLines());
  const cableIntersects = interactionRaycaster.intersectObjects(frontCables);
  const frontFacingBGPAnomalyMarkers = getFrontFacingBGPMarkers(
    getBGPAnomalyMarkers(),
  );
  const frontFacingBGPCollectorMarkers = getFrontFacingBGPMarkers(
    getBGPCollectorMarkers(),
  );
  const bgpAnomalyIntersects = getShowBGP()
    ? interactionRaycaster.intersectObjects(frontFacingBGPAnomalyMarkers)
    : [];
  const bgpCollectorIntersects = getShowBGP()
    ? interactionRaycaster.intersectObjects(frontFacingBGPCollectorMarkers)
    : [];

  let hoveredSat = null;
  let hoveredSatIndexFromIntersect = null;
  if (getShowSatellites()) {
    const satPoints = getSatellitePoints();
    if (satPoints) {
      const satIntersects = interactionRaycaster.intersectObject(satPoints);
      if (satIntersects.length > 0) {
        const satIndex = satIntersects[0].index;
        if (isSatelliteFrontFacing(satIndex, camera)) {
          hoveredSatIndexFromIntersect = satIndex;
          hoveredSat = selectSatellite(satIndex);
        }
      }
    }
  }

  const hoveredBGPMarker = getPrimaryBGPHoverTarget(
    bgpAnomalyIntersects,
    bgpCollectorIntersects,
  );

  if (hoveredBGP && !isSameBGPMarker(hoveredBGP, hoveredBGPMarker)) {
    clearTransientHoverState();
  }

  if (
    hoveredCable &&
    (!cableIntersects.length ||
      !isSameCable(cableIntersects[0]?.object, hoveredCable))
  ) {
    clearTransientHoverState();
  }

  if (
    hoveredSatelliteIndex !== null &&
    hoveredSatelliteIndex !== hoveredSatIndexFromIntersect
  ) {
    clearTransientHoverState();
  }

  let objectTooltipShown = false;

  if (
    hoveredBGPMarker &&
    getShowBGP() &&
    lockedObjectType !== "bgp" &&
    lockedObjectType !== "bgp_collector"
  ) {
    applyBGPHoverState(hoveredBGPMarker);
    if (hoveredBGPMarker.userData?.type === "bgp") {
      showTooltip(event.clientX + TOOLTIP_CURSOR_OFFSET, event.clientY + TOOLTIP_CURSOR_OFFSET, getBGPBriefHtml(hoveredBGPMarker));
    } else {
      showTooltip(event.clientX + TOOLTIP_CURSOR_OFFSET, event.clientY + TOOLTIP_CURSOR_OFFSET, getBGPCollectorBriefHtml(hoveredBGPMarker));
    }
    objectTooltipShown = true;
  } else if (cableIntersects.length > 0 && getShowCables()) {
    const cable = cableIntersects[0].object;
    hoveredCable = cable;
    if (!isSameCable(cable, lockedObject)) {
      setCableState(cable.userData.cableId, CABLE_STATE.HOVERED);
    }
    showTooltip(event.clientX + TOOLTIP_CURSOR_OFFSET, event.clientY + TOOLTIP_CURSOR_OFFSET, getCableBriefHtml(cable));
    objectTooltipShown = true;
  } else if (hoveredSat?.properties) {
    hoveredSatellite = hoveredSat;
    hoveredSatelliteIndex = hoveredSatIndexFromIntersect;
    if (hoveredSatelliteIndex !== lockedSatelliteIndex) {
      const satPositions = getSatellitePositions();
      if (satPositions && satPositions[hoveredSatelliteIndex]) {
        setSatelliteRingState(
          hoveredSatelliteIndex,
          "hover",
          satPositions[hoveredSatelliteIndex].current,
        );
      }
    }
    showTooltip(event.clientX + TOOLTIP_CURSOR_OFFSET, event.clientY + TOOLTIP_CURSOR_OFFSET, getSatelliteBriefHtml(hoveredSat.properties));
    objectTooltipShown = true;
  } else if (lockedObjectType === "bgp" && lockedObject) {
    applyBGPHoverState(lockedObject);
  } else if (lockedObjectType === "bgp_collector" && lockedObject) {
    applyBGPHoverState(lockedObject);
  } else if (!lockedObjectType && !cruiseCardPinned) {
    resetTransientBGPStates();
    hideInfoCard();
  }

  if (!objectTooltipShown) {
    const earthPoint = screenToEarthCoords(
      event.clientX,
      event.clientY,
      camera,
      earth,
      document.body,
      interactionRaycaster,
      interactionMouse,
    );
    if (earthPoint) {
      const coords = vector3ToLatLon(earthPoint);
      updateCoordinatesDisplay(coords.lat, coords.lon, coords.alt);
      showTooltip(
        event.clientX + TOOLTIP_COORDS_OFFSET,
        event.clientY + TOOLTIP_COORDS_OFFSET,
        `纬度: ${coords.lat}°<br>经度: ${coords.lon}°<br>海拔: ${coords.alt.toFixed(1)} km`,
      );
    } else {
      hideTooltip();
    }
  }
}

function onMouseDown(event) {
  if (isEventOnHud(event)) {
    return;
  }

  const earth = getEarth();
  isDragging = true;
  dragStartTime = Date.now();
  isLongDrag = false;
  previousMousePosition = { x: event.clientX, y: event.clientY };
  inertialVelocity = { x: 0, y: 0 };
  if (earth) {
    targetRotation = {
      x: earth.rotation.x,
      y: earth.rotation.y,
    };
  }
  document.getElementById("container")?.classList.add("dragging");
  hideTooltip();
}

function onMouseUp() {
  isDragging = false;
  document.getElementById("container")?.classList.remove("dragging");
}

function onMouseLeave() {
  hideTooltip();
}

function onClick(event) {
  const earth = getEarth();
  if (!earth) return;
  if (isEventOnHud(event)) return;

  updatePointerFromEvent(event);

  const cableIntersects = interactionRaycaster.intersectObjects(
    getFrontFacingCables(getCableLines()),
  );
  const frontFacingBGPAnomalyMarkers = getFrontFacingBGPMarkers(
    getBGPAnomalyMarkers(),
  );
  const frontFacingBGPCollectorMarkers = getFrontFacingBGPMarkers(
    getBGPCollectorMarkers(),
  );
  const bgpAnomalyIntersects = getShowBGP()
    ? interactionRaycaster.intersectObjects(frontFacingBGPAnomalyMarkers)
    : [];
  const bgpCollectorIntersects = getShowBGP()
    ? interactionRaycaster.intersectObjects(frontFacingBGPCollectorMarkers)
    : [];
  const satIntersects = getShowSatellites()
    ? interactionRaycaster.intersectObject(getSatellitePoints())
    : [];

  const clickedBGPMarker = getShowBGP()
    ? getPrimaryBGPClickTarget(event, bgpAnomalyIntersects, bgpCollectorIntersects)
    : null;

  if (clickedBGPMarker?.userData?.type === "bgp") {
    interruptCruisePresentation();
    clearLockedObject();

    const clickedMarker = clickedBGPMarker;
    setBGPMarkerState(clickedMarker, "locked");

    lockedObject = clickedMarker;
    lockedObjectType = "bgp";
    lastBGPClickTime = Date.now();
    lastBGPClickCollector = clickedMarker.userData?.collector || null;
    lastBGPClickType = "bgp";
    lastBGPClickPos = { x: event.clientX, y: event.clientY };
    setAutoRotate(false);
    showBGPEventOverlay(clickedMarker, earth);
    applyBGPEventSatelliteHighlights(clickedMarker);
    const incidentSummary = getBGPInfrastructureSummary(clickedMarker);
    showBGPInfo(clickedMarker, { x: event.clientX, y: event.clientY });
    showStatusMessage(
      `已选择BGP事件: ${clickedMarker.userData.collector} · ${incidentSummary.regionCount}个区域 / ${incidentSummary.cableCount}条相关海缆`,
      "info",
    );
    return;
  }

  if (clickedBGPMarker?.userData?.type === "bgp_collector") {
    interruptCruisePresentation();
    clearLockedObject();

    const clickedMarker = clickedBGPMarker;
    setBGPMarkerState(clickedMarker, "locked");

    lockedObject = clickedMarker;
    lockedObjectType = "bgp_collector";
    lastBGPClickTime = Date.now();
    lastBGPClickCollector = clickedMarker.userData?.collector || null;
    lastBGPClickType = "bgp_collector";
    lastBGPClickPos = { x: event.clientX, y: event.clientY };
    setAutoRotate(false);
    showBGPCollectorCoverageOverlay(clickedMarker, earth);
    clickedMarker.userData.related_satellite_count = 0;
    showBGPCollectorInfo(clickedMarker, { x: event.clientX, y: event.clientY });
    showStatusMessage(
      `已选择观测站: ${clickedMarker.userData.collector}`,
      "info",
    );
    return;
  }

  if (cableIntersects.length > 0 && getShowCables()) {
    interruptCruisePresentation();
    clearLockedObject();

    const clickedCable = cableIntersects[0].object;
    const cableId = clickedCable.userData.cableId;
    setCableState(cableId, CABLE_STATE.LOCKED);

    lockedObject = clickedCable;
    lockedObjectType = "cable";
    setAutoRotate(false);
    {
      const cableLandingRegions = getLandingPoints()
        .filter((lp) => lp.userData.cableNames?.includes(clickedCable.userData.name))
        .map((lp) => {
          const { lat, lon } = vector3ToLatLon(lp.position);
          return { latitude: lat, longitude: lon };
        });
      const relatedSatelliteIndices = getRelatedSatelliteIndicesForRegions(
        cableLandingRegions,
        { limit: 6, maxAngleDeg: 20 },
      );
      highlightRelatedSatellites(relatedSatelliteIndices, RELATED_SATELLITE_HIGHLIGHT_COLOR);
    }
    handleCableClick(clickedCable);
    showCableInfo(clickedCable, { x: event.clientX, y: event.clientY });
    return;
  }

  if (satIntersects.length > 0) {
    const now = Date.now();
    const clickX = event.clientX;
    const clickY = event.clientY;

    const frontFacingSats = satIntersects.filter((sat) =>
      isSatelliteFrontFacing(sat.index, camera),
    );
    if (frontFacingSats.length === 0) return;

    let selectedIndex = frontFacingSats[0].index;
    if (
      frontFacingSats.length > 1 &&
      now - lastSatClickTime < 500 &&
      Math.abs(clickX - lastSatClickPos.x) < 30 &&
      Math.abs(clickY - lastSatClickPos.y) < 30
    ) {
      const currentIdx = frontFacingSats.findIndex(
        (sat) => sat.index === lastSatClickIndex,
      );
      selectedIndex =
        frontFacingSats[(currentIdx + 1) % frontFacingSats.length].index;
    }

    lastSatClickTime = now;
    lastSatClickIndex = selectedIndex;
    lastSatClickPos = { x: clickX, y: clickY };

    const sat = selectSatellite(selectedIndex);
    if (!sat?.properties) return;

    interruptCruisePresentation();
    clearLockedObject();

    lockedObject = sat;
    lockedObjectType = "satellite";
    lockedSatellite = sat;
    lockedSatelliteIndex = selectedIndex;
    setLockedSatelliteIndex(selectedIndex);
    showPredictedOrbit(sat);
    setAutoRotate(false);

    const satPositions = getSatellitePositions();
    if (satPositions?.[selectedIndex]) {
      setSatelliteRingState(
        selectedIndex,
        "locked",
        satPositions[selectedIndex].current,
      );
    }

    showSatelliteInfo(sat.properties, { x: event.clientX, y: event.clientY });
    showStatusMessage("已选择: " + sat.properties.name, "info");
    return;
  }

  if (!isLongDrag) {
    interruptCruisePresentation();
    clearLockedObject();
    hideInfoCard();
    setAutoRotate(true);
  }
}

function animate() {
  if (destroyed) return;

  animationFrameId = requestAnimationFrame(animate);

  const earth = getEarth();
  const deltaTime = clock.getDelta() * 1000;
  const hasInertia =
    Math.abs(inertialVelocity.x) > INERTIA_MIN_VELOCITY ||
    Math.abs(inertialVelocity.y) > INERTIA_MIN_VELOCITY;

  if (getAutoRotate() && getRotationMode() === ROTATION_MODE.ROTATE && earth) {
    earth.rotation.y += CONFIG.rotationSpeed * (deltaTime / 16);

    // Keep the drag target aligned with autorotation only when the user is not
    // actively dragging and there is no residual inertial motion to preserve.
    if (!isDragging && !hasInertia) {
      targetRotation.y = earth.rotation.y;
      targetRotation.x = earth.rotation.x;
    }
  }

  if (earth) {
    if (isDragging) {
      // Smoothly follow the drag target to match the legacy interaction feel.
      earth.rotation.x +=
        (targetRotation.x - earth.rotation.x) * DRAG_SMOOTHING_FACTOR;
      earth.rotation.y +=
        (targetRotation.y - earth.rotation.y) * DRAG_SMOOTHING_FACTOR;
    } else if (
      Math.abs(inertialVelocity.x) > INERTIA_MIN_VELOCITY ||
      Math.abs(inertialVelocity.y) > INERTIA_MIN_VELOCITY
    ) {
      // Continue rotating after release and gradually decay the motion.
      targetRotation.x += inertialVelocity.x * (deltaTime / 16);
      targetRotation.y += inertialVelocity.y * (deltaTime / 16);
      earth.rotation.x +=
        (targetRotation.x - earth.rotation.x) * DRAG_SMOOTHING_FACTOR;
      earth.rotation.y +=
        (targetRotation.y - earth.rotation.y) * DRAG_SMOOTHING_FACTOR;
      inertialVelocity.x *= Math.pow(INERTIA_DAMPING, deltaTime / 16);
      inertialVelocity.y *= Math.pow(INERTIA_DAMPING, deltaTime / 16);
    } else {
      inertialVelocity.x = 0;
      inertialVelocity.y = 0;
      targetRotation.x = earth.rotation.x;
      targetRotation.y = earth.rotation.y;
    }
  }

  applyCableVisualState();
  const activeCruiseMarker = (isCruiseModeActive() && cruiseCardPinned && cruiseCurrentMarkerId)
    ? getBGPAnomalyMarkers().find((m) => m.userData?.id === cruiseCurrentMarkerId) ?? null
    : null;
  updateBGPVisualState(lockedObjectType, lockedObject, camera, activeCruiseMarker);

  if (lockedObjectType === "cable" && lockedObject) {
    applyLandingPointVisualState(lockedObject.userData.name, false, camera);
  } else if (
    lockedObjectType === "satellite" && lockedSatellite
  ) {
    applyLandingPointVisualState(null, true, camera);
  } else if (lockedObjectType === "bgp" && lockedObject) {
    applyBGPRelatedCablesAndLandingPoints(lockedObject, camera);
  } else if (lockedObjectType === "bgp_collector" && lockedObject) {
    clearAllCableStates();
    resetLandingPointVisualState(camera);
  } else if (activeCruiseMarker) {
    applyBGPRelatedCablesAndLandingPoints(activeCruiseMarker, camera);
  } else {
    resetLandingPointVisualState(camera);
  }

  updateSatellitePositions(deltaTime);
  updateBreathingPhase(deltaTime);
  updateRelatedSatelliteHighlights();
  updateCelestialLayer(new Date(), camera);
  setEarthSunDirection(getSunDirection());
  updateNewsViewFocus(getCurrentViewCenterCoords());
  const satPositions = getSatellitePositions();
  if (
    lockedObjectType === "satellite" &&
    lockedSatelliteIndex !== null &&
    satPositions?.[lockedSatelliteIndex]
  ) {
    updateLockedRingPosition(satPositions[lockedSatelliteIndex].current);
  } else if (
    hoveredSatelliteIndex !== null &&
    satPositions?.[hoveredSatelliteIndex]
  ) {
    updateHoverRingPosition(satPositions[hoveredSatelliteIndex].current);
  }

  repositionCruiseConnector();
  renderer.render(scene, camera);
}

export function destroy() {
  if (destroyed) return;
  destroyed = true;
  currentLoadToken += 1;
  isDataLoading = false;

  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
    animationFrameId = null;
  }

  teardownControls();
  while (cleanupFns.length) {
    const cleanup = cleanupFns.pop();
    cleanup?.();
  }

  clearLockedObject();
  clearCableData(getEarth());
  clearBGPData(getEarth());
  resetSatelliteState();
  clearUiState();
  disposeCelestialLayer();
  clearTerrainData();

  if (scene) {
    disposeSceneObject(scene);
  }

  if (renderer) {
    renderer.dispose();
    if (typeof renderer.forceContextLoss === "function") {
      renderer.forceContextLoss();
    }
    renderer.domElement?.remove();
  }

  scene = null;
  camera = null;
  renderer = null;
  sceneLights = null;
  initialized = false;

  delete window.__planetEarth;
}

document.addEventListener("DOMContentLoaded", init);