<script>
  import { onMount, onDestroy } from 'svelte';
  
  export let flexradio = null;
  export let weather = null;
  export let latitude = null;
  export let longitude = null;
  export let windWarningThreshold = 30; // km/h
  export let gustWarningThreshold = 50; // km/h
  export let graylineWindow = 30; // minutes avant/après sunrise/sunset

  // FlexRadio status
  $: frequency = flexradio?.frequency || 0;
  $: mode = flexradio?.mode || '';
  $: txEnabled = flexradio?.tx || false;
  $: connected = flexradio?.connected || false;
  $: radioOn = flexradio?.radio_on || false;
  $: radioInfo = flexradio?.radio_info || '';
  $: callsign = flexradio?.callsign || '';
  $: model = flexradio?.model || '';
  $: activeSlices = flexradio?.active_slices || 0;

  // Grayline calculation
  let sunrise = null;
  let sunset = null;
  let isGrayline = false;
  let graylineType = ''; // 'sunrise' ou 'sunset'
  let timeToNextEvent = '';
  let currentTime = new Date();
  let clockInterval;

  // Update time every minute for grayline check
  onMount(() => {
    calculateSunTimes();
    clockInterval = setInterval(() => {
      currentTime = new Date();
      checkGrayline();
      updateTimeToNextEvent();
    }, 10000); // Update every 10 seconds
  });

  onDestroy(() => {
    if (clockInterval) clearInterval(clockInterval);
  });

  // Recalculate when location changes
  $: if (latitude && longitude) {
    calculateSunTimes();
  }

  // SunCalc algorithm (simplified version)
  function calculateSunTimes() {
    if (!latitude || !longitude) return;
    
    const now = new Date();
    const times = getSunTimes(now, latitude, longitude);
    sunrise = times.sunrise;
    sunset = times.sunset;
    checkGrayline();
    updateTimeToNextEvent();
  }

  $: console.log('FlexRadio status:', {
    connected,
    radioOn,
    frequency,
    activeSlices,
    radioInfo,
    callsign,
    model
  });

  // Simplified sun calculation (based on NOAA algorithm)
  function getSunTimes(date, lat, lon) {
    const rad = Math.PI / 180;
    const dayOfYear = getDayOfYear(date);
    
    // Fractional year
    const gamma = (2 * Math.PI / 365) * (dayOfYear - 1 + (date.getHours() - 12) / 24);
    
    // Equation of time (minutes)
    const eqTime = 229.18 * (0.000075 + 0.001868 * Math.cos(gamma) - 0.032077 * Math.sin(gamma)
                   - 0.014615 * Math.cos(2 * gamma) - 0.040849 * Math.sin(2 * gamma));
    
    // Solar declination (radians)
    const decl = 0.006918 - 0.399912 * Math.cos(gamma) + 0.070257 * Math.sin(gamma)
                 - 0.006758 * Math.cos(2 * gamma) + 0.000907 * Math.sin(2 * gamma)
                 - 0.002697 * Math.cos(3 * gamma) + 0.00148 * Math.sin(3 * gamma);
    
    // Hour angle for sunrise/sunset
    const latRad = lat * rad;
    const zenith = 90.833 * rad; // Official zenith for sunrise/sunset
    
    const cosHA = (Math.cos(zenith) / (Math.cos(latRad) * Math.cos(decl))) 
                  - Math.tan(latRad) * Math.tan(decl);
    
    // Check for polar day/night
    if (cosHA > 1 || cosHA < -1) {
      return { sunrise: null, sunset: null };
    }
    
    const ha = Math.acos(cosHA) / rad; // Hour angle in degrees
    
    // Sunrise and sunset times in minutes from midnight UTC
    const sunriseMinutes = 720 - 4 * (lon + ha) - eqTime;
    const sunsetMinutes = 720 - 4 * (lon - ha) - eqTime;
    
    // Convert to local Date objects
    const sunriseDate = new Date(date);
    sunriseDate.setUTCHours(0, 0, 0, 0);
    sunriseDate.setUTCMinutes(sunriseMinutes);
    
    const sunsetDate = new Date(date);
    sunsetDate.setUTCHours(0, 0, 0, 0);
    sunsetDate.setUTCMinutes(sunsetMinutes);
    
    return { sunrise: sunriseDate, sunset: sunsetDate };
  }

  function getDayOfYear(date) {
    const start = new Date(date.getFullYear(), 0, 0);
    const diff = date - start;
    const oneDay = 1000 * 60 * 60 * 24;
    return Math.floor(diff / oneDay);
  }

  function checkGrayline() {
    if (!sunrise || !sunset) {
      isGrayline = false;
      return;
    }
    
    const now = currentTime.getTime();
    const windowMs = graylineWindow * 60 * 1000;
    
    const nearSunrise = Math.abs(now - sunrise.getTime()) <= windowMs;
    const nearSunset = Math.abs(now - sunset.getTime()) <= windowMs;
    
    isGrayline = nearSunrise || nearSunset;
    graylineType = nearSunrise ? 'sunrise' : (nearSunset ? 'sunset' : '');
  }

  function updateTimeToNextEvent() {
    if (!sunrise || !sunset) {
      timeToNextEvent = '';
      return;
    }
    
    const now = currentTime.getTime();
    let nextEvent = null;
    let eventName = '';
    
    if (now < sunrise.getTime()) {
      nextEvent = sunrise;
      eventName = 'Sunrise';
    } else if (now < sunset.getTime()) {
      nextEvent = sunset;
      eventName = 'Sunset';
    } else {
      // After sunset, calculate tomorrow's sunrise
      const tomorrow = new Date(currentTime);
      tomorrow.setDate(tomorrow.getDate() + 1);
      const tomorrowTimes = getSunTimes(tomorrow, latitude, longitude);
      nextEvent = tomorrowTimes.sunrise;
      eventName = 'Sunrise';
    }
    
    if (nextEvent) {
      const diffMs = nextEvent.getTime() - now;
      const hours = Math.floor(diffMs / (1000 * 60 * 60));
      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      
      if (hours > 0) {
        timeToNextEvent = `${eventName} in ${hours}h${minutes.toString().padStart(2, '0')}m`;
      } else {
        timeToNextEvent = `${eventName} in ${minutes}m`;
      }
    }
  }

  function formatTime(date) {
    if (!date) return '--:--';
    return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
  }

  // Format frequency for display (MHz with appropriate decimals)
  function formatFrequency(freqMHz) {
    if (!freqMHz || freqMHz === 0) return '---';
    if (freqMHz < 10) {
      return freqMHz.toFixed(4);
    } else if (freqMHz < 100) {
      return freqMHz.toFixed(3);
    } else {
      return freqMHz.toFixed(2);
    }
  }

  // Get band from frequency
  function getBand(freqMHz) {
    if (!freqMHz || freqMHz === 0) return '';
    if (freqMHz >= 1.8 && freqMHz <= 2.0) return '160M';
    if (freqMHz >= 3.5 && freqMHz <= 4.0) return '80M';
    if (freqMHz >= 5.3 && freqMHz <= 5.4) return '60M';
    if (freqMHz >= 7.0 && freqMHz <= 7.3) return '40M';
    if (freqMHz >= 10.1 && freqMHz <= 10.15) return '30M';
    if (freqMHz >= 14.0 && freqMHz <= 14.35) return '20M';
    if (freqMHz >= 18.068 && freqMHz <= 18.168) return '17M';
    if (freqMHz >= 21.0 && freqMHz <= 21.45) return '15M';
    if (freqMHz >= 24.89 && freqMHz <= 24.99) return '12M';
    if (freqMHz >= 28.0 && freqMHz <= 29.7) return '10M';
    if (freqMHz >= 50.0 && freqMHz <= 54.0) return '6M';
    if (freqMHz >= 144.0 && freqMHz <= 148.0) return '2M';
    if (freqMHz >= 430.0 && freqMHz <= 440.0) return '70CM';
    return '';
  }

  // Weather alerts
  $: windSpeed = weather?.wind_speed || 0;
  $: windGust = weather?.wind_gust || 0;
  $: hasWindWarning = windSpeed >= windWarningThreshold;
  $: hasGustWarning = windGust >= gustWarningThreshold;
  $: hasAnyWarning = hasWindWarning || hasGustWarning;

  // Band colors
  function getBandColor(band) {
    const colors = {
      '160M': '#9c27b0',
      '80M': '#673ab7',
      '60M': '#3f51b5',
      '40M': '#2196f3',
      '30M': '#00bcd4',
      '20M': '#009688',
      '17M': '#4caf50',
      '15M': '#8bc34a',
      '12M': '#cddc39',
      '10M': '#ffeb3b',
      '6M': '#ff9800',
      '2M': '#ff5722',
      '70CM': '#f44336'
    };
    return colors[band] || '#4fc3f7';
  }

  $: currentBand = getBand(frequency);
  $: bandColor = getBandColor(currentBand);
  
  // Determine what to show for FlexRadio - MODIFIÉ
  $: showFrequency = radioOn && frequency > 0;
  $: showRadioOnNoSlice = radioOn && frequency === 0 && activeSlices === 0;
  $: showRadioOnWithSliceNoFreq = radioOn && frequency === 0 && activeSlices > 0;
  $: showNotConnected = !connected;
  $: showConnectedNoRadio = connected && !radioOn;
</script>

<div class="status-banner" class:has-warning={hasAnyWarning}>
  <!-- FlexRadio Section -->
  <div class="flex-section">
    <div class="flex-icon" class:connected={connected} class:disconnected={!connected}>
        📻
    </div>
    
    {#if showFrequency}
      <!-- Radio is on and has active slice with frequency -->
      <div class="frequency-display">
        <span class="frequency" style="--band-color: {bandColor}">
          {formatFrequency(frequency)}
        </span>
        <span class="unit">MHz</span>
      </div>
      
      {#if currentBand}
        <span class="band-badge" style="background-color: {bandColor}">
          {currentBand}
        </span>
      {/if}
      
      {#if mode}
        <span class="mode-badge">
          {mode}
        </span>
      {/if}

      <!-- AFFICHAGE TX - SEULEMENT SI TX EST VRAI -->
      {#if txEnabled}
        <span class="tx-indicator">
          TX
        </span>
      {/if}
               
    {:else if showRadioOnWithSliceNoFreq}
      <!-- Radio is on with slice but frequency is 0 (maybe slice just created) -->
      <div class="radio-status">
        <span class="radio-on-indicator">●</span>
        <span class="radio-status-text">Slice active, waiting for frequency...</span>
        {#if model}
          <span class="model-badge">{model}</span>
        {/if}
        {#if callsign}
          <span class="callsign-badge">{callsign}</span>
        {/if}
      </div>
      
    {:else if showRadioOnNoSlice}
      <!-- Radio is on but no active slice -->
      <div class="radio-status">
        <span class="radio-on-indicator">●</span>
        <span class="radio-status-text">{radioInfo || 'Radio is on'}</span>
        {#if model}
          <span class="model-badge">{model}</span>
        {/if}
        {#if callsign}
          <span class="callsign-badge">{callsign}</span>
        {/if}
      </div>
      
    {:else if showConnectedNoRadio}
      <!-- TCP connected but radio not responding -->
      <div class="radio-status">
        <span class="radio-off-indicator">○</span>
        <span class="radio-status-text">TCP connected, radio off</span>
      </div>
      
    {:else if showNotConnected}
      <!-- Not connected at all -->
      <span class="no-signal">FlexRadio not connected</span>
      
    {:else}
      <!-- Default/unknown state -->
      <span class="no-signal">Checking FlexRadio...</span>
    {/if}
  </div>


  <!-- Separator -->
  <div class="separator"></div>

  <!-- Grayline Section -->
  <div class="grayline-section">
    {#if latitude && longitude}
      <div class="sun-times">
        <span class="sun-item" title="Sunrise">
          <svg class="sun-icon sunrise-icon" width="18" height="18" viewBox="0 0 24 24">
            <!-- Horizon line -->
            <line x1="2" y1="18" x2="22" y2="18" stroke="currentColor" stroke-width="1.5" opacity="0.5"/>
            <!-- Sun (half visible) -->
            <path d="M12 18 A6 6 0 0 1 12 6 A6 6 0 0 1 12 18" fill="#fbbf24"/>
            <!-- Rays -->
            <path d="M12 2v3M5.6 5.6l2.1 2.1M2 12h3M19 12h3M18.4 5.6l-2.1 2.1" stroke="#fbbf24" stroke-width="2" stroke-linecap="round"/>
            <!-- Up arrow -->
            <path d="M12 14l-3 3M12 14l3 3M12 14v5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" fill="none"/>
          </svg>
          {formatTime(sunrise)}
        </span>
        <span class="sun-item" title="Sunset">
          <svg class="sun-icon sunset-icon" width="18" height="18" viewBox="0 0 24 24">
            <!-- Horizon line -->
            <line x1="2" y1="18" x2="22" y2="18" stroke="currentColor" stroke-width="1.5" opacity="0.5"/>
            <!-- Sun (half visible, setting) -->
            <path d="M12 18 A6 6 0 0 1 12 6 A6 6 0 0 1 12 18" fill="#f97316"/>
            <!-- Rays (dimmer) -->
            <path d="M12 2v3M5.6 5.6l2.1 2.1M2 12h3M19 12h3M18.4 5.6l-2.1 2.1" stroke="#f97316" stroke-width="2" stroke-linecap="round" opacity="0.7"/>
            <!-- Down arrow -->
            <path d="M12 22l-3-3M12 22l3-3M12 22v-5" stroke="#ef4444" stroke-width="2" stroke-linecap="round" fill="none"/>
          </svg>
          {formatTime(sunset)}
        </span>
      </div>
      
      {#if isGrayline}
        <span class="grayline-badge" class:sunrise={graylineType === 'sunrise'} class:sunset={graylineType === 'sunset'}>
          ✨ Grayline
        </span>
      {:else if timeToNextEvent}
        <span class="next-event">
          {timeToNextEvent}
        </span>
      {/if}
    {:else}
      <span class="no-location">📍 Position not set</span>
    {/if}
  </div>

  <!-- Separator -->
  <div class="separator"></div>

  <!-- Weather Alerts Section -->
  <div class="weather-section">
    {#if hasWindWarning}
      <div class="alert wind-alert">
        <span class="alert-icon">⚠️</span>
        <span class="alert-text">
          Vent: <strong>{windSpeed.toFixed(0)} km/h</strong>
        </span>
      </div>
    {/if}
    
    {#if hasGustWarning}
      <div class="alert gust-alert">
        <span class="alert-icon">🌪️</span>
        <span class="alert-text">
          Rafales: <strong>{windGust.toFixed(0)} km/h</strong>
        </span>
      </div>
    {/if}
    
    {#if !hasAnyWarning}
      <div class="status-ok">
        <span class="ok-icon">✓</span>
        <span class="ok-text">Weather OK</span>
      </div>
    {/if}
  </div>
</div>

<style>
  .status-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-bottom: 1px solid rgba(79, 195, 247, 0.15);
    gap: 20px;
    flex-wrap: wrap;
  }

  .status-banner.has-warning {
    background: linear-gradient(135deg, #1f1a12 0%, #29201b 50%, #2d1b0c 100%);
    border-bottom-color: #f59e0b;
  }

  /* FlexRadio Section */
  .flex-section {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .flex-icon {
    font-size: 20px;
    opacity: 0.8;
  }

  .flex-icon.connected {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(79, 195, 247, 0.6));
  }

  .flex-icon.disconnected {
    opacity: 0.4;
    filter: grayscale(1);
  }

  .frequency-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .frequency {
    font-size: 28px;
    font-weight: 300;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    color: var(--band-color, #4fc3f7);
    text-shadow: 0 0 15px var(--band-color, rgba(79, 195, 247, 0.5));
    letter-spacing: 1px;
  }

  .unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
  }

  .band-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    text-shadow: none;
  }

  .mode-badge {
    padding: 4px 10px;
    background: rgba(156, 39, 176, 0.3);
    border: 1px solid rgba(156, 39, 176, 0.5);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #ce93d8;
  }

  .tx-indicator {
    padding: 4px 10px;
    background: rgba(244, 67, 54, 0.3);
    border: 1px solid #f44336;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #f44336;
    text-shadow: 0 0 10px rgba(244, 67, 54, 0.8);
    animation: txPulse 0.5s ease-in-out infinite;
  }

  @keyframes txPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  .slice-waiting {
  color: #fbbf24; /* Jaune pour "en attente" */
  animation: pulse 1.5s infinite;
}

  /* Radio status indicators */
  .radio-status {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .radio-on-indicator {
    color: #22c55e;
    font-size: 16px;
    animation: pulse 2s infinite;
  }

  .radio-off-indicator {
    color: #ef4444;
    font-size: 16px;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .radio-status-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
  }

  .model-badge {
    padding: 3px 8px;
    background: rgba(79, 195, 247, 0.2);
    border: 1px solid rgba(79, 195, 247, 0.4);
    border-radius: 4px;
    font-size: 12px;
    color: #4fc3f7;
  }

  .callsign-badge {
    padding: 3px 8px;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #22c55e;
  }

  .no-signal {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    font-style: italic;
  }

  /* Separator */
  .separator {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
  }

  /* Grayline Section */
  .grayline-section {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .sun-times {
    display: flex;
    gap: 12px;
  }

  .sun-item {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .sun-icon {
    flex-shrink: 0;
  }

  .sunrise-icon {
    color: rgba(251, 191, 36, 0.6);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
  }

  .sunset-icon {
    color: rgba(249, 115, 22, 0.6);
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
  }

  .grayline-badge {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    animation: graylinePulse 1.5s ease-in-out infinite;
  }

  .grayline-badge.sunrise {
    background: linear-gradient(135deg, rgba(255, 183, 77, 0.3) 0%, rgba(255, 138, 101, 0.3) 100%);
    border: 1px solid rgba(255, 183, 77, 0.6);
    color: #ffcc80;
    text-shadow: 0 0 10px rgba(255, 183, 77, 0.8);
  }

  .grayline-badge.sunset {
    background: linear-gradient(135deg, rgba(255, 138, 101, 0.3) 0%, rgba(239, 83, 80, 0.3) 100%);
    border: 1px solid rgba(255, 138, 101, 0.6);
    color: #ffab91;
    text-shadow: 0 0 10px rgba(255, 138, 101, 0.8);
  }

  @keyframes graylinePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
  }

  .next-event {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
  }

  .no-location {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
  }

  /* Weather Section */
  .weather-section {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 6px;
    animation: alertPulse 2s ease-in-out infinite;
  }

  .wind-alert {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
  }

  .gust-alert {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
  }

  @keyframes alertPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }

  .alert-icon {
    font-size: 16px;
  }

  .alert-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
  }

  .alert-text strong {
    color: #fbbf24;
    font-weight: 700;
  }

  .gust-alert .alert-text strong {
    color: #f87171;
  }

  .status-ok {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 6px;
  }

  .ok-icon {
    color: #22c55e;
    font-weight: 700;
  }

  .ok-text {
    font-size: 13px;
    color: rgba(34, 197, 94, 0.9);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .status-banner {
      padding: 8px 16px;
      gap: 12px;
    }

    .frequency {
      font-size: 22px;
    }

    .separator {
      display: none;
    }

    .flex-section,
    .grayline-section,
    .weather-section {
      width: 100%;
      justify-content: center;
    }
  }
</style>