'use client'

import React, { useEffect, useState } from 'react'
import { wmoCodeToLabel, isGoodForFlying } from '@/lib/weather'
import type { WeatherData } from '@/lib/weather'

interface WeatherWidgetProps { lat: number; lng: number }

export function WeatherWidget({ lat, lng }: WeatherWidgetProps) {
  const [weather, setWeather] = useState<WeatherData | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    fetch(`/api/weather?lat=${lat}&lng=${lng}`)
      .then((r) => r.json())
      .then((d) => { setWeather(d); setLoading(false) })
      .catch(() => setLoading(false))
  }, [lat, lng])

  if (loading) return <div className="weather-widget weather-widget--loading"><span>Meteorologia…</span></div>
  if (!weather) return null

  const good = isGoodForFlying(weather)
  return (
    <div className="weather-widget" data-flyable={String(good)}>
      <span className="weather-temp">{Math.round(weather.temperature)}°C</span>
      <span className="weather-wind">💨 {Math.round(weather.windspeed)} km/h</span>
      <span className="weather-label">{wmoCodeToLabel(weather.weathercode)}</span>
      <span className="weather-status">{good ? '✅ Bom para voar' : '⚠️ Verificar condições'}</span>
    </div>
  )
}