---
// This is server-side - runs at build time
const pageTitle = "Monitoring";
---

<div class="flex flex-col gap-4">
  <h1 class="text-2xl font-bold">{pageTitle}</h1>
  
  <!-- Real-time Metrics -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="card bg-base-200 shadow-xl">
      <div class="card-body bg-base-200 rounded-lg">
        <h2 class="card-title">Temperature</h2>
        <div class="flex items-center justify-center h-40">
          <div class="text-center">
            <div class="radial-progress text-primary" style="--value:65; --size:8rem;" id="temp-progress">65%</div>
            <div class="mt-2" id="temp-reading">25.6°C</div>
          </div>
        </div>
        <div class="flex justify-between text-sm mt-2">
          <span>Min: <span id="temp-min">22.1°C</span></span>
          <span>Max: <span id="temp-max">28.3°C</span></span>
        </div>
      </div>
    </div>
    
    <div class="card bg-base-200 shadow-xl">
      <div class="card-body bg-base-200 rounded-lg">
        <h2 class="card-title">Current</h2>
        <div class="flex items-center justify-center h-40">
          <div class="text-center">
            <div class="radial-progress text-secondary" style="--value:42; --size:8rem;" id="current-progress">42%</div>
            <div class="mt-2" id="current-reading">125mA</div>
          </div>
        </div>
        <div class="flex justify-between text-sm mt-2">
          <span>Min: <span id="current-min">0mA</span></span>
          <span>Max: <span id="current-max">300mA</span></span>
        </div>
      </div>
    </div>
    
    <div class="card bg-base-200 shadow-xl">
      <div class="card-body bg-base-200 rounded-lg">
        <h2 class="card-title">Output Power</h2>
        <div class="flex items-center justify-center h-40">
          <div class="text-center">
            <div class="radial-progress text-accent" style="--value:50; --size:8rem;" id="power-progress">50%</div>
            <div class="mt-2" id="power-reading">500mW</div>
          </div>
        </div>
        <div class="flex justify-between text-sm mt-2">
          <span>Min: <span id="power-min">0mW</span></span>
          <span>Max: <span id="power-max">1000mW</span></span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- System Health -->
  <div class="card bg-base-200 shadow-xl">
    <div class="card-body bg-base-200 rounded-lg">
      <h2 class="card-title">System Health</h2>
      <div class="overflow-x-auto">
        <table class="table">
          <tbody>
            <tr>
              <td>CPU Temperature</td>
              <td class="w-full">
                <div class="flex items-center gap-2">
                  <div class="w-full h-4 bg-base-300 rounded-lg relative">
                    <div class="absolute inset-0 flex justify-between px-1 text-[10px] text-base-content z-10">
                      <span>0°C</span>
                      <span>30°C</span>
                      <span>60°C</span>
                      <span>90°C</span>
                      <span>120°C</span>
                    </div>
                    <div class="absolute top-0 bottom-0 left-0 rounded-lg" 
                         style="width: 35.25%; background: linear-gradient(90deg, #3b82f6 0%, #22c55e 37.5%, #f59e0b 75%, #ef4444 100%);" id="cpu-temp-bar">
                    </div>
                  </div>
                  <span id="cpu-temp">42.3°C</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>GaN Temperature</td>
              <td class="w-full">
                <div class="flex items-center gap-2">
                  <div class="w-full h-4 bg-base-300 rounded-lg relative">
                    <div class="absolute inset-0 flex justify-between px-1 text-[10px] text-base-content z-10">
                      <span>0°C</span>
                      <span>30°C</span>
                      <span>60°C</span>
                      <span>90°C</span>
                      <span>120°C</span>
                    </div>
                    <div class="absolute top-0 bottom-0 left-0 rounded-lg"
                         style="width: 54.8%; background: linear-gradient(90deg, #3b82f6 0%, #22c55e 37.5%, #f59e0b 75%, #ef4444 100%);" id="gan-temp-bar">
                    </div>
                  </div>
                  <span id="gan-temp">65.8°C</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>WiFi Signal Strength</td>
              <td class="w-full">
                <div class="flex items-center gap-2">
                  <div class="w-full h-4 bg-base-300 rounded-lg relative">
                    <div class="absolute inset-0 flex justify-between px-1 text-[10px] text-base-content z-10">
                      <span>-120dBm</span>
                      <span>-90dBm</span>
                      <span>-60dBm</span>
                      <span>-30dBm</span>
                      <span>0dBm</span>
                    </div>
                    <div class="absolute top-0 bottom-0 left-0 rounded-lg"
                         style="width: 65%; background: linear-gradient(90deg, #ef4444 0%, #f59e0b 40%, #22c55e 80%, #22c55e 100%);" id="wifi-signal-bar">
                    </div>
                  </div>
                  <span id="wifi-signal">-42dBm</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  
  <!-- Historical Data -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="card bg-base-200 shadow-xl">
      <div class="card-body bg-base-200 rounded-lg">
        <h2 class="card-title">Temperature History</h2>
        <div class="flex items-center justify-center h-64 bg-base-200 rounded-box">
          <p class="text-base-content opacity-50">Temperature Chart Placeholder</p>
        </div>
      </div>
    </div>
    
    <div class="card bg-base-200 shadow-xl">
      <div class="card-body bg-base-200 rounded-lg">
        <h2 class="card-title">Power Output History</h2>
        <div class="flex items-center justify-center h-64 bg-base-200 rounded-box">
          <p class="text-base-content opacity-50">Power Chart Placeholder</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Update radial progress values
    function updateRadialProgress(elementId: string, value: number) {
      const element = document.getElementById(elementId);
      if (element) {
        element.style.setProperty('--value', value.toString());
        element.textContent = value + '%';
      }
    }

    // Function to update monitoring values (called from WebSocket)
    (window as any).updateMonitoringValues = function(data: any) {
      if (data.temperature) {
        const tempProgress = Math.round((data.temperature / 100) * 100);
        updateRadialProgress('temp-progress', tempProgress);
        
        const tempReading = document.getElementById('temp-reading');
        if (tempReading) tempReading.textContent = data.temperature + '°C';
      }
      
      if (data.current) {
        const currentProgress = Math.round((data.current / 300) * 100);
        updateRadialProgress('current-progress', currentProgress);
        
        const currentReading = document.getElementById('current-reading');
        if (currentReading) currentReading.textContent = data.current + 'mA';
      }
      
      if (data.power) {
        const powerProgress = Math.round((data.power / 1000) * 100);
        updateRadialProgress('power-progress', powerProgress);
        
        const powerReading = document.getElementById('power-reading');
        if (powerReading) powerReading.textContent = data.power + 'mW';
      }
    };
  });
</script>