import React from 'react'
import type { AnacZone } from '@/lib/anac'

interface SpotAnacAlertProps {
  zones: AnacZone[]
  spotAltitude: number | null
}

const STATUS_META: Record<string, { label: string; color: string; bg: string; icon: string }> = {
  FREE:        { label: 'Zona Livre',        color: '#16a34a', bg: '#f0fdf4', icon: '✓' },
  CONDITIONAL: { label: 'Zona Condicionada', color: '#ca8a04', bg: '#fefce8', icon: '⚠' },
  FORBIDDEN:   { label: 'Zona Proibida',     color: '#dc2626', bg: '#fef2f2', icon: '✕' },
}

export function SpotAnacAlert({ zones, spotAltitude }: SpotAnacAlertProps) {
  const worst = zones.find((z) => z.status === 'FORBIDDEN')
    ?? zones.find((z) => z.status === 'CONDITIONAL')
    ?? zones[0]

  const noZones = zones.length === 0

  return (
    <div className="anac-alert">
      {noZones ? (
        <div className="anac-row anac-row--free">
          <span className="anac-icon">✓</span>
          <div>
            <strong>Sem restrições ANAC</strong>
            <p className="anac-sub">Nenhuma zona regulada detectada neste ponto.</p>
          </div>
        </div>
      ) : (
        <>
          {zones.map((z) => {
            const meta = STATUS_META[z.status] ?? STATUS_META.FREE
            return (
              <div
                key={z.id}
                className="anac-row"
                style={{ borderLeft: `3px solid ${meta.color}`, background: meta.bg }}
              >
                <span className="anac-icon" style={{ color: meta.color }}>{meta.icon}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <strong style={{ color: meta.color }}>{meta.label}</strong>
                  <span className="anac-zone-name"> · {z.name}</span>
                  {z.upperLimit && (
                    <span className="anac-limit"> até {z.upperLimit.value} {z.upperLimit.uom}</span>
                  )}
                  {z.message && <p className="anac-sub">{z.message}</p>}
                  {z.schedule && <p className="anac-sub">🕐 {z.schedule}</p>}
                  {z.authorityName && (
                    <p className="anac-sub">
                      {'Autoridade: '}
                      {z.authorityUrl
                        ? <a href={z.authorityUrl} target="_blank" rel="noopener noreferrer">{z.authorityName}</a>
                        : z.authorityName}
                    </p>
                  )}
                </div>
              </div>
            )
          })}
        </>
      )}

      <div className="anac-notam-strip">
        <span className="anac-notam-dot" />
        <span>
          Verifica sempre os <a href="/notams" target="_blank" rel="noopener noreferrer">NOTAMs ativos</a> antes de voar neste local.
        </span>
      </div>

      {spotAltitude != null && worst && worst.status !== 'FREE' && (
        <p className="anac-altitude-note">
          Alt. máx. no spot: <strong>{spotAltitude} m</strong>
          {worst.upperLimit ? ` · limite da zona: ${worst.upperLimit.value} ${worst.upperLimit.uom}` : ''}
        </p>
      )}

      <a
        href="https://www.anac.pt/vPT/Generico/Drones/Paginas/Drones.aspx"
        target="_blank"
        rel="noopener noreferrer"
        className="btn-ghost-full"
        style={{ display: 'block', textAlign: 'center', marginTop: 10 }}
      >
        Regras oficiais ANAC
      </a>
    </div>
  )
}