---
// This is server-side - runs at build time
const pageTitle = "Modulation";
---
<div class="flex flex-col gap-4">
    <h1 class="text-2xl font-bold">Laser Modulation</h1>
    
    <!-- Modulation Mode Selection -->
    <div class="card bg-base-200 shadow">
      <div class="card-body bg-base-200 rounded-lg">
        <h2 class="card-title">Modulation Mode</h2>
        
        <!-- Main Mode Tabs - Keep horizontal even on mobile -->
        <div class="tabs tabs-boxed mb-4">
          <button class="tab tab-active flex-1" id="internal-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
            <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 12l2 2 4-4"/>
              <path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
              <path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
              <path d="M3 12h6m6 0h6"/>
            </svg>
            Internal
          </button>
          <button class="tab flex-1" id="external-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
            <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M6 3v12"/>
              <path d="M18 3v12"/>
              <path d="M6 21l12-9-12-3z"/>
            </svg>
            External
          </button>
        </div>
        
        <!-- Internal Modes - Stack on mobile -->
        <div id="internal-modes" class="mb-4">
          <h3 class="font-medium mb-3">Internal Modulation Modes</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2">
            <button class="btn btn-active" id="cc-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
              </svg>
              Constant Current
            </button>
            <button class="btn" id="cp-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="4"/>
                <path d="M12 2v2"/>
                <path d="M12 20v2"/>
                <path d="m4.93 4.93 1.41 1.41"/>
                <path d="m17.66 17.66 1.41 1.41"/>
                <path d="M2 12h2"/>
                <path d="M20 12h2"/>
                <path d="m6.34 17.66-1.41 1.41"/>
                <path d="m19.07 4.93-1.41 1.41"/>
              </svg>
              Constant Power
            </button>
            <button class="btn" id="pattern-continuous-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 12h6l4 8 4-16 4 8h6"/>
              </svg>
              Pattern Continuous
            </button>
            <button class="btn" id="pattern-triggered-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M8 6l4-4 4 4"/>
                <path d="M12 3v9"/>
                <path d="M3 12h6l4 8 4-8h6"/>
              </svg>
              Pattern Triggered
            </button>
          </div>
        </div>
        
        <!-- External Modes - Stack on mobile -->
        <div id="external-modes" class="mb-4 hidden">
          <h3 class="font-medium mb-3">External Modulation Modes</h3>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
            <button class="btn btn-active" id="ttl-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M5 12h14"/>
                <path d="M5 12v7"/>
                <path d="M19 12v7"/>
                <path d="M5 5v7"/>
                <path d="M19 5v7"/>
              </svg>
              TTL
            </button>
            <button class="btn" id="mod2current-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 3v18h18"/>
                <path d="M7 12l4-4 4 4 4-4"/>
              </svg>
              Mod2Current
            </button>
            <button class="btn" id="schmitt-trigger-tab" onclick="if('vibrate' in navigator) navigator.vibrate(15)">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 12h6l2-8 2 16 2-8h6"/>
              </svg>
              Schmitt Trigger
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Mode Configuration Panels -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

      <!-- Constant Current Panel -->
      <div id="cc-panel" class="card bg-base-200 shadow">
        <div class="card-body bg-base-200 rounded-lg">
          <h2 class="card-title">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
            </svg>
            Constant Current Mode
          </h2>
          
          <div class="form-control">
            <label class="label">
              <span class="label-text">Current (A)</span>
              <span class="label-text-alt">5.0A</span>
            </label>
            <input type="range" min="0" max="10" value="5" step="0.1" class="range range-primary" />
            <div class="w-full flex justify-between text-xs px-2 mt-1">
              <span>0A</span>
              <span>2.5A</span>
              <span>5.0A</span>
              <span>7.5A</span>
              <span>10.0A</span>
            </div>
          </div>
          
          <div class="form-control mt-4">
            <label class="cursor-pointer label justify-start gap-4">
              <span class="label-text">Enable Soft Start</span>
              <input type="checkbox" class="toggle toggle-success" checked onchange="updateToggleColor(this); if('vibrate' in navigator) navigator.vibrate(15)" />
            </label>
          </div>
          
          <div class="alert alert-info mt-4">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>Constant Current mode provides stable current output regardless of load changes.</span>
          </div>
        </div>
      </div>
      
      <!-- Constant Power Panel -->
      <div id="cp-panel" class="card bg-base-200 shadow hidden">
        <div class="card-body bg-base-200 rounded-lg">
          <h2 class="card-title">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="4"/>
              <path d="M12 2v2"/>
              <path d="M12 20v2"/>
              <path d="m4.93 4.93 1.41 1.41"/>
              <path d="m17.66 17.66 1.41 1.41"/>
              <path d="M2 12h2"/>
              <path d="M20 12h2"/>
              <path d="m6.34 17.66-1.41 1.41"/>
              <path d="m19.07 4.93-1.41 1.41"/>
            </svg>
            Constant Power Mode
          </h2>
          
          <div class="form-control">
            <label class="label">
              <span class="label-text">Power (W)</span>
              <span class="label-text-alt">5.0W</span>
            </label>
            <input type="range" min="0" max="10" value="5" step="0.1" class="range range-secondary" />
            <div class="w-full flex justify-between text-xs px-2 mt-1">
              <span>0W</span>
              <span>2.5W</span>
              <span>5.0W</span>
              <span>7.5W</span>
              <span>10.0W</span>
            </div>
          </div>
          
          <div class="form-control mt-4">
            <label class="cursor-pointer label justify-start gap-4">
              <span class="label-text">Enable Feedback Control</span>
              <input type="checkbox" class="toggle toggle-success" checked onchange="updateToggleColor(this); if('vibrate' in navigator) navigator.vibrate(15)" />
            </label>
          </div>
          
          <div class="alert alert-info mt-4">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>Constant Power mode uses feedback from the photodiode to maintain stable output power.</span>
          </div>
        </div>
      </div>
      
      <!-- Pattern Continuous Panel -->
      <div id="pattern-continuous-panel" class="card bg-base-200 shadow hidden">
        <div class="card-body bg-base-200 rounded-lg">
          <h2 class="card-title">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 12h6l4 8 4-16 4 8h6"/>
            </svg>
            Pattern Continuous Mode
          </h2>
          
          <div class="bg-base-200 rounded-lg p-6">
            <div class="flex items-center justify-center h-40">
              <div class="text-center">
                <svg class="w-16 h-16 mx-auto mb-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M12 2v20"/>
                  <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                </svg>
                <p class="text-lg font-bold">Coming Soon</p>
                <p class="text-sm mt-2">Pattern configuration interface under development</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Pattern Triggered Panel -->
      <div id="pattern-triggered-panel" class="card bg-base-200 shadow-xl border-l-4 border-l-warning hidden">
        <div class="card-body bg-base-200 rounded-lg">
          <h2 class="card-title text-warning">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M8 6l4-4 4 4"/>
              <path d="M12 3v9"/>
              <path d="M3 12h6l4 8 4-8h6"/>
            </svg>
            Pattern Triggered Mode
          </h2>
          
          <div class="bg-warning/5 border border-warning/20 rounded-lg p-6">
            <div class="flex items-center justify-center h-40">
              <div class="text-center">
                <svg class="w-16 h-16 mx-auto mb-4 text-warning opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M8 6l4-4 4 4"/>
                  <path d="M12 3v9"/>
                  <path d="M3 12h6l4 8 4-8h6"/>
                </svg>
                <p class="text-lg font-bold">Coming Soon</p>
                <p class="text-sm mt-2">Triggered pattern configuration interface under development</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- TTL Panel -->
      <div id="ttl-panel" class="card bg-base-200 shadow-xl border-l-4 border-l-info hidden">
        <div class="card-body bg-base-200 rounded-lg">
          <h2 class="card-title text-info">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M5 12h14"/>
              <path d="M5 12v7"/>
              <path d="M19 12v7"/>
              <path d="M5 5v7"/>
              <path d="M19 5v7"/>
            </svg>
            TTL Mode
          </h2>
          
          <div class="bg-info/5 border border-info/20 rounded-lg p-6">
            <div class="flex items-center justify-center h-40">
              <div class="text-center">
                <svg class="w-16 h-16 mx-auto mb-4 text-info opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M5 12h14"/>
                  <path d="M5 12v7"/>
                  <path d="M19 12v7"/>
                  <path d="M5 5v7"/>
                  <path d="M19 5v7"/>
                </svg>
                <p class="text-lg font-bold">Coming Soon</p>
                <p class="text-sm mt-2">TTL interface configuration under development</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Mod2Current Panel -->
      <div id="mod2current-panel" class="card bg-base-200 shadow-xl border-l-4 border-l-success hidden">
        <div class="card-body bg-base-200 rounded-lg">
          <h2 class="card-title text-success">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 3v18h18"/>
              <path d="M7 12l4-4 4 4 4-4"/>
            </svg>
            Mod2Current Mode
          </h2>
          
          <div class="bg-success/5 border border-success/20 rounded-lg p-4">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-4">
              <button class="btn btn-active" onclick="if('vibrate' in navigator) navigator.vibrate(15)">0-5V</button>
              <button class="btn" onclick="if('vibrate' in navigator) navigator.vibrate(15)">0-10V</button>
              <button class="btn" onclick="if('vibrate' in navigator) navigator.vibrate(15)">Custom</button>
            </div>
            
            <div class="form-control">
              <label class="label">
                <span class="label-text">Current Limit (A)</span>
                <span class="label-text-alt">7.5A</span>
              </label>
              <input type="range" min="0" max="10" value="7.5" step="0.1" class="range range-success" />
            </div>
          </div>
          
          <div class="alert alert-info mt-4">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>Mod2Current converts an analog input voltage to a proportional current output.</span>
          </div>
        </div>
      </div>
      
      <!-- Schmitt Trigger Panel -->
      <div id="schmitt-trigger-panel" class="card bg-base-200 shadow-xl border-l-4 border-l-error hidden">
        <div class="card-body bg-base-200 rounded-lg">
          <h2 class="card-title text-error">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M3 12h6l2-8 2 16 2-8h6"/>
            </svg>
            Schmitt Trigger Mode
          </h2>
          
          <div class="bg-error/5 border border-error/20 rounded-lg p-6">
            <div class="flex items-center justify-center h-40">
              <div class="text-center">
                <svg class="w-16 h-16 mx-auto mb-4 text-error opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M3 12h6l2-8 2 16 2-8h6"/>
                </svg>
                <p class="text-lg font-bold">Coming Soon</p>
                <p class="text-sm mt-2">Schmitt Trigger configuration interface under development</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      

      <!-- Advanced Parameters -->
        <div class="card bg-base-200 shadow-xl border-l-4 border-l-primary">
        <div class="card-body bg-base-200 rounded-lg">
          <h2 class="card-title">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"/>
              <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
              <path d="M12 2v2"/>
              <path d="M12 22v-2"/>
              <path d="m17 20.66-1-1.73"/>
              <path d="M11 10.27 7 3.34"/>
              <path d="m20.66 17-1.73-1"/>
              <path d="m3.34 7 1.73 1"/>
              <path d="M14 12h8"/>
              <path d="M2 12h2"/>
              <path d="m20.66 7-1.73 1"/>
              <path d="m3.34 17 1.73-1"/>
              <path d="m17 3.34-1 1.73"/>
              <path d="m11 13.73-4 6.93"/>
            </svg>
            Advanced Parameters
          </h2>
          
          <div class="form-control">
            <label class="label">
              <span class="label-text">Response Time</span>
            </label>
            <label class="select select-bordered w-full flex items-center">
              <svg class="w-4 h-4 opacity-70 absolute left-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
                <polyline points="12,6 12,12 16,14"/>
              </svg>
              <select class="pl-10">
                <option>Fast (High Bandwidth)</option>
                <option selected>Normal</option>
                <option>Slow (Low Noise)</option>
              </select>
            </label>
          </div>
          
          <div class="form-control mt-4">
            <label class="label">
              <span class="label-text">Stability Mode</span>
            </label>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
              <button class="btn btn-active" onclick="if('vibrate' in navigator) navigator.vibrate(15)">Normal</button>
              <button class="btn" onclick="if('vibrate' in navigator) navigator.vibrate(15)">High Stability</button>
              <button class="btn" onclick="if('vibrate' in navigator) navigator.vibrate(15)">Low Noise</button>
            </div>
          </div>
          
          <div class="flex flex-col sm:flex-row justify-end mt-4 gap-2">
            <button class="btn btn-outline" onclick="if('vibrate' in navigator) navigator.vibrate(15)">Save Preset</button>
            <button class="btn btn-primary" onclick="if('vibrate' in navigator) navigator.vibrate([100, 200, 100])">Apply</button>
          </div>
        </div>
      </div>
    </div>
  </div>

<script>
  // Toggle color management function
  function updateToggleColor(toggle: HTMLInputElement) {
    if (toggle.checked) {
      toggle.classList.remove('toggle-error');
      toggle.classList.add('toggle-success');
    } else {
      toggle.classList.remove('toggle-success');
      toggle.classList.add('toggle-error');
    }
  }

  document.addEventListener('DOMContentLoaded', function() {
    // Initialize toggle colors
    const toggles = document.querySelectorAll('.toggle');
    toggles.forEach(toggle => {
      updateToggleColor(toggle as HTMLInputElement);
    });

    // Tab switching logic
    const internalTab = document.getElementById('internal-tab');
    const externalTab = document.getElementById('external-tab');
    const internalModes = document.getElementById('internal-modes');
    const externalModes = document.getElementById('external-modes');
    
    // Mode panels
    const panels = {
      'cc': document.getElementById('cc-panel'),
      'cp': document.getElementById('cp-panel'),
      'pattern-continuous': document.getElementById('pattern-continuous-panel'),
      'pattern-triggered': document.getElementById('pattern-triggered-panel'),
      'ttl': document.getElementById('ttl-panel'),
      'mod2current': document.getElementById('mod2current-panel'),
      'schmitt-trigger': document.getElementById('schmitt-trigger-panel')
    };
    
    // Mode buttons
    const modeButtons = {
      'cc': document.getElementById('cc-tab'),
      'cp': document.getElementById('cp-tab'),
      'pattern-continuous': document.getElementById('pattern-continuous-tab'),
      'pattern-triggered': document.getElementById('pattern-triggered-tab'),
      'ttl': document.getElementById('ttl-tab'),
      'mod2current': document.getElementById('mod2current-tab'),
      'schmitt-trigger': document.getElementById('schmitt-trigger-tab')
    };
    
    // Show/hide panels
    function showPanel(panelId: string) {
      Object.values(panels).forEach(panel => panel?.classList.add('hidden'));
      panels[panelId as keyof typeof panels]?.classList.remove('hidden');
      
      // Update button states
      Object.values(modeButtons).forEach(btn => btn?.classList.remove('btn-active'));
      modeButtons[panelId as keyof typeof modeButtons]?.classList.add('btn-active');
    }
    
    // Tab switching
    if (internalTab && externalTab && internalModes && externalModes) {
      internalTab.addEventListener('click', function() {
        internalTab.classList.add('tab-active');
        externalTab.classList.remove('tab-active');
        internalModes.classList.remove('hidden');
        externalModes.classList.add('hidden');
        showPanel('cc'); // Show default internal mode
      });
      
      externalTab.addEventListener('click', function() {
        externalTab.classList.add('tab-active');
        internalTab.classList.remove('tab-active');
        externalModes.classList.remove('hidden');
        internalModes.classList.add('hidden');
        showPanel('ttl'); // Show default external mode
      });
    }
    
    // Mode button event listeners
    Object.entries(modeButtons).forEach(([mode, button]) => {
      if (button) {
        button.addEventListener('click', () => showPanel(mode));
      }
    });

    // Stability mode buttons
    const stabilityButtons = document.querySelectorAll('.grid .btn');
    stabilityButtons.forEach(btn => {
      btn.addEventListener('click', function(this: HTMLElement) {
        // Only update buttons in the same grid
        const grid = this.closest('.grid');
        if (grid) {
          grid.querySelectorAll('.btn').forEach(b => b.classList.remove('btn-active'));
          this.classList.add('btn-active');
        }
      });
    });
    
    // Initialize with Constant Current mode
    showPanel('cc');
  });
</script>