{% extends "base.html" %}

{% block head %}
{% endblock %}

{% block content %}
<main class="main">
  <div class="toolbar" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px;">
    <div class="toolbar-left" style="display:flex; align-items:center; gap:12px;">
      <span class="section-title" style="margin:0;">METI Devices</span>
      <span id="deviceCountBadge" class="count-badge" style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); color:var(--txt-dim); font-family:'JetBrains Mono',monospace; font-size:11px; padding:2px 8px; border-radius:12px;">0 devices</span>
    </div>
    
    <div class="toolbar-right" style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
      <!-- Grouped Display Controls Segment: Filter + View + Size -->
      <div class="toolbar-display-group" style="display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.08); border-radius:9px; padding:3px; box-shadow:0 2px 8px rgba(0,0,0,0.25);">
        <!-- Status Filter Switcher -->
        <div class="card-filter-ctrl" title="Filter METI Devices by Connection Status" style="background:transparent; border:none; box-shadow:none; height:26px; padding:0 2px;">
          <div class="filter-pills" id="statusFilterPills" style="background:transparent; padding:0;">
            <button type="button" class="filter-pill active" data-filter="all" onclick="setMetiFilter('all')" title="Show all METI devices">
              All <span id="filterCountAll" class="filter-count"></span>
            </button>
            <button type="button" class="filter-pill" data-filter="online" onclick="setMetiFilter('online')" title="Show only online METI devices">
              <span class="filter-dot green"></span>Online <span id="filterCountOnline" class="filter-count"></span>
            </button>
            <button type="button" class="filter-pill" data-filter="offline" onclick="setMetiFilter('offline')" title="Show only offline METI devices">
              <span class="filter-dot dim"></span>Offline <span id="filterCountOffline" class="filter-count"></span>
            </button>
          </div>
        </div>

        <div style="width:1px; height:16px; background:rgba(255,255,255,0.08);"></div>

        <!-- Master Card View Switcher -->
        <div class="card-view-ctrl" title="Master View Mode for all cards" style="background:transparent; border:none; box-shadow:none; height:26px; padding:0 2px;">
          <div class="view-pills" id="masterViewPills" style="background:transparent; padding:0;">
            <button type="button" class="view-pill active" data-view="cluster" onclick="setMasterCardView('cluster')" title="Line Array CAD Side Profile">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:3px;"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>Array
            </button>
            <button type="button" class="view-pill" data-view="bubble" onclick="setMasterCardView('bubble')" title="Target Bubble Level">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:3px;"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>Bubble
            </button>
            <button type="button" class="view-pill" data-view="bars" onclick="setMasterCardView('bars')" title="Pitch / Azimuth / Roll Bars">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:3px;"><line x1="4" y1="6" x2="20" y2="6"></line><line x1="4" y1="12" x2="20" y2="12"></line><line x1="4" y1="18" x2="20" y2="18"></line></svg>Bars
            </button>
          </div>
        </div>

        <div style="width:1px; height:16px; background:rgba(255,255,255,0.08);"></div>

        <!-- Card Size Switcher -->
        <div class="card-size-ctrl" title="Change METI Card Size" style="background:transparent; border:none; box-shadow:none; height:26px; padding:0 2px;">
          <div class="size-pills" style="background:transparent; padding:0;">
            <button type="button" class="size-pill" data-size="s" onclick="setMetiCardSize('s')" title="Compact (Small grid)">S</button>
            <button type="button" class="size-pill active" data-size="m" onclick="setMetiCardSize('m')" title="Standard (Medium)">M</button>
            <button type="button" class="size-pill" data-size="l" onclick="setMetiCardSize('l')" title="Large (Wide screens)">L</button>
            <button type="button" class="size-pill" data-size="xl" onclick="setMetiCardSize('xl')" title="Extra Large (Stage/FOH)">XL</button>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="toolbar-actions-group" style="display:inline-flex; align-items:center; gap:8px;">
        <!-- SoundVision Snapshot Button Group -->
        <div class="tool-btn-group" title="SoundVision Snapshots and Diff">
          <button class="tool-btn accent-cyan" onclick="downloadSoundVisionSnapshotDirect()" title="Directly take live snapshot and download SoundVision .xmlc">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--cyan);"><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"></path><circle cx="12" cy="13" r="4"></circle></svg>
            <span>SV Snapshot</span>
          </button>
          <button class="tool-btn accent-cyan" onclick="openSoundVisionSnapshotModal()" style="padding:6px 10px;" title="Snapshot settings: Select clusters, tilt, azimuth, roll, and elevation">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><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 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"></path></svg>
          </button>
        </div>

        <!-- Offline Venue & Show Profiles -->
        <button class="tool-btn accent-emerald" onclick="openVenueModal()" title="Offline Show &amp; Venue Profiles (.motometi)">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#34d399;"><path d="M3 21h18M3 10h18M5 10v11M19 10v11M9 10v11M14 10v11M4 10h16l-8-7-8 7z"></path></svg>
          <span>Venue Profiles</span>
        </button>

        <!-- Pair METI Sensor -->
        <button class="tool-btn accent-purple" onclick="openPairSensorModal('ble')" title="Pair new METI Sensor via BLE Wireless, Pelicase Cradle, OLED QR, or Hotspot">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#c084fc;"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
          <span>Pair Sensor</span>
        </button>

        <!-- Primary Add METI Action -->
        <button class="tool-btn accent-amber" onclick="toggleAddPanel()" title="Add / Register new METI module by IP address">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
          <span>Add METI</span>
        </button>
      </div>
    </div>
  </div>

  <div id="addPanel" style="background:rgba(17,24,39,0.95); border:1px solid rgba(245,158,11,0.3); border-radius:14px; padding:18px 22px; margin-bottom:20px; box-shadow:0 8px 30px rgba(0,0,0,0.5), 0 0 20px rgba(245,158,11,0.1); backdrop-filter:blur(12px);">
    <!-- Top Header of Add METI Panel -->
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.08); flex-wrap:wrap; gap:10px;">
      <div style="display:flex; align-items:center; gap:8px;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--amber);"><path d="M2 12h20M12 2v20M20 12a8 8 0 0 0-16 0"></path></svg>
        <span style="font-size:14px; font-weight:700; color:var(--amber); letter-spacing:0.5px;">Add METI Sensor</span>
        <span style="font-size:11px; color:var(--txt-dim); margin-left:4px;">(Network &amp; Auto Discover)</span>
      </div>
      <div style="display:flex; align-items:center; gap:8px;">
        <button class="btn sm" id="btnAutoDiscover" onclick="runAutoDiscover(true)" style="background:rgba(245,158,11,0.18); border:1px solid rgba(245,158,11,0.45); color:var(--amber); font-weight:700; padding:6px 14px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; cursor:pointer;" title="Automatically search local network for active METI sensors">
          <span id="discoverSpinner" style="display:inline-flex; align-items:center;">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
          </span>
          <span id="discoverBtnText">Auto Discover</span>
        </button>
        <button class="btn sm" onclick="toggleAddPanel()" style="padding:6px 10px; font-size:12px; border-radius:8px; display:inline-flex; align-items:center; gap:4px;">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          <span>Close</span>
        </button>
      </div>
    </div>

    <!-- Auto Discover Container -->
    <div id="discoverResultsContainer" style="display:none; margin-bottom:16px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:12px 14px;">
      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;">
        <div style="font-size:11px; font-weight:700; color:var(--txt-dim); text-transform:uppercase; letter-spacing:0.8px;">Discovered METI Devices on Network:</div>
        <div id="discoverScanMeta" style="font-size:10px; font-family:'JetBrains Mono',monospace; color:var(--txt-dim);"></div>
      </div>
      <div id="discoverResultsList" style="display:flex; flex-direction:column; gap:8px;"></div>
    </div>

    <!-- Divider -->
    <div style="display:flex; align-items:center; gap:12px; margin:10px 0 14px 0; color:var(--txt-dim); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.9px;">
      <span style="flex:1; height:1px; background:rgba(255,255,255,0.08);"></span>
      <span>Manual Entry</span>
      <span style="flex:1; height:1px; background:rgba(255,255,255,0.08);"></span>
    </div>

    <!-- Manual Form -->
    <div class="add-form" style="display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;">
      <div class="field"><label>IP Address</label><input id="addIp" type="text" placeholder="192.168.0.50"/></div>
      <div class="field"><label>Port</label><input id="addPort" type="number" class="short" placeholder="5000" value="5000"/></div>
      <div class="field"><label>Name</label><input id="addName" type="text" placeholder="LineArray L1"/></div>
      <button class="btn amber" onclick="addDevice()">Add</button>
      <button class="btn" onclick="toggleAddPanel()">Cancel</button>
    </div>
  </div>

  <!-- Unclaimed Sensors Alert Banner -->
  <div id="unclaimedDevicesBanner" style="display:none; background:linear-gradient(90deg, rgba(192,132,252,0.18), rgba(147,51,234,0.08)); border:1px solid rgba(192,132,252,0.4); border-radius:12px; padding:12px 18px; margin-bottom:16px; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; box-shadow:0 4px 18px rgba(192,132,252,0.15);">
    <div style="display:flex; align-items:center; gap:10px;">
      <span style="font-size:22px;">⚡</span>
      <div>
        <div style="font-size:13px; font-weight:700; color:#e9d5ff;" id="unclaimedBannerTitle">New METI sensor detected on venue network!</div>
        <div style="font-size:11px; color:#c084fc;" id="unclaimedBannerSub">Available to claim into this system with 1 click.</div>
      </div>
    </div>
    <div style="display:flex; align-items:center; gap:8px;">
      <button class="btn sm" onclick="openPairSensorModal('system')" style="background:#9333ea; color:#fff; border:none; padding:7px 15px; border-radius:7px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 2px 10px rgba(147,51,234,0.35);">
        <span>🔗</span>
        <span>View &amp; Claim Sensor</span>
      </button>
    </div>
  </div>

  <div id="devicesGrid" class="devices-grid"></div>
  <div id="emptyState" class="empty-state" style="display:none">
    <div style="margin-bottom:14px; display:inline-flex; align-items:center; justify-content:center; width:68px; height:68px; border-radius:18px; background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.22); box-shadow:0 0 24px rgba(245,158,11,0.15);">
      <img src="/IMAGES/motometi_icon_1_neg.png" alt="MOTOMETI" style="width:42px; height:42px; object-fit:contain;">
    </div>
    <h2>No METI devices found</h2>
    <p>Add a METI sensor manually, run Auto Discover, or use Pelicase Cradle / QR pairing.</p>
    <button class="btn amber" onclick="toggleAddPanel()">&#xFF0B; Add METI</button>
  </div>

  <div id="filterEmptyState" class="empty-state" style="display:none; padding:44px 22px;">
    <div style="margin-bottom:14px; display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); box-shadow:0 0 20px rgba(0,0,0,0.4);">
      <span id="filterEmptyIcon" style="font-size:28px;">📡</span>
    </div>
    <h2 id="filterEmptyTitle" style="font-size:18px; margin:0 0 6px 0; color:#f8fafc;">No matching METI devices</h2>
    <p id="filterEmptyText" style="color:var(--txt-dim); font-size:13px; max-width:400px; margin:0 auto 16px; line-height:1.5;">No devices match the currently active filter.</p>
    <button class="btn sm" onclick="setMetiFilter('all')" style="background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:#f8fafc; font-weight:600; padding:7px 16px; border-radius:8px; cursor:pointer;">
      Show All Devices
    </button>
  </div>

  <!-- Venue Profile Modal -->
  <div id="venueModal" class="modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:9999; align-items:center; justify-content:center; backdrop-filter:blur(4px);">
    <div class="modal-card" style="background:#111827; border:1px solid rgba(255,255,255,0.12); border-radius:12px; width:92%; max-width:540px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,0.8); color:#f3f4f6; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
      <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:12px;">
        <div style="display:flex; align-items:center; gap:10px;">
          <span style="font-size:22px;">🏛️</span>
          <div>
            <h3 style="margin:0; font-size:17px; font-weight:700; color:#fff;">Offline Venue &amp; Show Profiles</h3>
            <div style="font-size:12px; color:#9ca3af;">Save and load venue setups locally (.motometi)</div>
          </div>
        </div>
        <button onclick="closeVenueModal()" style="background:none; border:none; color:#9ca3af; font-size:22px; cursor:pointer; padding:4px 8px;">&times;</button>
      </div>

      <!-- Section 1: Save Current Setup -->
      <div style="background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:14px; margin-bottom:16px;">
        <div style="font-size:12px; font-weight:700; color:#34d399; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;">Save Current Venue Setup</div>
        <div style="display:flex; gap:8px;">
          <input type="text" id="venueProfileName" placeholder="E.g. Main Stage Left" style="flex:1; background:#1f2937; border:1px solid #374151; color:#fff; padding:8px 12px; border-radius:6px; font-size:13px; outline:none;" />
          <button class="btn sm" onclick="saveCurrentVenueProfile()" style="background:#059669; color:#fff; border:none; padding:8px 14px; border-radius:6px; font-weight:700; cursor:pointer;">💾 Save</button>
          <button class="btn sm" onclick="downloadCurrentVenueProfile()" style="background:#0284c7; color:#fff; border:none; padding:8px 14px; border-radius:6px; font-weight:700; cursor:pointer;" title="Download as .motometi file to computer or USB drive">⬇️ Export</button>
        </div>
      </div>

      <!-- Section 2: Saved Profiles on Server -->
      <div style="margin-bottom:16px;">
        <div style="font-size:12px; font-weight:700; color:#9ca3af; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;">Saved profiles on this server</div>
        <div id="venueProfilesList" style="max-height:160px; overflow-y:auto; background:#1f2937; border:1px solid #374151; border-radius:8px; padding:8px;">
          <div style="color:#6b7280; font-size:13px; text-align:center; padding:12px;">Loading profiles...</div>
        </div>
      </div>

      <!-- Section 3: Import from file -->
      <div style="background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:14px; margin-bottom:14px;">
        <div style="font-size:12px; font-weight:700; color:#38bdf8; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;">Import from USB / Computer</div>
        <div style="display:flex; align-items:center; gap:8px;">
          <input type="file" id="venueProfileFile" accept=".motometi,.json" style="display:none;" onchange="handleVenueProfileUpload(this)" />
          <button class="btn sm" onclick="document.getElementById('venueProfileFile').click()" style="width:100%; background:rgba(56,189,248,0.15); border:1px dashed #38bdf8; color:#38bdf8; padding:10px; border-radius:6px; font-weight:600; cursor:pointer; text-align:center;">
            📁 Select .motometi file to import
          </button>
        </div>
      </div>

      <div style="text-align:right;">
        <button class="btn sm" onclick="closeVenueModal()" style="background:#374151; color:#fff; border:none; padding:6px 16px; border-radius:6px; cursor:pointer;">Close</button>
      </div>
    </div>
  </div>

</main>

{% endblock %}

{% block scripts %}
<script src="/static/js/meti.js?v=20261020_hide_cables"></script>
<script>
  fetchReport();
  setInterval(fetchReport, 2000);
  _pollTunnel();
  setInterval(_pollTunnel, 15000);
</script>
{% endblock %}