{% extends "base.html" %}

{% block head %}
<!-- Three.js, CSS and MapLibre GL files for 3D page -->
<link rel="stylesheet" href="/static/css/main.css?v=20260921_07">
<link rel="stylesheet" href="/static/css/maplibre-gl.css" />
<script src="/static/js/maplibre-gl.js"></script>
<script>
  if (typeof maplibregl !== 'undefined') {
    if (typeof maplibregl.setWorkerUrl === 'function') {
      maplibregl.setWorkerUrl('/static/js/maplibre-gl-csp-worker.js');
    }
    maplibregl.workerUrl = '/static/js/maplibre-gl-csp-worker.js';
  }
</script>
<script src="/static/js/three.min.js"></script>
<script src="/static/js/OrbitControls.js"></script>
<script src="/static/js/OBJLoader.js"></script>
<script src="/static/js/moto3d.js?v=20261016_live_tilt03"></script>
<script src="/static/js/moto_outside.js?v=20260921_02"></script>
{% endblock %}

{% block content %}
<div class="cad-workspace" id="cadWorkspace">

  <!-- 1. Top CAD Command Ribbon -->
  <div class="cad-ribbon">
    <div class="cad-ribbon-left">
      <!-- Venue Preset Picker -->
      <div style="display:flex; align-items:center; gap:6px;">
        <span style="font-size:10px; font-weight:700; color:#64748b; letter-spacing:0.8px;">VENUE:</span>
        <select id="topVenuePresetSelect" onchange="onSelectVenuePreset(this.value)" class="cad-ribbon-select" title="Active Venue Preset">
          <option value="">-- Active Venue Preset --</option>
        </select>
      </div>

      <button onclick="openVenuePresetManagerModal()" class="cad-ribbon-btn" title="Presets &amp; Files Manager">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
        Presets &amp; Files
      </button>

      <span class="cad-divider-v"></span>

      <!-- Camera View Angle Presets -->
      <div class="cad-ribbon-group" title="Camera View Presets">
        <button class="cad-ribbon-btn cad-cam-btn active" data-cam="iso" onclick="setCameraPreset('iso')">3D Iso</button>
        <button class="cad-ribbon-btn cad-cam-btn" data-cam="top" onclick="setCameraPreset('top')">Top</button>
        <button class="cad-ribbon-btn cad-cam-btn" data-cam="side" onclick="setCameraPreset('side')">Side</button>
        <button class="cad-ribbon-btn cad-cam-btn" data-cam="front" onclick="setCameraPreset('front')">Front</button>
        <button class="cad-ribbon-btn cad-cam-btn" data-cam="stage" onclick="setCameraPreset('stage')">Align Stage</button>
      </div>
    </div>

    <!-- Center Ribbon: Layer Visibility Toggles -->
    <div class="cad-ribbon-center">
      <div class="cad-ribbon-group" title="Visibility Layers">
        <button class="cad-ribbon-btn active" id="cadToggleGrid" onclick="toggleCadLayer('grid')">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></svg>
          Grid
        </button>
        <button class="cad-ribbon-btn" id="cadToggleAxes" onclick="toggleCadLayer('axes')">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 19h14M5 19V5M5 19l14-14"/></svg>
          Axes
        </button>
        <button class="cad-ribbon-btn" id="cadToggleDrops" onclick="toggleCadLayer('floorDrops')">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="7 13 12 18 17 13"/><line x1="12" y1="6" x2="12" y2="18"/></svg>
          Drops
        </button>
        <button class="cad-ribbon-btn active" id="cadToggleLabels" onclick="toggleCadLayer('labels')">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
          Labels
        </button>
        <button class="cad-ribbon-btn" id="cadToggleCoverage" onclick="toggleCadLayer('panflex')">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 2 22 22 22 12 2"/></svg>
          Coverage
        </button>
      </div>
    </div>

    <!-- Right Ribbon: Actions & Mode -->
    <div class="cad-ribbon-right">
      <!-- Speaker Model Style Switcher -->
      <div class="cad-ribbon-group" title="Manufacturer CAD DXF vs Lightweight Uniform">
        <button class="cad-ribbon-btn active" id="btnSpeakerModelCAD" onclick="setSpeakerModelMode('cad')">SoundVision CAD</button>
        <button class="cad-ribbon-btn" id="btnSpeakerModelUniform" onclick="setSpeakerModelMode('uniform')">Uniform</button>
      </div>

      <span class="cad-divider-v"></span>

      <!-- SV Snapshot Direct Button -->
      <button onclick="downloadSoundVisionSnapshotDirect()" class="cad-ribbon-btn" style="color:#10b981;" title="Directly download live SoundVision .xmlc Snapshot">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        SV Snapshot
      </button>

      <!-- Export Map to SoundVision 3D Room Data Button -->
      <button onclick="openSVRoomExportModal()" class="cad-ribbon-btn" style="color:#34d399; font-weight:700;" title="Export surrounding 3D buildings, roads and terrain to SoundVision 3D Room Data (.txt)">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Export Map to SV
      </button>

      <!-- Outside Satellite Mode Toggle Button -->
      <button id="cadEnvToggleBtn" onclick="toggleCadEnvironmentMode()" class="cad-ribbon-btn" title="Toggle 3D Arena vs Satellite Map">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
        <span id="cadEnvToggleLabel">Outside Map</span>
      </button>
    </div>
  </div>

  <!-- 2. CAD Body (Left Dock, Center Viewport, Right Dock) -->
  <div class="cad-body">
    
    <!-- Left Dock: Scene Hierarchy Explorer -->
    <div class="cad-dock-left" id="cadLeftDock">
      <div class="cad-dock-header">
        <span class="cad-dock-title">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
          Scene Hierarchy
        </span>
        <div style="display:flex; align-items:center; gap:4px;">
          <button onclick="setAllMapClusters(true)" class="cad-ribbon-btn" style="padding:2px 5px; font-size:9.5px;" title="Show All">All</button>
          <button onclick="setAllMapClusters(false)" class="cad-ribbon-btn" style="padding:2px 5px; font-size:9.5px;" title="Hide All">None</button>
          <button onclick="toggleCadLeftDock()" class="cad-ribbon-btn" style="padding:2px 5px; font-size:10px;" title="Collapse Panel">&#x25C0;</button>
        </div>
      </div>

      <div class="cad-dock-scroll" id="cadSceneTreeList">
        <div style="color:#64748b; font-size:11px; padding:12px; text-align:center;">Loading clusters...</div>
      </div>
    </div>

    <!-- Center Viewport (Three.js Canvas + MapLibre for Outside Mode) -->
    <div class="cad-viewport" id="canvas3D">
      <!-- Uncollapse left dock button if collapsed -->
      <button id="cadUncollapseLeftBtn" onclick="toggleCadLeftDock()" style="display:none; position:absolute; top:10px; left:10px; z-index:35;" class="cad-gizmo-btn" title="Expand Scene Hierarchy">
        &#x25B6; Hierarchy
      </button>

      <!-- Viewport Tools in top right corner -->
      <div class="cad-viewport-tools">
        <button onclick="if(typeof alignCameraToStage==='function')alignCameraToStage();" class="cad-gizmo-btn" title="Align camera to stage orientation">
          🎯 Align
        </button>
        <button onclick="if(typeof resetMapView==='function')resetMapView();" class="cad-gizmo-btn" title="Reset Camera">
          ↺ Reset
        </button>
      </div>

      <!-- MapLibre Map Container (Used when Outside Mode is toggled) -->
      <div id="mapOutsideContainer" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;"></div>
    </div>

    <!-- Right Dock: Contextual Property & Rigging Inspector -->
    <div class="cad-dock-right" id="cadRightDock">
      <div class="cad-dock-header">
        <span class="cad-dock-title" id="cadInspectorHeaderTitle">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          Inspector
        </span>
        <button id="cadDeselectBtn" onclick="selectCluster(null)" class="cad-ribbon-btn" style="padding:2px 6px; font-size:10px; display:none;" title="Deselect">
          Deselect &times;
        </button>
      </div>

      <div class="cad-dock-scroll" id="cadInspectorBody">
        <!-- Rendered dynamically by updateCadInspector() -->
      </div>
    </div>
  </div>

  <!-- 3. Bottom Engineering Status Bar -->
  <div class="cad-statusbar">
    <div class="cad-statusbar-left">
      <span id="cadStatusCoords">X: 0.00m &nbsp; Y: 0.00m &nbsp; Z: 0.00m</span>
      <span style="opacity:0.3;">|</span>
      <span>VIEW: <b id="cadStatusView" style="color:#94a3b8;">3D ISO</b></span>
      <span style="opacity:0.3;">|</span>
      <span>ENGINE: <b style="color:#38bdf8;">SOUNDVISION 3D</b></span>
    </div>

    <div class="cad-statusbar-right">
      <span>SELECTED: <b id="cadStatusTarget" style="color:#e2e8f0;">NONE</b></span>
      <span style="opacity:0.3;">|</span>
      <span id="cadStatusTolerance">TOL: ±0.5°</span>
      <span style="opacity:0.3;">|</span>
      <span>UNITS: METRIC (M / °)</span>
    </div>
  </div>
</div>

<!-- =========================================================================
     PRESERVED MODALS (Venue Presets, Acoustic Environment, SoundVision Room)
     ========================================================================= -->

<!-- Dedicated Weather & Environmental Acoustics Settings Modal -->
<div id="weatherSettingsModal" onclick="if(event.target===this)closeWeatherSettingsModal()" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); backdrop-filter:blur(12px); z-index:9999; align-items:center; justify-content:center;">
  <div style="background:#111622; border:1px solid rgba(255,255,255,0.14); border-radius:12px; width:440px; max-width:92vw; box-shadow:0 16px 48px rgba(0,0,0,0.85); overflow:hidden; display:flex; flex-direction:column;">
    <div style="padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.02);">
      <div style="font:700 13px 'Inter',sans-serif; color:#f1f5f9; letter-spacing:0.3px;">Environmental Acoustics &amp; Speed of Sound</div>
      <button onclick="closeWeatherSettingsModal()" style="background:none; border:none; color:#94a3b8; font-size:18px; cursor:pointer;">&times;</button>
    </div>
    <div style="padding:16px 18px; display:flex; flex-direction:column; gap:14px; max-height:75vh; overflow-y:auto;">
      <div style="background:rgba(56,189,248,0.08); border:1px solid rgba(56,189,248,0.25); border-radius:8px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center;">
        <div>
          <div style="font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:#94a3b8;">Calculated Speed of Sound (c)</div>
          <div id="wmodal_speedHero" style="font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; color:#38bdf8; line-height:1.2;">343.2 m/s</div>
          <div style="font-size:10px; color:#94a3b8;" id="wmodal_delayFactor">Delay factor: ~2.91 ms per meter</div>
        </div>
        <div style="text-align:right;">
          <div style="font-size:9px; color:#64748b;">Formula</div>
          <div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#f59e0b;">c = 331.3·√(1+T/273)</div>
        </div>
      </div>
      <div>
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
          <span style="font-size:11px; font-weight:600; color:#cbd5e1;">Temperature</span>
          <div style="display:flex; align-items:center; gap:4px;">
            <input type="number" id="wmodal_tempInput" step="0.1" min="-20" max="50" style="width:65px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.15); border-radius:5px; padding:3px 6px; font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700; color:#f1f5f9; text-align:right;" oninput="onWeatherModalInput('temp', this.value)" />
            <span style="font-size:11px; color:#94a3b8;">°C</span>
          </div>
        </div>
        <input type="range" id="wmodal_tempSlider" min="-10" max="45" step="0.5" style="width:100%; accent-color:#38bdf8;" oninput="onWeatherModalInput('temp', this.value)" />
      </div>
      <div>
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
          <span style="font-size:11px; font-weight:600; color:#cbd5e1;">Relative Humidity</span>
          <div style="display:flex; align-items:center; gap:4px;">
            <input type="number" id="wmodal_humInput" step="1" min="5" max="100" style="width:65px; background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.15); border-radius:5px; padding:3px 6px; font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700; color:#f1f5f9; text-align:right;" oninput="onWeatherModalInput('hum', this.value)" />
            <span style="font-size:11px; color:#94a3b8;">%</span>
          </div>
        </div>
        <input type="range" id="wmodal_humSlider" min="10" max="100" step="1" style="width:100%; accent-color:#38bdf8;" oninput="onWeatherModalInput('hum', this.value)" />
      </div>
    </div>
    <div style="padding:12px 18px; border-top:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.25); display:flex; justify-content:space-between; align-items:center;">
      <button onclick="closeWeatherSettingsModal()" class="cad-ribbon-btn" style="padding:6px 14px;">Close</button>
      <button onclick="applyAndSaveWeatherModal()" class="cad-ribbon-btn active" style="font-weight:700; padding:6px 16px;">Save &amp; Apply</button>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script src="/static/js/meti.js?v=20261020_hide_cables"></script>
<script src="/static/js/clusters.js?v=20260921_cad10"></script>
<script src="/static/js/map.js?v=20260921_cad10"></script>
<script src="/static/js/three_d.js?v=20260921_cad10"></script>

<script>
/* =========================================================================
   PRO CAD WORKSPACE CONTROLLER & CONTEXTUAL INSPECTOR
   ========================================================================= */

function toggleCadLeftDock() {
  const dock = document.getElementById('cadLeftDock');
  const btn = document.getElementById('cadUncollapseLeftBtn');
  if (dock) {
    const isCol = dock.classList.toggle('collapsed');
    if (btn) btn.style.display = isCol ? 'block' : 'none';
  }
}
window.toggleCadLeftDock = toggleCadLeftDock;

function toggleCadLayer(layerKey) {
  if (typeof toggle3DView === 'function') toggle3DView(layerKey);
  const btnMap = {
    'grid': 'cadToggleGrid',
    'axes': 'cadToggleAxes',
    'floorDrops': 'cadToggleDrops',
    'labels': 'cadToggleLabels',
    'panflex': 'cadToggleCoverage'
  };
  const btnId = btnMap[layerKey];
  if (btnId && typeof _viewState !== 'undefined') {
    const btn = document.getElementById(btnId);
    if (btn) btn.classList.toggle('active', Boolean(_viewState[layerKey]));
  }
}
window.toggleCadLayer = toggleCadLayer;

function toggleCadEnvironmentMode() {
  const current = (typeof _environmentMode !== 'undefined') ? _environmentMode : 'inside';
  const target = (current === 'inside') ? 'outside' : 'inside';
  if (typeof setEnvironmentMode === 'function') {
    setEnvironmentMode(target);
  }
  const lbl = document.getElementById('cadEnvToggleLabel');
  if (lbl) {
    lbl.textContent = (target === 'inside') ? 'Outside Map' : '3D Room';
  }
  const btn = document.getElementById('cadEnvToggleBtn');
  if (btn) {
    btn.classList.toggle('active', target === 'outside');
  }
  updateCadInspector(_selected3DCluster);
}
window.toggleCadEnvironmentMode = toggleCadEnvironmentMode;

/* ── Scene Hierarchy Tree Builder ── */
function renderCadSceneTree() {
  const container = document.getElementById('cadSceneTreeList');
  if (!container) return;
  if (!Array.isArray(_reportClusters) || _reportClusters.length === 0) {
    container.innerHTML = '<div style="color:#64748b; font-size:11px; padding:16px; text-align:center;">No clusters found in active report.</div>';
    return;
  }

  let html = '';
  _reportClusters.forEach(c => {
    const isSelected = (_selected3DCluster === c.id);
    const isOnline = Boolean(c.assigned_meti && c.meti_online);
    let statusClass = 'offline';
    if (isOnline) {
      const site = c.site || 0;
      const lp = c.live_pitch != null ? c.live_pitch : 0;
      statusClass = (Math.abs(lp - site) <= 0.5) ? 'online' : 'warning';
    }

    const qty = c.cabinet_count || (c.cabinets ? c.cabinets.length : 1);
    const isHidden = Array.isArray(window._mapHiddenClusters) && window._mapHiddenClusters.includes(c.id);

    html += `
      <div class="cad-tree-item ${isSelected ? 'selected' : ''}" data-cluster-id="${esc(c.id)}" onclick="selectCluster('${esc(c.id)}'); focusCluster('${esc(c.id)}');">
        <div style="display:flex; align-items:center; gap:8px; min-width:0;">
          <span class="status-indicator ${statusClass}" title="${statusClass.toUpperCase()}"></span>
          <span style="font-weight:${isSelected ? '700' : '600'}; color:${isSelected ? '#38bdf8' : '#e2e8f0'}; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
            ${esc(c.name)}
          </span>
          <span style="font-size:10px; color:#64748b; font-family:'JetBrains Mono',monospace;">${qty}c</span>
        </div>
        <div style="display:flex; align-items:center; gap:4px;">
          <button onclick="event.stopPropagation(); toggleMapCluster('${esc(c.id)}');" style="background:none; border:none; color:${isHidden ? '#475569' : '#94a3b8'}; cursor:pointer; font-size:12px; padding:2px 4px;" title="Toggle 3D Visibility">
            ${isHidden ? '👁️‍🗨️' : '👁️'}
          </button>
        </div>
      </div>
    `;
  });

  container.innerHTML = html;
}
window.renderCadSceneTree = renderCadSceneTree;

/* ── Contextual Property Inspector Builder ── */
function updateCadInspector(clusterId) {
  const container = document.getElementById('cadInspectorBody');
  const titleEl = document.getElementById('cadInspectorHeaderTitle');
  const deselectBtn = document.getElementById('cadDeselectBtn');
  if (!container) return;

  const c = (_reportClusters || []).find(x => x.id === clusterId);

  if (deselectBtn) {
    deselectBtn.style.display = c ? 'inline-flex' : 'none';
  }

  // ── CONTEXT 1: CLUSTER SELECTED (RIGGING & SENSOR TELEMETRY) ──
  if (c) {
    if (titleEl) {
      titleEl.innerHTML = `<span style="color:#38bdf8;">${esc(c.name)}</span> &nbsp;<span style="color:#64748b; font-size:10px;">RIGGING INSPECTOR</span>`;
    }

    const cabs = c.cabinets || [];
    const topSite = c.site != null ? c.site : (c.top_site != null ? c.top_site : 0);
    const botSite = c.bottom_site != null ? c.bottom_site : 0;
    const lp = c.live_pitch != null ? c.live_pitch : null;
    const lr = c.live_roll != null ? c.live_roll : null;
    const laz = c.live_azimuth != null ? c.live_azimuth : null;
    const dp = (lp != null && topSite != null) ? (lp - topSite) : null;
    const isAligned = (dp != null && Math.abs(dp) <= 0.5);

    // 1. Live Rigging Telemetry Card
    let telemetryHtml = `
      <div class="cad-card">
        <div class="cad-card-header">
          <span>Live Inclinometer Telemetry</span>
          <span style="font-family:'JetBrains Mono',monospace; color:${c.assigned_meti ? '#38bdf8' : '#64748b'}; font-size:9.5px;">
            ${esc(c.assigned_meti || 'UNASSIGNED')}
          </span>
        </div>
        
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:4px 0;">
          <div style="background:#0b0e14; border:1px solid rgba(255,255,255,0.06); border-radius:5px; padding:6px 8px;">
            <div style="font-size:9px; color:#64748b; text-transform:uppercase;">Target Site Pitch</div>
            <div style="font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:#f1f5f9;">
              ${topSite > 0 ? '+' : ''}${topSite.toFixed(1)}°
            </div>
          </div>
          <div style="background:#0b0e14; border:1px solid rgba(255,255,255,0.06); border-radius:5px; padding:6px 8px;">
            <div style="font-size:9px; color:#64748b; text-transform:uppercase;">Live Sensor Pitch</div>
            <div style="font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:${lp != null ? (isAligned ? '#10b981' : '#f59e0b') : '#64748b'};">
              ${lp != null ? ((lp > 0 ? '+' : '') + lp.toFixed(1) + '°') : 'OFFLINE'}
            </div>
          </div>
        </div>

        <!-- High-contrast Deviation Banner -->
        <div style="background:${isAligned ? 'rgba(16,185,129,0.12)' : 'rgba(245,158,11,0.12)'}; border:1px solid ${isAligned ? 'rgba(16,185,129,0.35)' : 'rgba(245,158,11,0.35)'}; border-radius:5px; padding:6px 10px; display:flex; justify-content:space-between; align-items:center;">
          <span style="font-size:10px; font-weight:700; text-transform:uppercase; color:${isAligned ? '#10b981' : '#f59e0b'};">
            ${isAligned ? '✓ TARGET ALIGNED' : 'Δ PITCH DEVIATION'}
          </span>
          <span style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:${isAligned ? '#10b981' : '#f59e0b'};">
            ${dp != null ? ((dp > 0 ? '+' : '') + dp.toFixed(1) + '°') : '—'}
          </span>
        </div>

        <div class="cad-prop-row" style="margin-top:4px;">
          <span class="cad-prop-label">Azimuth (Heading)</span>
          <span class="cad-prop-val">${c.azimuth != null ? c.azimuth.toFixed(1) + '°' : '—'}</span>
        </div>
        <div class="cad-prop-row">
          <span class="cad-prop-label">Roll (Side-to-Side)</span>
          <span class="cad-prop-val">${lr != null ? lr.toFixed(1) + '°' : '0.0°'}</span>
        </div>
      </div>
    `;

    // 2. Hardware & Rigging Details Card
    let hardwareHtml = `
      <div class="cad-card">
        <div class="cad-card-header">
          <span>Bumper &amp; Rigging Hardware</span>
          <span style="color:#64748b; font-size:9.5px;">${cabs.length} Enclosures</span>
        </div>
        <div class="cad-prop-row">
          <span class="cad-prop-label">Bumper Frame</span>
          <span class="cad-prop-val" style="font-size:10px;">${esc(c.bumper || 'STANDARD BUMPER')}</span>
        </div>
        <div class="cad-prop-row">
          <span class="cad-prop-label">Pickup Hole</span>
          <span class="cad-prop-val" style="color:#38bdf8;">${c.front_pickup ? 'Hole ' + esc(c.front_pickup) : (c.rear_pickup ? 'Rear ' + esc(c.rear_pickup) : 'Center')}</span>
        </div>
        <div class="cad-prop-row">
          <span class="cad-prop-label">Top Elevation (Z)</span>
          <span class="cad-prop-val">${c.pos && c.pos.z != null ? c.pos.z.toFixed(2) + ' m' : '—'}</span>
        </div>
        <div class="cad-prop-row">
          <span class="cad-prop-label">Bottom Elevation</span>
          <span class="cad-prop-val">${c.bottom_elevation != null ? c.bottom_elevation.toFixed(2) + ' m' : '—'}</span>
        </div>
        <div class="cad-prop-row">
          <span class="cad-prop-label">Total Rig Weight</span>
          <span class="cad-prop-val">${c.weight ? c.weight + ' kg' : '—'}</span>
        </div>
      </div>
    `;

    // 3. Splay Angle Table Card
    let splayRows = '';
    cabs.forEach(cab => {
      splayRows += `
        <tr>
          <td style="color:#64748b;">#${cab.num}</td>
          <td style="color:#e2e8f0; font-weight:600;">${esc(cab.type || 'K2')}</td>
          <td style="text-align:right; color:#38bdf8;">${cab.angle != null ? cab.angle.toFixed(1) + '°' : '0.0°'}</td>
          <td style="text-align:right; color:#94a3b8;">${cab.site_angle != null ? cab.site_angle.toFixed(1) + '°' : '—'}</td>
        </tr>
      `;
    });

    let splayHtml = cabs.length > 0 ? `
      <div class="cad-card">
        <div class="cad-card-header">
          <span>Cabinet Splay Angles</span>
          <span style="color:#64748b; font-size:9.5px;">Top ${topSite.toFixed(1)}° → Bund ${botSite.toFixed(1)}°</span>
        </div>
        <div style="max-height:160px; overflow-y:auto;">
          <table class="cad-table">
            <thead>
              <tr>
                <th>Box</th>
                <th>Type</th>
                <th style="text-align:right;">Splay</th>
                <th style="text-align:right;">Site</th>
              </tr>
            </thead>
            <tbody>${splayRows}</tbody>
          </table>
        </div>
      </div>
    ` : '';

    // 4. Direct Action Tools Card
    let actionsHtml = `
      <div class="cad-card">
        <div class="cad-card-header">Direct Rigging Actions</div>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px;">
          <button onclick="focusCluster('${esc(c.id)}')" class="cad-ribbon-btn" style="justify-content:center; background:#141b26; border-color:rgba(255,255,255,0.1);">
            🎯 Frame 3D
          </button>
          <button onclick="downloadSoundVisionSnapshotDirect()" class="cad-ribbon-btn" style="justify-content:center; background:#141b26; border-color:rgba(255,255,255,0.1); color:#10b981;">
            📸 SV Snapshot
          </button>
        </div>
        ${c.assigned_meti ? `
          <div style="display:flex; gap:6px; margin-top:4px;">
            <button onclick="api('/api/laser/single','POST',{ip:'${esc(c.assigned_meti)}'}); toast('Measuring laser...','info');" class="cad-ribbon-btn" style="flex:1; justify-content:center; background:rgba(56,189,248,0.12); color:#38bdf8; border-color:rgba(56,189,248,0.3);">
              🔦 Fire Laser
            </button>
          </div>
        ` : ''}
      </div>
    `;

    container.innerHTML = telemetryHtml + hardwareHtml + splayHtml + actionsHtml;
    return;
  }

  // ── CONTEXT 2: NO SELECTION (SYSTEM & VENUE OVERVIEW) ──
  if (titleEl) {
    titleEl.innerHTML = `<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M3 10h18M5 10v11M19 10v11M9 10v11M14 10v11M4 10h16l-8-7-8 7z"/></svg> Venue Overview`;
  }

  const totalClusters = Array.isArray(_reportClusters) ? _reportClusters.length : 0;
  let totalCabs = 0;
  if (Array.isArray(_reportClusters)) {
    _reportClusters.forEach(cl => totalCabs += (cl.cabinet_count || (cl.cabinets ? cl.cabinets.length : 1)));
  }

  container.innerHTML = `
    <div class="cad-card">
      <div class="cad-card-header">Sound System Status</div>
      <div class="cad-prop-row">
        <span class="cad-prop-label">Active Preset</span>
        <span class="cad-prop-val highlight">${esc(typeof _activeVenuePresetName !== 'undefined' ? _activeVenuePresetName : 'Standard')}</span>
      </div>
      <div class="cad-prop-row">
        <span class="cad-prop-label">Total Line Arrays</span>
        <span class="cad-prop-val">${totalClusters} clusters</span>
      </div>
      <div class="cad-prop-row">
        <span class="cad-prop-label">Total Enclosures</span>
        <span class="cad-prop-val">${totalCabs} cabinets</span>
      </div>
      <div class="cad-prop-row">
        <span class="cad-prop-label">3D Geometry Source</span>
        <span class="cad-prop-val highlight">SoundVision DXF</span>
      </div>
    </div>

    <div class="cad-card">
      <div class="cad-card-header">
        <span>Acoustic Environment</span>
        <button onclick="openWeatherSettingsModal()" class="cad-ribbon-btn" style="padding:1px 5px; font-size:9.5px;">Edit</button>
      </div>
      <div class="cad-prop-row">
        <span class="cad-prop-label">Speed of Sound (c)</span>
        <span class="cad-prop-val success" id="cadEnvSpeedVal">343.2 m/s</span>
      </div>
      <div class="cad-prop-row">
        <span class="cad-prop-label">Temperature</span>
        <span class="cad-prop-val">20.0 °C</span>
      </div>
      <div class="cad-prop-row">
        <span class="cad-prop-label">Relative Humidity</span>
        <span class="cad-prop-val">50 %</span>
      </div>
      <div class="cad-prop-row">
        <span class="cad-prop-label">Delay Coefficient</span>
        <span class="cad-prop-val">2.91 ms/m</span>
      </div>
    </div>

    <div class="cad-card">
      <div class="cad-card-header">3D Viewport Controls</div>
      <div style="font-size:11px; color:#94a3b8; line-height:1.5;">
        • <b>Left Click + Drag:</b> Orbit 3D perspective<br>
        • <b>Right Click + Drag:</b> Pan camera in plane<br>
        • <b>Scroll Wheel:</b> Precision zoom / dolly<br>
        • <b>Click Cluster:</b> Inspect rigging &amp; splay angles
      </div>
    </div>
  `;
}
window.updateCadInspector = updateCadInspector;

/* ── Initialize on page load ── */
document.addEventListener('DOMContentLoaded', () => {
  renderCadSceneTree();
  updateCadInspector(null);

  // 1. Real-time fast sensor telemetry loop (every 200ms)
  if (typeof fetchDevices === 'function') {
    fetchDevices();
    setInterval(fetchDevices, 200);
  }

  // 2. Periodic sync with server report data (preset / cluster definitions)
  if (typeof fetchReport === 'function') {
    fetchReport();
    setInterval(fetchReport, 4000);
  }
});

// Periodic sync with scene tree & inspector
setInterval(() => {
  if (typeof _reportClusters !== 'undefined') {
    renderCadSceneTree();
    if (typeof _selected3DCluster !== 'undefined' && _selected3DCluster) {
      updateCadInspector(_selected3DCluster);
    }
  }
}, 1500);

setTimeout(() => {
  if (typeof init3D === 'function') init3D();
  if (typeof onWindowResize3D === 'function') onWindowResize3D();
  if (typeof renderCadSceneTree === 'function') renderCadSceneTree();
  if (typeof updateCadInspector === 'function') updateCadInspector(null);
  if (typeof fetchDevices === 'function') fetchDevices();
  if (typeof fetchReport === 'function') fetchReport();
}, 80);
</script>
{% endblock %}