'use client'

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

type ZoneStatus = 'FREE' | 'CONDITIONAL' | 'FORBIDDEN'

interface Zone {
  id: string
  name: string
  status: ZoneStatus
  lowerLimit: { value: number; uom: string } | null
  upperLimit: { value: number; uom: string } | null
}

const STATUS_LABEL: Record<ZoneStatus, string> = {
  FREE: 'Livre',
  CONDITIONAL: 'Condicionada',
  FORBIDDEN: 'Proibida',
}

const STATUS_COLOR: Record<ZoneStatus, string> = {
  FREE: '#00B894',
  CONDITIONAL: '#F5A623',
  FORBIDDEN: '#FF4D5E',
}

type Filter = 'ALL' | ZoneStatus

export default function ZonasAnacPage() {
  const [zones, setZones] = useState<Zone[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [filter, setFilter] = useState<Filter>('ALL')

  useEffect(() => {
    fetch('/api/anac/zones')
      .then((r) => r.json())
      .then((geojson) => {
        const feats: Zone[] = (geojson.features ?? []).map((f: any) => ({
          id: f.properties?.id ?? '',
          name: f.properties?.name ?? '',
          status: f.properties?.status ?? 'FREE',
          lowerLimit: f.properties?.lowerLimit ?? null,
          upperLimit: f.properties?.upperLimit ?? null,
        }))
        setZones(feats)
      })
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  const counts = useMemo(() => ({
    total: zones.length,
    FREE: zones.filter((z) => z.status === 'FREE').length,
    CONDITIONAL: zones.filter((z) => z.status === 'CONDITIONAL').length,
    FORBIDDEN: zones.filter((z) => z.status === 'FORBIDDEN').length,
  }), [zones])

  const visible = useMemo(() => {
    let list = zones
    if (filter !== 'ALL') list = list.filter((z) => z.status === filter)
    if (search.trim()) {
      const q = search.trim().toLowerCase()
      list = list.filter((z) => z.name.toLowerCase().includes(q) || z.id.toLowerCase().includes(q))
    }
    return list
  }, [zones, filter, search])

  const fmtAlt = (lim: { value: number; uom: string } | null) =>
    lim ? `${lim.value} ${lim.uom}` : '—'

  return (
    <div className="info-page">
      <div className="info-hero">
        <div className="info-hero__inner">
          <div>
            <span className="info-hero__eyebrow">ANAC · Portugal</span>
            <h1 className="info-hero__title">Zonas de Voo ANAC</h1>
            <p className="info-hero__subtitle">
              Zonas de espaço aéreo para drones em Portugal, segundo o regulamento ANAC.
              Verifica sempre a fonte oficial antes de descolares.
            </p>
          </div>
        </div>
      </div>
      <div className="info-container">
        {!loading && zones.length > 0 && (
          <div className="info-stats">
            <div className="info-stat">
              <span className="info-stat-dot" style={{ background: '#6B7280' }} />
              {counts.total} zonas total
            </div>
            <div className="info-stat">
              <span className="info-stat-dot" style={{ background: STATUS_COLOR.FREE }} />
              {counts.FREE} livres
            </div>
            <div className="info-stat">
              <span className="info-stat-dot" style={{ background: STATUS_COLOR.CONDITIONAL }} />
              {counts.CONDITIONAL} condicionadas
            </div>
            <div className="info-stat">
              <span className="info-stat-dot" style={{ background: STATUS_COLOR.FORBIDDEN }} />
              {counts.FORBIDDEN} proibidas
            </div>
          </div>
        )}

        <div className="info-filters">
          <input
            className="info-search"
            type="search"
            placeholder="Pesquisar zona por nome ou ID…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
          <div className="info-pills">
            {(['ALL', 'FREE', 'CONDITIONAL', 'FORBIDDEN'] as const).map((f) => (
              <button
                key={f}
                className={`info-pill${filter === f ? ' active' : ''}`}
                onClick={() => setFilter(f)}
              >
                {f === 'ALL' ? 'Todas' : STATUS_LABEL[f]}
              </button>
            ))}
          </div>
        </div>

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

        {!loading && visible.length === 0 && (
          <div className="info-empty">Nenhuma zona encontrada.</div>
        )}

        {!loading && visible.length > 0 && (
          <div className="zone-grid">
            {visible.map((z) => (
              <div key={z.id} className="zone-card">
                <div className="zone-card-header">
                  <div className="zone-card-name">{z.name || z.id}</div>
                  <span className={`zone-badge ${z.status}`}>{STATUS_LABEL[z.status]}</span>
                </div>
                <div className="zone-card-meta">
                  {z.id && z.name && (
                    <div className="zone-card-row">
                      <strong>ID:</strong> {z.id}
                    </div>
                  )}
                  <div className="zone-card-row">
                    <strong>Alt. mínima:</strong> {fmtAlt(z.lowerLimit)} AGL
                  </div>
                  <div className="zone-card-row">
                    <strong>Alt. máxima:</strong> {fmtAlt(z.upperLimit)} AGL
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        <div className="info-disclaimer">
          <strong>Aviso:</strong> Esta informação é meramente indicativa e pode estar desactualizada.
          Consulta sempre as fontes oficiais da ANAC e verifica NOTAMs activos antes de operar qualquer drone.
          A OndeVoar.pt não substitui a consulta das autoridades competentes (ANAC, ANA, FAP).
        </div>
      </div>
    </div>
  )
}