import React from 'react'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import { getServerSession } from 'next-auth'
import { authOptions } from '@/lib/auth'
import { getSpotDetail } from '@/lib/spots'
import { getAnacZones, getAnacED318Zones } from '@/lib/anac'
import { pointInPolygon } from '@/lib/geo'
import { SpotWeatherCard } from '@/components/spots/SpotWeatherCard'
import { SpotMiniMap } from '@/components/spots/SpotMiniMap'
import { SpotAnacAlert } from '@/components/spots/SpotAnacAlert'
import dynamic from 'next/dynamic'
const SpotForecastChart = dynamic(
  () => import('@/components/spots/SpotForecastChart').then((m) => m.SpotForecastChart),
  { ssr: false, loading: () => <div className="forecast-loading">A carregar previsão…</div> }
)
import './page.css'

interface SpotPageProps { params: { id: string } }

const ZONE_MAP: Record<string, { label: string; cls: string }> = {
  BEGINNER:     { label: 'Zona Livre',        cls: 'free'   },
  INTERMEDIATE: { label: 'Zona Condicionada', cls: 'cond'   },
  ADVANCED:     { label: 'Zona Proibida',     cls: 'banned' },
}

function starsStr(n: number) {
  const full = Math.round(n)
  return '★'.repeat(full) + '☆'.repeat(5 - full)
}

function timeAgo(date: Date): string {
  const diff = Date.now() - date.getTime()
  const d = Math.floor(diff / 86400000)
  if (d === 0) return 'hoje'
  if (d === 1) return 'há 1 dia'
  if (d < 7)  return `há ${d} dias`
  if (d < 14) return 'há 1 semana'
  if (d < 30) return `há ${Math.floor(d / 7)} semanas`
  if (d < 60) return 'há 1 mês'
  return `há ${Math.floor(d / 30)} meses`
}

function initials(name: string | null | undefined): string {
  if (!name) return '?'
  const parts = name.trim().split(' ')
  return (parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? '')
}

const AV_COLORS = ['#0096FF', '#00B894', '#3A4A5C', '#F5A623', '#E03345', '#6C63FF']

export async function generateMetadata({ params }: SpotPageProps): Promise<Metadata> {
  const spot = await getSpotDetail(params.id)
  if (!spot) return { title: 'Spot não encontrado — OndeVoar.pt' }
  return {
    title: `${spot.name} — OndeVoar.pt`,
    description: spot.description.slice(0, 160),
  }
}

export default async function SpotPage({ params }: SpotPageProps) {
  const [spot, zonesED269, zonesED318, session] = await Promise.all([
    getSpotDetail(params.id),
    getAnacZones().catch(() => []),
    getAnacED318Zones().catch(() => []),
    getServerSession(authOptions),
  ])
  if (!spot) notFound()

  const canEdit = session?.user
    ? session.user.id === spot.authorId ||
      session.user.role === 'ADMIN' ||
      session.user.role === 'MODERATOR'
    : false

  const allZones = [...zonesED269, ...zonesED318]
  const spotZones = allZones.filter((z) => pointInPolygon(spot.lat, spot.lng, z.geometry))

  const parseJsonField = (val: unknown): string[] => {
    if (Array.isArray(val)) return val as string[]
    if (typeof val === 'string') { try { const p = JSON.parse(val); return Array.isArray(p) ? p : [] } catch { return [] } }
    return []
  }
  // Remap old /uploads/ paths to /api/uploads/ (bypasses Apache direct-serve 403)
  const normalizeImgPath = (p: string) =>
    p.startsWith('/uploads/') ? `/api${p}` : p
  const images = parseJsonField(spot.images).map(normalizeImgPath)
  const tags   = parseJsonField(spot.tags)
  const zone   = ZONE_MAP[spot.difficulty] ?? { label: 'Zona Livre', cls: 'free' }

  const avgRating = spot.reviews.length > 0
    ? spot.reviews.reduce((s, r) => s + r.rating, 0) / spot.reviews.length
    : null

  const hasRestriction = spotZones.some((z) => z.status === 'CONDITIONAL' || z.status === 'FORBIDDEN')
  const hasForbidden   = spotZones.some((z) => z.status === 'FORBIDDEN')

  return (
    <div className="spot-page">
      {/* ── Aviso legal de zona restrita ── */}
      {hasRestriction && (
        <div className={`zone-disclaimer${hasForbidden ? ' zone-disclaimer--forbidden' : ' zone-disclaimer--conditional'}`}>
          <div className="zone-disclaimer-icon">{hasForbidden ? '⛔' : '⚠️'}</div>
          <div className="zone-disclaimer-body">
            <strong>
              {hasForbidden
                ? 'Este local encontra-se numa zona de voo proibida pela ANAC'
                : 'Este local encontra-se numa zona de voo condicionada pela ANAC'}
            </strong>
            <p>
              {hasForbidden
                ? 'O voo de drones nesta área não é permitido sem autorização especial. A OndeVoar.pt disponibiliza esta informação para fins de referência — a responsabilidade pelo cumprimento das regras de tráfego aéreo é exclusivamente do piloto. Consulta sempre a ANAC e os NOTAMs ativos antes de voar.'
                : 'O voo de drones nesta área requer autorização prévia ou está sujeito a condições especiais. A OndeVoar.pt disponibiliza esta informação para fins de referência — a responsabilidade pelo cumprimento das regras de tráfego aéreo é exclusivamente do piloto. Verifica os requisitos junto da ANAC antes de voar.'}
            </p>
            <a
              href="https://www.anac.pt/vPT/Generico/Drones/Paginas/Drones.aspx"
              target="_blank"
              rel="noopener noreferrer"
              className="zone-disclaimer-link"
            >
              Regras oficiais ANAC →
            </a>
          </div>
        </div>
      )}

      {/* ── Breadcrumb ── */}
      <div className="crumb">
        <Link href="/">Início</Link>
        <span>›</span>
        <Link href="/spots">Locais</Link>
        <span>›</span>
        <span className="crumb-current">{spot.name}</span>
      </div>

      {/* ── Gallery ── */}
      <div className={`gallery gallery--${Math.min(images.length, 5)}`}>
        {images[0] && <div className="g1" style={{ backgroundImage: `url(${images[0]})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />}
        {images[1] && <div className="g2" style={{ backgroundImage: `url(${images[1]})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />}
        {images[2] && <div className="g3" style={{ backgroundImage: `url(${images[2]})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />}
        {images[3] && <div className="g4" style={{ backgroundImage: `url(${images[3]})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />}
        {images[4] && (
          <div className="g5" style={{ backgroundImage: `url(${images[4]})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
            {images.length > 5 && <div className="gallery-more">+{images.length - 5} fotos</div>}
          </div>
        )}
      </div>

      {/* ── Main cols ── */}
      <div className="cols">
        {/* Left: info + reviews */}
        <div>
          <div className="title-row">
            <div>
              <h1>{spot.name}</h1>
              <p className="loc">📍 {spot.lat.toFixed(5)}, {Math.abs(spot.lng).toFixed(5)}°W</p>
            </div>
            <div className="title-row-right">
              <span className={`zone-chip zone-chip--${zone.cls}`}>
                <i className="zone-dot" />
                {zone.label}
              </span>
              {canEdit && (
                <Link href={`/spots/${spot.id}/editar`} className="btn-edit-spot">
                  Editar spot
                </Link>
              )}
            </div>
          </div>

          {avgRating !== null && (
            <div className="rating-row">
              <span className="stars">{starsStr(avgRating)}</span>
              <b>{avgRating.toFixed(1)}</b>
              <span>· {spot.reviews.length} {spot.reviews.length === 1 ? 'review' : 'reviews'} da comunidade</span>
            </div>
          )}

          <p className="lead">{spot.description}</p>

          {/* Forecast charts */}
          <div className="section">
            <h2>Previsão 7 dias</h2>
            <SpotForecastChart lat={spot.lat} lng={spot.lng} />
          </div>

          {/* Facts grid */}
          <div className="facts">
            <div className="fact">
              <div className="fact-key">Altitude máx.</div>
              <div className="fact-val mono">{spot.altitude != null ? `${spot.altitude} m` : 'n/d'}</div>
            </div>
            <div className="fact">
              <div className="fact-key">Coordenadas</div>
              <div className="fact-val mono">{spot.lat.toFixed(2)}°N {Math.abs(spot.lng).toFixed(2)}°W</div>
            </div>
            <div className="fact">
              <div className="fact-key">Nível</div>
              <div className="fact-val">{spot.difficulty === 'BEGINNER' ? 'Iniciante' : spot.difficulty === 'INTERMEDIATE' ? 'Intermédio' : 'Avançado'}</div>
            </div>
            <div className="fact">
              <div className="fact-key">Tags</div>
              <div className="fact-val">{tags.length > 0 ? tags.join(', ') : '—'}</div>
            </div>
          </div>

          {/* Reviews */}
          <div className="section">
            <div className="section-header">
              <h2>Reviews <span className="muted">· {spot.reviews.length}</span></h2>
              <Link href={`/spots/${spot.id}/review`} className="btn-ghost">Escrever review</Link>
            </div>

            {spot.reviews.length === 0 && (
              <p className="no-reviews">Ainda sem reviews. Sê o primeiro!</p>
            )}

            {spot.reviews.map((rev, i) => (
              <div key={rev.id} className="review-row">
                <div className="av" style={{ background: AV_COLORS[i % AV_COLORS.length] }}>
                  {initials(rev.author?.name)}
                </div>
                <div className="rev-body">
                  <div className="rev-top">
                    <span className="rev-name">{rev.author?.name ?? 'Anónimo'}</span>
                    <span className="rev-when">· {timeAgo(new Date(rev.createdAt))}</span>
                  </div>
                  <div className="rev-stars">{starsStr(rev.rating)}</div>
                  <p>{rev.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: sidebar */}
        <aside>
          {/* Mini-map card */}
          <div className="card">
            <h3 className="card-title">Localização</h3>
            <SpotMiniMap lat={spot.lat} lng={spot.lng} difficulty={spot.difficulty} />
            <div className="card-actions">
              <a href={`https://www.google.com/maps?q=${spot.lat},${spot.lng}`} target="_blank" rel="noopener noreferrer" className="btn-primary">Como chegar</a>
              <a href={`/mapa?lat=${spot.lat}&lng=${spot.lng}&zoom=14`} className="btn-ghost-full">Ver no mapa OndeVoar</a>
            </div>
          </div>

          {/* ANAC + NOTAM card */}
          <div className="card card-anac">
            <h3 className="card-title card-title-anac">Zonas ANAC &amp; NOTAMs</h3>
            <SpotAnacAlert
              zones={spotZones}
              spotAltitude={spot.altitude ?? null}
            />
          </div>

          {/* Weather card */}
          <div className="card">
            <h3 className="card-title">Meteorologia agora</h3>
            <SpotWeatherCard lat={spot.lat} lng={spot.lng} />
          </div>
        </aside>
      </div>
    </div>
  )
}