#!/usr/bin/env node

const fs = require("fs");
const path = require("path");
const { spawnSync } = require("child_process");

const repoRoot = path.resolve(__dirname, "..");
const args = parseArgs(process.argv.slice(2));
const configPath = path.resolve(
  args.config || path.join(repoRoot, "config", "areas", "nantaizi-lake-innovation-valley.json"),
);
const area = normalizeAreaConfig(readJson(configPath));
const requestedStages = args.stages
  ? splitList(args.stages)
  : null;
const stages = resolveStages(area.stages, requestedStages);

console.log(`Area: ${area.id}`);
console.log(`Config: ${configPath}`);
console.log(`Output: ${area.outputs.areaDir}`);

if (stages.intermediates) {
  buildIntermediates(area);
}
if (stages.blender) {
  buildBlenderScene(area);
}
if (stages.cesium) {
  exportCesium(area);
}
if (stages.preview) {
  writeCesiumPreview(area);
}

console.log("Done.");

function parseArgs(argv) {
  const out = {};
  for (let i = 0; i < argv.length; i += 1) {
    const arg = argv[i];
    if (!arg.startsWith("--")) continue;
    const key = arg.slice(2).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
    const next = argv[i + 1];
    if (!next || next.startsWith("--")) {
      out[key] = "true";
    } else {
      out[key] = next;
      i += 1;
    }
  }
  return out;
}

function readJson(file) {
  if (!fs.existsSync(file)) {
    throw new Error(`Config file not found: ${file}`);
  }
  return JSON.parse(fs.readFileSync(file, "utf8"));
}

function normalizeAreaConfig(raw) {
  const id = requireText(raw.id, "id");
  const input = path.resolve(requireText(raw.input, "input"));
  if (!fs.existsSync(input)) {
    throw new Error(`Input OSM XML not found: ${input}`);
  }

  const outputRoot = path.resolve(raw.outputRoot || path.join(repoRoot, "outputs"));
  const outputOverrides = raw.outputs || {};
  const areaDir = path.resolve(outputOverrides.areaDir || path.join(outputRoot, id));
  const fileStem = outputOverrides.fileStem || id;
  const outputs = {
    areaDir,
    geojsonDir: path.resolve(outputOverrides.geojsonDir || path.join(areaDir, "osm2streets_web_out")),
    gpkg: path.resolve(outputOverrides.gpkg || path.join(areaDir, `${fileStem}.gpkg`)),
    qgisProject: path.resolve(outputOverrides.qgisProject || path.join(areaDir, `${fileStem}.qgz`)),
    qgisPreview: path.resolve(outputOverrides.qgisPreview || path.join(areaDir, `${fileStem}-preview.png`)),
    blend: path.resolve(outputOverrides.blend || path.join(areaDir, `${fileStem}.blend`)),
    render: path.resolve(outputOverrides.render || path.join(areaDir, `${fileStem}.png`)),
    glb: path.resolve(outputOverrides.glb || path.join(areaDir, `${fileStem}.glb`)),
    metadata: path.resolve(outputOverrides.metadata || path.join(areaDir, `${fileStem}.json`)),
    cesiumPreview: path.resolve(
      outputOverrides.cesiumPreview || path.join(areaDir, `${fileStem}-cesium-preview.html`),
    ),
    vehicleRoute: path.resolve(outputOverrides.vehicleRoute || path.join(areaDir, `${fileStem}-vehicle-route.json`)),
    vehicleModel: path.resolve(outputOverrides.vehicleModel || path.join(areaDir, `${fileStem}-vehicle-car.glb`)),
    pipelineDir: path.resolve(outputOverrides.pipelineDir || path.join(areaDir, "_pipeline")),
  };

  return {
    id,
    input,
    outputRoot,
    qgisApp: raw.qgisApp || "/Applications/QGIS.app",
    blenderApp: raw.blenderApp || "/Applications/Blender.app",
    stages: {
      intermediates: raw.stages?.intermediates ?? raw.stages?.qgis ?? true,
      blender: raw.stages?.blender ?? true,
      cesium: raw.stages?.cesium ?? true,
      preview: false,
    },
    qgis: {
      arrowScale: raw.qgis?.arrowScale ?? raw.arrowScale ?? 0.8,
      clipPad: raw.qgis?.clipPad ?? raw.clipPad ?? 0.002,
      canvasPad: raw.qgis?.canvasPad ?? raw.canvasPad ?? 0.001,
      previewPad: raw.qgis?.previewPad ?? raw.previewPad ?? 0.0007,
      canvasExtent: raw.qgis?.canvasExtent ?? raw.canvasExtent ?? null,
      previewExtent: raw.qgis?.previewExtent ?? raw.previewExtent ?? null,
      layerPrefix: raw.qgis?.layerPrefix ?? raw.layerPrefix ?? "osm2streets",
    },
    osm2streets: raw.osm2streets || {
      debug_each_step: false,
      dual_carriageway_experiment: false,
      sidepath_zipping_experiment: false,
      inferred_sidewalks: true,
      osm2lanes: true,
    },
    blender: {
      treeStyle: raw.blender?.treeStyle || "natural",
      officeOverrides: raw.blender?.officeOverrides || raw.blender?.office_overrides || "",
    },
    outputs,
  };
}

function requireText(value, key) {
  if (typeof value !== "string" || value.trim() === "") {
    throw new Error(`Missing config key: ${key}`);
  }
  return value;
}

function splitList(value) {
  return String(value)
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean);
}

function resolveStages(defaults, requested) {
  if (!requested) return defaults;
  const aliases = {
    all: ["intermediates", "blender", "cesium"],
    qgis: ["intermediates"],
    osm2streets: ["intermediates"],
    geojson: ["intermediates"],
    intermediate: ["intermediates"],
    intermediates: ["intermediates"],
    blender: ["blender"],
    scene: ["blender"],
    cesium: ["cesium"],
    glb: ["cesium"],
    preview: ["preview"],
    html: ["preview"],
    cesiumPreview: ["preview"],
  };
  const out = { intermediates: false, blender: false, cesium: false, preview: false };
  for (const stage of requested) {
    const mapped = aliases[stage];
    if (!mapped) {
      throw new Error(`Unknown stage '${stage}'. Use intermediates, blender, cesium, preview, or all.`);
    }
    for (const key of mapped) out[key] = true;
  }
  return out;
}

function buildIntermediates(area) {
  fs.mkdirSync(area.outputs.pipelineDir, { recursive: true });
  const derivedConfig = {
    qgisApp: area.qgisApp,
    input: area.input,
    outDir: area.outputs.geojsonDir,
    gpkg: area.outputs.gpkg,
    project: area.outputs.qgisProject,
    preview: area.outputs.qgisPreview,
    arrowScale: area.qgis.arrowScale,
    clipPad: area.qgis.clipPad,
    canvasPad: area.qgis.canvasPad,
    previewPad: area.qgis.previewPad,
    canvasExtent: area.qgis.canvasExtent,
    previewExtent: area.qgis.previewExtent,
    layerPrefix: area.qgis.layerPrefix,
    osm2streets: area.osm2streets,
  };
  const derivedConfigPath = path.join(area.outputs.pipelineDir, "osm2streets-qgis.config.json");
  fs.writeFileSync(derivedConfigPath, `${JSON.stringify(derivedConfig, null, 2)}\n`);

  console.log("Stage: intermediates (osm2streets GeoJSON + QGIS)");
  runCommand(process.execPath, [
    path.join(repoRoot, "scripts", "build-osm2streets-qgis.js"),
    "--config",
    derivedConfigPath,
  ], "intermediates");
}

function buildBlenderScene(area) {
  ensureFile(blenderExecutable(area), "Blender executable");
  ensureFile(path.join(repoRoot, "blender", "generate_scene.py"), "Blender scene generator");
  fs.mkdirSync(path.dirname(area.outputs.blend), { recursive: true });
  fs.mkdirSync(path.dirname(area.outputs.render), { recursive: true });

  const blenderArgs = [
    "--background",
    "--factory-startup",
    "--python",
    path.join(repoRoot, "blender", "generate_scene.py"),
    "--",
    "--osm",
    area.input,
    "--geojson",
    area.outputs.geojsonDir,
    "--output",
    area.outputs.blend,
    "--render",
    area.outputs.render,
    "--tree-style",
    area.blender.treeStyle,
  ];
  if (area.blender.officeOverrides) {
    blenderArgs.push("--office-overrides", area.blender.officeOverrides);
  }

  console.log("Stage: blender");
  runCommand(blenderExecutable(area), blenderArgs, "blender");
}

function exportCesium(area) {
  ensureFile(blenderExecutable(area), "Blender executable");
  ensureFile(area.outputs.blend, "Blend scene");
  ensureFile(path.join(repoRoot, "blender", "export_cesium.py"), "Cesium exporter");
  fs.mkdirSync(path.dirname(area.outputs.glb), { recursive: true });
  fs.mkdirSync(path.dirname(area.outputs.metadata), { recursive: true });

  console.log("Stage: cesium");
  runCommand(blenderExecutable(area), [
    "--background",
    "--python",
    path.join(repoRoot, "blender", "export_cesium.py"),
    "--",
    "--blend",
    area.outputs.blend,
    "--glb",
    area.outputs.glb,
    "--metadata",
    area.outputs.metadata,
  ], "cesium");
  writeCesiumPreview(area);
}

function blenderExecutable(area) {
  return path.join(area.blenderApp, "Contents", "MacOS", "Blender");
}

function ensureFile(file, label) {
  if (!fs.existsSync(file)) {
    throw new Error(`${label} not found: ${file}`);
  }
}

function runCommand(command, commandArgs, stage) {
  const result = spawnSync(command, commandArgs, { stdio: "inherit" });
  if (result.error) {
    throw result.error;
  }
  if (result.status !== 0) {
    const signal = result.signal ? ` signal=${result.signal}` : "";
    throw new Error(`Stage '${stage}' failed with status=${result.status}${signal}`);
  }
}

function writeCesiumPreview(area) {
  ensureFile(area.outputs.glb, "Cesium GLB");
  ensureFile(area.outputs.metadata, "Cesium metadata");
  const htmlPath = area.outputs.cesiumPreview;
  fs.mkdirSync(path.dirname(htmlPath), { recursive: true });
  writeVehicleRoute(area);
  writeVehicleModel(area);
  const glbName = path.basename(area.outputs.glb);
  const metadataName = path.basename(area.outputs.metadata);
  const routeName = path.basename(area.outputs.vehicleRoute);
  const vehicleModelName = path.basename(area.outputs.vehicleModel);
  fs.writeFileSync(htmlPath, cesiumPreviewHtml(glbName, metadataName, routeName, vehicleModelName, area.id));
  console.log(`Cesium preview: ${htmlPath}`);
}

function writeVehicleRoute(area) {
  const route = buildVehicleRoute(area.input);
  fs.mkdirSync(path.dirname(area.outputs.vehicleRoute), { recursive: true });
  fs.writeFileSync(area.outputs.vehicleRoute, `${JSON.stringify(route, null, 2)}\n`);
  console.log(`Vehicle route: ${area.outputs.vehicleRoute}`);
}

function writeVehicleModel(area) {
  const source = path.join(repoRoot, "assets", "vehicles", "ToyCar.glb");
  ensureFile(source, "Vehicle model asset");
  fs.mkdirSync(path.dirname(area.outputs.vehicleModel), { recursive: true });
  fs.copyFileSync(source, area.outputs.vehicleModel);
  console.log(`Vehicle model: ${area.outputs.vehicleModel}`);
}

function buildVehicleRoute(osmPath) {
  const xml = fs.readFileSync(osmPath, "utf8");
  const bounds = osmBounds(xml);
  const nodes = new Map();
  for (const match of xml.matchAll(/<node\b([^>]*)>/g)) {
    const attrs = xmlAttrs(match[1]);
    if (!attrs.id || attrs.lon === undefined || attrs.lat === undefined) continue;
    nodes.set(attrs.id, [Number(attrs.lon), Number(attrs.lat)]);
  }

  const segments = [];
  for (const match of xml.matchAll(/<way\b([^>]*)>([\s\S]*?)<\/way>/g)) {
    const attrs = xmlAttrs(match[1]);
    const body = match[2];
    const tags = {};
    for (const tagMatch of body.matchAll(/<tag\b([^>]*)\/?>/g)) {
      const tag = xmlAttrs(tagMatch[1]);
      if (tag.k) tags[tag.k] = tag.v || "";
    }
    if (!isCruiseHighway(tags)) continue;
    const coords = [];
    for (const ndMatch of body.matchAll(/<nd\b([^>]*)\/?>/g)) {
      const nd = xmlAttrs(ndMatch[1]);
      const coord = nodes.get(nd.ref);
      if (coord) coords.push(coord);
    }
    const runs = splitInBounds(compactCoords(coords), bounds);
    let runIndex = 0;
    for (const run of runs) {
      const lengthMeters = routeLength(run);
      if (lengthMeters < 20) continue;
      runIndex += 1;
      const laneOffsetMeters = 1.3;
      const shiftedRun = offsetPolylineRight(run, laneOffsetMeters);
      segments.push({
        id: runIndex === 1 ? (attrs.id || `way-${segments.length + 1}`) : `${attrs.id || "way"}-${runIndex}`,
        name: tags.name || tags.highway || "road",
        highway: tags.highway || "",
        oneWay: tags.oneway || "",
        lengthMeters,
        laneOffsetMeters,
        coordinates: shiftedRun,
        centerlineCoordinates: run,
      });
    }
  }
  segments.sort((a, b) => b.lengthMeters - a.lengthMeters);
  return {
    source: osmPath,
    bounds,
    generatedAt: new Date().toISOString(),
    speedMetersPerSecond: 8.0,
    loop: true,
    segments,
  };
}

function osmBounds(xml) {
  const match = xml.match(/<bounds\b([^>]*)\/?>/);
  if (!match) return null;
  const attrs = xmlAttrs(match[1]);
  const bounds = {
    minLon: Number(attrs.minlon),
    minLat: Number(attrs.minlat),
    maxLon: Number(attrs.maxlon),
    maxLat: Number(attrs.maxlat),
  };
  return Object.values(bounds).every(Number.isFinite) ? bounds : null;
}

function xmlAttrs(text) {
  const attrs = {};
  for (const match of text.matchAll(/([:\w-]+)\s*=\s*("([^"]*)"|'([^']*)')/g)) {
    attrs[match[1]] = match[3] !== undefined ? match[3] : match[4];
  }
  return attrs;
}

function isCruiseHighway(tags) {
  const highway = tags.highway || "";
  if (!highway) return false;
  if (tags.area === "yes") return false;
  const blocked = new Set([
    "footway", "path", "pedestrian", "steps", "cycleway", "service", "track",
    "bridleway", "corridor", "elevator", "platform", "construction",
  ]);
  return !blocked.has(highway);
}

function compactCoords(coords) {
  const out = [];
  for (const coord of coords) {
    const last = out[out.length - 1];
    if (!last || last[0] !== coord[0] || last[1] !== coord[1]) {
      out.push(coord);
    }
  }
  return out;
}

function offsetPolylineRight(coords, offsetMeters) {
  if (coords.length < 2 || offsetMeters === 0) return coords;
  const refLat = coords.reduce((sum, coord) => sum + coord[1], 0) / coords.length;
  const metersPerLat = 111320.0;
  const metersPerLon = 111320.0 * Math.cos(degreesToRadians(refLat));
  const points = coords.map((coord) => ({
    x: coord[0] * metersPerLon,
    y: coord[1] * metersPerLat,
    lon: coord[0],
    lat: coord[1],
  }));
  return points.map((point, index) => {
    const prev = points[Math.max(0, index - 1)];
    const next = points[Math.min(points.length - 1, index + 1)];
    let dx = next.x - prev.x;
    let dy = next.y - prev.y;
    const length = Math.hypot(dx, dy);
    if (length < 0.001) return [point.lon, point.lat];
    dx /= length;
    dy /= length;
    const rightX = dy;
    const rightY = -dx;
    return [
      (point.x + rightX * offsetMeters) / metersPerLon,
      (point.y + rightY * offsetMeters) / metersPerLat,
    ];
  });
}

function splitInBounds(coords, bounds) {
  if (!bounds) return [coords];
  const runs = [];
  let current = [];
  for (const coord of coords) {
    if (insideBounds(coord, bounds)) {
      current.push(coord);
    } else if (current.length) {
      if (current.length >= 2) runs.push(current);
      current = [];
    }
  }
  if (current.length >= 2) runs.push(current);
  return runs;
}

function insideBounds(coord, bounds) {
  const pad = 0.00002;
  return (
    coord[0] >= bounds.minLon - pad &&
    coord[0] <= bounds.maxLon + pad &&
    coord[1] >= bounds.minLat - pad &&
    coord[1] <= bounds.maxLat + pad
  );
}

function routeLength(coords) {
  let total = 0;
  for (let i = 1; i < coords.length; i += 1) {
    total += haversineMeters(coords[i - 1], coords[i]);
  }
  return total;
}

function haversineMeters(a, b) {
  const radius = 6371008.8;
  const lat1 = degreesToRadians(a[1]);
  const lat2 = degreesToRadians(b[1]);
  const dLat = degreesToRadians(b[1] - a[1]);
  const dLon = degreesToRadians(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 degreesToRadians(value) {
  return value * Math.PI / 180;
}

function cesiumPreviewHtml(glbName, metadataName, routeName, vehicleModelName, areaId) {
  return `<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>${escapeHtml(areaId)} Cesium Preview</title>
  <script src="https://cdn.jsdelivr.net/npm/cesium@1.121.1/Build/Cesium/Cesium.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/cesium@1.121.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    html, body, #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    #status {
      position: absolute;
      left: 12px;
      bottom: 12px;
      z-index: 1;
      max-width: 520px;
      padding: 8px 10px;
      border-radius: 4px;
      background: rgba(20, 24, 28, 0.78);
      color: #fff;
      font-size: 12px;
      line-height: 1.45;
    }
    #controls {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 1;
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border-radius: 4px;
      background: rgba(20, 24, 28, 0.78);
      color: #fff;
      font-size: 12px;
    }
    #controls button {
      height: 28px;
      border: 0;
      border-radius: 4px;
      padding: 0 10px;
      background: #f2f5f7;
      color: #111;
      cursor: pointer;
    }
    #controls input {
      width: 120px;
    }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="controls">
    <button id="toggleCruise">Pause</button>
    <button id="toggleFollow">Follow</button>
    <label>Speed <input id="speedControl" type="range" min="2" max="22" step="1" value="8"></label>
    <span id="speedLabel">8 m/s</span>
  </div>
  <div id="status">Loading ${escapeHtml(glbName)}...</div>
  <script>
    const statusEl = document.getElementById("status");
    const toggleCruise = document.getElementById("toggleCruise");
    const toggleFollow = document.getElementById("toggleFollow");
    const speedControl = document.getElementById("speedControl");
    const speedLabel = document.getElementById("speedLabel");
    Cesium.Ion.defaultAccessToken = "";

    async function main() {
      const metadata = await fetch("${escapeJs(metadataName)}").then((r) => r.json());
      const routeData = await fetch("${escapeJs(routeName)}").then((r) => r.json());
      const anchor = metadata.anchor || {};
      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 || 0);

      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.depthTestAgainstTerrain = true;

      const p = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
      const enu = Cesium.Transforms.eastNorthUpToFixedFrame(p);
      const correction = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading));
      const modelMatrix = Cesium.Matrix4.multiplyByMatrix3(enu, correction, new Cesium.Matrix4());
      const model = await Cesium.Model.fromGltfAsync({
        url: "${escapeJs(glbName)}",
        modelMatrix,
        scale: 1.0
      });
      viewer.scene.primitives.add(model);
      const cruise = addVehicleCruise(viewer, routeData);

      const center = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
      viewer.camera.flyToBoundingSphere(
        new Cesium.BoundingSphere(center, 900.0),
        { duration: 0.0 }
      );
      statusEl.textContent = "${escapeJs(glbName)} | route " + cruise.segment.id + " | " + Math.round(cruise.segment.lengthMeters) + "m";
    }

    function addVehicleCruise(viewer, routeData) {
      const segment = (routeData.segments || [])[0];
      if (!segment || !segment.coordinates || segment.coordinates.length < 2) {
        throw new Error("No drivable route found in ${escapeJs(routeName)}");
      }
      const speed = Number(routeData.speedMetersPerSecond || 8);
      const start = Cesium.JulianDate.now();
      const duration = Math.max(8, segment.lengthMeters / speed);
      const stop = Cesium.JulianDate.addSeconds(start, duration, new Cesium.JulianDate());
      const positions = new Cesium.SampledPositionProperty();
      let elapsed = 0;
      let previous = segment.coordinates[0];
      positions.addSample(start, Cesium.Cartesian3.fromDegrees(previous[0], previous[1], 0.8));
      for (let i = 1; i < segment.coordinates.length; i += 1) {
        const coord = segment.coordinates[i];
        elapsed += distanceMeters(previous, coord) / speed;
        const time = Cesium.JulianDate.addSeconds(start, elapsed, new Cesium.JulianDate());
        positions.addSample(time, Cesium.Cartesian3.fromDegrees(coord[0], coord[1], 0.8));
        previous = coord;
      }
      positions.setInterpolationOptions({
        interpolationDegree: 1,
        interpolationAlgorithm: Cesium.LinearApproximation
      });

      viewer.clock.startTime = start.clone();
      viewer.clock.stopTime = stop.clone();
      viewer.clock.currentTime = start.clone();
      viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
      viewer.clock.multiplier = 1;
      viewer.clock.shouldAnimate = true;

      const flat = [];
      for (const coord of segment.coordinates) {
        flat.push(coord[0], coord[1], 1.05);
      }
      viewer.entities.add({
        name: "Cruise route",
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(flat),
          width: 4,
          material: Cesium.Color.CYAN.withAlpha(0.85),
          clampToGround: false
        }
      });
      const vehicle = viewer.entities.add({
        name: "Cruise vehicle",
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({ start, stop })
        ]),
        position: positions,
        orientation: new Cesium.VelocityOrientationProperty(positions),
        model: {
          uri: "${escapeJs(vehicleModelName)}",
          scale: 0.006,
          minimumPixelSize: 24,
          maximumScale: 80
        },
        path: {
          resolution: 1,
          leadTime: 4,
          trailTime: 10,
          width: 2,
          material: Cesium.Color.ORANGE.withAlpha(0.9)
        }
      });
      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 / speed;
        speedLabel.textContent = value + " m/s";
      });
      const follow = createChaseFollow(viewer, positions);
      toggleFollow.addEventListener("click", () => {
        if (follow.enabled) {
          follow.stop();
          toggleFollow.textContent = "Follow";
        } else {
          follow.start();
          toggleFollow.textContent = "Free";
        }
      });
      return { segment, vehicle };
    }

    function createChaseFollow(viewer, positions) {
      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 offset = new Cesium.Cartesian3();
      const state = { enabled: false, distance: 36.0, height: 18.0 };

      function update(clock) {
        const time = clock.currentTime;
        const position = positions.getValue(time, scratchPosition);
        if (!position) return;
        const previousTime = Cesium.JulianDate.addSeconds(time, -0.8, new Cesium.JulianDate());
        const previous = positions.getValue(previousTime, 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);
        const heading = Math.atan2(eastComponent, northComponent);
        Cesium.Cartesian3.fromElements(0.0, -state.distance, state.height, offset);
        const transform = Cesium.Transforms.headingPitchRollToFixedFrame(
          position,
          new Cesium.HeadingPitchRoll(heading, 0.0, 0.0)
        );
        viewer.camera.lookAtTransform(transform, 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 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)));
    }

    main().catch((error) => {
      console.error(error);
      statusEl.textContent = "Failed to load Cesium preview: " + error.message;
    });
  </script>
</body>
</html>
`;
}

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

function escapeJs(value) {
  return String(value).replaceAll("\\", "\\\\").replaceAll('"', '\\"');
}