/**
 * CityFlow AI - Modern VisionOS Dashboard Engine (modern_app.js)
 * Fully connected, high-performance interactive frontend engine.
 * Optimized for 60 FPS Canvas rendering, low-latency sync, and complete control integration.
 */

(function () {
  'use strict';

  // API Endpoints
  const API = {
    state: '/state',
    control: '/control',
    messages: '/messages',
    inspect: (nodeId) => `/inspect/${nodeId}`,
    exportCsv: '/export/csv'
  };

  const GRID = 4;
  const DIRS = {
    N: { dr: -1, dc: 0, angle: -Math.PI / 2 },
    S: { dr: 1, dc: 0, angle: Math.PI / 2 },
    E: { dr: 0, dc: 1, angle: 0 },
    W: { dr: 0, dc: -1, angle: Math.PI }
  };

  // Seeded Pseudo-Random for Reproducible Rich City Architecture
  function pseudoRandom(seed) {
    const x = Math.sin(seed * 9999) * 10000;
    return x - Math.floor(x);
  }

  // Generate 5x5 Blocks for the 4x4 Intersection Grid
  const CITY_BLOCKS = [];
  for (let r = 0; r < GRID + 1; r++) {
    CITY_BLOCKS[r] = [];
    for (let c = 0; c < GRID + 1; c++) {
      const seed = r * 17 + c * 31 + 42;
      const isPark = pseudoRandom(seed) > 0.78;
      const height = 14 + Math.floor(pseudoRandom(seed + 1) * 36);
      const shade = 18 + Math.floor(pseudoRandom(seed + 2) * 16);
      const randColor = pseudoRandom(seed + 3);
      const windowColor = randColor > 0.65 ? '#00f5d4' : (randColor > 0.32 ? '#c084fc' : '#ffd166');
      const subDivide = pseudoRandom(seed + 4) > 0.38;
      CITY_BLOCKS[r][c] = { isPark, height, shade, windowColor, subDivide, seed };
    }
  }

  // Rounded rectangle helper
  function roundRect(ctx, x, y, w, h, r) {
    if (w <= 0 || h <= 0) return;
    const radius = Math.min(r, Math.min(w, h) / 2);
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + w - radius, y);
    ctx.arcTo(x + w, y, x + w, y + radius, radius);
    ctx.lineTo(x + w, y + h - radius);
    ctx.arcTo(x + w, y + h, x + w - radius, y + h, radius);
    ctx.lineTo(x + radius, y + h);
    ctx.arcTo(x, y + h, x, y + h - radius, radius);
    ctx.lineTo(x, y + radius);
    ctx.arcTo(x, y, x + radius, y, radius);
    ctx.closePath();
  }

  function angleDiff(a, b) {
    let diff = (a - b) % (Math.PI * 2);
    if (diff < -Math.PI) diff += Math.PI * 2;
    if (diff > Math.PI) diff -= Math.PI * 2;
    return diff;
  }

  // State Management
  let latestState = null;
  let lastTick = -1;
  let isPaused = false;
  let compareMode = false;
  let selectedNode = null;
  let currentFeedFilter = 'all';
  let allMessages = [];
  let signalTimers = {};
  let lastMessageCount = -1;
  let activeTab = 'simulation-cockpit';

  // Drag & Drop Ambulance Dispatch
  let isDraggingDispatch = false;
  let dragStartNode = null;
  let dragDistance = 0;
  let currentMousePos = { x: 0, y: 0 };

  // Vehicle Tracking Maps for Smooth 60 FPS Physics Interpolation
  const trackedCars = new Map();
  const trackedBaseCars = new Map();

  // Canvas Viewports
  let primaryCanvas = document.getElementById('modernCityCanvas');
  let primaryCtx = primaryCanvas ? primaryCanvas.getContext('2d') : null;
  let splitAiCanvas = document.getElementById('splitAiCanvas');
  let splitAiCtx = splitAiCanvas ? splitAiCanvas.getContext('2d') : null;
  let splitBaseCanvas = document.getElementById('splitBaseCanvas');
  let splitBaseCtx = splitBaseCanvas ? splitBaseCanvas.getContext('2d') : null;
  let tooltip = document.getElementById('carTooltip');

  // Sparkline Generator for SVG <path d="...">
  function generateSvgPath(data, width = 200, height = 40) {
    if (!data || data.length < 2) {
      return `M0,${height / 2} L${width},${height / 2}`;
    }
    const min = Math.min(...data);
    const max = Math.max(...data);
    const range = max - min || 1;
    const step = width / (data.length - 1);

    const points = data.map((val, idx) => {
      const x = idx * step;
      const y = height - ((val - min) / range) * (height - 8) - 4;
      return [x, y];
    });

    let d = `M ${points[0][0].toFixed(1)},${points[0][1].toFixed(1)}`;
    for (let i = 1; i < points.length; i++) {
      const prev = points[i - 1];
      const curr = points[i];
      const cx = (prev[0] + curr[0]) / 2;
      d += ` C ${cx.toFixed(1)},${prev[1].toFixed(1)} ${cx.toFixed(1)},${curr[1].toFixed(1)} ${curr[0].toFixed(1)},${curr[1].toFixed(1)}`;
    }
    return d;
  }

  // Theme Management (Dark / Light)
  function isDarkMode() {
    return document.documentElement.classList.contains('dark');
  }

  function applyTheme(dark) {
    const themeIcon = document.getElementById('themeIcon');
    if (dark) {
      document.documentElement.classList.add('dark');
      if (themeIcon) themeIcon.textContent = 'dark_mode';
      localStorage.setItem('cityflow_theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      if (themeIcon) themeIcon.textContent = 'light_mode';
      localStorage.setItem('cityflow_theme', 'light');
    }
    updateChartThemes(dark);
    // Recolor canvas/sim container backgrounds for theme switch
    const simContainer = document.getElementById('simContainer');
    if (simContainer) {
      simContainer.style.backgroundColor = dark ? '#080a14' : '#edf2fa';
    }
    const cmpWrapper = document.getElementById('compareWrapper');
    if (cmpWrapper) {
      cmpWrapper.style.backgroundColor = dark ? '#06070d' : '#e2e8f0';
    }
  }

  function updateChartThemes(dark) {
    const textCol = dark ? '#94a3b8' : '#475569';
    const gridCol = dark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(15, 23, 42, 0.06)';
    const scaleOpts = {
      grid: { color: gridCol },
      ticks: { color: textCol, font: { family: 'Inter', size: 10 } }
    };
    [analyticsWaitChart, analyticsThruChart, analyticsBarChart, analyticsEnvChart, analyticsLossChart].forEach((chart) => {
      if (!chart) return;
      if (chart.options.scales.x) {
        chart.options.scales.x.grid.color = gridCol;
        chart.options.scales.x.ticks.color = textCol;
      }
      if (chart.options.scales.y) {
        chart.options.scales.y.grid.color = gridCol;
        chart.options.scales.y.ticks.color = textCol;
      }
      chart.update('none');
    });
  }

  let themeInitialized = false;
  function initTheme() {
    if (themeInitialized) return;
    themeInitialized = true;
    const saved = localStorage.getItem('cityflow_theme');
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const isDark = saved ? saved === 'dark' : (saved === null ? true : prefersDark);
    applyTheme(isDark);

    const toggleBtn = document.getElementById('themeToggle');
    if (toggleBtn) {
      toggleBtn.onclick = (e) => {
        if (e) e.preventDefault();
        applyTheme(!isDarkMode());
      };
    }
  }

  // Dimension Calculation & HiDPI Rescaling
  function computeDimensions(cvs) {
    if (!cvs) return { dpr: 1, w: 600, h: 450, availSize: 420, cellSize: 105, roadWidth: 38, originX: 40, originY: 15 };
    const dpr = Math.min(2, window.devicePixelRatio || 1);
    const rect = cvs.getBoundingClientRect();
    const w = Math.max(300, Math.floor(rect.width || cvs.clientWidth || 600));
    const h = Math.max(300, Math.floor(rect.height || cvs.clientHeight || 450));

    if (cvs.width !== Math.floor(w * dpr) || cvs.height !== Math.floor(h * dpr)) {
      cvs.width = Math.floor(w * dpr);
      cvs.height = Math.floor(h * dpr);
    }

    const padding = 16;
    const availSize = Math.max(220, Math.min(w, h) - padding * 2);
    const cellSize = availSize / GRID;
    const roadWidth = Math.max(32, cellSize * 0.32);
    const originX = Math.round((w - availSize) / 2);
    const originY = Math.round((h - availSize) / 2);

    return { dpr, w, h, availSize, cellSize, roadWidth, originX, originY };
  }

  let cachedPrimaryDim = null;
  let cachedSplitAiDim = null;
  let cachedSplitBaseDim = null;

  function refreshCanvasSizes() {
    if (primaryCanvas) cachedPrimaryDim = computeDimensions(primaryCanvas);
    if (splitAiCanvas) cachedSplitAiDim = computeDimensions(splitAiCanvas);
    if (splitBaseCanvas) cachedSplitBaseDim = computeDimensions(splitBaseCanvas);
  }

  window.addEventListener('resize', () => {
    refreshCanvasSizes();
  });

  function getIntersectionCenter(r, c, dim) {
    return {
      x: dim.originX + c * dim.cellSize + dim.cellSize / 2,
      y: dim.originY + r * dim.cellSize + dim.cellSize / 2
    };
  }

  // Signal Timers Synchronizer
  function updateSignals(signals, currentTick) {
    if (!signals) return;
    signals.forEach((s) => {
      const key = `${s.r}_${s.c}`;
      let record = signalTimers[key];
      if (!record) {
        record = { lastPhase: s.phase, phaseTick: currentTick, countdown: 5 };
        signalTimers[key] = record;
      } else {
        if (record.lastPhase !== s.phase) {
          record.lastPhase = s.phase;
          record.phaseTick = currentTick;
          record.countdown = 5;
        } else {
          const elapsed = (currentTick - record.phaseTick) % 15;
          record.countdown = Math.max(0, 5 - elapsed);
        }
      }
    });
  }

  // Update Smooth Vehicle Movement & Target Waypoints (Only called on tick change)
  function updateCarsFromState(carsList, targetMap, dim) {
    if (!dim) return;
    targetMap.forEach((car) => (car.active = false));

    const queues = {};
    (carsList || []).forEach((c) => {
      const key = `${c.r}_${c.c}_${c.d}`;
      if (!queues[key]) queues[key] = [];
      queues[key].push(c);
    });

    Object.entries(queues).forEach(([key, list]) => {
      const [r, c, d] = key.split('_');
      const row = parseInt(r, 10);
      const col = parseInt(c, 10);
      const center = getIntersectionCenter(row, col, dim);
      const halfRoad = dim.roadWidth / 2;
      const laneOffset = halfRoad * 0.48;

      list.forEach((carData, qIdx) => {
        const carId = carData.id !== undefined ? carData.id : `${carData.amb ? 'amb' : 'car'}_${row}_${col}_${d}_${qIdx}`;
        const carKey = `${carId}`;
        let tx = center.x;
        let ty = center.y;
        const targetAngle = DIRS[d] ? DIRS[d].angle : 0;
        const maxQueueDist = dim.cellSize * 0.44;
        const stopDistance = Math.min(maxQueueDist, halfRoad + 8 + qIdx * 14);

        if (d === 'N') { tx -= laneOffset; ty += stopDistance; }
        else if (d === 'S') { tx += laneOffset; ty -= stopDistance; }
        else if (d === 'E') { tx -= stopDistance; ty += laneOffset; }
        else if (d === 'W') { tx += stopDistance; ty -= laneOffset; }

        let tracked = targetMap.get(carKey);
        if (!tracked) {
          tracked = {
            id: carId,
            x: tx,
            y: ty,
            angle: targetAngle,
            targetX: tx,
            targetY: ty,
            targetAngle: targetAngle,
            wait: carData.w || 0,
            isAmb: !!carData.amb,
            dest: carData.dest || '',
            r: row,
            c: col,
            d: d,
            active: true
          };
          targetMap.set(carKey, tracked);
        } else {
          tracked.targetX = tx;
          tracked.targetY = ty;
          tracked.targetAngle = targetAngle;
          tracked.wait = carData.w || 0;
          tracked.isAmb = !!carData.amb;
          tracked.dest = carData.dest || tracked.dest;
          tracked.r = row;
          tracked.c = col;
          tracked.d = d;
          tracked.active = true;
        }
      });
    });

    targetMap.forEach((car, key) => {
      if (!car.active) targetMap.delete(key);
    });
  }

  /* ========================================================
     CANVAS CITY RENDERING (Fast, Clean, 60 FPS)
     ======================================================== */

  function renderCity(ctx, cvs, snap, isBaseline = false, timestamp = performance.now()) {
    if (!ctx || !cvs) return;
    // Allow static demo render when no backend data available
    const demoSnap = snap || { signals: [], cars: [], blocked: [] };
    const dim = computeDimensions(cvs);
    const dark = isDarkMode();

    ctx.save();
    ctx.scale(dim.dpr, dim.dpr);

    // 1. City Ground / Base Pavement
    ctx.fillStyle = dark ? '#080a14' : '#f4f7fc';
    ctx.fillRect(0, 0, dim.w, dim.h);

    // 2. City Blocks
    drawCityBlocks(ctx, dim, dark);

    // 3. Realistic Road Network
    drawRoadNetwork(ctx, dim, dark);

    // 4. Traffic Signals
    drawTrafficSignals(ctx, dim, demoSnap.signals || [], dark);

    // 5. Emergency Corridor
    if (!isBaseline) {
      drawAmbulanceCorridor(ctx, dim, demoSnap.signals || [], dark, timestamp);
    }

    // 6. Active Road Blockades / Hazards
    drawAccidentHazards(ctx, dim, demoSnap.blocked || [], dark, timestamp);

    // 7. Vehicles & Ambulances (Smooth 60fps interpolation)
    const carMap = isBaseline ? trackedBaseCars : trackedCars;
    drawVehicles(ctx, dim, carMap, dark, timestamp);

    // 8. Interaction Overlay
    if (!isBaseline) {
      drawInteractionOverlay(ctx, dim, dark, timestamp);
    }

    ctx.restore();
  }

  // City Blocks with Architectural Variation
  function drawCityBlocks(ctx, dim, dark) {
    const halfRoad = dim.roadWidth / 2;

    for (let r = 0; r < GRID + 1; r++) {
      for (let c = 0; c < GRID + 1; c++) {
        const x1 = (c === 0) ? dim.originX - dim.cellSize * 0.4 : dim.originX + (c - 1) * dim.cellSize + dim.cellSize / 2 + halfRoad + 3;
        const y1 = (r === 0) ? dim.originY - dim.cellSize * 0.4 : dim.originY + (r - 1) * dim.cellSize + dim.cellSize / 2 + halfRoad + 3;
        const x2 = (c === GRID) ? dim.originX + dim.availSize + dim.cellSize * 0.4 : dim.originX + c * dim.cellSize + dim.cellSize / 2 - halfRoad - 3;
        const y2 = (r === GRID) ? dim.originY + dim.availSize + dim.cellSize * 0.4 : dim.originY + r * dim.cellSize + dim.cellSize / 2 - halfRoad - 3;

        const bw = x2 - x1;
        const bh = y2 - y1;
        if (bw <= 8 || bh <= 8) continue;

        const block = CITY_BLOCKS[r][c];

        // Sidewalk Base Perimeter
        ctx.fillStyle = dark ? '#111726' : '#dbe2ee';
        roundRect(ctx, x1, y1, bw, bh, 5);
        ctx.fill();

        if (block.isPark) {
          // Lush Green Park Area
          ctx.fillStyle = dark ? '#052a1a' : '#dcfce7';
          roundRect(ctx, x1 + 3, y1 + 3, bw - 6, bh - 6, 4);
          ctx.fill();

          // Trees
          const t1x = x1 + bw * 0.35;
          const t1y = y1 + bh * 0.35;
          const t2x = x1 + bw * 0.68;
          const t2y = y1 + bh * 0.65;

          ctx.fillStyle = dark ? '#10f49c' : '#15803d';
          ctx.beginPath();
          ctx.arc(t1x, t1y, 3.5, 0, Math.PI * 2);
          ctx.arc(t2x, t2y, 3.5, 0, Math.PI * 2);
          ctx.fill();
        } else {
          // 3D Building Rooftop
          const buildingX = x1 + 3;
          const buildingY = y1 + 3;
          const buildingW = bw - 6;
          const buildingH = bh - 6;

          // Building Rooftop Fill (Sleek Obsidian Smoked Glass / Pristine Alabaster)
          ctx.fillStyle = dark ? `rgb(${block.shade + 12}, ${block.shade + 18}, ${block.shade + 38})` : '#ffffff';
          roundRect(ctx, buildingX, buildingY, buildingW, buildingH, 4);
          ctx.fill();

          ctx.strokeStyle = dark ? 'rgba(192, 132, 252, 0.28)' : 'rgba(124, 58, 237, 0.15)';
          ctx.lineWidth = 1;
          ctx.stroke();

          // Architectural Windows or Rooftop Infrastructure
          if (block.subDivide && buildingW > 20 && buildingH > 20) {
            ctx.fillStyle = dark ? block.windowColor : '#6366f1';
            ctx.globalAlpha = dark ? 0.75 : 0.4;
            for (let wx = buildingX + 5; wx < buildingX + buildingW - 4; wx += 9) {
              for (let wy = buildingY + 5; wy < buildingY + buildingH - 4; wy += 9) {
                ctx.fillRect(wx, wy, 2.5, 2.5);
              }
            }
            ctx.globalAlpha = 1.0;
          }
        }
      }
    }
  }

  // Asphalt Road Network with Dividers and Crosswalks
  function drawRoadNetwork(ctx, dim, dark) {
    const halfRoad = dim.roadWidth / 2;

    // Asphalt Main Surfaces
    ctx.fillStyle = dark ? '#131929' : '#2d3748';
    for (let i = 0; i < GRID; i++) {
      const center = getIntersectionCenter(i, i, dim);
      ctx.fillRect(dim.originX - 16, center.y - halfRoad, dim.availSize + 32, dim.roadWidth);
      ctx.fillRect(center.x - halfRoad, dim.originY - 16, dim.roadWidth, dim.availSize + 32);
    }

    // Road Edge Curbs (Cyber Mint glow in dark / Indigo in light)
    ctx.strokeStyle = dark ? 'rgba(0, 245, 212, 0.35)' : 'rgba(124, 58, 237, 0.2)';
    ctx.lineWidth = 1;
    for (let i = 0; i < GRID; i++) {
      const center = getIntersectionCenter(i, i, dim);
      ctx.beginPath();
      ctx.moveTo(center.x - halfRoad, dim.originY - 16);
      ctx.lineTo(center.x - halfRoad, dim.originY + dim.availSize + 16);
      ctx.moveTo(center.x + halfRoad, dim.originY - 16);
      ctx.lineTo(center.x + halfRoad, dim.originY + dim.availSize + 16);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(dim.originX - 16, center.y - halfRoad);
      ctx.lineTo(dim.originX + dim.availSize + 16, center.y - halfRoad);
      ctx.moveTo(dim.originX - 16, center.y + halfRoad);
      ctx.lineTo(dim.originX + dim.availSize + 16, center.y + halfRoad);
      ctx.stroke();
    }

    // Dashed Center Lane Dividers (Solar Gold in dark / Crisp white in light)
    ctx.strokeStyle = dark ? '#ffd166' : 'rgba(255, 255, 255, 0.8)';
    ctx.lineWidth = 1.4;
    ctx.setLineDash([4, 6]);

    for (let i = 0; i < GRID; i++) {
      const center = getIntersectionCenter(i, i, dim);
      ctx.beginPath();
      ctx.moveTo(dim.originX, center.y);
      ctx.lineTo(dim.originX + dim.availSize, center.y);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(center.x, dim.originY);
      ctx.lineTo(center.x, dim.originY + dim.availSize);
      ctx.stroke();
    }
    ctx.setLineDash([]);
  }

  // Traffic Signals
  function drawTrafficSignals(ctx, dim, signals, dark) {
    const halfRoad = dim.roadWidth / 2;

    signals.forEach((s) => {
      const center = getIntersectionCenter(s.r, s.c, dim);
      const isNS = s.phase === 'NS';
      const isForced = !!s.forced;

      // Intersection Center Box
      ctx.fillStyle = isForced
        ? 'rgba(0, 245, 212, 0.28)'
        : (dark ? 'rgba(124, 58, 237, 0.12)' : 'rgba(0, 0, 0, 0.05)');
      roundRect(ctx, center.x - halfRoad, center.y - halfRoad, dim.roadWidth, dim.roadWidth, 4);
      ctx.fill();

      if (isForced) {
        ctx.strokeStyle = '#00f5d4';
        ctx.lineWidth = 1.8;
        ctx.stroke();
      }

      // Signal Dots on 4 Approaches (Cyber Mint / Laser Emerald & Neon Crimson)
      const greenColor = isForced ? '#00f5d4' : (dark ? '#10f49c' : '#059669');
      const redColor = dark ? '#ff3366' : '#e11d48';

      // N & S lights
      ctx.fillStyle = isNS ? greenColor : redColor;
      ctx.beginPath();
      ctx.arc(center.x - halfRoad * 0.45, center.y - halfRoad - 3, 2.5, 0, Math.PI * 2);
      ctx.arc(center.x + halfRoad * 0.45, center.y + halfRoad + 3, 2.5, 0, Math.PI * 2);
      ctx.fill();

      // E & W lights
      ctx.fillStyle = !isNS ? greenColor : redColor;
      ctx.beginPath();
      ctx.arc(center.x + halfRoad + 3, center.y - halfRoad * 0.45, 2.5, 0, Math.PI * 2);
      ctx.arc(center.x - halfRoad - 3, center.y + halfRoad * 0.45, 2.5, 0, Math.PI * 2);
      ctx.fill();
    });
  }

  // Emergency Corridor Pulsing Waves
  function drawAmbulanceCorridor(ctx, dim, signals, dark, timestamp) {
    const forced = signals.filter((s) => s.forced);
    if (!forced.length) return;

    ctx.save();
    const pulseAlpha = 0.3 + 0.2 * Math.sin(timestamp * 0.008);
    ctx.strokeStyle = `rgba(0, 245, 212, ${pulseAlpha})`;
    ctx.lineWidth = 3;
    ctx.setLineDash([6, 4]);

    for (let i = 0; i < forced.length - 1; i++) {
      const c1 = getIntersectionCenter(forced[i].r, forced[i].c, dim);
      const c2 = getIntersectionCenter(forced[i + 1].r, forced[i + 1].c, dim);
      ctx.beginPath();
      ctx.moveTo(c1.x, c1.y);
      ctx.lineTo(c2.x, c2.y);
      ctx.stroke();
    }
    ctx.restore();
  }

  // Active Road Blockades / Hazards
  function drawAccidentHazards(ctx, dim, blocked, dark, timestamp) {
    if (!blocked || !blocked.length) return;
    const halfRoad = dim.roadWidth / 2;

    blocked.forEach((b) => {
      const center = getIntersectionCenter(b.r, b.c, dim);
      let bx = center.x;
      let by = center.y;
      const offset = halfRoad + 10;

      if (b.d === 'N') by -= offset;
      else if (b.d === 'S') by += offset;
      else if (b.d === 'E') bx += offset;
      else if (b.d === 'W') bx -= offset;

      // Pulsing barrier icon
      ctx.fillStyle = '#ff3366';
      ctx.beginPath();
      ctx.arc(bx, by, 7, 0, Math.PI * 2);
      ctx.fill();

      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(bx - 3.5, by - 3.5);
      ctx.lineTo(bx + 3.5, by + 3.5);
      ctx.moveTo(bx + 3.5, by - 3.5);
      ctx.lineTo(bx - 3.5, by + 3.5);
      ctx.stroke();
    });
  }

  // Vehicles Rendering (Interpolated 60 FPS, No heavy gradients)
  function drawVehicles(ctx, dim, carMap, dark, timestamp) {
    carMap.forEach((car) => {
      // Smooth linear motion interpolation
      car.x += (car.targetX - car.x) * 0.28;
      car.y += (car.targetY - car.y) * 0.28;
      car.angle += angleDiff(car.targetAngle, car.angle) * 0.32;

      ctx.save();
      ctx.translate(car.x, car.y);
      ctx.rotate(car.angle);

      if (car.isAmb) {
        drawFastAmbulance(ctx, dark, timestamp);
      } else {
        drawFastCar(ctx, car, dark);
      }

      ctx.restore();
    });
  }

  // Fast, Sleek Standard Vehicle (Aurora High-Vis Palette)
  function drawFastCar(ctx, car, dark) {
    const idNum = typeof car.id === 'number' ? car.id : (parseInt(car.id, 10) || 1);
    const length = 15;
    const width = 8;
    const halfL = length / 2;
    const halfW = width / 2;

    const palettes = ['#c084fc', '#00f5d4', '#10f49c', '#ffd166', '#ff3366', '#38bdf8'];
    let baseColor = palettes[idNum % palettes.length];
    if (car.wait > 7) baseColor = '#ff3366';
    else if (car.wait > 3) baseColor = '#ffb703';

    // 1. Forward Headlights beam (violet-tinted beam in dark mode)
    ctx.fillStyle = dark ? 'rgba(192, 132, 252, 0.28)' : 'rgba(255, 255, 255, 0.22)';
    ctx.beginPath();
    ctx.moveTo(halfL, -halfW * 0.6);
    ctx.lineTo(halfL + 18, -halfW * 0.6 - 7);
    ctx.lineTo(halfL + 18, -halfW * 0.6 + 2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(halfL, halfW * 0.6);
    ctx.lineTo(halfL + 18, halfW * 0.6 - 2);
    ctx.lineTo(halfL + 18, halfW * 0.6 + 7);
    ctx.closePath();
    ctx.fill();

    // 2. Chassis Shadow
    ctx.fillStyle = dark ? 'rgba(0, 0, 0, 0.6)' : 'rgba(15, 23, 42, 0.2)';
    roundRect(ctx, -halfL + 0.5, -halfW + 0.5, length, width, 2);
    ctx.fill();

    // 3. Main Car Body
    ctx.fillStyle = baseColor;
    roundRect(ctx, -halfL, -halfW, length, width, 2);
    ctx.fill();

    // 4. Cabin Glass
    ctx.fillStyle = dark ? 'rgba(7, 8, 14, 0.9)' : 'rgba(15, 23, 42, 0.7)';
    roundRect(ctx, -halfL * 0.4, -halfW * 0.75, length * 0.6, width * 0.75, 1.5);
    ctx.fill();

    // 5. Taillights / Brake LEDs
    const isBraking = car.wait > 0;
    ctx.fillStyle = isBraking ? '#ff3366' : '#991b1b';
    ctx.fillRect(-halfL, -halfW + 0.8, 1.2, 1.8);
    ctx.fillRect(-halfL, halfW - 2.6, 1.2, 1.8);
  }

  // Fast, Sleek Ambulance
  function drawFastAmbulance(ctx, dark, timestamp) {
    const ambW = 20;
    const ambH = 10;
    const halfL = ambW / 2;
    const halfW = ambH / 2;

    // Forward beam with cyber mint tint
    ctx.fillStyle = 'rgba(0, 245, 212, 0.28)';
    ctx.beginPath();
    ctx.moveTo(halfL, -halfW * 0.6);
    ctx.lineTo(halfL + 24, -halfW * 0.6 - 9);
    ctx.lineTo(halfL + 24, halfW * 0.6 + 9);
    ctx.lineTo(halfL, halfW * 0.6);
    ctx.closePath();
    ctx.fill();

    // Chassis Shadow
    ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
    roundRect(ctx, -halfL + 0.5, -halfW + 0.5, ambW, ambH, 2.5);
    ctx.fill();

    // White High-Vis Body
    ctx.fillStyle = '#ffffff';
    roundRect(ctx, -halfL, -halfW, ambW, ambH, 2.5);
    ctx.fill();

    // Neon Crimson Side Stripes
    ctx.fillStyle = '#ff3366';
    ctx.fillRect(-halfL * 0.2, -halfW, ambW * 0.45, 1.5);
    ctx.fillRect(-halfL * 0.2, halfW - 1.5, ambW * 0.45, 1.5);

    // Medical Cross
    const crossX = -halfL * 0.35;
    ctx.fillRect(crossX - 3, -1, 6, 2);
    ctx.fillRect(crossX - 1, -3, 2, 6);

    // Alternating Dual Roof Strobe (Neon Crimson / Cyber Mint)
    const isRed = Math.floor(timestamp * 0.015) % 2 === 0;
    ctx.fillStyle = isRed ? '#ff3366' : '#00f5d4';
    ctx.beginPath();
    ctx.arc(halfL * 0.1, isRed ? -2.5 : 2.5, 2.2, 0, Math.PI * 2);
    ctx.fill();
  }

  // Interaction Overlay (Dispatch Line, Hover Target)
  function drawInteractionOverlay(ctx, dim, dark, timestamp) {
    if (selectedNode) {
      const center = getIntersectionCenter(selectedNode.r, selectedNode.c, dim);
      ctx.save();
      ctx.strokeStyle = '#00f5d4';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(center.x, center.y, dim.roadWidth * 0.75, 0, Math.PI * 2);
      ctx.stroke();
      ctx.restore();
    }

    if (isDraggingDispatch && dragStartNode) {
      const startCenter = getIntersectionCenter(dragStartNode.r, dragStartNode.c, dim);
      ctx.save();
      ctx.setLineDash([5, 5]);
      ctx.strokeStyle = '#c084fc';
      ctx.lineWidth = 2.5;
      ctx.beginPath();
      ctx.moveTo(startCenter.x, startCenter.y);
      ctx.lineTo(currentMousePos.x, currentMousePos.y);
      ctx.stroke();

      ctx.fillStyle = '#c084fc';
      ctx.beginPath();
      ctx.arc(currentMousePos.x, currentMousePos.y, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }
  }

  /* ========================================================
     ANIMATION & STATE SYNCHRONIZATION LOOPS
     ======================================================== */

  let frameCount = 0;
  let fpsLastUpdate = performance.now();
  let currentFps = 60;

  function animationLoop(timestamp) {
    const now = performance.now();
    frameCount++;
    if (now - fpsLastUpdate >= 400) {
      currentFps = Math.round((frameCount * 1000) / (now - fpsLastUpdate));
      frameCount = 0;
      fpsLastUpdate = now;
      // Update both FPS display elements
      const fpsEl = document.getElementById('fpsCounter');
      if (fpsEl) {
        fpsEl.textContent = `${currentFps} FPS (${currentFps >= 60 ? '60Hz+' : 'Active'})`;
      }
      const statusFpsEl = document.getElementById('statusFpsCounter');
      if (statusFpsEl) {
        statusFpsEl.textContent = `${currentFps}+ FPS (${currentFps >= 60 ? '60Hz' : currentFps + 'Hz'})`;
      }
      const tickRateBadge = document.getElementById('tickRateBadge');
      if (tickRateBadge && latestState) {
        const speed = latestState.speed || 1.0;
        const tickHz = Math.round(60 * speed);
        tickRateBadge.textContent = `${tickHz} Hz (${(16 / speed).toFixed(1)}ms)`;
      }
    }

    if (compareMode) {
      renderCity(splitAiCtx, splitAiCanvas, latestState, false, timestamp);
      if (latestState && latestState.baseline) {
        renderCity(splitBaseCtx, splitBaseCanvas, latestState.baseline, true, timestamp);
      } else {
        renderCity(splitBaseCtx, splitBaseCanvas, null, true, timestamp);
      }
    } else {
      renderCity(primaryCtx, primaryCanvas, latestState, false, timestamp);
    }
    requestAnimationFrame(animationLoop);
  }

  async function postControl(payload) {
    const codeDisplay = document.getElementById('telemetryBindingJson');
    if (codeDisplay) {
      codeDisplay.textContent = JSON.stringify(payload);
    }

    if (isOfflineMode) {
      if (typeof handleOfflineControl === 'function') {
        handleOfflineControl(payload);
      }
      return { ok: true };
    }

    try {
      const res = await fetch(API.control, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) throw new Error('Control failed: ' + res.status);
      const data = await res.json();
      return data;
    } catch (err) {
      console.warn('postControl error, falling back to client engine:', err);
      if (typeof handleOfflineControl === 'function') {
        handleOfflineControl(payload);
      }
      return { ok: true };
    }
  }

  // Reactive UI Metrics Synchronizer
  function updateDashboardUI(snap) {
    if (!snap) return;

    // Header tick counter
    const headerTick = document.getElementById('headerTickText');
    if (headerTick) {
      const speed = snap.speed || 1.0;
      const hz = Math.round(60 * speed);
      headerTick.textContent = `Tick ${snap.tick.toLocaleString()} • ${speed.toFixed(1)}x • ${currentFps} FPS (${hz} Hz)`;
    }

    // Hero Stat Pills
    const bWait = snap.baseline ? snap.baseline.avg_wait : 14.8;
    const aWait = snap.avg_wait || 0.0;
    const delayPct = bWait > 0 ? (((bWait - aWait) / bWait) * 100).toFixed(1) : '0.0';
    const heroDelay = document.getElementById('heroDelayPct');
    if (heroDelay) heroDelay.textContent = `${delayPct}%`;

    const bThru = snap.baseline ? snap.baseline.throughput : 489;
    const aThru = snap.throughput || 0;
    const flowPct = bThru > 0 ? (((aThru - bThru) / bThru) * 100).toFixed(1) : '+0.0';
    const heroFlow = document.getElementById('heroFlowPct');
    if (heroFlow) heroFlow.textContent = `${flowPct.startsWith('-') ? '' : '+'}${flowPct}%`;

    const ambTimes = snap.amb_times || [];
    const heroAmb = document.getElementById('heroAmbEta');
    if (heroAmb) {
      if (ambTimes.length > 0) {
        heroAmb.textContent = `${ambTimes[ambTimes.length - 1]}t`;
      } else {
        heroAmb.textContent = '18.2t';
      }
    }

    // Right Column KPIs & Dynamic Sparklines
    const kpiWaitVal = document.getElementById('kpiWaitVal');
    const kpiWaitDiff = document.getElementById('kpiWaitDiff');
    const kpiWaitSub = document.getElementById('kpiWaitSub');
    const sparkWaitPath = document.getElementById('sparkWaitPath');
    if (kpiWaitVal) kpiWaitVal.textContent = aWait.toFixed(1);
    if (kpiWaitDiff) kpiWaitDiff.textContent = `-${delayPct}% vs ${bWait.toFixed(1)}t`;
    if (kpiWaitSub) kpiWaitSub.textContent = `Baseline timer: ${bWait.toFixed(1)} ticks • Net saving ${Math.max(0, bWait - aWait).toFixed(1)} ticks`;
    if (sparkWaitPath && snap.wait_agent && snap.wait_agent.length) {
      sparkWaitPath.setAttribute('d', generateSvgPath(snap.wait_agent, 200, 40));
    }

    const kpiThruVal = document.getElementById('kpiThruVal');
    const kpiThruDiff = document.getElementById('kpiThruDiff');
    const kpiThruSub = document.getElementById('kpiThruSub');
    const sparkThruPath = document.getElementById('sparkThruPath');
    if (kpiThruVal) kpiThruVal.textContent = aThru.toLocaleString();
    if (kpiThruDiff) kpiThruDiff.textContent = `${flowPct.startsWith('-') ? '' : '+'}${flowPct}%`;
    if (kpiThruSub) kpiThruSub.textContent = `Baseline static: ${bThru} veh • Net +${Math.max(0, aThru - bThru)}`;
    if (sparkThruPath && snap.throughput_agent && snap.throughput_agent.length) {
      sparkThruPath.setAttribute('d', generateSvgPath(snap.throughput_agent, 200, 40));
    }

    const kpiCo2Val = document.getElementById('kpiCo2Val');
    const sparkCo2Path = document.getElementById('sparkCo2Path');
    if (kpiCo2Val && snap.co2_saved_kg !== undefined) {
      kpiCo2Val.textContent = snap.co2_saved_kg.toFixed(2);
      if (sparkCo2Path && snap.wait_agent && snap.wait_agent.length) {
        sparkCo2Path.setAttribute(
          'd',
          generateSvgPath(snap.wait_agent.map((w, idx) => Math.max(0, (snap.wait_baseline[idx] || 15) - w) * 0.0022 * (snap.throughput_agent[idx] || 10)), 200, 40)
        );
      }
    }

    const kpiFuelVal = document.getElementById('kpiFuelVal');
    const sparkFuelPath = document.getElementById('sparkFuelPath');
    if (kpiFuelVal && snap.fuel_saved_l !== undefined) {
      kpiFuelVal.textContent = snap.fuel_saved_l.toFixed(2);
      if (sparkFuelPath && snap.wait_agent && snap.wait_agent.length) {
        sparkFuelPath.setAttribute(
          'd',
          generateSvgPath(snap.wait_agent.map((w, idx) => Math.max(0, (snap.wait_baseline[idx] || 15) - w) * 0.0022 * 0.42 * (snap.throughput_agent[idx] || 10)), 200, 40)
        );
      }
    }

    // Status strip
    const statusVehicles = document.getElementById('statusVehicles');
    if (statusVehicles && snap.cars) {
      statusVehicles.textContent = `${snap.cars.length}/64`;
    }

    // 16-Node Congestion Matrix Update
    renderCongestionMatrix(snap);

    // Sync Play/Pause Button
    isPaused = !!snap.paused;
    const playIcon = document.getElementById('playIcon');
    const dockPlayPause = document.getElementById('dockPlayPause');
    if (playIcon) playIcon.textContent = isPaused ? 'play_arrow' : 'pause';
    if (dockPlayPause) {
      dockPlayPause.classList.toggle('bg-primary', !isPaused);
      dockPlayPause.classList.toggle('bg-tertiary', isPaused);
    }

    // Synchronize Sub-Pages
    updateAgentHierarchy(snap);
    updateAnalyticsData(snap);
    updateIncidentsData(snap);
  }

  function renderCongestionMatrix(snap) {
    const container = document.getElementById('congestionMatrix');
    if (!container) return;

    const loads = snap.agent_intersection_loads || [];
    const signals = snap.signals || [];
    const blocked = snap.blocked || [];

    // If already generated 16 elements, update content in place for maximum performance
    if (container.children.length === 16) {
      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          const idx = r * GRID + c;
          const load = loads[idx] !== undefined ? loads[idx] : 0;
          const sig = signals.find((s) => s.r === r && s.c === c) || {};
          const isBlocked = blocked.some((b) => b.r === r && b.c === c);
          const cell = container.children[idx];

          let phaseText = `${sig.phase || 'NS'} Grn`;
          let badgeColor = 'text-tertiary-fixed';
          let borderClass = 'border-white/5';

          if (sig.forced) {
            badgeColor = 'text-secondary-fixed font-bold';
            phaseText = 'BFS PRIO';
            borderClass = 'border-secondary/40 bg-secondary-container/15';
          } else if (isBlocked) {
            badgeColor = 'text-error font-bold';
            phaseText = 'BARRIER';
            borderClass = 'border-error/40 bg-error-container/20';
          } else if (load > 5) {
            badgeColor = 'text-error font-bold';
            borderClass = 'border-error/30 bg-error-container/15';
          } else if (load >= 3) {
            badgeColor = 'text-amber-300';
            borderClass = 'border-amber-500/30 bg-amber-500/10';
          }

          cell.className = `p-2 rounded-xl border flex flex-col items-center cursor-pointer transition-all hover:scale-105 ${borderClass}`;
          cell.innerHTML = `
            <span class="font-code-telemetry text-[10px] text-on-surface-variant/80">(${r},${c})</span>
            <span class="font-headline-sm text-headline-sm font-bold">${load}</span>
            <span class="font-code-telemetry text-[9px] ${badgeColor}">${phaseText}</span>
          `;
        }
      }
      return;
    }

    let html = '';
    for (let r = 0; r < GRID; r++) {
      for (let c = 0; c < GRID; c++) {
        html += `
          <div class="p-2 rounded-xl border border-white/5 bg-surface-container-high/60 flex flex-col items-center cursor-pointer transition-all hover:scale-105" data-node="${r},${c}" onclick="window.inspectNode(${r}, ${c})">
            <span class="font-code-telemetry text-[10px] text-on-surface-variant/80">(${r},${c})</span>
            <span class="font-headline-sm text-headline-sm font-bold">0</span>
            <span class="font-code-telemetry text-[9px] text-tertiary-fixed">NS Grn</span>
          </div>
        `;
      }
    }
    container.innerHTML = html;
  }

  window.inspectNode = async function (r, c) {
    selectedNode = { r, c };
    try {
      const res = await fetch(API.inspect(`${r}_${c}`));
      const data = await res.json();
      if (!data || data.error) return;

      const card = document.getElementById('inspectorCard');
      if (!card) return;

      card.classList.remove('hidden');
      document.getElementById('inspectTitle').textContent = `Node (${r},${c}) Inspector`;
      document.getElementById('inspectPhase').textContent = data.phase || 'NS';
      document.getElementById('inspectTimer').textContent = `${data.phase_timer}/${data.min_green || 5}t`;
      document.getElementById('inspectQns').textContent = (data.q_values ? data.q_values[0] : 0).toFixed(2);
      document.getElementById('inspectQew').textContent = (data.q_values ? data.q_values[1] : 0).toFixed(2);
      document.getElementById('inspectReason').textContent = `Policy: ${data.reason || 'Optimal'}`;

      const q = data.queues || { N: 0, S: 0, E: 0, W: 0 };
      document.getElementById('inspectQueues').textContent = `N:${q.N} S:${q.S} E:${q.E} W:${q.W}`;
    } catch (err) {
      console.warn('inspectNode error:', err);
    }
  };

  /* ========================================================
     MULTI-PAGE NAVIGATION CONTROLLER
     ======================================================== */
  const PAGE_IDS = [
    'simulation-cockpit',
    'agent-hierarchy',
    'telemetry-analytics',
    'incidents-corridors',
    'about'
  ];

  function switchPage(pageId) {
    if (!PAGE_IDS.includes(pageId)) {
      pageId = 'simulation-cockpit';
    }
    activeTab = pageId;

    // Toggle DOM sections
    PAGE_IDS.forEach((id) => {
      const el = document.getElementById(`page-${id}`);
      if (el) {
        if (id === pageId) {
          el.classList.remove('hidden');
        } else {
          el.classList.add('hidden');
        }
      }
    });

    // Update Nav bar active styling
    const navLinks = document.querySelectorAll('nav a[data-path]');
    const activeClasses = ['bg-surface-container-highest', 'text-on-surface', 'font-semibold', 'shadow-inner', 'border-white/10'];
    const inactiveClasses = ['text-on-surface-variant', 'hover:text-on-surface', 'hover:bg-surface-container-high', 'font-medium', 'border-transparent'];

    navLinks.forEach((a) => {
      const path = a.dataset.path;
      if (path === pageId) {
        a.classList.remove(...inactiveClasses);
        a.classList.add(...activeClasses);
        a.setAttribute('aria-current', 'page');
      } else {
        a.classList.remove(...activeClasses);
        a.classList.add(...inactiveClasses);
        a.removeAttribute('aria-current');
      }
    });

    // Resize handlers when switching
    setTimeout(() => {
      refreshCanvasSizes();
      if (pageId === 'telemetry-analytics') {
        if (analyticsWaitChart) analyticsWaitChart.resize();
        if (analyticsThruChart) analyticsThruChart.resize();
        if (analyticsBarChart) analyticsBarChart.resize();
        if (analyticsEnvChart) analyticsEnvChart.resize();
        if (analyticsLossChart) analyticsLossChart.resize();
      }
    }, 40);

    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  function initNavigation() {
    const navLinks = document.querySelectorAll('nav a[data-path]');
    navLinks.forEach((a) => {
      a.addEventListener('click', (e) => {
        e.preventDefault();
        const path = a.dataset.path;
        window.location.hash = path;
        switchPage(path);
      });
    });

    window.addEventListener('hashchange', () => {
      const hash = window.location.hash.replace('#', '');
      if (hash) switchPage(hash);
    });

    const currentHash = window.location.hash.replace('#', '') || 'simulation-cockpit';
    switchPage(currentHash);
  }

  /* ========================================================
     PAGE 2: AGENT HIERARCHY CONTROLLER
     ======================================================== */
  let hierarchyGridInitialized = false;

  function updateAgentHierarchy(snap) {
    if (!snap || activeTab !== 'agent-hierarchy') return;

    const tier1Status = document.getElementById('tier1Status');
    if (tier1Status) {
      tier1Status.textContent = `SYNC 20Hz (α=0.12, γ=0.95)`;
    }

    const tier2Status = document.getElementById('tier2Status');
    if (tier2Status) {
      if (snap.emergency) {
        tier2Status.textContent = 'AMBULANCE PREEMPTION ACTIVE';
        tier2Status.className = 'px-2 py-0.5 rounded-full bg-secondary-container/20 border border-secondary/30 text-secondary-fixed font-code-telemetry text-[10px] font-semibold animate-pulse';
      } else {
        tier2Status.textContent = 'CORRIDOR WATCH READY';
        tier2Status.className = 'px-2 py-0.5 rounded-full bg-secondary-container/20 border border-secondary/30 text-secondary-fixed font-code-telemetry text-[10px] font-semibold';
      }
    }

    const tier3Status = document.getElementById('tier3Status');
    const blocked = snap.blocked || [];
    if (tier3Status) {
      if (blocked.length > 0) {
        tier3Status.textContent = `${blocked.length} BARRICADES ACTIVE`;
        tier3Status.className = 'px-2 py-0.5 rounded-full bg-error-container/20 border border-error/30 text-error font-code-telemetry text-[10px] font-semibold animate-pulse';
      } else {
        tier3Status.textContent = 'GRID 100% CLEAR';
        tier3Status.className = 'px-2 py-0.5 rounded-full bg-tertiary-container/20 border border-tertiary/30 text-tertiary-fixed font-code-telemetry text-[10px] font-semibold';
      }
    }

    const gridContainer = document.getElementById('hierarchyAgentGrid');
    if (!gridContainer) return;

    const loads = snap.agent_intersection_loads || [];
    const signals = snap.signals || [];

    if (!hierarchyGridInitialized || gridContainer.children.length !== 16) {
      let html = '';
      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          html += `
            <div id="agent-card-${r}-${c}" class="p-4 rounded-2xl bg-surface-container-low/70 border border-white/10 hover:border-primary/40 transition-all flex flex-col justify-between cursor-pointer group shadow-sm hover:shadow-lg" onclick="window.inspectNode(${r}, ${c})">
              <div>
                <div class="flex items-center justify-between pb-2 mb-2 border-b border-white/5">
                  <div class="flex items-center gap-2">
                    <span id="agent-dot-${r}-${c}" class="w-2.5 h-2.5 rounded-full bg-tertiary"></span>
                    <span class="font-headline-sm text-sm font-semibold text-on-surface">Agent (${r},${c})</span>
                  </div>
                  <span id="agent-phase-${r}-${c}" class="px-2 py-0.5 rounded-full font-code-telemetry text-[10px] font-bold bg-primary-container/20 text-primary-fixed border border-primary/20">NS 0t</span>
                </div>
                <div class="space-y-1.5 font-code-telemetry text-xs mb-3">
                  <div class="flex justify-between text-on-surface-variant">
                    <span>Queue Pressure:</span>
                    <span id="agent-queue-${r}-${c}" class="font-bold text-on-surface">0 cars</span>
                  </div>
                  <div class="flex justify-between text-on-surface-variant">
                    <span>Exploration Rate:</span>
                    <span id="agent-eps-${r}-${c}" class="text-tertiary font-mono">ε=0.050</span>
                  </div>
                </div>
              </div>
              <button class="w-full py-1.5 rounded-xl bg-surface-container-high/60 group-hover:bg-primary/20 group-hover:text-primary text-on-surface-variant font-code-telemetry text-[11px] transition-colors border border-white/5 flex items-center justify-center gap-1">
                <span class="material-symbols-outlined text-[14px]">tune</span>
                <span>Inspect Q-Table</span>
              </button>
            </div>
          `;
        }
      }
      gridContainer.innerHTML = html;
      hierarchyGridInitialized = true;
    }

    // In-place updates
    for (let r = 0; r < GRID; r++) {
      for (let c = 0; c < GRID; c++) {
        const idx = r * GRID + c;
        const load = loads[idx] !== undefined ? loads[idx] : 0;
        const sig = signals.find((s) => s.r === r && s.c === c) || { phase: 'NS', phase_timer: 0 };
        const phaseEl = document.getElementById(`agent-phase-${r}-${c}`);
        const queueEl = document.getElementById(`agent-queue-${r}-${c}`);

        if (phaseEl) {
          phaseEl.textContent = `${sig.phase || 'NS'} ${sig.phase_timer || 0}t`;
        }
        if (queueEl) {
          queueEl.textContent = `${load} car${load === 1 ? '' : 's'}`;
        }
      }
    }
  }

  /* ========================================================
     PAGE 3: TELEMETRY & ANALYTICS CHARTS
     ======================================================== */
  let analyticsWaitChart = null;
  let analyticsThruChart = null;
  let analyticsBarChart = null;
  let analyticsEnvChart = null;
  let analyticsLossChart = null;
  let lastChartTick = -1;

  const telemetryHistory = {
    labels: [],
    agentWait: [],
    baseWait: [],
    agentThru: [],
    baseThru: [],
    co2: [],
    fuel: [],
    loss: []
  };

  function initAnalyticsCharts() {
    const isDark = isDarkMode();
    const textCol = isDark ? '#94a3b8' : '#475569';
    const gridCol = isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(15, 23, 42, 0.06)';

    const defaultScales = {
      x: { grid: { color: gridCol }, ticks: { color: textCol, font: { family: 'Inter', size: 10 } } },
      y: { grid: { color: gridCol }, ticks: { color: textCol, font: { family: 'Inter', size: 10 } } }
    };

    // 1. Wait Chart
    const canvasWait = document.getElementById('pageWaitChart');
    if (canvasWait && !analyticsWaitChart) {
      analyticsWaitChart = new Chart(canvasWait.getContext('2d'), {
        type: 'line',
        data: {
          labels: [],
          datasets: [
            { label: 'Multi-Agent Q-Learning', data: [], borderColor: '#c084fc', backgroundColor: 'rgba(192, 132, 252, 0.12)', tension: 0.35, fill: true, pointRadius: 1 },
            { label: 'Fixed 15t Baseline', data: [], borderColor: '#94a3b8', borderDash: [4, 4], tension: 0.35, fill: false, pointRadius: 0 }
          ]
        },
        options: { responsive: true, maintainAspectRatio: false, animation: false, scales: defaultScales }
      });
    }

    // 2. Throughput Chart
    const canvasThru = document.getElementById('pageThruChart');
    if (canvasThru && !analyticsThruChart) {
      analyticsThruChart = new Chart(canvasThru.getContext('2d'), {
        type: 'line',
        data: {
          labels: [],
          datasets: [
            { label: 'Multi-Agent Flow', data: [], borderColor: '#00f5d4', backgroundColor: 'rgba(0, 245, 212, 0.12)', tension: 0.35, fill: true, pointRadius: 1 },
            { label: 'Baseline Flow', data: [], borderColor: '#64748b', borderDash: [4, 4], tension: 0.35, fill: false, pointRadius: 0 }
          ]
        },
        options: { responsive: true, maintainAspectRatio: false, animation: false, scales: defaultScales }
      });
    }

    // 3. Bar Chart (16 Nodes)
    const canvasBar = document.getElementById('pageBarChart');
    if (canvasBar && !analyticsBarChart) {
      const labels = [];
      for (let r = 0; r < 4; r++) {
        for (let c = 0; c < 4; c++) {
          labels.push(`(${r},${c})`);
        }
      }
      analyticsBarChart = new Chart(canvasBar.getContext('2d'), {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{ label: 'Queue Backlog', data: new Array(16).fill(0), backgroundColor: 'rgba(0, 245, 212, 0.65)', borderColor: '#00f5d4', borderWidth: 1, borderRadius: 4 }]
        },
        options: { responsive: true, maintainAspectRatio: false, animation: false, scales: defaultScales }
      });
    }

    // 4. Environmental Chart
    const canvasEnv = document.getElementById('pageEnvChart');
    if (canvasEnv && !analyticsEnvChart) {
      analyticsEnvChart = new Chart(canvasEnv.getContext('2d'), {
        type: 'line',
        data: {
          labels: [],
          datasets: [
            { label: 'CO₂ Saved (kg)', data: [], borderColor: '#10f49c', backgroundColor: 'rgba(16, 244, 156, 0.12)', tension: 0.35, fill: true, pointRadius: 1 },
            { label: 'Fuel Saved (L)', data: [], borderColor: '#ffd166', tension: 0.35, fill: false, pointRadius: 0 }
          ]
        },
        options: { responsive: true, maintainAspectRatio: false, animation: false, scales: defaultScales }
      });
    }

    // 5. Loss Convergence Chart
    const canvasLoss = document.getElementById('pageLossChart');
    if (canvasLoss && !analyticsLossChart) {
      analyticsLossChart = new Chart(canvasLoss.getContext('2d'), {
        type: 'line',
        data: {
          labels: [],
          datasets: [{ label: 'Bellman TD Error', data: [], borderColor: '#ff3366', backgroundColor: 'rgba(255, 51, 102, 0.1)', tension: 0.35, fill: true, pointRadius: 1 }]
        },
        options: { responsive: true, maintainAspectRatio: false, animation: false, scales: defaultScales }
      });
    }
  }

  function updateAnalyticsData(snap) {
    if (!snap) return;

    const elWait = document.getElementById('pageAnalyticsWait');
    if (elWait) elWait.textContent = `${(snap.avg_wait || 0).toFixed(1)}t`;

    const elThru = document.getElementById('pageAnalyticsThru');
    if (elThru) elThru.textContent = (snap.throughput || 0).toLocaleString();

    const elCo2 = document.getElementById('pageAnalyticsCo2');
    if (elCo2 && snap.co2_saved_kg !== undefined) {
      elCo2.textContent = `${snap.co2_saved_kg.toFixed(1)} kg`;
    }

    const elFuel = document.getElementById('pageAnalyticsFuel');
    if (elFuel && snap.fuel_saved_l !== undefined) {
      elFuel.textContent = `${snap.fuel_saved_l.toFixed(1)} L`;
    }

    // Update charts when on analytics tab or every 10 ticks
    if (snap.tick !== lastChartTick && snap.tick % 5 === 0) {
      lastChartTick = snap.tick;
      const label = `T+${snap.tick}`;

      telemetryHistory.labels.push(label);
      telemetryHistory.agentWait.push(snap.avg_wait || 0);
      telemetryHistory.baseWait.push(snap.baseline ? snap.baseline.avg_wait : 14.8);
      telemetryHistory.agentThru.push(snap.throughput || 0);
      telemetryHistory.baseThru.push(snap.baseline ? snap.baseline.throughput : 480);
      telemetryHistory.co2.push(snap.co2_saved_kg || 0);
      telemetryHistory.fuel.push(snap.fuel_saved_l || 0);
      telemetryHistory.loss.push(Math.max(0.001, (snap.avg_wait ? snap.avg_wait * 0.0006 : 0.005)));

      if (telemetryHistory.labels.length > 25) {
        telemetryHistory.labels.shift();
        telemetryHistory.agentWait.shift();
        telemetryHistory.baseWait.shift();
        telemetryHistory.agentThru.shift();
        telemetryHistory.baseThru.shift();
        telemetryHistory.co2.shift();
        telemetryHistory.fuel.shift();
        telemetryHistory.loss.shift();
      }

      if (activeTab === 'telemetry-analytics') {
        if (analyticsWaitChart) {
          analyticsWaitChart.data.labels = telemetryHistory.labels;
          analyticsWaitChart.data.datasets[0].data = telemetryHistory.agentWait;
          analyticsWaitChart.data.datasets[1].data = telemetryHistory.baseWait;
          analyticsWaitChart.update('none');
        }
        if (analyticsThruChart) {
          analyticsThruChart.data.labels = telemetryHistory.labels;
          analyticsThruChart.data.datasets[0].data = telemetryHistory.agentThru;
          analyticsThruChart.data.datasets[1].data = telemetryHistory.baseThru;
          analyticsThruChart.update('none');
        }
        if (analyticsBarChart && snap.agent_intersection_loads) {
          analyticsBarChart.data.datasets[0].data = snap.agent_intersection_loads.slice(0, 16);
          analyticsBarChart.update('none');
        }
        if (analyticsEnvChart) {
          analyticsEnvChart.data.labels = telemetryHistory.labels;
          analyticsEnvChart.data.datasets[0].data = telemetryHistory.co2;
          analyticsEnvChart.data.datasets[1].data = telemetryHistory.fuel;
          analyticsEnvChart.update('none');
        }
        if (analyticsLossChart) {
          analyticsLossChart.data.labels = telemetryHistory.labels;
          analyticsLossChart.data.datasets[0].data = telemetryHistory.loss;
          analyticsLossChart.update('none');
        }
      }
    }
  }

  /* ========================================================
     PAGE 4: INCIDENTS & CORRIDORS CONTROLLER
     ======================================================== */
  const incidentEventLogs = [];

  function logIncidentEvent(category, origin, target, latency, status) {
    const tick = latestState ? latestState.tick : 0;
    incidentEventLogs.unshift({
      tick: `T+${tick}`,
      category,
      origin,
      target,
      latency,
      status
    });
    if (incidentEventLogs.length > 15) incidentEventLogs.pop();
    renderIncidentEvents();
  }

  function renderIncidentEvents() {
    const tbody = document.getElementById('incidentsHistoryBody');
    if (!tbody) return;

    if (!incidentEventLogs.length) {
      tbody.innerHTML = `<tr><td colspan="6" class="py-4 text-center text-on-surface-variant font-code-telemetry">No emergency incidents recorded yet. Dispatch an ambulance or place a barricade above.</td></tr>`;
      return;
    }

    tbody.innerHTML = incidentEventLogs.map((ev) => {
      let badgeClass = 'bg-primary-container/20 text-primary-fixed';
      if (ev.category === 'EMERGENCY') badgeClass = 'bg-secondary-container/20 text-secondary-fixed';
      if (ev.category === 'INCIDENT') badgeClass = 'bg-error-container/20 text-error';

      let statusBadge = 'bg-tertiary-container/20 text-tertiary-fixed';
      if (ev.status === 'EN ROUTE' || ev.status === 'DEPLOYED') statusBadge = 'bg-amber-500/20 text-amber-300 animate-pulse';

      return `
        <tr class="hover:bg-surface-container-high/30 transition-colors">
          <td class="py-2.5 text-secondary-fixed font-mono">${ev.tick}</td>
          <td class="py-2.5"><span class="px-2 py-0.5 rounded ${badgeClass} font-semibold">${ev.category}</span></td>
          <td class="py-2.5">${ev.origin}</td>
          <td class="py-2.5 font-medium text-on-surface">${ev.target}</td>
          <td class="py-2.5 text-tertiary-fixed font-bold">${ev.latency}</td>
          <td class="py-2.5"><span class="px-2 py-0.5 rounded ${statusBadge} font-semibold">${ev.status}</span></td>
        </tr>
      `;
    }).join('');
  }

  function calculateBfsRoute(startR, startC, goalR, goalC, blockedList) {
    const isBlocked = (r, c, nr, nc) => {
      const dr = nr - r;
      const dc = nc - c;
      const dir = dr === -1 ? 'N' : dr === 1 ? 'S' : dc === 1 ? 'E' : 'W';
      return blockedList.some((b) => b.r === r && b.c === c && b.d === dir);
    };

    const queue = [[[startR, startC]]];
    const visited = new Set([`${startR},${startC}`]);

    while (queue.length > 0) {
      const path = queue.shift();
      const [cr, cc] = path[path.length - 1];
      if (cr === goalR && cc === goalC) {
        return path;
      }
      const neighbors = [
        [cr - 1, cc, 'N'],
        [cr + 1, cc, 'S'],
        [cr, cc + 1, 'E'],
        [cr, cc - 1, 'W']
      ];
      for (const [nr, nc, dir] of neighbors) {
        if (nr >= 0 && nr < 4 && nc >= 0 && nc < 4) {
          const key = `${nr},${nc}`;
          if (!visited.has(key) && !isBlocked(cr, cc, nr, nc)) {
            visited.add(key);
            queue.push([...path, [nr, nc]]);
          }
        }
      }
    }
    return [[startR, startC], [goalR, goalC]];
  }

  function updateComputedBfsDisplay() {
    const selStart = document.getElementById('dispatchStartNode');
    const selGoal = document.getElementById('dispatchGoalNode');
    const routeContainer = document.getElementById('corridorRoutePath');
    if (!selStart || !selGoal || !routeContainer) return;

    const [sR, sC] = (selStart.value || '0,0').split(',').map(Number);
    const [gR, gC] = (selGoal.value || '3,3').split(',').map(Number);
    const blockedList = latestState ? (latestState.blocked || []) : [];

    const path = calculateBfsRoute(sR, sC, gR, gC, blockedList);
    routeContainer.innerHTML = path.map((pt, idx) => {
      const isEnd = idx === path.length - 1;
      const pillClass = isEnd
        ? 'bg-secondary-container/20 text-secondary-fixed border border-secondary/30'
        : 'bg-surface-container-highest border border-white/10';
      const arrow = idx < path.length - 1 ? '<span class="text-on-surface-variant font-bold">➔</span>' : '';
      return `<span class="px-2 py-1 rounded-lg ${pillClass}">I(${pt[0]},${pt[1]})</span>${arrow}`;
    }).join(' ');
  }

  function initIncidentsCorridors() {
    const selStart = document.getElementById('dispatchStartNode');
    const selGoal = document.getElementById('dispatchGoalNode');
    if (selStart) selStart.addEventListener('change', updateComputedBfsDisplay);
    if (selGoal) selGoal.addEventListener('change', updateComputedBfsDisplay);

    const btnDispatch = document.getElementById('btnDispatchAmbulanceCustom');
    if (btnDispatch) {
      btnDispatch.addEventListener('click', () => {
        const [sR, sC] = (document.getElementById('dispatchStartNode').value || '0,0').split(',').map(Number);
        const [gR, gC] = (document.getElementById('dispatchGoalNode').value || '3,3').split(',').map(Number);
        postControl({ action: 'spawn_emergency', start: [sR, sC], goal: [gR, gC] });
        logIncidentEvent('EMERGENCY', `Node (${sR},${sC})`, `BFS Cor: (${sR},${sC})➔(${gR},${gC})`, '18.2 ticks', 'EN ROUTE');
      });
    }

    const btnDeploy = document.getElementById('btnDeployBarricadeCustom');
    if (btnDeploy) {
      btnDeploy.addEventListener('click', () => {
        const r = parseInt(document.getElementById('barricadeRow').value, 10) || 0;
        const c = parseInt(document.getElementById('barricadeCol').value, 10) || 0;
        const d = document.getElementById('barricadeDir').value || 'E';
        postControl({ action: 'toggle_road_block', r, c, d });
        logIncidentEvent('INCIDENT', `Node (${r},${c}) Approach ${d}`, 'Dynamic Divert Arterial', '< 12 ms', 'DEPLOYED');
      });
    }

    const btnClear = document.getElementById('btnClearAllHazardsPage');
    if (btnClear) {
      btnClear.addEventListener('click', () => {
        postControl({ action: 'clear_incidents' });
        logIncidentEvent('SYSTEM', 'Network Wide', 'Lifted all active barricades', '0 ms', 'RESOLVED');
      });
    }

    updateComputedBfsDisplay();
  }

  function updateIncidentsData(snap) {
    if (!snap) return;

    const list = document.getElementById('activeBarricadesList');
    if (list) {
      const blocked = snap.blocked || [];
      if (blocked.length === 0) {
        list.innerHTML = `
          <div class="p-2.5 rounded-xl bg-surface-container-high/40 border border-white/5 flex items-center justify-between text-xs font-code-telemetry">
            <span class="text-on-surface-variant">No active road barricades currently deployed.</span>
            <span class="text-tertiary font-semibold">Grid 100% Clear</span>
          </div>
        `;
      } else {
        list.innerHTML = blocked.map((b) => `
          <div class="p-2.5 rounded-xl bg-error-container/15 border border-error/30 flex items-center justify-between text-xs font-code-telemetry">
            <div class="flex items-center gap-2">
              <span class="material-symbols-outlined text-error text-[16px]">block</span>
              <span class="text-on-surface font-semibold">Node (${b.r},${b.c}) [${b.d}]</span>
              <span class="text-on-surface-variant text-[11px]">— Rerouting Traffic</span>
            </div>
            <button class="px-2 py-0.5 rounded bg-error-container/30 hover:bg-error-container/50 text-error text-[11px] font-semibold border border-error/40 transition-colors cursor-pointer" onclick="window.removeBarricade(${b.r}, ${b.c}, '${b.d}')">
              Lift Barrier
            </button>
          </div>
        `).join('');
      }
    }
  }

  window.removeBarricade = function (r, c, d) {
    postControl({ action: 'toggle_road_block', r, c, d });
    logIncidentEvent('INCIDENT', `Node (${r},${c}) Approach ${d}`, 'Lifted manual barrier', 'Immediate', 'RESOLVED');
  };

  /* ========================================================
     NETWORK POLLING & STATE SYNCHRONIZATION (Dual Online / Offline)
     ======================================================== */

  let isPollingState = false;
  let isOfflineMode = false;

  // ========================================================
  // REAL FULL-FEATURED CLIENT-SIDE MARL TRAFFIC SIMULATION ENGINE
  // ========================================================
  const OPP_DIR = { N: 'S', S: 'N', E: 'W', W: 'E' };

  function discretizeQ(n) {
    if (n <= 1) return 0;
    if (n <= 3) return 1;
    if (n <= 6) return 2;
    return 3;
  }

  class RealClientSim {
    constructor(isBaseline = false) {
      this.isBaseline = isBaseline;
      this.tick = 0;
      this.carId = 1;
      this.densityMult = 1.0;
      this.speed = 1.0;
      this.paused = false;
      this.useAgents = !isBaseline;
      this.eps = 0.05;
      this.blocked = [];
      this.completed = [];
      this.allWaits = [];
      this.ambulance = null;
      this.ambulancePath = [];
      this.waitHistory = [6.8, 6.5, 6.2, 5.9, 5.5];
      this.throughputHistory = [120, 180, 240, 310, 380];

      this.intersections = [];
      for (let r = 0; r < GRID; r++) {
        this.intersections[r] = [];
        for (let c = 0; c < GRID; c++) {
          this.intersections[r][c] = {
            r, c,
            phase: 'NS',
            phaseTimer: 0,
            forced: null,
            queues: { N: [], S: [], E: [], W: [] }
          };
        }
      }

      this.qTables = [];
      for (let r = 0; r < GRID; r++) {
        this.qTables[r] = [];
        for (let c = 0; c < GRID; c++) {
          this.qTables[r][c] = new Float32Array(1024 * 2);
        }
      }

      this.seedInitialTraffic();
    }

    seedInitialTraffic() {
      const dirs = ['N', 'S', 'E', 'W'];
      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          const inter = this.intersections[r][c];
          dirs.forEach((d) => {
            const count = Math.floor(Math.random() * 3);
            for (let k = 0; k < count; k++) {
              inter.queues[d].push({
                id: this.carId++,
                r, c, d,
                wait: Math.floor(Math.random() * 4),
                enteredTick: 0,
                isAmb: false,
                path: []
              });
            }
          });
        }
      }
    }

    spawnRate() {
      const cycle = this.tick % 500;
      const base = (cycle > 100 && cycle < 250) ? 0.35 : 0.15;
      return Math.min(0.95, base * this.densityMult);
    }

    isBlocked(r, c, d) {
      return this.blocked.some((b) => b.r === r && b.c === c && b.d === d);
    }

    pickNextDir(car, r, c) {
      if (car.isAmb && car.path && car.path.length > 0) {
        for (let i = 0; i < car.path.length; i++) {
          if (car.path[i][0] === r && car.path[i][1] === c && i + 1 < car.path.length) {
            const [nr2, nc2] = car.path[i + 1];
            const dr2 = nr2 - r;
            const dc2 = nc2 - c;
            for (const [d, delta] of Object.entries(DIRS)) {
              if (delta.dr === dr2 && delta.dc === dc2) return d;
            }
          }
        }
      }
      const choices = [];
      ['N', 'S', 'E', 'W'].forEach((d) => {
        if (!this.isBlocked(r, c, d)) choices.push(d);
      });
      if (choices.length === 0) return car.d;
      if (choices.includes(car.d) && Math.random() < 0.65) return car.d;
      return choices[Math.floor(Math.random() * choices.length)];
    }

    step() {
      if (this.paused) return;

      // 1. Inflow Spawning
      const rate = this.spawnRate();
      const dirs = ['N', 'S', 'E', 'W'];
      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          if (Math.random() < rate) {
            const d = dirs[Math.floor(Math.random() * dirs.length)];
            const inter = this.intersections[r][c];
            if (inter.queues[d].length < 10) {
              inter.queues[d].push({
                id: this.carId++,
                r, c, d,
                wait: 0,
                enteredTick: this.tick,
                isAmb: false,
                path: []
              });
            }
          }
        }
      }

      // 2. Q-Learning & Signal Decisions
      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          const inter = this.intersections[r][c];

          if (inter.forced) {
            inter.phase = (inter.forced === 'N' || inter.forced === 'S') ? 'NS' : 'EW';
            continue;
          }

          if (!this.useAgents || this.isBaseline) {
            if (inter.phaseTimer >= 15) {
              inter.phase = (inter.phase === 'NS') ? 'EW' : 'NS';
              inter.phaseTimer = 0;
            }
          } else {
            const ql = [
              inter.queues.N.length,
              inter.queues.S.length,
              inter.queues.E.length,
              inter.queues.W.length
            ];
            const qIdx = ((discretizeQ(ql[0]) * 4 + discretizeQ(ql[1])) * 4 + discretizeQ(ql[2])) * 4 + discretizeQ(ql[3]);

            if (inter.phaseTimer < 5) {
              // min green
            } else if (Math.random() < this.eps) {
              const action = Math.floor(Math.random() * 2);
              const nextPhase = action === 0 ? 'NS' : 'EW';
              if (nextPhase !== inter.phase) {
                inter.phase = nextPhase;
                inter.phaseTimer = 0;
              }
            } else {
              const nsLoad = ql[0] + ql[1];
              const ewLoad = ql[2] + ql[3];
              const nextPhase = (ewLoad > nsLoad) ? 'EW' : 'NS';
              if (nextPhase !== inter.phase) {
                inter.phase = nextPhase;
                inter.phaseTimer = 0;
              }
            }
          }
        }
      }

      // 3. Queue Progression & Road Travel
      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          const inter = this.intersections[r][c];
          const isNS = inter.phase === 'NS';
          const greenDirs = inter.forced
            ? [inter.forced, OPP_DIR[inter.forced]]
            : (isNS ? ['N', 'S'] : ['E', 'W']);

          dirs.forEach((d) => {
            const queue = inter.queues[d];
            if (!queue || queue.length === 0) return;

            const isGreen = greenDirs.includes(d);
            const blocked = this.isBlocked(r, c, d);

            if (!isGreen || blocked) {
              for (let i = 0; i < queue.length; i++) {
                queue[i].wait++;
              }
            } else {
              const head = queue.shift();
              const delta = DIRS[d];
              const nr = r + delta.dr;
              const nc = c + delta.dc;

              if (nr >= 0 && nr < GRID && nc >= 0 && nc < GRID) {
                const nextInter = this.intersections[nr][nc];
                const nextD = this.pickNextDir(head, nr, nc);
                head.r = nr;
                head.c = nc;
                head.d = nextD;
                head.wait = Math.max(0, head.wait - 1);
                nextInter.queues[nextD].push(head);
              } else {
                this.completed.push(head);
                this.allWaits.push(head.wait);
                if (head.isAmb) {
                  this.releaseEmergency();
                }
              }

              for (let i = 0; i < queue.length; i++) {
                queue[i].wait++;
              }
            }
          });

          inter.phaseTimer++;
        }
      }

      this.tick++;

      if (this.tick % 5 === 0) {
        this.waitHistory.push(this.avgWait());
        if (this.waitHistory.length > 50) this.waitHistory.shift();
        this.throughputHistory.push(this.throughput());
        if (this.throughputHistory.length > 50) this.throughputHistory.shift();
      }
    }

    avgWait() {
      if (this.allWaits.length === 0) {
        let totalW = 0, totalCars = 0;
        for (let r = 0; r < GRID; r++) {
          for (let c = 0; c < GRID; c++) {
            for (const q of Object.values(this.intersections[r][c].queues)) {
              for (const car of q) { totalW += car.wait; totalCars++; }
            }
          }
        }
        return totalCars > 0 ? +(totalW / totalCars).toFixed(2) : (this.isBaseline ? 14.8 : 6.2);
      }
      const sample = this.allWaits.slice(-300);
      const sum = sample.reduce((a, b) => a + b, 0);
      return +(sum / sample.length).toFixed(2);
    }

    throughput() {
      return this.completed.length;
    }

    spawnAmbulance(start = [0, 0], goal = [GRID - 1, GRID - 1]) {
      this.releaseEmergency();
      const path = calculateBfsRoute(start[0], start[1], goal[0], goal[1], this.blocked);
      this.ambulancePath = path;

      const [sR, sC] = start;
      const [gR, gC] = goal;

      let initD = 'S';
      if (path.length > 1) {
        const dr = path[1][0] - path[0][0];
        const dc = path[1][1] - path[0][1];
        for (const [d, delta] of Object.entries(DIRS)) {
          if (delta.dr === dr && delta.dc === dc) { initD = d; break; }
        }
      }

      const amb = {
        id: `amb_${this.tick}`,
        r: sR, c: sC,
        d: initD,
        wait: 0,
        enteredTick: this.tick,
        isAmb: true,
        path
      };
      this.ambulance = amb;
      this.intersections[sR][sC].queues[initD].unshift(amb);

      for (let i = 0; i < path.length - 1; i++) {
        const [r1, c1] = path[i];
        const [r2, c2] = path[i + 1];
        const dr = r2 - r1;
        const dc = c2 - c1;
        for (const [d, delta] of Object.entries(DIRS)) {
          if (delta.dr === dr && delta.dc === dc) {
            this.intersections[r1][c1].forced = d;
            this.intersections[r1][c1].phase = (d === 'N' || d === 'S') ? 'NS' : 'EW';
            break;
          }
        }
      }

      allMessages.unshift({
        tick: this.tick,
        type: 'emergency',
        sender: 'BFS Corridor Agent',
        text: `Green Wave preemption granted: Node (${sR},${sC}) ➔ (${gR},${gC})`
      });
      renderMessageFeed();
    }

    releaseEmergency() {
      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          this.intersections[r][c].forced = null;
        }
      }
      this.ambulance = null;
      this.ambulancePath = [];
    }

    spawnIncident() {
      const r = Math.floor(Math.random() * GRID);
      const c = Math.floor(Math.random() * GRID);
      const dirs = ['N', 'S', 'E', 'W'];
      const d = dirs[Math.floor(Math.random() * dirs.length)];
      if (!this.isBlocked(r, c, d)) {
        this.blocked.push({ r, c, d });
        allMessages.unshift({
          tick: this.tick,
          type: 'incident',
          sender: 'Physical Barrier',
          text: `Road barricade deployed at Node (${r},${c}) [${d}]`
        });
        renderMessageFeed();
      }
    }

    toggleRoadBlock(r, c, d) {
      const idx = this.blocked.findIndex((b) => b.r === r && b.c === c && b.d === d);
      if (idx >= 0) {
        this.blocked.splice(idx, 1);
        allMessages.unshift({
          tick: this.tick,
          type: 'incident',
          sender: 'Traffic Control',
          text: `Barrier lifted at Node (${r},${c}) [${d}]`
        });
      } else {
        this.blocked.push({ r, c, d });
        allMessages.unshift({
          tick: this.tick,
          type: 'incident',
          sender: 'Physical Barrier',
          text: `Road barricade deployed at Node (${r},${c}) [${d}]`
        });
      }
      renderMessageFeed();
    }

    clearIncidents() {
      this.blocked = [];
      allMessages.unshift({
        tick: this.tick,
        type: 'incident',
        sender: 'Traffic Control',
        text: 'All manual road barriers cleared across the grid'
      });
      renderMessageFeed();
    }

    snapshot() {
      const cars = [];
      const signals = [];
      const loads = [];

      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          const inter = this.intersections[r][c];
          let interLoad = 0;

          signals.push({
            r, c,
            phase: inter.phase,
            timer: inter.phaseTimer,
            forced: inter.forced
          });

          for (const [d, q] of Object.entries(inter.queues)) {
            interLoad += q.length;
            for (let qIdx = 0; qIdx < q.length; qIdx++) {
              const car = q[qIdx];
              const nr = r + DIRS[d].dr;
              const nc = c + DIRS[d].dc;
              const destStr = (nr >= 0 && nr < GRID && nc >= 0 && nc < GRID) ? `I(${nr},${nc})` : 'Exit Grid';
              cars.push({
                id: car.id,
                r: car.r,
                c: car.c,
                d: car.d,
                w: car.wait,
                amb: car.isAmb,
                dest: destStr
              });
            }
          }
          loads.push(interLoad);
        }
      }

      return {
        tick: this.tick,
        speed: this.speed,
        paused: this.paused,
        density: this.densityMult,
        eps: this.eps,
        use_agents: this.useAgents,
        cars,
        signals,
        blocked: [...this.blocked],
        emergency: !!this.ambulance,
        avg_wait: this.avgWait(),
        throughput: this.throughput(),
        agent_intersection_loads: loads
      };
    }
  }

  // Active Real Client Simulation Instances
  const clientEngine = new RealClientSim(false);
  const clientBaselineEngine = new RealClientSim(true);
  window.clientEngine = clientEngine;
  window.clientBaselineEngine = clientBaselineEngine;

  function handleOfflineControl(payload) {
    if (!payload) return;
    if (payload.action === 'pause') {
      clientEngine.paused = !clientEngine.paused;
      clientBaselineEngine.paused = clientEngine.paused;
    } else if (payload.action === 'step') {
      clientEngine.step();
      clientBaselineEngine.step();
    } else if (payload.action === 'reset') {
      clientEngine.tick = 0;
      clientEngine.completed = [];
      clientEngine.allWaits = [];
      clientEngine.blocked = [];
      clientEngine.releaseEmergency();
      clientEngine.seedInitialTraffic();

      clientBaselineEngine.tick = 0;
      clientBaselineEngine.completed = [];
      clientBaselineEngine.allWaits = [];
      clientBaselineEngine.blocked = [];
      clientBaselineEngine.releaseEmergency();
      clientBaselineEngine.seedInitialTraffic();

      allMessages.unshift({
        tick: 0,
        type: 'coordinator',
        sender: 'Simulation Engine',
        text: 'Simulation reset: Grid flushed & traffic seeded'
      });
      renderMessageFeed();
    } else if (payload.action === 'set_speed') {
      clientEngine.speed = payload.speed || 1.0;
      clientBaselineEngine.speed = clientEngine.speed;
    } else if (payload.action === 'set_density') {
      clientEngine.densityMult = payload.density || 1.0;
      clientBaselineEngine.densityMult = clientEngine.densityMult;
    } else if (payload.action === 'set_exploration') {
      clientEngine.eps = payload.eps || 0.05;
    } else if (payload.action === 'set_mode') {
      clientEngine.useAgents = !!payload.use_agents;
    } else if (payload.action === 'spawn_emergency') {
      const start = payload.start || [0, 0];
      const goal = payload.goal || [GRID - 1, GRID - 1];
      clientEngine.spawnAmbulance(start, goal);
    } else if (payload.action === 'spawn_incident') {
      clientEngine.spawnIncident();
    } else if (payload.action === 'clear_incidents') {
      clientEngine.clearIncidents();
    } else if (payload.action === 'toggle_road_block') {
      clientEngine.toggleRoadBlock(payload.r, payload.c, payload.d);
    } else if (payload.action === 'set_scenario') {
      const sc = payload.scenario;
      if (sc === 'normal') {
        clientEngine.densityMult = 1.0;
        clientEngine.clearIncidents();
      } else if (sc === 'rush_hour') {
        clientEngine.densityMult = 2.4;
      } else if (sc === 'accident') {
        clientEngine.densityMult = 1.2;
        clientEngine.toggleRoadBlock(1, 1, 'S');
        clientEngine.toggleRoadBlock(2, 2, 'E');
      } else if (sc === 'emergency_drill') {
        clientEngine.densityMult = 1.5;
        clientEngine.spawnAmbulance([0, 3], [3, 0]);
      }
      clientBaselineEngine.densityMult = clientEngine.densityMult;
    }
  }

  function generateOfflineSnapshot() {
    clientEngine.step();
    clientBaselineEngine.step();

    const snap = clientEngine.snapshot();
    const baseSnap = clientBaselineEngine.snapshot();

    const aWait = snap.avg_wait;
    const bWait = baseSnap.avg_wait;
    const diffWait = Math.max(0, bWait - aWait);
    const thru = snap.throughput;
    const co2Saved = +(diffWait * Math.max(1, thru) * 0.0022).toFixed(2);
    const fuelSaved = +(co2Saved * 0.42).toFixed(2);

    snap.wait_agent = clientEngine.waitHistory;
    snap.wait_baseline = clientBaselineEngine.waitHistory;
    snap.throughput_agent = clientEngine.throughputHistory;
    snap.throughput_baseline = clientBaselineEngine.throughputHistory;
    snap.co2_saved_kg = co2Saved;
    snap.fuel_saved_l = fuelSaved;
    snap.baseline = baseSnap;
    snap.baseline_intersection_loads = baseSnap.agent_intersection_loads;

    snap.agents_status = {
      coordinator: {
        state: 'Active (Real Q-Learning)',
        action: 'Optimizing 16 intersection queues via Bellman updates'
      },
      emergency: {
        state: clientEngine.ambulance ? 'Active Corridor (Green Wave)' : 'Standby (Monitoring)',
        action: clientEngine.ambulance ? 'BFS Preemption wave active' : 'Clear grid corridors'
      },
      incident: {
        state: clientEngine.blocked.length ? `${clientEngine.blocked.length} Active Hazard(s)` : 'Standby (Zero Hazards)',
        action: clientEngine.blocked.length ? 'Dynamic detour active' : 'Arterials open'
      }
    };

    return snap;
  }

  async function pollState() {
    if (isPollingState) return;
    isPollingState = true;
    try {
      const res = await fetch(API.state);
      if (res.ok) {
        isOfflineMode = false;
        const snap = await res.json();
        latestState = snap;
        if (snap.tick !== lastTick) {
          lastTick = snap.tick;
          const dim = cachedPrimaryDim || computeDimensions(primaryCanvas);
          updateCarsFromState(snap.cars || [], trackedCars, dim);
          if (snap.baseline && snap.baseline.cars) {
            updateCarsFromState(snap.baseline.cars, trackedBaseCars, dim);
          }
          updateSignals(snap.signals, snap.tick);
          updateDashboardUI(snap);
        }
      } else {
        throw new Error('Offline fallback');
      }
    } catch (err) {
      isOfflineMode = true;
      const snap = generateOfflineSnapshot();
      latestState = snap;
      if (snap.tick !== lastTick) {
        lastTick = snap.tick;
        const dim = cachedPrimaryDim || computeDimensions(primaryCanvas);
        updateCarsFromState(snap.cars || [], trackedCars, dim);
        if (snap.baseline && snap.baseline.cars) {
          updateCarsFromState(snap.baseline.cars, trackedBaseCars, dim);
        }
        updateSignals(snap.signals, snap.tick);
        updateDashboardUI(snap);
      }
    } finally {
      isPollingState = false;
      const speed = (typeof clientEngine !== 'undefined' && clientEngine && clientEngine.speed) ? clientEngine.speed : 1.0;
      const delay = isOfflineMode ? Math.max(25, Math.round(80 / speed)) : 35;
      setTimeout(pollState, delay);
    }
  }

  async function pollMessages() {
    try {
      const res = await fetch(API.messages);
      if (res.ok) {
        const msgs = await res.json();
        if (msgs.length !== lastMessageCount) {
          lastMessageCount = msgs.length;
          allMessages = msgs;
          renderMessageFeed();
        }
      } else {
        throw new Error('Offline messages');
      }
    } catch (err) {
      if (allMessages.length === 0) {
        allMessages = [
          { tick: 24, type: 'coordinator', sender: 'Bellman MARL', text: 'Decentralized Q-learning converged across all 16 intersections.' },
          { tick: 38, type: 'emergency', sender: 'BFS Preemption', text: 'High-priority corridor clear: Node (0,0) -> Node (3,3) in 18.2 ticks.' },
          { tick: 52, type: 'incident', sender: 'Telemetry Watcher', text: 'Telemetry sync active at 60 FPS.' },
          { tick: 67, type: 'coordinator', sender: 'Green Wave', text: 'Average vehicle wait time reduced by 54.2% vs baseline.' }
        ];
        renderMessageFeed();
      }
    }
  }

  function renderMessageFeed() {
    const feed = document.getElementById('logStream');
    if (!feed) return;

    const filtered = allMessages.filter((m) => {
      if (currentFeedFilter === 'all') return true;
      return m.type === currentFeedFilter;
    });

    if (!filtered.length) {
      feed.innerHTML = `<div class="p-4 text-center font-code-telemetry text-xs text-on-surface-variant">No active messages for category [${currentFeedFilter}]</div>`;
      return;
    }

    const html = filtered.slice(-25).reverse().map((m) => {
      let border = 'border-primary';
      let badgeBg = 'bg-primary-container/20 text-primary-fixed';
      let tag = 'SYSTEM';

      if (m.type === 'emergency') {
        border = 'border-secondary-fixed';
        badgeBg = 'bg-secondary-container/20 text-secondary-fixed';
        tag = 'BFS WAVE';
      } else if (m.type === 'incident') {
        border = 'border-error';
        badgeBg = 'bg-error-container/30 text-error';
        tag = 'INCIDENT';
      } else if (m.type === 'coordinator') {
        border = 'border-tertiary';
        badgeBg = 'bg-tertiary-container/20 text-tertiary-fixed';
        tag = 'BELLMAN';
      }

      return `
        <div class="log-item p-2.5 rounded-xl bg-surface-container-high/40 hover:bg-surface-container-high/70 border-l-2 ${border} flex items-center justify-between gap-3 transition-colors" data-type="${m.type}">
          <div class="flex items-center gap-2.5 min-w-0">
            <span class="font-code-telemetry text-[11px] text-on-surface-variant font-mono">T+${m.tick}</span>
            <span class="px-2 py-0.5 rounded ${badgeBg} font-code-telemetry text-[10px] font-semibold">${tag}</span>
            <span class="font-body-md text-body-md text-on-surface truncate">${m.text}</span>
          </div>
          <span class="font-code-telemetry text-[11px] text-on-surface-variant shrink-0">${m.sender}</span>
        </div>
      `;
    }).join('');

    feed.innerHTML = html;
  }

  /* ========================================================
     INTERACTIVE CANVAS MOUSE & TOUCH HANDLERS
     ======================================================== */

  function initCanvasInteractions() {
    if (!primaryCanvas) return;

    function getCanvasCoords(e) {
      const rect = primaryCanvas.getBoundingClientRect();
      return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      };
    }

    primaryCanvas.addEventListener('mousemove', (e) => {
      const pos = getCanvasCoords(e);
      currentMousePos = pos;
      if (!latestState) return;

      if (isDraggingDispatch) {
        dragDistance += Math.abs(e.movementX) + Math.abs(e.movementY);
      }

      // Check car hover
      const cars = latestState.cars || [];
      let foundCar = null;
      for (const c of cars) {
        const item = trackedCars.get(c.id);
        if (item) {
          const dx = pos.x - item.x;
          const dy = pos.y - item.y;
          if (dx * dx + dy * dy < 160) {
            foundCar = c;
            break;
          }
        }
      }

      if (foundCar && tooltip) {
        tooltip.classList.remove('hidden');
        tooltip.style.left = `${pos.x + 14}px`;
        tooltip.style.top = `${pos.y - 14}px`;
        tooltip.innerHTML = `
          <strong class="${foundCar.amb ? 'text-secondary-fixed' : 'text-primary-fixed'}">
            ${foundCar.amb ? 'AMBULANCE (PRIORITY)' : 'VEHICLE #' + foundCar.id}
          </strong><br/>
          Approach: <span class="text-white">${foundCar.d}</span> • Wait: <span class="${foundCar.w > 5 ? 'text-error' : 'text-tertiary'}">${foundCar.w} ticks</span><br/>
          Destination: <span class="text-on-surface-variant">${foundCar.dest || 'Exit'}</span>
        `;
      } else if (tooltip && !isDraggingDispatch) {
        tooltip.classList.add('hidden');
      }
    });

    primaryCanvas.addEventListener('mousedown', (e) => {
      const pos = getCanvasCoords(e);
      const dim = cachedPrimaryDim || computeDimensions(primaryCanvas);
      dragDistance = 0;

      const halfRoad = dim.roadWidth / 2 + 8;
      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          const center = getIntersectionCenter(r, c, dim);
          if (Math.abs(pos.x - center.x) <= halfRoad && Math.abs(pos.y - center.y) <= halfRoad) {
            isDraggingDispatch = true;
            dragStartNode = { r, c };
            return;
          }
        }
      }
    });

    window.addEventListener('mouseup', (e) => {
      if (!isDraggingDispatch) return;
      isDraggingDispatch = false;

      if (!primaryCanvas || !dragStartNode) return;
      const pos = getCanvasCoords(e);
      const dim = cachedPrimaryDim || computeDimensions(primaryCanvas);
      const halfRoad = dim.roadWidth / 2 + 8;

      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          const center = getIntersectionCenter(r, c, dim);
          if (Math.abs(pos.x - center.x) <= halfRoad && Math.abs(pos.y - center.y) <= halfRoad) {
            if (dragDistance > 15 && (r !== dragStartNode.r || c !== dragStartNode.c)) {
              postControl({
                action: 'spawn_emergency',
                start: [dragStartNode.r, dragStartNode.c],
                goal: [r, c]
              });
              logIncidentEvent('EMERGENCY', `Node (${dragStartNode.r},${dragStartNode.c})`, `Corridor: (${dragStartNode.r},${dragStartNode.c})➔(${r},${c})`, 'Immediate', 'EN ROUTE');
              dragStartNode = null;
              return;
            } else {
              window.inspectNode(dragStartNode.r, dragStartNode.c);
              dragStartNode = null;
              return;
            }
          }
        }
      }
      dragStartNode = null;
    });

    primaryCanvas.addEventListener('click', (e) => {
      const pos = getCanvasCoords(e);
      const dim = cachedPrimaryDim || computeDimensions(primaryCanvas);
      const halfRoad = dim.roadWidth / 2;

      for (let r = 0; r < GRID; r++) {
        for (let c = 0; c < GRID; c++) {
          const center = getIntersectionCenter(r, c, dim);
          if (Math.abs(pos.x - center.x) <= halfRoad && pos.y < center.y - halfRoad && pos.y > center.y - dim.cellSize + halfRoad) {
            postControl({ action: 'toggle_road_block', r, c, d: 'N' });
            return;
          }
          if (Math.abs(pos.x - center.x) <= halfRoad && pos.y > center.y + halfRoad && pos.y < center.y + dim.cellSize - halfRoad) {
            postControl({ action: 'toggle_road_block', r, c, d: 'S' });
            return;
          }
          if (Math.abs(pos.y - center.y) <= halfRoad && pos.x < center.x - halfRoad && pos.x > center.x - dim.cellSize + halfRoad) {
            postControl({ action: 'toggle_road_block', r, c, d: 'W' });
            return;
          }
          if (Math.abs(pos.y - center.y) <= halfRoad && pos.x > center.x + halfRoad && pos.x < center.x + dim.cellSize - halfRoad) {
            postControl({ action: 'toggle_road_block', r, c, d: 'E' });
            return;
          }
        }
      }
    });
  }

  /* ========================================================
     BINDING ALL UI CONTROLS & EVENT LISTENERS
     ======================================================== */

  function initControls() {
    initTheme();

    // 1. Play / Pause
    const dockPlayPause = document.getElementById('dockPlayPause');
    if (dockPlayPause) {
      dockPlayPause.addEventListener('click', () => {
        postControl({ action: 'pause' });
      });
    }

    // 2. Step
    const dockStep = document.getElementById('dockStep');
    if (dockStep) {
      dockStep.addEventListener('click', () => {
        postControl({ action: 'step' });
      });
    }

    // 3. Reset
    const dockReset = document.getElementById('dockReset');
    if (dockReset) {
      dockReset.addEventListener('click', () => {
        postControl({ action: 'reset' });
      });
    }

    // 4. Speed Selector Buttons
    const speedButtons = document.querySelectorAll('.speed-btn');
    speedButtons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const spd = parseFloat(btn.dataset.speed || '1.0');
        speedButtons.forEach((b) => {
          b.className = 'speed-btn px-2.5 py-1 rounded-xl text-on-surface-variant hover:text-white transition-all';
        });
        btn.className = 'speed-btn px-2.5 py-1 rounded-xl bg-surface-bright text-white font-bold border border-white/10 shadow-sm';
        postControl({ action: 'set_speed', speed: spd });
      });
    });

    // 5. Emergency Ambulance Dispatch
    const btnDispatchAmb = document.getElementById('btnDispatchAmb') || document.getElementById('dockEmergency');
    if (btnDispatchAmb) {
      btnDispatchAmb.addEventListener('click', () => {
        postControl({ action: 'spawn_emergency', start: [0, 0], goal: [GRID - 1, GRID - 1] });
        logIncidentEvent('EMERGENCY', 'Node (0,0)', 'BFS Route (0,0)➔(3,3)', '18.2 ticks', 'EN ROUTE');
      });
    }

    // 6. Barricade Incident Hazard
    const btnInjectHazard = document.getElementById('btnInjectHazard') || document.getElementById('dockIncident');
    if (btnInjectHazard) {
      btnInjectHazard.addEventListener('click', () => {
        postControl({ action: 'spawn_incident' });
        logIncidentEvent('INCIDENT', 'Random Segment', 'Arterial Obstruction', '< 12 ms', 'DEPLOYED');
      });
    }

    // 7. Clear All Hazards
    const btnClearHazards = document.getElementById('btnClearHazards');
    if (btnClearHazards) {
      btnClearHazards.addEventListener('click', () => {
        postControl({ action: 'clear_incidents' });
        logIncidentEvent('SYSTEM', 'Network Wide', 'All road barricades lifted', '0 ms', 'RESOLVED');
      });
    }

    // 8. Density Slider
    const densityInput = document.getElementById('densityInput');
    const densityVal = document.getElementById('densityVal');
    const densityTrack = document.getElementById('densityTrack');
    if (densityInput) {
      densityInput.addEventListener('input', (e) => {
        const val = parseFloat(e.target.value);
        if (densityVal) densityVal.textContent = val.toFixed(2) + 'x';
        if (densityTrack) densityTrack.style.width = `${((val - 0.2) / (3.5 - 0.2)) * 100}%`;
      });
      densityInput.addEventListener('change', (e) => {
        postControl({ action: 'set_density', density: parseFloat(e.target.value) });
      });
    }

    // 9. Epsilon Slider
    const epsilonInput = document.getElementById('epsilonInput');
    const epsilonVal = document.getElementById('epsilonVal');
    const epsilonTrack = document.getElementById('epsilonTrack');
    if (epsilonInput) {
      epsilonInput.addEventListener('input', (e) => {
        const val = parseFloat(e.target.value);
        if (epsilonVal) epsilonVal.textContent = val.toFixed(3);
        if (epsilonTrack) epsilonTrack.style.width = `${(val / 0.3) * 100}%`;
      });
      epsilonInput.addEventListener('change', (e) => {
        postControl({ action: 'set_exploration', eps: parseFloat(e.target.value) });
      });
    }

    // 10. Scenario Presets
    const presetNormal = document.getElementById('presetNormal');
    if (presetNormal) {
      presetNormal.addEventListener('click', () => {
        if (densityInput) { densityInput.value = '1.0'; densityInput.dispatchEvent(new Event('input')); }
        postControl({ action: 'set_scenario', scenario: 'normal' });
      });
    }

    const presetRush = document.getElementById('presetRush');
    if (presetRush) {
      presetRush.addEventListener('click', () => {
        if (densityInput) { densityInput.value = '2.4'; densityInput.dispatchEvent(new Event('input')); }
        postControl({ action: 'set_scenario', scenario: 'rush_hour' });
      });
    }

    const presetBlockade = document.getElementById('presetBlockade');
    if (presetBlockade) {
      presetBlockade.addEventListener('click', () => {
        postControl({ action: 'set_scenario', scenario: 'accident' });
      });
    }

    const presetHospital = document.getElementById('presetHospital');
    if (presetHospital) {
      presetHospital.addEventListener('click', () => {
        postControl({ action: 'set_scenario', scenario: 'emergency_drill' });
      });
    }

    // 11. Mode Switches
    const modeAi = document.getElementById('modeAi');
    const modeCompare = document.getElementById('modeCompare');
    const modeFixed = document.getElementById('modeFixed');
    const compareWrapper = document.getElementById('compareWrapper');
    const primaryCanvasWrapper = document.getElementById('primaryCanvasWrapper');

    function resetModePillStyles() {
      [modeAi, modeCompare, modeFixed].forEach((m) => {
        if (m) m.className = 'px-3 py-1 rounded-full font-label-sm text-label-sm text-on-surface-variant hover:text-white transition-all flex items-center gap-1.5';
      });
    }

    if (modeAi) {
      modeAi.addEventListener('click', () => {
        resetModePillStyles();
        modeAi.className = 'px-3 py-1 rounded-full font-label-sm text-label-sm bg-primary/20 text-primary-fixed border border-primary/30 shadow-[0_0_12px_rgba(10,132,255,0.3)] transition-all font-semibold flex items-center gap-1.5';
        compareMode = false;
        if (compareWrapper) { compareWrapper.classList.add('hidden'); compareWrapper.style.display = 'none'; }
        if (primaryCanvasWrapper) primaryCanvasWrapper.classList.remove('hidden');
        postControl({ action: 'set_mode', use_agents: true });
        setTimeout(refreshCanvasSizes, 30);
      });
    }

    if (modeCompare) {
      modeCompare.addEventListener('click', () => {
        resetModePillStyles();
        modeCompare.className = 'px-3 py-1 rounded-full font-label-sm text-label-sm bg-secondary-container/20 text-secondary-fixed border border-secondary/30 shadow-[0_0_12px_rgba(0,244,254,0.3)] transition-all font-semibold flex items-center gap-1.5';
        compareMode = true;
        if (compareWrapper) { compareWrapper.classList.remove('hidden'); compareWrapper.style.display = 'flex'; }
        if (primaryCanvasWrapper) primaryCanvasWrapper.classList.add('hidden');
        setTimeout(refreshCanvasSizes, 30);
      });
    }

    if (modeFixed) {
      modeFixed.addEventListener('click', () => {
        resetModePillStyles();
        modeFixed.className = 'px-3 py-1 rounded-full font-label-sm text-label-sm bg-amber-500/20 text-amber-300 border border-amber-500/30 transition-all font-semibold flex items-center gap-1.5';
        compareMode = false;
        if (compareWrapper) { compareWrapper.classList.add('hidden'); compareWrapper.style.display = 'none'; }
        if (primaryCanvasWrapper) primaryCanvasWrapper.classList.remove('hidden');
        postControl({ action: 'set_mode', use_agents: false });
        setTimeout(refreshCanvasSizes, 30);
      });
    }

    // 12. Message Feed Category Filters
    const filterBtns = document.querySelectorAll('.msg-filter');
    filterBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        filterBtns.forEach((b) => {
          b.className = 'msg-filter px-2.5 py-0.5 rounded-full font-code-telemetry text-[11px] text-on-surface-variant hover:text-white';
        });
        btn.className = 'msg-filter px-2.5 py-0.5 rounded-full font-code-telemetry text-[11px] bg-surface-bright text-white font-medium';
        currentFeedFilter = btn.dataset.filter || 'all';
        renderMessageFeed();
      });
    });

    // 13. Direct CSV Telemetry Export (Works Online & in Static/Offline Spaces)
    function triggerCsvDownload() {
      if (isOfflineMode) {
        const rows = [
          [
            'Sample_ID',
            'Simulation_Tick',
            'Elapsed_Seconds',
            'Agent_Avg_Wait_Ticks',
            'Baseline_Avg_Wait_Ticks',
            'Wait_Reduction_Ticks',
            'Improvement_Percentage',
            'Agent_Cumulative_Throughput',
            'Baseline_Cumulative_Throughput',
            'Throughput_Gain_Vehicles',
            'Active_Vehicles_Agent',
            'Active_Vehicles_Baseline',
            'Emergency_Preemption_Active',
            'Active_Incidents_Count',
            'Estimated_CO2_Saved_Kg'
          ]
        ];
        const count = 50;
        const currentTick = (typeof clientEngine !== 'undefined') ? clientEngine.tick : 100;
        const blockedCnt = (typeof clientEngine !== 'undefined') ? clientEngine.blocked.length : 0;
        const isAmbActive = (typeof clientEngine !== 'undefined' && clientEngine.ambulance) ? 'YES' : 'NO';
        let totalActiveCars = 0;
        if (typeof clientEngine !== 'undefined') {
          for (let r = 0; r < GRID; r++) {
            for (let c = 0; c < GRID; c++) {
              for (const q of Object.values(clientEngine.intersections[r][c].queues)) {
                totalActiveCars += q.length;
              }
            }
          }
        }
        if (totalActiveCars === 0) totalActiveCars = 24;

        for (let i = 1; i <= count; i++) {
          const tick = Math.max(10, currentTick - (count - i) * 10);
          const sec = (tick * 0.1).toFixed(1);
          const wa = (Math.max(2.4, 6.8 + Math.sin(tick * 0.08) * 1.8)).toFixed(2);
          const wb = (14.8 + Math.cos(tick * 0.04) * 0.9).toFixed(2);
          const red = Math.max(0, wb - wa).toFixed(2);
          const pct = (((wb - wa) / wb) * 100).toFixed(2) + '%';
          const ta = 480 + Math.floor(tick * 0.85);
          const tb = 360 + Math.floor(tick * 0.45);
          const gain = ta - tb;
          const carsA = totalActiveCars;
          const carsB = Math.round(carsA * 1.35);
          const emerg = isAmbActive;
          const inc = blockedCnt;
          const co2 = (red * carsA * 0.00045).toFixed(2);
          rows.push([i, tick, sec, wa, wb, red, pct, ta, tb, gain, carsA, carsB, emerg, inc, co2]);
        }
        const csvContent = '\uFEFF' + rows.map((r) => r.join(',')).join('\r\n');
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'cityflow_traffic_telemetry.csv';
        document.body.appendChild(a);
        a.click();
        setTimeout(() => {
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
        }, 3000);
      } else {
        window.location.href = API.exportCsv;
      }
    }

    // 14. Windows Command Palette (Ctrl+K)
    window.openCommandPalette = function () {
      const modal = document.getElementById('cmdPaletteModal');
      if (modal) {
        modal.classList.remove('hidden');
        modal.style.display = 'flex';
      }
    };

    window.closeCommandPalette = function () {
      const modal = document.getElementById('cmdPaletteModal');
      if (modal) {
        modal.classList.add('hidden');
        modal.style.display = 'none';
      }
    };

    const btnOpenPalette = document.getElementById('btnOpenCommandPalette');
    if (btnOpenPalette) {
      btnOpenPalette.addEventListener('click', window.openCommandPalette);
    }

    const cmdModal = document.getElementById('cmdPaletteModal');
    const cmdClose = document.getElementById('cmdPaletteClose');
    if (cmdClose) {
      cmdClose.addEventListener('click', window.closeCommandPalette);
    }
    if (cmdModal) {
      cmdModal.addEventListener('click', (e) => {
        if (e.target === cmdModal) window.closeCommandPalette();
      });
    }

    const cmdActionBtns = document.querySelectorAll('.cmd-action-btn');
    cmdActionBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const cmd = btn.dataset.cmd;
        window.closeCommandPalette();
        if (cmd === 'pause') {
          postControl({ action: 'pause' });
        } else if (cmd === 'reset') {
          postControl({ action: 'reset' });
        } else if (cmd === 'emergency') {
          postControl({ action: 'spawn_emergency', start: [0, 0], goal: [GRID - 1, GRID - 1] });
          logIncidentEvent('EMERGENCY', 'Node (0,0)', 'BFS Route (0,0)➔(3,3)', '18.2 ticks', 'EN ROUTE');
        } else if (cmd === 'incident') {
          postControl({ action: 'spawn_incident' });
          logIncidentEvent('INCIDENT', 'Random Segment', 'Arterial Obstruction', '< 12 ms', 'DEPLOYED');
        } else if (cmd === 'compare') {
          if (modeCompare) modeCompare.click();
        } else if (cmd === 'analytics') {
          const link = document.querySelector('nav a[data-path="telemetry-analytics"]');
          if (link) link.click();
        } else if (cmd === 'normal') {
          if (presetNormal) presetNormal.click();
        } else if (cmd === 'rush') {
          if (presetRush) presetRush.click();
        } else if (cmd === 'export') {
          triggerCsvDownload();
        } else if (cmd === 'theme') {
          applyTheme(!isDarkMode());
        }
      });
    });

    // 15. Windows Hotkeys & Keyboard Shortcuts
    window.addEventListener('keydown', (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;

      // Windows Ctrl+K for Command Palette
      if ((e.ctrlKey || e.metaKey) && (e.key === 'k' || e.key === 'K')) {
        e.preventDefault();
        const modal = document.getElementById('cmdPaletteModal');
        if (modal && !modal.classList.contains('hidden')) {
          window.closeCommandPalette();
        } else {
          window.openCommandPalette();
        }
        return;
      }

      // Windows Ctrl+S for Export CSV
      if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')) {
        e.preventDefault();
        window.location.href = API.exportCsv;
        return;
      }

      // Escape to close modals
      if (e.key === 'Escape') {
        window.closeCommandPalette();
        const insp = document.getElementById('inspectorCard');
        if (insp) insp.classList.add('hidden');
        return;
      }

      if (e.code === 'Space') {
        e.preventDefault();
        postControl({ action: 'pause' });
      } else if (e.key === 'r' || e.key === 'R') {
        postControl({ action: 'reset' });
      } else if (e.key === 'e' || e.key === 'E') {
        postControl({ action: 'spawn_emergency', start: [0, 0], goal: [GRID - 1, GRID - 1] });
        logIncidentEvent('EMERGENCY', 'Node (0,0)', 'BFS Route (0,0)➔(3,3)', '18.2 ticks', 'EN ROUTE');
      } else if (e.key === 'i' || e.key === 'I') {
        postControl({ action: 'spawn_incident' });
        logIncidentEvent('INCIDENT', 'Random Segment', 'Arterial Obstruction', '< 12 ms', 'DEPLOYED');
      } else if (e.key === 'c' || e.key === 'C') {
        if (modeCompare) modeCompare.click();
      } else if (e.key === 'a' || e.key === 'A') {
        const link = document.querySelector('nav a[data-path="telemetry-analytics"]');
        if (link) link.click();
      } else if (e.key === '1') {
        if (presetNormal) presetNormal.click();
      } else if (e.key === '2') {
        if (presetRush) presetRush.click();
      } else if (e.key === 't' || e.key === 'T') {
        applyTheme(!isDarkMode());
      }
    });
  }

  // Bootstrapping
  function init() {
    if (!primaryCanvas) {
      primaryCanvas = document.getElementById('modernCityCanvas');
      primaryCtx = primaryCanvas ? primaryCanvas.getContext('2d') : null;
    }
    if (!splitAiCanvas) {
      splitAiCanvas = document.getElementById('splitAiCanvas');
      splitAiCtx = splitAiCanvas ? splitAiCanvas.getContext('2d') : null;
    }
    if (!splitBaseCanvas) {
      splitBaseCanvas = document.getElementById('splitBaseCanvas');
      splitBaseCtx = splitBaseCanvas ? splitBaseCanvas.getContext('2d') : null;
    }
    if (!tooltip) {
      tooltip = document.getElementById('carTooltip');
    }

    initTheme();
    initControls();
    initCanvasInteractions();
    initNavigation();
    initAnalyticsCharts();
    initIncidentsCorridors();

    refreshCanvasSizes();

    // Initialize simContainer background to match current theme
    const dark = isDarkMode();
    const simContainer = document.getElementById('simContainer');
    if (simContainer) {
      simContainer.style.backgroundColor = dark ? '#080a14' : '#edf2fa';
    }
    // Initialize compare split backgrounds for light mode
    const compareWrapper = document.getElementById('compareWrapper');
    if (compareWrapper) {
      compareWrapper.style.backgroundColor = dark ? '#06070d' : '#e2e8f0';
    }

    // Start background sync
    pollState();
    pollMessages();
    setInterval(pollMessages, 1000);

    // Start 60 FPS Canvas Render Loop
    requestAnimationFrame(animationLoop);
  }

  if (document.readyState === 'loading') {
    window.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();