<script>
  export let points = []
  export let currentAz = null
  export let currentEl = null
  export let size = 260
  export let satName = ''

  const cx = size / 2
  const cy = size / 2
  const r  = (size / 2) - 20

  function toXY(az, el) {
    const elC = Math.max(0, Math.min(90, el))
    const dist = r * (1 - elC / 90)
    const azRad = (az - 90) * Math.PI / 180
    return { x: cx + dist * Math.cos(azRad), y: cy + dist * Math.sin(azRad) }
  }

  $: trackPath = (() => {
    if (!points || points.length < 2) return ''
    const vis = points.filter(p => p.el >= 0)
    if (vis.length < 2) return ''
    return vis.map((p, i) => {
      const {x, y} = toXY(p.az, p.el)
      return (i === 0 ? 'M' : 'L') + `${x.toFixed(1)},${y.toFixed(1)}`
    }).join(' ')
  })()

  $: aosPoint = points?.length > 0 ? toXY(points[0].az, Math.max(0, points[0].el)) : null
  $: losPoint = points?.length > 0 ? toXY(points[points.length-1].az, Math.max(0, points[points.length-1].el)) : null
  $: currentPos = (currentAz !== null && currentEl !== null && currentEl >= 0) ? toXY(currentAz, currentEl) : null

  const compass = [
    { label: 'N', az: 0 }, { label: 'E', az: 90 },
    { label: 'S', az: 180 }, { label: 'O', az: 270 },
  ]
</script>

<svg width={size} height={size} viewBox="0 0 {size} {size}" class="polar">
  <!-- Background -->
  <circle cx={cx} cy={cy} r={r+18} fill="white" stroke="#e0e8f0" stroke-width="1"/>

  <!-- Elevation rings -->
  {#each [0, 30, 60, 90] as el}
    {@const rr = r * (1 - el / 90)}
    <circle cx={cx} cy={cy} r={rr}
      fill="none"
      stroke={el === 0 ? '#c0ccd8' : '#e8edf2'}
      stroke-width={el === 0 ? 1.5 : 1}
      stroke-dasharray={el === 0 ? 'none' : '3,4'}
    />
    {#if el > 0 && el < 90}
      <text x={cx + 4} y={cy - rr + 12} fill="#9ab0c8" font-size="9" font-family="Inter,sans-serif">{el}°</text>
    {/if}
  {/each}

  <!-- Azimuth spokes -->
  {#each [0,45,90,135,180,225,270,315] as az}
    {@const rad = (az - 90) * Math.PI / 180}
    <line x1={cx} y1={cy} x2={cx + r*Math.cos(rad)} y2={cy + r*Math.sin(rad)} stroke="#e8edf2" stroke-width="1"/>
  {/each}

  <!-- Compass labels -->
  {#each compass as {label, az}}
    {@const rad = (az - 90) * Math.PI / 180}
    <text x={cx + (r+13)*Math.cos(rad)} y={cy + (r+13)*Math.sin(rad) + 4}
      text-anchor="middle" fill="#4a6a8a"
      font-size="11" font-family="Inter,sans-serif" font-weight="700"
    >{label}</text>
  {/each}

  <!-- Track path -->
  {#if trackPath}
    <path d={trackPath} fill="none" stroke="#1a5a9a" stroke-width="2" opacity="0.8" stroke-linecap="round"/>
  {/if}

  <!-- AOS marker -->
  {#if aosPoint}
    <circle cx={aosPoint.x} cy={aosPoint.y} r="4" fill="#1a9a50"/>
    <text x={aosPoint.x+6} y={aosPoint.y+4} fill="#1a9a50" font-size="8" font-family="Inter,sans-serif" font-weight="600">AOS</text>
  {/if}

  <!-- LOS marker -->
  {#if losPoint}
    <circle cx={losPoint.x} cy={losPoint.y} r="4" fill="#e05030"/>
    <text x={losPoint.x+6} y={losPoint.y+4} fill="#e05030" font-size="8" font-family="Inter,sans-serif" font-weight="600">LOS</text>
  {/if}

  <!-- Current position -->
  {#if currentPos}
    <circle cx={currentPos.x} cy={currentPos.y} r="14" fill="none" stroke="#1a5a9a" stroke-width="1" opacity="0.3">
      <animate attributeName="r" from="8" to="18" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="opacity" from="0.5" to="0" dur="2s" repeatCount="indefinite"/>
    </circle>
    <circle cx={currentPos.x} cy={currentPos.y} r="5" fill="#1a5a9a"/>
    <circle cx={currentPos.x} cy={currentPos.y} r="2.5" fill="white"/>
  {/if}

  <!-- Center -->
  <circle cx={cx} cy={cy} r="2" fill="#c0ccd8"/>
  <line x1={cx-5} y1={cy} x2={cx+5} y2={cy} stroke="#c0ccd8" stroke-width="1"/>
  <line x1={cx} y1={cy-5} x2={cx} y2={cy+5} stroke="#c0ccd8" stroke-width="1"/>

  <!-- Sat name -->
  {#if satName}
    <text x={cx} y={size-6} text-anchor="middle" fill="#4a6a8a" font-size="10" font-family="Inter,sans-serif" font-weight="600">
      {satName.replace(' (ZARYA)','')}
    </text>
  {/if}
</svg>

<style>
  .polar { display:block; border-radius:50%; }
</style>