<script>
  import { trackedSat, trackedPosition, flexConnected, rotorConnected, skycatConnected, tleAge, settings, dopplerEnabled, rotorEnabled, soundEnabled } from '../stores/satstore.js'
  import { formatFreq, formatShift, formatRange, computeDopplerShift } from '../lib/utils.js'
  import { onMount, onDestroy } from 'svelte'

  let utcTime = ''
  let interval

  $: pos = $trackedPosition
  $: downShift = pos ? computeDopplerShift($settings.downlinkHz, pos.rangeRate) : 0
  $: upShift   = pos ? computeDopplerShift($settings.uplinkHz, -pos.rangeRate) : 0
  $: corrDown  = $settings.downlinkHz + downShift
  $: corrUp    = $settings.uplinkHz   + upShift

  onMount(() => { interval = setInterval(() => { utcTime = new Date().toUTCString().slice(17, 25) }, 500) })
  onDestroy(() => clearInterval(interval))
</script>

<header class="sb">
  <!-- Logo/clock -->
  <div class="sb-left">
    <span class="utc-label">UTC</span>
    <span class="utc-time">{utcTime}</span>
  </div>

  <!-- Sat info -->
  <div class="sb-sat">
    {#if $trackedSat}
      <span class="sat-name">{$trackedSat}</span>
      <span class="sat-sep">|</span>
      <span class="sat-data">AZ <b>{pos ? pos.az.toFixed(1)+'°' : '—'}</b></span>
      <span class="sat-data {pos?.el >= 0 ? 'el-up' : ''}">EL <b>{pos ? pos.el.toFixed(1)+'°' : '—'}</b></span>
      <span class="sat-sep">|</span>
      <span class="sat-data">Distance <b>{pos ? formatRange(pos.range) : '—'}</b></span>
      <span class="sat-data">Alt <b>{pos ? pos.alt.toFixed(0)+' km' : '—'}</b></span>
      <span class="sat-sep">|</span>
      <span class="sat-data {pos?.rangeRate < 0 ? 'approaching' : 'receding'}">
        {pos?.rangeRate < 0 ? '▼' : '▲'} <b>{pos ? Math.abs(Math.round(pos.rangeRate*3600)).toLocaleString('en-US')+' km/h' : '—'}</b>
      </span>
    {:else}
      <span class="no-sat">No satellite selected</span>
    {/if}
  </div>

  <!-- Doppler + connections -->
  <div class="sb-right">
    {#if $trackedSat && pos}
      <div class="doppler-box">
        <span class="d-label">↓ RX</span>
        <span class="d-freq">{formatFreq(corrDown)}</span>
        <span class="d-shift {downShift < 0 ? 'dpos' : 'dneg'}">{formatShift(downShift)}</span>
        {#if $settings.uplinkHz > 0}
          <span class="d-sep">|</span>
          <span class="d-label">↑ TX</span>
          <span class="d-freq">{formatFreq(corrUp)}</span>
          <span class="d-shift {upShift > 0 ? 'dpos' : 'dneg'}">{formatShift(upShift)}</span>
        {/if}
      </div>
    {/if}

    {#if ($settings.radioType === 'skycat' && $skycatConnected) || ($settings.radioType !== 'skycat' && $flexConnected)}
      <button class="doppler-toggle {$dopplerEnabled ? 'don' : 'doff'}" on:click={() => dopplerEnabled.update(v => !v)} title={$dopplerEnabled ? 'Doppler ON — click to disable' : 'Doppler OFF — click to enable'}>
        <span>⟳ DOPPLER {$dopplerEnabled ? 'ON' : 'OFF'}</span>
      </button>
    {/if}
    {#if $rotorConnected}
      <button class="doppler-toggle {$rotorEnabled ? 'don' : 'doff'}" on:click={() => rotorEnabled.update(v => !v)} title={$rotorEnabled ? 'Rotator tracking ON — click to disable' : 'Rotator tracking OFF — click to enable'}>
        <span>⤢ ROTATOR {$rotorEnabled ? 'ON' : 'OFF'}</span>
      </button>
    {/if}
    <button class="doppler-toggle {$soundEnabled ? 'don' : 'doff'}" on:click={() => soundEnabled.update(v => !v)} title={$soundEnabled ? 'AOS voice alerts ON — click to disable' : 'AOS voice alerts OFF — click to enable'}>
      <span>🔊 SOUND {$soundEnabled ? 'ON' : 'OFF'}</span>
    </button>
    <div class="conn-group">
      {#if $settings.radioType === 'skycat'}
        <div class="conn {$skycatConnected ? 'on' : 'off'}">
          <span class="conn-dot"></span>
          <span>SKYCAT</span>
        </div>
      {:else}
        <div class="conn {$flexConnected ? 'on' : 'off'}">
          <span class="conn-dot"></span>
          <span>FLEX</span>
        </div>
      {/if}
      <div class="conn {$rotorConnected ? 'on' : 'off'}">
        <span class="conn-dot"></span>
        <span>ROTOR</span>
      </div>
    </div>

    <div class="tle-info {$tleAge > 48 ? 'stale' : 'fresh'}">
      TLE {$tleAge !== null ? ($tleAge < 1 ? '<1h' : Math.floor($tleAge)+'h') : '…'}
    </div>
  </div>
</header>

<style>
  .sb {
    display:flex; align-items:center;
    height:46px; padding:0 14px;
    background:white;
    border-bottom:1px solid #e0e8f0;
    box-shadow:0 1px 4px rgba(0,0,0,0.06);
    flex-shrink:0; gap:16px;
    font-family:'Inter',system-ui,sans-serif;
  }

  .sb-left { display:flex; align-items:baseline; gap:6px; flex-shrink:0; }
  .utc-label { font-size:10px; color:#9ab0c8; font-weight:600; letter-spacing:.08em; }
  .utc-time  { font-size:14px; font-weight:700; color:#1a2a3a; font-family:'Inter',sans-serif; letter-spacing:-.02em; }

  .sb-sat { display:flex; align-items:center; gap:8px; flex:1; min-width:0; flex-wrap:wrap; }
  .sat-name { font-size:14px; font-weight:700; color:#1a5a9a; }
  .sat-sep  { color:#d0dce8; }
  .sat-data { font-size:12px; color:#5a7a9a; }
  .sat-data b { color:#1a2a3a; }
  .el-up b { color:#1a9a50 !important; }
  .approaching b { color:#1a9a50 !important; }
  .receding b    { color:#1a5a9a !important; }
  .no-sat { font-size:12px; color:#9ab0c8; }

  .sb-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }

  .doppler-box {
    display:flex; align-items:center; gap:6px;
    background:#f0f6ff; border:1px solid #c0d8f0;
    border-radius:8px; padding:4px 10px;
    font-size:11px;
  }
  .d-label { color:#6a9ab8; font-weight:600; }
  .d-freq  { color:#1a2a3a; font-weight:700; font-family:'Inter',sans-serif; }
  .d-shift { font-weight:700; font-family:'Inter',sans-serif; font-size:10px; }
  .d-sep   { color:#c0d0e0; }
  .dpos { color:#1a9a50; }
  .dneg { color:#e07a20; }

  .conn-group { display:flex; gap:6px; }
  .conn {
    display:flex; align-items:center; gap:4px;
    font-size:10px; font-weight:600; letter-spacing:.04em;
    padding:3px 8px; border-radius:20px;
  }
  .conn.on  { background:#e0f7ee; color:#1a7a40; }
  .conn.off { background:#f0f0f0; color:#9ab0c8; }
  .conn-dot { width:6px; height:6px; border-radius:50%; }
  .conn.on  .conn-dot { background:#1a9a50; box-shadow:0 0 4px #1a9a50; }
  .conn.off .conn-dot { background:#c0ccd8; }

  .tle-info { font-size:10px; font-weight:600; padding:3px 8px; border-radius:20px; }
  .tle-info.fresh { background:#e0f0ff; color:#1a5a9a; }

  .doppler-toggle {
    display:flex; align-items:center; gap:4px;
    font-size:10px; font-weight:700; padding:3px 10px;
    border-radius:20px; border:none; cursor:pointer;
    letter-spacing:.04em; transition:all .2s;
  }
  .doppler-toggle.don { background:#e0f7ee; color:#1a7a40; }
  .doppler-toggle.doff { background:#f0f0f0; color:#9ab0c8; text-decoration:line-through; }
  .doppler-toggle.don::before {
    content:''; display:inline-block;
    width:6px; height:6px; border-radius:50%;
    background:#1a9a50; margin-right:4px;
    animation:pulse-dot 1.5s infinite;
  }
  .tle-info.stale { background:#fff0e0; color:#9a5a1a; }
  @keyframes pulse-dot {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.4; transform:scale(0.7); }
  }
</style>