'use client'

import React, { useEffect, useState } from 'react'
import '../info.css'

interface Notam {
  id: string
  notamId: string
  title: string
  description: string | null
}

function stripHtml(html: string): string {
  return html
    .replace(/<br\s*\/?>/gi, '\n')
    .replace(/<\/?(pre|p|div)[^>]*>/gi, '\n')
    .replace(/<[^>]+>/g, '')
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&amp;/g, '&')
    .replace(/\n{3,}/g, '\n\n')
    .trim()
}

function ChevronIcon({ open }: { open: boolean }) {
  return (
    <svg
      className={`notam-card-toggle${open ? ' open' : ''}`}
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="6 9 12 15 18 9" />
    </svg>
  )
}

function NotamCard({ notam }: { notam: Notam }) {
  const [open, setOpen] = useState(false)
  const cleanDesc = notam.description ? stripHtml(notam.description) : null
  const titleClean = (notam.title ?? '').replace(notam.notamId + ': ', '')

  return (
    <div className="notam-card">
      <div className="notam-card-header" onClick={() => setOpen((v) => !v)}>
        <span className="notam-card-id">{notam.notamId}</span>
        <span className="notam-card-title">{titleClean || notam.notamId}</span>
        <ChevronIcon open={open} />
      </div>
      {open && cleanDesc && (
        <div className="notam-card-body">
          <pre className="notam-card-desc">{cleanDesc}</pre>
        </div>
      )}
    </div>
  )
}

export default function NotamsPage() {
  const [notams, setNotams] = useState<Notam[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)

  const load = () => {
    setLoading(true)
    setError(false)
    fetch('/api/notams')
      .then((r) => r.json())
      .then(({ notams: data }) => setNotams(data ?? []))
      .catch(() => setError(true))
      .finally(() => setLoading(false))
  }

  useEffect(() => { load() }, [])

  return (
    <div className="info-page">
      <div className="info-hero">
        <div className="info-hero__inner">
          <div>
            <span className="info-hero__eyebrow">Avisos activos · Portugal</span>
            <h1 className="info-hero__title">NOTAMs</h1>
            <p className="info-hero__subtitle">
              Avisos aos pilotos activos em Portugal. Dados do feed RSS notaminfo.com.
              {!loading && notams.length > 0 && ` ${notams.length} NOTAMs activos.`}
            </p>
          </div>
          <button className="info-hero__action" onClick={load} disabled={loading}>
            {loading ? 'A carregar…' : 'Actualizar'}
          </button>
        </div>
      </div>
      <div className="info-container">

        {loading && <div className="info-loading">A carregar NOTAMs…</div>}

        {!loading && error && (
          <div className="info-empty">Erro ao carregar NOTAMs. Tenta novamente.</div>
        )}

        {!loading && !error && notams.length === 0 && (
          <div className="info-empty">Sem NOTAMs activos de momento.</div>
        )}

        {!loading && !error && notams.length > 0 && (
          <div className="notam-list">
            {notams.map((n) => (
              <NotamCard key={n.id ?? n.notamId} notam={n} />
            ))}
          </div>
        )}

        <div className="info-disclaimer">
          <strong>Aviso:</strong> Os NOTAMs são informativos. Verifica sempre as fontes oficiais
          (AIP Portugal, ANA) e o sistema oficial de pré-notificação ANAC antes de voar.
          A validade e exactidão dos dados não é garantida pela OndeVoar.pt.
        </div>
      </div>
    </div>
  )
}