(function () {
  "use strict";

  const config = window.OSM_ASSET_PREVIEW_CONFIG || {};
  const statusEl = document.getElementById("status");
  const diagnosticsEl = document.getElementById("diagnostics");
  const loadingOverlay = document.getElementById("loadingOverlay");
  const toggleCruise = document.getElementById("toggleCruise");
  const toggleFollow = document.getElementById("toggleFollow");
  const toggleScene = document.getElementById("toggleScene");
  const toggleBuildingGhost = document.getElementById("toggleBuildingGhost");
  const toggleRoutes = document.getElementById("toggleRoutes");
  const toggleVehicles = document.getElementById("toggleVehicles");
  const toggleSignals = document.getElementById("toggleSignals");
  const signalsControl = document.getElementById("signalsControl");
  const toggleFps = document.getElementById("toggleFps");
  const toggleDiagnostics = document.getElementById("toggleDiagnostics");
  const assetToggles = document.getElementById("assetToggles");
  const vehicleInfoCard = document.getElementById("vehicleInfoCard");
  const vehicleInfoTitle = document.getElementById("vehicleInfoTitle");
  const vehicleInfoDetails = document.getElementById("vehicleInfoDetails");
  const vehicleIncidentNote = document.getElementById("vehicleIncidentNote");
  const closeVehicleInfo = document.getElementById("closeVehicleInfo");
  const vehicleStatusButtons = Array.from(document.querySelectorAll("[data-vehicle-status]"));
  // The exported road surface sits at the 0.35m scene anchor plus 0.03m.
  // Vehicle models have their wheels at local Y=0, so keep them just clear
  // of the asphalt instead of using the old visibly floating 1.15m height.
  const VEHICLE_HEIGHT_METERS = 0.40;
  const ROUTE_LINE_HEIGHT_METERS = 0.42;
  const semanticToggles = document.getElementById("semanticToggles");
  const vehicleSelect = document.getElementById("vehicleSelect");
  const speedControl = document.getElementById("speedControl");
  const speedLabel = document.getElementById("speedLabel");
  const cameraButtons = Array.from(document.querySelectorAll("[data-camera]"));
  const viewModeButtons = Array.from(document.querySelectorAll("[data-view-mode]"));

  // Status carries two kinds of message: the scene summary, which is what the
  // panel should read whenever nothing else is going on, and transient notes
  // from a control the user just touched. Keep the summary so the transient
  // note can be replaced instead of destroying it.
  let baseStatus = "";
  const PREVIEW_BACKGROUND = "#d9e0e2";

  Cesium.Ion.defaultAccessToken = "";

  async function main() {
    setLoadingMessage("Loading scene", config.areaId || "");
    const metadata = await fetchJson(config.metadataName);
    const descriptor = config.previewDescriptorName ? await fetchOptionalJson(config.previewDescriptorName) : null;
    adaptPackageManifest(metadata, descriptor);
    const signalData = await fetchOptionalJson(config.trafficSignalsName);
    const placement = scenePlacement(metadata);
    const viewer = createViewer();
    setLoadingMessage("Loading model", config.glbName || "");
    const assets = await loadSceneAssets(viewer, metadata, placement);
    const trafficStart = Cesium.JulianDate.now();
    const trafficSignals = createLiveTrafficSignals(signalData, assets);
    hideUnconfirmedSignalAssets(assets);
    const cruise = createLiveVehicleState();
    const cameras = createCameraPresets(viewer, metadata, placement, cruise);
    const v2xOverlay = typeof window.createV2xCesiumOverlay === "function"
        ? window.createV2xCesiumOverlay({
          viewer,
          metadata,
          placement,
          config,
          nativeSignals: (signalData && signalData.signals) || [],
          setSignalState: (entries) => trafficSignals.update(entries),
        })
      : null;

    buildAssetToggles(assets);
    buildSemanticToggles(viewer, assets, placement);
    bindRuntimeControls(viewer, assets, cruise, cameras, placement, trafficSignals);
    bindVehicleInfoCard(viewer, cruise);
    startDiagnostics(viewer, metadata, assets, cruise, placement, trafficSignals, v2xOverlay);
    cameras.overview();
    baseStatus = summaryText(metadata, assets, cruise);
    setStatus(baseStatus);
    setLoadingMessage("Preparing view", "finalizing materials");
    await waitForStableFrames(viewer);
    document.body.classList.add("scene-ready");
    // Handle for the browser console and for headless checks: everything else
    // in here is closed over by the IIFE and unreachable from outside.
    window.osmPreview = { viewer, metadata, placement, assets, cruise, trafficSignals, cameras, v2xOverlay };
  }

  async function fetchJson(url) {
    // Generated preview JSON keeps a stable filename; bypass browser caches so
    // route regeneration is visible immediately during inspection.
    const response = await fetch(url, { cache: "no-store" });
    if (!response.ok) {
      throw new Error("Could not load " + url + ": " + response.status);
    }
    return response.json();
  }

  // The route file is an extra on top of the scene, not a precondition for it.
  // A missing or unreadable route costs the cruise controls, not the preview.
  async function fetchOptionalJson(url) {
    if (!url) return null;
    try {
      return await fetchJson(url);
    } catch (error) {
      console.warn(error);
      return null;
    }
  }

  function createViewer() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false,
      timeline: false,
      baseLayerPicker: false,
      geocoder: false,
      navigationHelpButton: false,
      sceneModePicker: false,
      homeButton: true,
      fullscreenButton: true,
      infoBox: false,
      selectionIndicator: false,
      baseLayer: false
    });
    viewer.scene.globe.show = false;
    viewer.scene.globe.depthTestAgainstTerrain = false;
    viewer.scene.backgroundColor = Cesium.Color.fromCssColorString(PREVIEW_BACKGROUND);
    viewer.scene.skyAtmosphere.show = false;
    viewer.scene.skyBox.show = false;
    viewer.scene.sun.show = false;
    viewer.scene.moon.show = false;
    viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString(PREVIEW_BACKGROUND);
    return viewer;
  }

  function setLoadingMessage(title, detail) {
    if (!loadingOverlay) return;
    const titleEl = loadingOverlay.querySelector("strong");
    const detailEl = loadingOverlay.querySelector("span");
    if (titleEl) titleEl.textContent = title;
    if (detailEl) detailEl.textContent = detail || "";
  }

  function waitForStableFrames(viewer) {
    return new Promise((resolve) => {
      const started = performance.now();
      let frames = 0;
      let done = false;
      let remove = function () {};
      function finish() {
        if (done) return;
        done = true;
        remove();
        resolve();
      }
      remove = viewer.scene.postRender.addEventListener(() => {
        frames += 1;
        const elapsed = performance.now() - started;
        if ((frames >= 14 && elapsed >= 650) || elapsed >= 2800) {
          finish();
        }
      });
      window.setTimeout(finish, 3200);
      viewer.scene.requestRender();
    });
  }

  function scenePlacement(metadata) {
    const anchor = metadata.anchor || metadata.placement || {};
    const longitude = Number(anchor.longitude || 0);
    const latitude = Number(anchor.latitude || 0);
    const height = Number(anchor.height || 0);
    const heading = Number(metadata.heading_correction_degrees ?? metadata.placement?.headingCorrectionDegrees ?? 0);
    const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
    const enu = Cesium.Transforms.eastNorthUpToFixedFrame(position);
    const correction = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading));
    return {
      longitude,
      latitude,
      height,
      heading,
      position,
      modelMatrix: Cesium.Matrix4.multiplyByMatrix3(enu, correction, new Cesium.Matrix4())
    };
  }

  function normalizedAssets(metadata) {
    if (metadata.schema === "osm-asset-package/v1") {
      const staticAssets = metadata.assets.map((asset) => ({
        id: asset.id,
        label: asset.id,
        type: "model",
        // Package URIs are relative to manifest.json, not the preview HTML.
        url: new URL(asset.uri, new URL(config.metadataName, window.location.href)).href,
        enabled: asset.defaultLoad,
        category: asset.category,
        semantic: asset.role === "layer",
      }));
      const runtimeAssets = (metadata.runtime || []).filter((asset) => asset.type !== "traffic-signal-anchors").map((asset) => ({
        id: asset.id,
        label: asset.id,
        type: "model",
        url: new URL(asset.uri, new URL(config.metadataName, window.location.href)).href,
        enabled: true,
        category: asset.type === "traffic-signal-lenses" ? "dynamic" : asset.type === "traffic-signal-countdown" ? "countdown" : asset.type,
        phaseGroup: asset.phaseGroup,
      }));
      return staticAssets.concat(runtimeAssets, metadata.previewAssets || []);
    }
    const assets = Array.isArray(metadata.assets) && metadata.assets.length
      ? metadata.assets
      : [{
        id: "main",
        label: "Scene",
        type: "model",
        url: metadata.asset || config.glbName,
        enabled: true
      }];
    return assets.filter((asset) => (asset.type || "model") === "model" && asset.url);
  }

  function adaptPackageManifest(metadata, descriptor) {
    if (metadata.schema !== "osm-asset-package/v1") return;
    metadata.anchor = metadata.placement;
    metadata.heading_correction_degrees = metadata.placement.headingCorrectionDegrees;
    metadata.scene_stats = metadata.sceneStats || {};
    metadata.bounds = { min_lon: metadata.bounds.minLon, min_lat: metadata.bounds.minLat, max_lon: metadata.bounds.maxLon, max_lat: metadata.bounds.maxLat };
    if (descriptor?.assets) metadata.previewAssets = descriptor.assets;
  }

  // One broken entry in metadata.assets should not blank the whole preview, so
  // failures are collected and surfaced in the diagnostics panel instead.
  async function loadSceneAssets(viewer, metadata, placement) {
    const loaded = [];
    for (const asset of normalizedAssets(metadata)) {
      const id = asset.id || "asset-" + loaded.length;
      const label = asset.label || asset.id || asset.url;
      const entry = { ...asset, id, label, model: null, error: null };
      loaded.push(entry);
      // Semantic assets are inspection aids. Defer their network and GPU cost
      // until the user explicitly switches out of the normal scene view.
      if (entry.semantic || entry.enabled === false) continue;
      await loadAsset(viewer, entry, placement);
    }
    if (!loaded.some((asset) => asset.model && asset.category !== "semantic")) {
      throw new Error("No scene model could be loaded (" + loaded.length + " declared)");
    }
    return loaded;
  }

  async function loadAsset(viewer, asset, placement) {
    if (asset.model || asset.error) return asset.model;
    if (asset.loading) return asset.loading;
    asset.loading = Cesium.Model.fromGltfAsync({
      url: asset.url,
      modelMatrix: placement.modelMatrix,
      scale: Number(asset.scale || 1.0)
    }).then((model) => {
      model.show = asset.enabled !== false;
      viewer.scene.primitives.add(model);
      asset.model = model;
      return model;
    }).catch((error) => {
      console.error(error);
      asset.error = error;
      return null;
    }).finally(() => {
      asset.loading = null;
    });
    return asset.loading;
  }

  function liveAssets(assets) {
    return assets.filter((asset) => asset.model && asset.category !== "semantic");
  }

  function semanticAssets(assets) {
    return assets.filter((asset) => asset.category === "semantic");
  }

  // A single-asset scene keeps the plain "Scene" checkbox; a multi-asset one
  // gets a child checkbox per model with "Scene" acting as the master.
  function buildAssetToggles(assets) {
    const live = liveAssets(assets);
    if (live.length < 2) return;
    for (const asset of live) {
      const label = document.createElement("label");
      const input = document.createElement("input");
      input.type = "checkbox";
      input.checked = asset.model.show;
      input.dataset.assetId = asset.id;
      input.addEventListener("change", () => {
        asset.model.show = input.checked;
        syncSceneMaster(assets);
        setStatus(asset.label + (input.checked ? " visible" : " hidden"));
      });
      label.appendChild(input);
      label.appendChild(document.createTextNode(" " + asset.label));
      assetToggles.appendChild(label);
      asset.toggle = input;
    }
  }

  function syncSceneMaster(assets) {
    const live = liveAssets(assets);
    const shown = live.filter((asset) => asset.model.show).length;
    toggleScene.checked = shown > 0;
    toggleScene.indeterminate = shown > 0 && shown < live.length;
  }

  function buildSemanticToggles(viewer, assets, placement) {
    for (const asset of semanticAssets(assets)) {
      const label = document.createElement("label");
      const input = document.createElement("input");
      input.type = "checkbox";
      input.checked = false;
      input.dataset.assetId = asset.id;
      input.addEventListener("change", async () => {
        if (input.checked) {
          const model = await loadAsset(viewer, asset, placement);
          if (!model) {
            input.checked = false;
            input.disabled = true;
            setStatus(asset.label + " unavailable");
            return;
          }
          model.show = true;
        } else if (asset.model) {
          asset.model.show = false;
        }
        setStatus(asset.label + (input.checked ? " visible" : " hidden"));
      });
      label.appendChild(input);
      label.appendChild(document.createTextNode(" " + asset.label));
      semanticToggles.appendChild(label);
      asset.toggle = input;
    }
  }

  function bindRuntimeControls(viewer, assets, cruise, cameras, placement, trafficSignals) {
    const hasVehicles = cruise.vehicles.length > 0;
    const hasSemanticAssets = semanticAssets(assets).length > 0;
    const sceneLabel = toggleScene.closest("label");
    let viewMode = "scene";
    let buildingGhostActive = false;

    async function setBuildingGhost(enabled) {
      const roads = assets.find((asset) => asset.id === "roads");
      const buildings = assets.find((asset) => asset.id === "buildings");
      const props = assets.find((asset) => asset.id === "vegetation");
      const main = assets.find((asset) => asset.id === "main");
      if (!roads || !buildings || !props || !main) {
        toggleBuildingGhost.checked = false;
        toggleBuildingGhost.disabled = true;
        return;
      }
      if (enabled) {
        const loaded = await Promise.all([
          loadAsset(viewer, roads, placement),
          loadAsset(viewer, buildings, placement),
          loadAsset(viewer, props, placement),
        ]);
        if (!loaded[0] || !loaded[1] || !loaded[2]) {
          toggleBuildingGhost.checked = false;
          setStatus("Building transparency unavailable");
          return;
        }
        main.model.show = false;
        roads.model.show = true;
        buildings.model.show = true;
        // The semantic vegetation asset also owns the static traffic-signal
        // poles/housings from the 05_Props collection.
        props.model.show = true;
        buildings.model.color = Cesium.Color.WHITE.withAlpha(0.22);
        buildings.model.colorBlendMode = Cesium.ColorBlendMode.REPLACE;
        buildings.model.colorBlendAmount = 1.0;
        for (const asset of liveAssets(assets)) {
          if (asset.id !== "main") asset.model.show = asset.category === "dynamic" || asset.category === "countdown"
            ? toggleSignals.checked : asset.model.show;
        }
        trafficSignals.show = toggleSignals.checked;
        buildingGhostActive = true;
        setStatus("Buildings transparent");
      } else {
        for (const asset of semanticAssets(assets)) {
          if (asset.model) asset.model.show = false;
        }
        main.model.show = toggleScene.checked;
        for (const asset of liveAssets(assets)) {
          if (asset.id !== "main") asset.model.show = toggleSignals.checked;
        }
        buildingGhostActive = false;
        setStatus("Buildings opaque");
      }
    }

    toggleScene.addEventListener("change", () => {
      if (buildingGhostActive) return;
      for (const asset of liveAssets(assets)) {
        asset.model.show = toggleScene.checked;
        if (asset.toggle) asset.toggle.checked = toggleScene.checked;
      }
      toggleScene.indeterminate = false;
      setStatus(toggleScene.checked ? "Scene visible" : "Scene hidden");
    });
    toggleRoutes.addEventListener("change", () => {
      syncSelectedRouteVisibility(cruise);
    });
    toggleVehicles.addEventListener("change", () => {
      for (const vehicle of cruise.vehicles) vehicle.entity.show = toggleVehicles.checked;
    });
    if (!trafficSignals.count) {
      signalsControl.classList.add("hidden");
    } else {
      toggleSignals.addEventListener("change", () => {
        trafficSignals.show = toggleSignals.checked;
        setStatus(toggleSignals.checked ? "Signals visible" : "Signals hidden");
      });
    }
    toggleFps.addEventListener("change", () => {
      viewer.scene.debugShowFramesPerSecond = toggleFps.checked;
    });
    toggleDiagnostics.addEventListener("change", () => {
      diagnosticsEl.classList.toggle("hidden", !toggleDiagnostics.checked);
    });
    toggleBuildingGhost.addEventListener("change", () => {
      void setBuildingGhost(toggleBuildingGhost.checked);
    });
    if (!semanticAssets(assets).some((asset) => asset.id === "roads") ||
        !semanticAssets(assets).some((asset) => asset.id === "buildings") ||
        !semanticAssets(assets).some((asset) => asset.id === "vegetation")) {
      toggleBuildingGhost.disabled = true;
    }

    async function setViewMode(nextMode) {
      if (nextMode === viewMode) return;
      viewMode = nextMode;
      const inspecting = viewMode === "inspect";
      for (const button of viewModeButtons) {
        button.setAttribute("aria-pressed", String(button.dataset.viewMode === viewMode));
      }
      semanticToggles.classList.toggle("hidden", !inspecting);
      assetToggles.classList.toggle("hidden", inspecting);
      if (sceneLabel) sceneLabel.classList.toggle("hidden", inspecting);

      if (!inspecting) {
        if (buildingGhostActive) {
          toggleBuildingGhost.checked = false;
          await setBuildingGhost(false);
        }
        for (const asset of semanticAssets(assets)) {
          if (asset.model) asset.model.show = false;
        }
        for (const asset of liveAssets(assets)) asset.model.show = toggleScene.checked;
        setStatus("Scene view");
        return;
      }

      for (const asset of liveAssets(assets)) asset.model.show = false;
      await Promise.all(semanticAssets(assets).map(async (asset) => {
        const model = await loadAsset(viewer, asset, placement);
        if (!model) {
          if (asset.toggle) {
            asset.toggle.checked = false;
            asset.toggle.disabled = true;
          }
          return;
        }
        model.show = true;
        if (asset.toggle) asset.toggle.checked = true;
      }));
      if (viewMode !== "inspect") {
        for (const asset of semanticAssets(assets)) {
          if (asset.model) asset.model.show = false;
        }
        return;
      }
      setStatus("Inspection view");
    }

    for (const button of viewModeButtons) {
      if (button.dataset.viewMode === "inspect" && !hasSemanticAssets) {
        button.disabled = true;
        continue;
      }
      button.addEventListener("click", () => {
        void setViewMode(button.dataset.viewMode);
      });
    }

    let stopFollow = function () {};
    if (hasVehicles) {
      stopFollow = bindCruiseControls(viewer, cruise);
    } else {
      // Nothing to drive: disable the cruise half of the panel rather than
      // leaving controls that silently do nothing.
      for (const el of [toggleCruise, toggleFollow, vehicleSelect, speedControl, toggleRoutes, toggleVehicles]) {
        el.disabled = true;
      }
      toggleCruise.textContent = "Play";
    }

    for (const button of cameraButtons) {
      const preset = cameras[button.dataset.camera];
      if (!preset || (button.dataset.camera === "route" && !hasVehicles)) {
        button.disabled = true;
        continue;
      }
      button.addEventListener("click", () => {
        // Chase-follow reclaims the camera on every clock tick, so a preset
        // applied underneath it would be overwritten before the next frame.
        stopFollow();
        preset();
      });
    }
  }

  function bindCruiseControls(viewer, cruise) {
    // The slider is authored with a static default; the route file decides the
    // real cruise speed, so adopt it before the first input event.
    speedControl.value = String(Cesium.Math.clamp(
      Math.round(cruise.baseSpeed),
      Number(speedControl.min),
      Number(speedControl.max)
    ));
    viewer.clock.multiplier = Number(speedControl.value) / cruise.baseSpeed;
    speedLabel.textContent = speedControl.value + " m/s";

    toggleCruise.addEventListener("click", () => {
      viewer.clock.shouldAnimate = !viewer.clock.shouldAnimate;
      toggleCruise.textContent = viewer.clock.shouldAnimate ? "Pause" : "Play";
    });
    speedControl.addEventListener("input", () => {
      const value = Number(speedControl.value);
      viewer.clock.multiplier = value / cruise.baseSpeed;
      speedLabel.textContent = value + " m/s";
    });
    vehicleSelect.addEventListener("change", () => {
      cruise.state.selectedIndex = Number(vehicleSelect.value || 0);
      syncSelectedRouteVisibility(cruise);
      setStatus(selectedVehicle(cruise).label);
    });

    const follow = createChaseFollow(viewer, () => selectedVehicle(cruise).positions);
    function stopFollow() {
      if (!follow.enabled) return;
      follow.stop();
      toggleFollow.textContent = "Follow";
    }
    toggleFollow.addEventListener("click", () => {
      if (follow.enabled) {
        stopFollow();
        setStatus(baseStatus);
      } else {
        follow.start();
        toggleFollow.textContent = "Free";
        setStatus("Following " + selectedVehicle(cruise).label);
      }
    });
    return stopFollow;
  }

  function addVehicleCruises(viewer, routeData, signalData, trafficStart, vehicleModelNames, fallbackVehicleModelName) {
    const segments = ((routeData && (routeData.routes || routeData.segments)) || [])
      .filter((segment) => segment.coordinates && segment.coordinates.length >= 2)
      .slice(0, 5);
    const speed = Number((routeData && routeData.speedMetersPerSecond) || 8);
    const start = trafficStart;
    const assignments = [];
    segments.forEach((segment, routeIndex) => {
      // Put two vehicles on the first route so the native preview visibly
      // exercises leader following and queue formation.
      const vehicleCount = routeIndex === 0 ? 2 : 1;
      for (let vehicleIndex = 0; vehicleIndex < vehicleCount; vehicleIndex += 1) {
        assignments.push({ segment, routeIndex, vehicleIndex });
      }
    });
    const simulation = createTrafficSimulation(viewer, assignments, start, speed, signalData, routeData?.settings);

    viewer.clock.startTime = start.clone();
    viewer.clock.currentTime = start.clone();
    viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
    viewer.clock.multiplier = 1;
    viewer.clock.shouldAnimate = assignments.length > 0;

    const vehicles = assignments.map((assignment, index) => {
      const { segment } = assignment;
      const vehicle = addCruiseVehicle(viewer, segment, index, start, speed, signalData,
        selectedVehicleModelName(vehicleModelNames, fallbackVehicleModelName), simulation.motions[index]);
      const option = document.createElement("option");
      option.value = String(index);
      option.textContent = routeLabel(segment, index);
      vehicleSelect.appendChild(option);
      return vehicle;
    });
    const cruise = {
      vehicles,
      baseSpeed: speed,
      state: { selectedIndex: 0 },
      simulation,
      usingLiveData: false,
    };
    syncSelectedRouteVisibility(cruise);
    return cruise;
  }

  function syncSelectedRouteVisibility(cruise) {
    for (let index = 0; index < cruise.vehicles.length; index += 1) {
      cruise.vehicles[index].routeEntity.show = !cruise.usingLiveData && toggleRoutes.checked && index === cruise.state.selectedIndex;
    }
  }

  function createLiveVehicleState() {
    return {
      vehicles: [],
      baseSpeed: 0,
      state: { selectedIndex: 0 },
      simulation: null,
      usingLiveData: true,
    };
  }

  function hideUnconfirmedSignalAssets(assets) {
    assets.filter((asset) => asset.category === "dynamic" || asset.category === "countdown")
      .forEach((asset) => { if (asset.model) asset.model.show = false; });
  }

  // Driven entirely by live V2X lamp state. The overlay has already resolved
  // phaseNo -> native node keys and normalized the lamp status, so this only
  // paints; it never re-interprets status codes.
  function createLiveTrafficSignals(signalData, assets) {
    const dynamic = assets.find((asset) => asset.category === "dynamic" && asset.model);
    const countdownModels = new Map(assets
      .filter((asset) => asset.category === "countdown" && asset.model)
      .map((asset) => [Number(asset.phaseGroup), asset.model]));
    const signals = (signalData?.signals || []).filter((signal) => signal && signal.id);
    const phaseGroupByNodeKey = new Map(signals.map((signal) => [String(signal.nodeKey || signal.id), Number(signal.phaseGroup)]));
    const state = { live: false };

    function paintLamp(nodeKey, color) {
      let changed = false;
      ["red", "yellow", "green"].forEach((lamp) => {
        let node = null;
        try { node = dynamic.model.getNode(`TrafficSignalDynamic_${nodeKey}_${lamp}`); } catch (_) { return; }
        if (node && node.show !== (lamp === color)) { node.show = lamp === color; changed = true; }
      });
      return changed;
    }

    function paintCountdown(nodeKey, countDown, color) {
      const model = countdownModels.get(phaseGroupByNodeKey.get(String(nodeKey)));
      if (!model) return false;
      // Only two digits are modelled; anything outside 00-19 shows nothing.
      const visible = Number.isFinite(countDown) && countDown >= 0 && countDown < 20
        ? String(countDown).padStart(2, "0")
        : null;
      let changed = false;
      for (let value = 0; value < 20; value += 1) {
        const label = String(value).padStart(2, "0");
        let node = null;
        try { node = model.getNode(`TrafficSignalDynamic_${nodeKey}_countdown_${label}`); } catch (_) { continue; }
        if (node && node.show !== (label === visible)) { node.show = label === visible; changed = true; }
      }
      if (visible !== null && typeof signalBaseColor === "function") {
        model.color = signalBaseColor(color);
        model.colorBlendMode = Cesium.ColorBlendMode.REPLACE;
        model.colorBlendAmount = 1.0;
      }
      return changed;
    }

    function update(entries) {
      if (!dynamic?.model) return;
      const list = Array.isArray(entries) ? entries : [];
      let changed = false;
      let painted = 0;
      list.forEach((entry) => {
        const nodeKeys = Array.isArray(entry?.nodeKeys) ? entry.nodeKeys : [];
        nodeKeys.forEach((nodeKey) => {
          painted += 1;
          if (paintLamp(nodeKey, entry.color)) changed = true;
          if (paintCountdown(nodeKey, entry.countDown, entry.color)) changed = true;
        });
      });
      // Only show the dynamic assembly once a lamp actually resolved to a head.
      state.live = painted > 0;
      dynamic.model.show = state.live;
      countdownModels.forEach((model) => { model.show = state.live; });
      if (changed) dynamic.model.scene?.requestRender?.();
    }

    return { count: signals.length, state, update, set show(value) { if (dynamic?.model) dynamic.model.show = Boolean(value && state.live); } };
  }

  function addTrafficSignals(viewer, signalData, start, assets) {
    const dynamic = assets.find((asset) => asset.category === "dynamic" && asset.model);
    const countdownModels = new Map(assets
      .filter((asset) => asset.category === "countdown" && asset.model)
      .map((asset) => [Number(asset.phaseGroup), asset.model]));
    if (dynamic && countdownModels.size === 2) {
      const signals = (signalData?.signals || []).filter((signal) => signal && signal.id);
      if (signals.length && !viewer.clock.shouldAnimate) viewer.clock.shouldAnimate = true;
      const visualStart = performance.now();
      const phaseTime = new Cesium.JulianDate();
      const state = { elapsedSeconds: 0, phase: "" };
      const entities = [];
      const nodes = new Map();
      const countdownNodes = new WeakMap();
      const node = (name) => {
        if (nodes.has(name)) return nodes.get(name);
        let value = null;
        try {
          value = dynamic.model.getNode(name);
        } catch (error) {
          console.warn("Traffic signal node unavailable:", name, error);
        }
        // Do not cache a miss. Cesium can expose the Model before its node
        // lookup table is populated; a transient miss must be retried on the
        // next clock tick rather than freezing the initial visual state.
        if (value) nodes.set(name, value);
        return value;
      };
      const countdownNode = (model, name) => {
        let modelNodes = countdownNodes.get(model);
        if (!modelNodes) {
          modelNodes = new Map();
          countdownNodes.set(model, modelNodes);
        }
        if (modelNodes.has(name)) return modelNodes.get(name);
        let value = null;
        try { value = model.getNode(name); } catch (error) { /* model node table is still loading */ }
        if (value) modelNodes.set(name, value);
        return value;
      };
      const update = (elapsedSeconds) => {
        Cesium.JulianDate.addSeconds(start, elapsedSeconds, phaseTime);
        let changed = false;
        const groupPhases = new Map();
        for (const signal of signals) {
          const nodeKey = signal.nodeKey || signal.id;
          const phase = signalPhase(signal.phaseGroup, phaseTime, start);
          groupPhases.set(signal.phaseGroup, phase.active);
          if (signal === signals[0]) state.phase = `${phase.active} ${String(phase.remaining).padStart(2, "0")}`;
          for (const state of ["red", "yellow", "green"]) {
            const value = node(`TrafficSignalDynamic_${nodeKey}_${state}`);
            if (value && value.show !== (state === phase.active)) {
              value.show = state === phase.active;
              changed = true;
            }
          }
          const visibleCountdown = String(phase.remaining).padStart(2, "0");
          const countdownModel = countdownModels.get(Number(signal.phaseGroup));
          for (let value = 0; value < 20; value += 1) {
            const name = `TrafficSignalDynamic_${nodeKey}_countdown_${String(value).padStart(2, "0")}`;
            let countdown = null;
            countdown = countdownNode(countdownModel, name);
            if (countdown && countdown.show !== (String(value).padStart(2, "0") === visibleCountdown)) {
              countdown.show = String(value).padStart(2, "0") === visibleCountdown;
              changed = true;
            }
          }
        }
        for (const [group, active] of groupPhases) {
          const countdownModel = countdownModels.get(Number(group));
          countdownModel.color = signalBaseColor(active);
          countdownModel.colorBlendMode = Cesium.ColorBlendMode.REPLACE;
          countdownModel.colorBlendAmount = 1.0;
        }
        if (changed && viewer.scene.requestRender) viewer.scene.requestRender();
      };
      let lastSecond = -1;
      const render = () => {
        const elapsedSeconds = Math.floor((performance.now() - visualStart) / 1000);
        if (elapsedSeconds === lastSecond) return;
        lastSecond = elapsedSeconds;
        state.elapsedSeconds = elapsedSeconds;
        update(elapsedSeconds);
      };
      // Keep signal phases independent from the Cesium simulation clock. The
      // clock may be paused while a user inspects the scene, but the lights and
      // countdown must remain visibly periodic.
      const timer = setInterval(render, 250);
      render();
      // Countdown GLBs may expose their node table a few frames after the
      // model object exists. Re-apply the initial state once both models are
      // ready so every hidden digit is explicitly hidden before the first
      // user-visible frame.
      for (const model of countdownModels.values()) {
        if (model.readyPromise) model.readyPromise.then(() => update(0)).catch(() => {});
      }
      return {
        entities, count: signals.length, dynamic, state, timer,
        set show(value) {
          dynamic.model.show = value;
          for (const model of countdownModels.values()) model.show = value;
          for (const entity of entities) entity.show = value;
        }
      };
    }
    return { entities: [], count: 0, set show(value) {} };
  }

  function signalColor(group, state, time, start) {
    const active = signalPhase(group, time, start).active;
    const color = signalBaseColor(state);
    return state === active ? color : Cesium.Color.multiplyByScalar(color, 0.35, new Cesium.Color());
  }

  function signalActiveColor(group, time, start) {
    return signalBaseColor(signalPhase(group, time, start).active);
  }

  function signalBaseColor(state) {
    return Cesium.Color.fromCssColorString({ red: "#ee3f39", yellow: "#f7bf37", green: "#43cf71" }[state]);
  }

  function signalPhase(group, time, start) {
    return signalPhaseAtElapsed(group, Cesium.JulianDate.secondsDifference(time, start));
  }

  function signalPhaseAtElapsed(group, elapsed) {
    const second = ((elapsed % 20) + 20) % 20;
    if (group === 0) {
      if (second < 8) return { active: "green", remaining: Math.ceil(8 - second) };
      if (second < 10) return { active: "yellow", remaining: Math.ceil(10 - second) };
      return { active: "red", remaining: Math.ceil(20 - second) };
    }
    if (second < 10) return { active: "red", remaining: Math.ceil(10 - second) };
    if (second < 18) return { active: "green", remaining: Math.ceil(18 - second) };
    return { active: "yellow", remaining: Math.ceil(20 - second) };
  }

  function selectedVehicleModelName(modelNames, fallbackModelName) {
    const choices = Array.isArray(modelNames) && modelNames.length
      ? modelNames
      : [fallbackModelName];
    const usable = choices.filter(Boolean);
    return usable[Math.floor(Math.random() * usable.length)] || "";
  }

  function addCruiseVehicle(viewer, segment, index, start, speed, signalData, vehicleModelName, trafficMotion) {
    const route = trafficMotion.route;
    let record = null;
    trafficMotion.setMoving(() => record?.status === "normal");
    const positions = trafficMotion.positions;
    const flat = [];
    for (const coord of segment.coordinates) {
      flat.push(coord[0], coord[1], ROUTE_LINE_HEIGHT_METERS);
    }
    const routeColor = [
      Cesium.Color.CYAN,
      Cesium.Color.LIME,
      Cesium.Color.YELLOW,
      Cesium.Color.ORANGE,
      Cesium.Color.DEEPSKYBLUE
    ][index % 5];
    const routeEntity = viewer.entities.add({
      name: "Cruise route " + (index + 1),
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(flat),
        width: 2,
        material: routeColor,
        arcType: Cesium.ArcType.NONE,
        clampToGround: false
      }
    });
    const vehicle = viewer.entities.add({
      name: "Cruise vehicle " + (index + 1),
      position: positions,
      orientation: routeOrientationFromState(route, trafficMotion.state, speed, 0.0),
      model: {
        uri: vehicleModelName,
        // Keep the library's world scale visible. A minimum screen size made
        // long trucks balloon in overview and at intersections.
        scale: 0.72,
        minimumPixelSize: 0
      }
    });
    record = {
      id: "vehicle-" + (index + 1),
      entity: vehicle,
      routeEntity,
      positions,
      route,
      segment,
      label: routeLabel(segment, index),
      modelName: vehicleModelLabel(vehicleModelName),
      status: "normal",
      incidentNote: "",
      motion: trafficMotion,
      routeColor,
      markerEntity: null,
    };
    vehicle.properties = new Cesium.PropertyBag({ vehicleId: record.id });
    record.markerEntity = viewer.entities.add({
      name: "Vehicle incident marker " + (index + 1),
      position: positions,
      billboard: {
        image: "",
        show: false,
        width: 36,
        height: 44,
        pixelOffset: new Cesium.Cartesian2(0, -40),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
    });
    return record;
  }

  function vehicleModelLabel(name) {
    const file = String(name || "").split("/").pop().replace(/\.gltf$/i, "");
    return file.replace(/^.*-vehicle-/, "").replaceAll("_", " ");
  }

  function routeLabel(route, index) {
    const counts = { left: 0, right: 0, through: 0 };
    for (const maneuver of route.maneuvers || []) {
      if (maneuver in counts) counts[maneuver] += 1;
    }
    const actions = [
      counts.left ? "左 " + counts.left : "",
      counts.right ? "右 " + counts.right : "",
      counts.through ? "直 " + counts.through : "",
    ].filter(Boolean).join(" / ");
    return "#" + (index + 1) + " · " + Math.round(route.lengthMeters || 0) + " m" +
      (actions ? " · " + actions : "");
  }

  function selectedVehicle(cruise) {
    return cruise.vehicles[cruise.state.selectedIndex] || cruise.vehicles[0];
  }

  function vehicleById(cruise, id) {
    return cruise.vehicles.find((vehicle) => vehicle.id === id) || null;
  }

  function setVehicleStatus(viewer, vehicle, status) {
    if (!vehicle || !["normal", "breakdown", "accident"].includes(status)) return;
    vehicle.status = status;
    const incident = status !== "normal";
    const accident = status === "accident";
    vehicle.markerEntity.billboard.image = status === "breakdown"
      ? "vehicle-breakdown.png"
      : accident ? "vehicle-accident.png" : "";
    vehicle.markerEntity.billboard.show = incident;
    vehicle.routeEntity.polyline.material = accident ? Cesium.Color.RED : vehicle.routeColor;
    if (viewer.scene.requestRender) viewer.scene.requestRender();
  }

  function bindVehicleInfoCard(viewer, cruise) {
    if (!vehicleInfoCard || !cruise.vehicles.length) return;
    let activeVehicle = null;
    const render = () => {
      if (!activeVehicle) return;
      vehicleInfoTitle.textContent = activeVehicle.label;
      vehicleIncidentNote.value = activeVehicle.incidentNote;
      const details = [
        ["Vehicle", activeVehicle.id],
        ["Model", activeVehicle.modelName],
        ["Route", activeVehicle.label],
        ["Speed", cruise.baseSpeed + " m/s"],
        ["Status", activeVehicle.status],
      ];
      vehicleInfoDetails.replaceChildren(...details.flatMap(([term, value]) => {
        const dt = document.createElement("dt");
        const dd = document.createElement("dd");
        dt.textContent = term;
        dd.textContent = value;
        return [dt, dd];
      }));
      for (const button of vehicleStatusButtons) {
        button.disabled = button.dataset.vehicleStatus === activeVehicle.status;
      }
    };
    const open = (vehicle) => {
      activeVehicle = vehicle;
      const index = cruise.vehicles.indexOf(vehicle);
      cruise.state.selectedIndex = index;
      vehicleSelect.value = String(index);
      syncSelectedRouteVisibility(cruise);
      vehicleInfoCard.classList.remove("hidden");
      render();
    };
    const positionCard = () => {
      if (!activeVehicle || vehicleInfoCard.classList.contains("hidden")) return;
      const position = activeVehicle.entity.position?.getValue(viewer.clock.currentTime);
      const windowPosition = position && Cesium.SceneTransforms.worldToWindowCoordinates(viewer.scene, position);
      if (!windowPosition) {
        vehicleInfoCard.classList.add("hidden");
        return;
      }
      const margin = 12;
      const width = vehicleInfoCard.offsetWidth || 300;
      const x = Cesium.Math.clamp(windowPosition.x, margin + width / 2, window.innerWidth - margin - width / 2);
      vehicleInfoCard.style.left = x + "px";
      vehicleInfoCard.style.top = Math.max(windowPosition.y, margin + 20) + "px";
    };
    closeVehicleInfo.addEventListener("click", () => {
      activeVehicle = null;
      vehicleInfoCard.classList.add("hidden");
    });
    vehicleIncidentNote.addEventListener("input", () => {
      if (activeVehicle) activeVehicle.incidentNote = vehicleIncidentNote.value.trim();
    });
    for (const button of vehicleStatusButtons) {
      button.addEventListener("click", () => {
        if (!activeVehicle) return;
        setVehicleStatus(viewer, activeVehicle, button.dataset.vehicleStatus);
        render();
        setStatus(activeVehicle.label + " " + activeVehicle.status);
      });
    }
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction((movement) => {
      const picked = viewer.scene.pick(movement.position);
      const id = picked?.id?.properties?.vehicleId?.getValue?.();
      const vehicle = vehicleById(cruise, id);
      if (vehicle) open(vehicle);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    viewer.scene.postRender.addEventListener(positionCard);
  }

  function prepareRoute(segment, signalData) {
    const distances = [0.0];
    for (let i = 1; i < segment.coordinates.length; i += 1) {
      distances.push(distances[i - 1] + distanceMeters(segment.coordinates[i - 1], segment.coordinates[i]));
    }
    return {
      coordinates: segment.coordinates,
      distances,
      length: Math.max(1.0, distances[distances.length - 1]),
      stops: routeStops(segment.coordinates, distances, signalData),
    };
  }

  function routeStops(coordinates, distances, signalData) {
    const found = new Map();
    for (const signal of signalData?.signals || []) {
      if (!Number.isFinite(signal.stopLongitude) || !Number.isFinite(signal.stopLatitude)) continue;
      let best = { index: -1, distance: Infinity };
      for (let index = 0; index < coordinates.length; index += 1) {
        const distance = distanceMeters(coordinates[index], [signal.stopLongitude, signal.stopLatitude]);
        if (distance < best.distance) best = { index, distance };
      }
      if (best.index >= 0 && best.distance <= 7) {
        const routeDistance = distances[best.index];
        const existing = found.get(Math.round(routeDistance));
        if (!existing || best.distance < existing.matchDistance) found.set(Math.round(routeDistance), { distance: routeDistance, matchDistance: best.distance, signal });
      }
    }
    return [...found.values()].sort((a, b) => a.distance - b.distance);
  }

  function createTrafficSimulation(viewer, assignments, start, speed, signalData, settings = {}) {
    const config = {
      desiredSpeedMetersPerSecond: Number(settings.desiredSpeedMetersPerSecond || speed),
      accelerationMetersPerSecondSquared: Number(settings.accelerationMetersPerSecondSquared || 1.8),
      decelerationMetersPerSecondSquared: Number(settings.decelerationMetersPerSecondSquared || 3.5),
      reactionTimeSeconds: Number(settings.reactionTimeSeconds || 0.8),
      vehicleLengthMeters: Number(settings.vehicleLengthMeters || 4.6),
      minimumGapMeters: Number(settings.minimumGapMeters || 7),
    };
    const motions = assignments.map((assignment) => {
      const route = prepareRoute(assignment.segment, signalData);
      const initialGap = config.vehicleLengthMeters + config.minimumGapMeters;
      const state = {
        distance: assignment.vehicleIndex * -initialGap,
        speed: 0,
        targetSpeed: config.desiredSpeedMetersPerSecond,
        stopReason: null,
        queueAhead: 0,
        lastTime: start.clone(),
      };
      state.distance = (state.distance % route.length + route.length) % route.length;
      return {
        route,
        state,
        setMoving(callback) { state.isMoving = callback; },
        positions: new Cesium.CallbackProperty((time, result) => routePositionAtDistance(route, state.distance, result), false),
      };
    });
    const update = (clock) => {
      const elapsed = Cesium.JulianDate.secondsDifference(clock.currentTime, motions[0]?.state.lastTime || start);
      if (!(elapsed > 0) || elapsed > 2) {
        for (const motion of motions) Cesium.JulianDate.clone(clock.currentTime, motion.state.lastTime);
        return;
      }
      const grouped = new Map();
      assignments.forEach((assignment, index) => {
        const key = assignment.routeIndex;
        if (!grouped.has(key)) grouped.set(key, []);
        grouped.get(key).push(index);
      });
      for (const indexes of grouped.values()) {
        indexes.sort((a, b) => motions[a].state.distance - motions[b].state.distance);
      }
      motions.forEach((motion, index) => {
        const state = motion.state;
        Cesium.JulianDate.clone(clock.currentTime, state.lastTime);
        if (state.isMoving && !state.isMoving()) {
          state.speed = 0;
          state.stopReason = "incident";
          return;
        }
        const route = motion.route;
        let target = config.desiredSpeedMetersPerSecond;
        let stopReason = null;
        const nextStop = nextRouteStop(route, state.distance);
        if (nextStop) {
          const phase = signalPhase(nextStop.signal.phaseGroup, clock.currentTime, start).active;
          const untilStop = (nextStop.distance - state.distance + route.length) % route.length;
          if (phase !== "green" && untilStop < Math.max(30, state.speed * config.reactionTimeSeconds + 8)) {
            target = Math.min(target, Math.max(0, (untilStop - 1.7) / Math.max(config.reactionTimeSeconds, 0.1)));
            stopReason = "traffic-signal";
          }
        }
        const peers = grouped.get(assignments[index].routeIndex) || [];
        const peerPosition = peers.indexOf(index);
        if (peerPosition >= 0 && peers.length > 1) {
          const leaderIndex = peers[(peerPosition + 1) % peers.length];
          if (leaderIndex !== index) {
            const leader = motions[leaderIndex].state;
            const gap = (leader.distance - state.distance + route.length) % route.length - config.vehicleLengthMeters;
            const safeGap = config.minimumGapMeters + state.speed * config.reactionTimeSeconds;
            if (gap < safeGap + 12) {
              target = Math.min(target, Math.max(0, (gap - config.minimumGapMeters) / Math.max(config.reactionTimeSeconds, 0.1)));
              if (target < 0.2) stopReason = "leader-gap";
              state.queueAhead = leader.stopReason ? 1 : 0;
            } else {
              state.queueAhead = 0;
            }
          }
        }
        state.targetSpeed = target;
        const limit = (target >= state.speed ? config.accelerationMetersPerSecondSquared : config.decelerationMetersPerSecondSquared) * elapsed;
        state.speed += Math.sign(target - state.speed) * Math.min(Math.abs(target - state.speed), limit);
        state.distance = (state.distance + Math.max(0, state.speed) * elapsed) % route.length;
        state.stopReason = state.speed < 0.2 ? stopReason : null;
      });
    };
    viewer.clock.onTick.addEventListener(update);
    return {
      motions,
      settings: config,
      diagnostics() {
        return {
          stoppedVehicles: motions.filter((motion) => motion.state.stopReason).length,
          queueLength: motions.filter((motion) => motion.state.stopReason === "leader-gap").length,
        };
      },
    };
  }

  function createTrafficAwarePositions(viewer, route, start, speed, isMoving = () => true) {
    const state = { distance: 0, lastTime: start.clone() };
    viewer.clock.onTick.addEventListener((clock) => {
      const elapsed = Cesium.JulianDate.secondsDifference(clock.currentTime, state.lastTime);
      Cesium.JulianDate.clone(clock.currentTime, state.lastTime);
      if (elapsed <= 0) return;
      if (!isMoving()) return;
      const next = nextRouteStop(route, state.distance);
      const advance = elapsed * speed;
      if (next && signalPhase(next.signal.phaseGroup, clock.currentTime, start).active !== "green") {
        const untilStop = (next.distance - state.distance + route.length) % route.length;
        if (untilStop <= advance + 1.7) {
          state.distance = (next.distance - 1.7 + route.length) % route.length;
          return;
        }
      }
      state.distance = (state.distance + advance) % route.length;
    });
    return {
      state,
      positions: new Cesium.CallbackProperty((time, result) => routePositionAtDistance(route, state.distance, result), false),
    };
  }

  function nextRouteStop(route, distance) {
    return route.stops.find((stop) => stop.distance > distance + 0.05) || route.stops[0] || null;
  }

  function routePosition(route, start, time, speed, result) {
    const seconds = Math.max(0, Cesium.JulianDate.secondsDifference(time, start));
    const distance = (seconds * speed) % route.length;
    return routePositionAtDistance(route, distance, result);
  }

  function routePositionAtDistance(route, distance, result) {
    let index = 1;
    while (index < route.distances.length - 1 && route.distances[index] < distance) {
      index += 1;
    }
    const prevDist = route.distances[index - 1];
    const nextDist = route.distances[index];
    const t = nextDist > prevDist ? (distance - prevDist) / (nextDist - prevDist) : 0;
    const a = route.coordinates[index - 1];
    const b = route.coordinates[index];
    const lon = a[0] + (b[0] - a[0]) * t;
    const lat = a[1] + (b[1] - a[1]) * t;
    return Cesium.Cartesian3.fromDegrees(lon, lat, VEHICLE_HEIGHT_METERS, Cesium.Ellipsoid.WGS84, result);
  }

  function routeOrientation(route, start, speed, yawDegrees) {
    const correction = Cesium.Quaternion.fromAxisAngle(
      Cesium.Cartesian3.UNIT_Z,
      Cesium.Math.toRadians(yawDegrees)
    );
    const current = new Cesium.Cartesian3();
    const ahead = new Cesium.Cartesian3();
    const direction = new Cesium.Cartesian3();
    const up = new Cesium.Cartesian3();
    const east = new Cesium.Cartesian3();
    const north = new Cesium.Cartesian3();
    const aheadTime = new Cesium.JulianDate();
    const hpr = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0);
    const base = new Cesium.Quaternion();
    return new Cesium.CallbackProperty((time, result) => {
      routePosition(route, start, time, speed, current);
      Cesium.JulianDate.addSeconds(time, 0.8, aheadTime);
      routePosition(route, start, aheadTime, speed, ahead);
      Cesium.Cartesian3.subtract(ahead, current, direction);
      if (Cesium.Cartesian3.magnitudeSquared(direction) < 0.0001) {
        return result;
      }
      Cesium.Cartesian3.normalize(direction, direction);
      Cesium.Cartesian3.normalize(current, up);
      Cesium.Cartesian3.cross(Cesium.Cartesian3.UNIT_Z, up, east);
      if (Cesium.Cartesian3.magnitudeSquared(east) < 0.0001) {
        Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_X, east);
      } else {
        Cesium.Cartesian3.normalize(east, east);
      }
      Cesium.Cartesian3.cross(up, east, north);
      Cesium.Cartesian3.normalize(north, north);
      const eastComponent = Cesium.Cartesian3.dot(direction, east);
      const northComponent = Cesium.Cartesian3.dot(direction, north);
      hpr.heading = Math.atan2(eastComponent, northComponent);
      Cesium.Transforms.headingPitchRollQuaternion(
        current,
        hpr,
        undefined,
        undefined,
        base
      );
      return Cesium.Quaternion.multiply(base, correction, result || new Cesium.Quaternion());
    }, false);
  }

  function routeOrientationFromState(route, state, speed, yawDegrees) {
    const correction = Cesium.Quaternion.fromAxisAngle(
      Cesium.Cartesian3.UNIT_Z,
      Cesium.Math.toRadians(yawDegrees)
    );
    const current = new Cesium.Cartesian3();
    const ahead = new Cesium.Cartesian3();
    const direction = new Cesium.Cartesian3();
    const up = new Cesium.Cartesian3();
    const east = new Cesium.Cartesian3();
    const north = new Cesium.Cartesian3();
    const hpr = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0);
    const base = new Cesium.Quaternion();
    return new Cesium.CallbackProperty((time, result) => {
      routePositionAtDistance(route, state.distance, current);
      // Sample a small distance ahead, rather than using velocity. This keeps
      // the car aligned while stopped and preserves the model's route heading.
      const lookAhead = Math.max(0.8, speed * 0.8);
      routePositionAtDistance(route, (state.distance + lookAhead) % route.length, ahead);
      Cesium.Cartesian3.subtract(ahead, current, direction);
      if (Cesium.Cartesian3.magnitudeSquared(direction) < 0.0001) return result;
      Cesium.Cartesian3.normalize(direction, direction);
      Cesium.Cartesian3.normalize(current, up);
      Cesium.Cartesian3.cross(Cesium.Cartesian3.UNIT_Z, up, east);
      if (Cesium.Cartesian3.magnitudeSquared(east) < 0.0001) {
        Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_X, east);
      } else {
        Cesium.Cartesian3.normalize(east, east);
      }
      Cesium.Cartesian3.cross(up, east, north);
      Cesium.Cartesian3.normalize(north, north);
      hpr.heading = Math.atan2(Cesium.Cartesian3.dot(direction, east), Cesium.Cartesian3.dot(direction, north));
      Cesium.Transforms.headingPitchRollQuaternion(current, hpr, undefined, undefined, base);
      return Cesium.Quaternion.multiply(base, correction, result || new Cesium.Quaternion());
    }, false);
  }

  function createChaseFollow(viewer, positionsProvider) {
    const scratchPosition = new Cesium.Cartesian3();
    const scratchPrevious = new Cesium.Cartesian3();
    const scratchDirection = new Cesium.Cartesian3();
    const scratchEast = new Cesium.Cartesian3();
    const scratchNorth = new Cesium.Cartesian3();
    const scratchUp = new Cesium.Cartesian3();
    const scratchPreviousTime = new Cesium.JulianDate();
    const scratchHpr = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0);
    const scratchTransform = new Cesium.Matrix4();
    const offset = new Cesium.Cartesian3();
    const state = { enabled: false, distance: 36.0, height: 18.0 };

    function update(clock) {
      const time = clock.currentTime;
      const positions = positionsProvider();
      const position = positions.getValue(time, scratchPosition);
      if (!position) return;
      Cesium.JulianDate.addSeconds(time, -0.8, scratchPreviousTime);
      const previous = positions.getValue(scratchPreviousTime, scratchPrevious);
      if (previous) {
        Cesium.Cartesian3.subtract(position, previous, scratchDirection);
      } else {
        Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_X, scratchDirection);
      }
      if (Cesium.Cartesian3.magnitudeSquared(scratchDirection) < 0.0001) {
        Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_X, scratchDirection);
      }
      Cesium.Cartesian3.normalize(scratchDirection, scratchDirection);
      Cesium.Cartesian3.normalize(position, scratchUp);
      Cesium.Cartesian3.cross(Cesium.Cartesian3.UNIT_Z, scratchUp, scratchEast);
      if (Cesium.Cartesian3.magnitudeSquared(scratchEast) < 0.0001) {
        Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_X, scratchEast);
      } else {
        Cesium.Cartesian3.normalize(scratchEast, scratchEast);
      }
      Cesium.Cartesian3.cross(scratchUp, scratchEast, scratchNorth);
      Cesium.Cartesian3.normalize(scratchNorth, scratchNorth);

      const eastComponent = Cesium.Cartesian3.dot(scratchDirection, scratchEast);
      const northComponent = Cesium.Cartesian3.dot(scratchDirection, scratchNorth);
      scratchHpr.heading = Math.atan2(eastComponent, northComponent);
      Cesium.Cartesian3.fromElements(0.0, -state.distance, state.height, offset);
      Cesium.Transforms.headingPitchRollToFixedFrame(
        position,
        scratchHpr,
        undefined,
        undefined,
        scratchTransform
      );
      viewer.camera.lookAtTransform(scratchTransform, offset);
    }

    function onWheel(event) {
      if (!state.enabled) return;
      event.preventDefault();
      const zoom = event.deltaY > 0 ? 1.12 : 0.88;
      state.distance = Cesium.Math.clamp(state.distance * zoom, 12.0, 160.0);
      state.height = Cesium.Math.clamp(state.height * zoom, 6.0, 90.0);
      update(viewer.clock);
    }

    return {
      get enabled() {
        return state.enabled;
      },
      start() {
        if (state.enabled) return;
        state.enabled = true;
        viewer.trackedEntity = undefined;
        viewer.canvas.addEventListener("wheel", onWheel, { passive: false });
        viewer.clock.onTick.addEventListener(update);
        update(viewer.clock);
      },
      stop() {
        if (!state.enabled) return;
        state.enabled = false;
        viewer.clock.onTick.removeEventListener(update);
        viewer.canvas.removeEventListener("wheel", onWheel);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
      }
    };
  }

  function createCameraPresets(viewer, metadata, placement, cruise) {
    const radius = Math.max(220.0, boundsRadiusMeters(metadata.bounds) || 900.0);
    const center = placement.position;
    function lookAt(range, headingDegrees, pitchDegrees) {
      viewer.camera.lookAt(
        center,
        new Cesium.HeadingPitchRange(
          Cesium.Math.toRadians(headingDegrees),
          Cesium.Math.toRadians(pitchDegrees),
          range
        )
      );
      // lookAt locks the camera into the target's reference frame; release it
      // so orbit and pan keep working from the new vantage point.
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
    return {
      overview() {
        viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(center, radius), {
          duration: 0.0
        });
      },
      oblique() {
        lookAt(radius * 0.92, 135.0, -28.0);
      },
      detail() {
        lookAt(radius * 0.32, 115.0, -18.0);
      },
      route() {
        if (!cruise.vehicles.length) return;
        const vehicle = selectedVehicle(cruise);
        const coord = vehicle.segment.coordinates[Math.floor(vehicle.segment.coordinates.length / 2)];
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(coord[0], coord[1], 90.0),
          orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-62.0),
            roll: 0.0
          },
          duration: 0.0
        });
      }
    };
  }

  // Camera-dependent readouts have to track the camera, so refresh off the
  // render loop rather than a fixed timer, throttled to stay off the hot path.
  function startDiagnostics(viewer, metadata, assets, cruise, placement, trafficSignals, v2xOverlay) {
    const center = placement.position;
    const stats = metadata.scene_stats || {};
    const failed = assets.filter((asset) => asset.error);
    let lastUpdate = 0;

    function render() {
      const cartographic = viewer.camera.positionCartographic;
      const distance = Cesium.Cartesian3.distance(viewer.camera.positionWC, center);
      const lines = [
        "Area: " + (config.areaId || "(unknown)"),
        "Anchor: " + placement.longitude.toFixed(7) + ", " + placement.latitude.toFixed(7),
        "Camera height: " + Math.round(cartographic.height) + " m",
        "Camera range: " + Math.round(distance) + " m",
        "Assets: " + liveAssets(assets).length + " model(s)",
        "Vehicles: " + cruise.vehicles.length,
        "Signals: " + trafficSignals.count,
        "Buildings: " + Number(stats.buildings || 0),
        "Trees: " + Number(stats.trees || 0),
        "Road layer source: " + (metadata.source_geojson ? "osm2streets" : "OSM fallback")
      ];
      if (v2xOverlay?.state) {
        lines.push("Vehicle data: " + (v2xOverlay.state.vehicleSource === "live" ? "live V2X" : "waiting for live V2X"));
        lines.push("Live vehicles: " + (v2xOverlay.state?.registry?.visibleSize ?? 0));
        lines.push("Target WS: " + (v2xOverlay.state?.targetMessages ?? 0) + " messages / " + (v2xOverlay.state?.targetLastCount ?? 0) + " parsed");
        lines.push("Target payload: " + (v2xOverlay.state?.targetPayloadShape || "waiting"));
        if (v2xOverlay.state?.targetLastError) lines.push("Target error: " + v2xOverlay.state.targetLastError);
      }
      if (failed.length) {
        lines.push("Failed assets: " + failed.map((asset) => asset.url).join(", "));
      }
      diagnosticsEl.textContent = lines.join("\n");
    }

    viewer.scene.postRender.addEventListener(() => {
      const now = performance.now();
      if (now - lastUpdate < 250) return;
      lastUpdate = now;
      render();
    });
    render();
  }

  function summaryText(metadata, assets, cruise) {
    const stats = metadata.scene_stats || {};
    return [
      config.areaId,
      liveAssets(assets).map((asset) => asset.url).join(", "),
      "live V2X vehicles only",
      "buildings " + Number(stats.buildings || 0),
      "trees " + Number(stats.trees || 0)
    ].filter(Boolean).join(" | ");
  }

  function boundsRadiusMeters(bounds) {
    if (!bounds) return null;
    const minLon = Number(bounds.min_lon);
    const minLat = Number(bounds.min_lat);
    const maxLon = Number(bounds.max_lon);
    const maxLat = Number(bounds.max_lat);
    if (![minLon, minLat, maxLon, maxLat].every(Number.isFinite)) return null;
    return Math.max(
      80.0,
      distanceMeters([minLon, minLat], [maxLon, maxLat]) * 0.58
    );
  }

  function distanceMeters(a, b) {
    const radius = 6371008.8;
    const lat1 = Cesium.Math.toRadians(a[1]);
    const lat2 = Cesium.Math.toRadians(b[1]);
    const dLat = Cesium.Math.toRadians(b[1] - a[1]);
    const dLon = Cesium.Math.toRadians(b[0] - a[0]);
    const sinLat = Math.sin(dLat / 2);
    const sinLon = Math.sin(dLon / 2);
    const h = sinLat * sinLat + Math.cos(lat1) * Math.cos(lat2) * sinLon * sinLon;
    return 2 * radius * Math.asin(Math.min(1, Math.sqrt(h)));
  }

  function setStatus(message) {
    statusEl.textContent = message;
  }

  main().catch((error) => {
    console.error(error);
    const detail = error && error.message ? error.message : String(error);
    setStatus("Failed to load Cesium preview: " + detail);
    document.body.classList.add("scene-error");
    setLoadingMessage("Failed to load scene", detail + " (see Safari Develop > Show JavaScript Console)");
  });
}());