{% extends "base.html" %}

{% block head %}
<style>
@media print {
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: 'Inter', sans-serif;
  }
  .header, .toolbar, #cablesViewTabs, #toggleCableLengthModeBtn, #mobileMenuBtn, nav, .btn, .mode-pill, .stat-pill, #clockEl, #tunnelBadge, .modal-overlay {
    display: none !important;
  }
  #cablesPanel {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #cablesListPanel {
    display: block !important;
    background: #ffffff !important;
    border: none !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  #cablesGrid, #cablesPatchbay {
    display: none !important;
  }
  .glass-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #000000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    transform: none !important;
    margin-bottom: 8px;
  }
  .glass-card span, .glass-card div, .glass-card h3 {
    color: #000000 !important;
  }
  .role-badge {
    border: 1px solid #9ca3af !important;
    color: #111827 !important;
    background: #f3f4f6 !important;
  }
}
</style>
{% endblock %}

{% block content %}
<main class="main">
    <div id="cablesPanel">
    <div class="toolbar" style="margin-bottom: 12px; gap: 12px; display: flex; align-items: center; flex-wrap: wrap;">
      <span class="section-title" style="flex: 1; min-width: 200px;">Amplifier Cables & Patches</span>
      
      <!-- High-Density Search and Controls -->
      <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: 12px;">
        <!-- Search Box -->
        <div style="position: relative; display: flex; align-items: center;">
          <span style="position: absolute; left: 10px; color: var(--txt-dim); font-size: 14px; pointer-events: none;">🔍</span>
          <input type="text" id="cablesSearchInput" oninput="filterCablesDisplay()" placeholder="Search amps by name, IP, model..." 
                 style="padding: 6px 12px 6px 30px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--txt); font-size: 13px; font-family: 'Inter', sans-serif; width: 260px; outline: none; transition: border-color 0.2s, background 0.2s;"/>
        </div>
        
        <!-- Expand/Collapse Buttons -->
        <button class="btn sm" onclick="setAllCablesCollapsed(false)" title="Expand all amplifier channels" style="padding: 6px 12px; font-size: 12px; border-radius: 20px;">
          📂 Expand All
        </button>
        <button class="btn sm" onclick="setAllCablesCollapsed(true)" title="Collapse all amplifier channels to 1U layout" style="padding: 6px 12px; font-size: 12px; border-radius: 20px;">
          📁 Collapse All
        </button>
        <button class="btn sm cyan" id="syncSvAmpsBtn" onclick="syncAmpsFromSoundVision()" title="Sync all amplifier IP addresses and speaker patches from active SoundVision file" style="padding: 6px 14px; font-size: 12px; border-radius: 20px; font-weight: 600; background: rgba(34, 211, 238, 0.12); border: 1px solid var(--cyan); color: var(--cyan);">
          ⚡ Sync from SoundVision
        </button>
      </div>

      <button class="btn amber" onclick="toggleAddAmpPanel()">＋ Add Amplifier</button>
    </div>

    <!-- Tab View Switcher -->
    <div style="display: flex; gap: 4px; margin-bottom: 20px; background: rgba(0,0,0,0.25); padding: 4px; border-radius: 8px; border: 1px solid var(--border); width: fit-content;">
      <button class="cables-view-btn active" id="cablesViewRackBtn" onclick="setCablesView('rack')">🎛️ Rack View</button>
      <button class="cables-view-btn" id="cablesViewPatchbayBtn" onclick="setCablesView('patchbay')">🔌 Patchbay View</button>
      <button class="cables-view-btn" id="cablesViewListBtn" onclick="setCablesView('list')">📋 Cable Run List</button>
    </div>
    
    <div id="addAmpPanel" style="display:none; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:20px 24px; margin-bottom:20px; animation:slideDown .2s ease">
      <div class="add-form">
        <div class="field"><label>Amplifier Name</label><input id="addAmpName" type="text" placeholder="LA12X - Rack 1"/></div>
        <div class="field"><label>IP Address</label><input id="addAmpIp" type="text" placeholder="192.168.0.100"/></div>
        <div class="field"><label>Port (Optional)</label><input id="addAmpPort" type="number" class="short" placeholder="80" value="80"/></div>
        <div class="field">
          <label>Model</label>
          <select id="addAmpModel" class="ch-select" style="background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:var(--rs); color:var(--txt); padding:8px 12px; font:500 14px 'JetBrains Mono',monospace;">
            <option value="LA12X" selected>LA12X</option>
            <option value="LA4X">LA4X</option>
            <option value="LA7.16">LA7.16</option>
            <option value="LA2Xi">LA2Xi</option>
          </select>
        </div>
        <div style="grid-column: 1 / -1; margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px;">
          <span style="font-size: 11px; font-weight: 700; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 8px;">Custom 3D Coordinates (Optional — falls back to Global Settings)</span>
          <div style="display: flex; gap: 12px;">
            <div class="field" style="margin: 0; flex: 1;"><label>Rack X (m)</label><input id="addAmpRackX" type="number" step="0.1" placeholder="e.g. 2.5"/></div>
            <div class="field" style="margin: 0; flex: 1;"><label>Rack Y (m)</label><input id="addAmpRackY" type="number" step="0.1" placeholder="e.g. -1.0"/></div>
            <div class="field" style="margin: 0; flex: 1;"><label>Rack Z (m)</label><input id="addAmpRackZ" type="number" step="0.1" placeholder="e.g. 1.2"/></div>
          </div>
        </div>
        
        <div style="grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; margin-top: 10px;">
          <div style="display: flex; align-items: center; gap: 8px;">
            <input type="checkbox" id="addAmpUseAuth" checked style="cursor: pointer; margin: 0;" onchange="document.getElementById('addAmpCredentialsFields').style.display = this.checked ? 'flex' : 'none'"/>
            <label for="addAmpUseAuth" style="font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; color: var(--txt-dim);">Enable Digest Authentication (standard: admin/rest)</label>
          </div>
          <div id="addAmpCredentialsFields" style="display: flex; gap: 12px; margin-top: 4px;">
            <div class="field" style="margin: 0; flex: 1;"><label>Username</label><input id="addAmpUsername" type="text" value="admin"/></div>
            <div class="field" style="margin: 0; flex: 1;"><label>Password</label><input id="addAmpPassword" type="password" value="rest"/></div>
          </div>
        </div>
        
        <div style="grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 10px;">
          <button class="btn amber" onclick="addAmplifier()">Add Amplifier</button>
          <button class="btn" onclick="toggleAddAmpPanel(false)">Cancel</button>
        </div>
      </div>
    </div>
    
    <div id="cablesGrid" class="devices-grid view-panel"></div>

    <!-- Visual Interactive Patchbay Panel -->
    <div id="cablesPatchbay" class="view-panel" style="display: none; background: rgba(6,9,15,0.4); border-radius: 12px; border: 1px solid var(--border); padding: 24px; position: relative; overflow: hidden; min-height: 600px;">
      <!-- SVG Layer for drawing cables -->
      <svg id="patchbaySvg" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15;">
        <defs>
          <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
            <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.6"/>
          </filter>
        </defs>
      </svg>
      
      <!-- Drag cable overlay indicator (hidden by default) -->
      <div id="patchbayDragIndicator" style="display: none; position: absolute; pointer-events: none; z-index: 100; color: var(--cyan); font-family: 'JetBrains Mono', monospace; font-size: 10px; background: rgba(10,15,25,0.85); border: 1px solid rgba(34,211,238,0.3); border-radius: 4px; padding: 4px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);">
        🔌 Dragging patch cable...
      </div>

      <!-- Core Grid split in two columns -->
      <div style="display: grid; grid-template-columns: 320px 1fr; gap: 40px; position: relative; z-index: 10;">
        <!-- Left Column: Amplifiers with their output jacks -->
        <div>
          <div style="font-size: 11px; font-weight: 700; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
            <span>🎛️ Amplifier Channels</span>
            <span style="font-size: 9px; font-weight: normal; text-transform: none; color: var(--txt-dim); opacity: 0.7;">(Click output to link / Drag wire)</span>
          </div>
          <div id="patchbayAmpsContainer" style="display: flex; flex-direction: column; gap: 16px;"></div>
        </div>
        
        <!-- Right Column: Speakers list (SoundVision) -->
        <div>
          <div style="font-size: 11px; font-weight: 700; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; justify-content: space-between;">
            <span>🔊 SoundVision Speakers</span>
            <span style="font-size: 9px; font-weight: normal; text-transform: none; color: var(--txt-dim); opacity: 0.7;">(Double-click cable to sever patch)</span>
          </div>
          
          <!-- Filter dropdown for speakers by cluster -->
          <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 11px; color: var(--txt-dim);">Filter Cluster:</span>
            <select id="patchbayClusterFilter" onchange="renderPatchbay()" class="preset-select" style="max-width: 220px; font-size: 11px; padding: 4px 8px;">
              <option value="all">Show All Clusters</option>
            </select>
          </div>
          
          <div id="patchbaySpeakersContainer" style="display: flex; flex-direction: row; gap: 20px; overflow-x: auto; max-height: 700px; padding-bottom: 16px; align-items: flex-start; scrollbar-width: thin;"></div>
        </div>
      </div>
    </div>
    
    <!-- Used Cables List Panel -->
    <div id="cablesListPanel" class="view-panel" style="display: none; margin-top: 24px; background: rgba(6,9,15,0.4); border-radius: 12px; border: 1px solid var(--border); padding: 24px; position: relative; overflow: hidden; backdrop-filter: blur(12px);">
      <div style="font-size: 11px; font-weight: 700; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; justify-content: space-between;">
        <span>🔌 Cable Run List</span>
        <div style="display: flex; gap: 8px;">
          <button class="btn sm" id="toggleCableLengthModeBtn" onclick="toggleCableLengthMode()" style="padding: 6px 12px; font-size: 11px; border-radius: 20px; font-weight: 600; cursor: pointer; transition: all 0.2s;">
            📏 Cable Length Mode: OFF
          </button>
          <button class="btn sm" onclick="window.print()" style="padding: 6px 12px; font-size: 11px; border-radius: 20px; font-weight: 600; background: rgba(34,197,94,0.15); color: var(--green); border-color: rgba(34,197,94,0.3); cursor: pointer; transition: all 0.2s;">
            🖨️ Export / Print PDF
          </button>
        </div>
      </div>
      <div id="cablesListContainer" style="display: flex; flex-direction: column; gap: 16px;"></div>
    </div>
  </div>

</main>


<div id="ampSettingsModal" class="modal-overlay" onclick="if(event.target===this) closeAmpSettings()">
  <div class="modal" style="max-width: 480px; max-height: 90vh;">
    <div class="modal-head">
      <h3 id="ampSettingsTitle">⚙️ Amplifier Settings</h3>
      <button class="btn sm" onclick="closeAmpSettings()" style="background:none; border:none; font-size:18px; cursor:pointer; color:var(--txt-dim); transition:color .15s;" onmouseover="this.style.color='var(--red)'" onmouseout="this.style.color='var(--txt-dim)'">✕</button>
    </div>
    <div class="modal-body" style="padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto;">
      <!-- Premium Glassmorphism Tab Selector -->
      <div style="display: flex; gap: 4px; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 8px; border: 1px solid var(--border); width: 100%; box-sizing: border-box; margin-bottom: 8px;">
        <button type="button" class="cables-view-btn active" id="ampTabGeneralBtn" onclick="setAmpSettingsTab('general')" style="flex: 1; text-align: center; font-size: 12px; padding: 6px 12px; border: none; background: var(--amber); color: #000; box-shadow: 0 0 10px rgba(245,158,11,.35); cursor: pointer; border-radius: 6px; font-weight: 600; transition: all 0.2s;">🎛️ General</button>
        <button type="button" class="cables-view-btn" id="ampTabDspBtn" onclick="setAmpSettingsTab('dsp')" style="flex: 1; text-align: center; font-size: 12px; padding: 6px 12px; border: none; background: none; color: var(--txt-dim); cursor: pointer; border-radius: 6px; font-weight: 600; transition: all 0.2s;">🎚️ DSP Controls</button>
      </div>

      <!-- General Tab Contents -->
      <div id="ampSettingsTabGeneral" style="display: flex; flex-direction: column; gap: 16px; width: 100%;">
        <div class="field">
          <label>Amplifier Name</label>
          <input type="text" id="ampSettingsName" placeholder="LA12X Amplifier"/>
        </div>
        <div class="field">
          <label>IP Address</label>
          <input type="text" id="ampSettingsIp" placeholder="192.168.0.100"/>
        </div>
        <div class="field">
          <label>Model</label>
          <select id="ampSettingsModel" style="background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:var(--rs); color:var(--txt); padding:8px 12px; font:500 14px 'Inter',sans-serif; outline:none; cursor:pointer;">
            <option value="LA4X">LA4X (4 channels)</option>
            <option value="LA12X">LA12X (4 channels)</option>
            <option value="LA7.16">LA7.16 (16 channels)</option>
          </select>
        </div>
        <div class="field">
          <label>Preset</label>
          <select id="ampSettingsPreset" class="preset-select" style="background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:var(--rs); color:var(--txt); padding:8px 12px; font:500 14px 'Inter',sans-serif; outline:none; cursor:pointer;">
            <option value="manual">Custom / Manual</option>
          </select>
        </div>
        <div style="border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; margin-top: 10px;">
          <span style="font-size: 11px; font-weight: 700; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 8px;">Custom 3D Coordinates (Optional — falls back to Global Settings)</span>
          <div style="display: flex; gap: 12px;">
            <div class="field" style="margin: 0; flex: 1;"><label>Rack X (m)</label><input id="ampSettingsRackX" type="number" step="0.1" placeholder="Global default"/></div>
            <div class="field" style="margin: 0; flex: 1;"><label>Rack Y (m)</label><input id="ampSettingsRackY" type="number" step="0.1" placeholder="Global default"/></div>
            <div class="field" style="margin: 0; flex: 1;"><label>Rack Z (m)</label><input id="ampSettingsRackZ" type="number" step="0.1" placeholder="Global default"/></div>
          </div>
        </div>
        <div style="display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; margin-top: 10px;">
          <div style="display: flex; align-items: center; gap: 8px;">
            <input type="checkbox" id="ampSettingsUseAuth" checked style="cursor: pointer; margin: 0;" onchange="document.getElementById('ampSettingsCredentialsFields').style.display = this.checked ? 'flex' : 'none'"/>
            <label for="ampSettingsUseAuth" style="font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; color: var(--txt-dim);">Enable Digest Authentication (standard: admin/rest)</label>
          </div>
          <div id="ampSettingsCredentialsFields" style="display: flex; gap: 12px; margin-top: 4px;">
            <div class="field" style="margin: 0; flex: 1;"><label>Username</label><input id="ampSettingsUser" type="text" placeholder="admin"/></div>
            <div class="field" style="margin: 0; flex: 1;"><label>Password</label><input id="ampSettingsPassword" type="password" placeholder="password"/></div>
          </div>
        </div>
      </div>

      <!-- DSP Tuning Tab Contents -->
      <div id="ampSettingsTabDsp" style="display: none; flex-direction: column; gap: 16px; width: 100%;">
        <!-- Global Input Source Selection -->
        <div class="field" style="border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 12px; margin-bottom: 4px;">
          <label>Global Input Source</label>
          <select id="ampDspInputSource" onchange="setAmpInputSource(this.value)" style="background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:var(--rs); color:var(--txt); padding:8px 12px; font:500 14px 'Inter',sans-serif; outline:none; cursor:pointer; width: 100%;">
            <option value="network">Milan / AVB Network</option>
            <option value="xlr">XLR Analog</option>
          </select>
        </div>

        <!-- Channels DSP list -->
        <div id="ampDspChannelsContainer" style="display: flex; flex-direction: column; gap: 14px; max-height: 400px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin;">
          <!-- Dynamically generated channel controls will go here -->
        </div>
      </div>
    </div>
    <div class="modal-footer" style="padding: 16px 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.15);">
      <button class="btn danger" onclick="deleteAmpFromSettings()" id="ampSettingsDeleteBtn">Delete Amplifier</button>
      <div class="modal-btns" style="display:flex; gap:8px;">
        <button class="btn" onclick="closeAmpSettings()">Cancel</button>
        <button class="btn amber" onclick="saveAmpSettings()">Save Settings</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script src="/static/js/cables.js"></script>
<script>
  setCablesView(_cablesViewMode);
  pollCables();
  setInterval(pollCables, 2000);
  fetchReport();
  setInterval(fetchReport, 2000);
  _pollTunnel();
  setInterval(_pollTunnel, 15000);
</script>
{% endblock %}