{% extends "base.html" %}

{% block content %}
  <div id="mapPanel" class="fullscreen-3d" style="position:relative; gap:0;">
    <!-- Mobile Toggle Filters Button -->
    <button id="mapSidebarToggleBtn" class="btn amber" style="display:none; position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:90; box-shadow:0 4px 16px rgba(0,0,0,0.4); border-radius:24px; padding:10px 24px; align-items:center;" onclick="toggleMapSidebarMobile(true)">
      <span style="font-size:16px; margin-right:6px;">&#x2699;</span> <span style="font-weight:700">Filters</span>
    </button>
    
    <!-- Map Sidebar -->
    <div id="mapSidebar" style="width:260px; background:var(--bg3); border-radius:8px; border:1px solid var(--border); display:flex; flex-direction:column; height:80vh; overflow:hidden;">
      <div style="padding:14px 14px 10px 14px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px;">
          <div style="display:flex; justify-content:space-between; align-items:center;">
             <span style="font-weight:700; font-size:11px; letter-spacing:1px; color:var(--txt-dim); text-transform:uppercase;">Clusters</span>
             <div style="display:flex;gap:4px;align-items:center;">
               <button onclick="setAllMapClusters(true)" title="Show All" style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.05); color:var(--txt-dim); cursor:pointer; padding:3px 7px; border-radius:4px; font-size:10px; font-weight:600; transition:0.2s" onmouseover="this.style.color='var(--txt)'" onmouseout="this.style.color='var(--txt-dim)'">All</button>
               <button onclick="setAllMapClusters(false)" title="Hide All" style="background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.02); color:var(--txt-dim); cursor:pointer; padding:3px 7px; border-radius:4px; font-size:10px; font-weight:600; transition:0.2s" onmouseover="this.style.color='var(--txt)'" onmouseout="this.style.color='var(--txt-dim)'">None</button>
               <button id="mapSidebarClose" style="display:none; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.05); color:var(--txt); width:26px; height:26px; border-radius:50%; font-size:14px; cursor:pointer;" onclick="toggleMapSidebarMobile(false)">&times;</button>
             </div>
          </div>
      </div>
      <div id="mapSidebarList" style="flex:1; overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px;"></div>

      <!-- 3D View Options (only shown in 3D mode) -->
      <div id="viewOptionsSection" style="display:none; border-top:1px solid var(--border); padding:10px 12px; flex-direction:column; gap:8px;">
        <span style="font-size:10px; font-weight:700; letter-spacing:1px; color:var(--txt-dim); text-transform:uppercase;">&#x1F441; View Options</span>
        <div id="viewOptionsButtons" style="display:flex; flex-wrap:wrap; gap:5px;"></div>
      </div>

      <!-- Export Map to SoundVision Quick Action -->
      <div style="border-top:1px solid var(--border); padding:10px 12px; display:flex; flex-direction:column; gap:6px;">
        <button onclick="openSVRoomExportModal()" class="btn sm" style="background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.35); color:#34d399; font-weight:700; width:100%; justify-content:center; display:flex; align-items:center; gap:6px; padding:8px 10px; cursor:pointer;" title="Export surrounding 3D venue map & buildings to SoundVision Room Data (.txt)">
          <span>📐</span> Export Map to SoundVision
        </button>
      </div>
    </div>
    
    <div id="mapContainer" style="flex:1; display:flex; height:80vh; background:rgba(0,0,0,0.2); border-radius:8px; border:1px solid rgba(255,255,255,0.05); position:relative; overflow:hidden;">
      <svg id="mapSvg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style="cursor:grab"></svg>
      <!-- Map Zoom / Pan Controls -->
      <div style="position:absolute; bottom:14px; right:14px; z-index:20; display:flex; gap:6px; align-items:center;">
        <button onclick="openSVRoomExportModal()" class="btn sm" style="background:rgba(16,185,129,0.22); border:1px solid rgba(16,185,129,0.45); color:#34d399; font-weight:700; padding:6px 12px; cursor:pointer;" title="Export SoundVision 3D Room Data (.txt)">📐 Export to SV</button>
        <button onclick="zoomMap(1.2)" class="btn sm" style="background:rgba(10,14,22,0.85); border:1px solid rgba(255,255,255,0.12); padding:6px 10px; font-weight:700;" title="Zoom In">+</button>
        <button onclick="zoomMap(0.8)" class="btn sm" style="background:rgba(10,14,22,0.85); border:1px solid rgba(255,255,255,0.12); padding:6px 10px; font-weight:700;" title="Zoom Out">&minus;</button>
        <button onclick="resetMapView()" class="btn sm" style="background:rgba(10,14,22,0.85); border:1px solid rgba(255,255,255,0.12); padding:6px 10px; font-weight:600;" title="Reset Map View">Reset</button>
      </div>
    </div>
    <div id="mapDetailOverlay" onclick="event.stopPropagation()" onpointerdown="event.stopPropagation()" style="position:absolute; top:12px; right:12px; width:360px; max-width:calc(100vw - 24px); display:none; background:var(--bg3); border-radius:8px; border:1px solid var(--border); box-shadow:0 8px 32px rgba(0,0,0,0.4); max-height:calc(80vh - 24px); overflow-y:auto; overflow-x:hidden; z-index:100;">
      <div style="padding:10px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border);">
         <h4 style="color:var(--txt); margin:0;" id="mapDetailTitle">Cluster</h4>
         <button class="btn sm" onclick="document.getElementById('mapDetailOverlay').style.display='none'">&#x2715;</button>
      </div>
      <div id="mapDetailBody"></div>
    </div>
  </div>

{% endblock %}

{% block scripts %}
<script src="/static/js/meti.js?v=20261020_hide_cables"></script>
<script src="/static/js/clusters.js?v=20260914_03"></script>
<script src="/static/js/map.js?v=20260914_03"></script>
<script>
  if (typeof fetchDevices === 'function') {
    fetchDevices();
    setInterval(fetchDevices, 250);
  }
  if (typeof fetchReport === 'function') {
    fetchReport().then(() => {
      if (typeof renderMap === 'function') renderMap();
    });
    setInterval(fetchReport, 2000);
  }
  if (typeof _pollTunnel === 'function') {
    _pollTunnel();
    setInterval(_pollTunnel, 15000);
  }
  if (typeof renderMap === 'function') renderMap();
</script>
{% endblock %}