'use client'
import { useState, useEffect } from 'react'

const KENYA_COUNTIES = [
  'Nairobi','Kiambu','Nakuru','Kisumu','Meru','Nyeri','Machakos','Eldoret',
  'Kakamega','Mombasa','Kisii','Thika','Kitale','Muranga','Embu','Kirinyaga',
  'Nyandarua','Laikipia','Kericho','Bomet','Trans Nzoia','Uasin Gishu',
  'Bungoma','Kakamega','Vihiga','Siaya','Homa Bay','Migori','Nyamira',
  'Garissa','Isiolo','Marsabit','Mandera','Wajir','Turkana','Samburu',
  'Baringo','Nandi','Elgeyo Marakwet','West Pokot','Kajiado','Narok',
  'Makueni','Kitui','Tharaka Nithi','Taita Taveta','Kilifi','Kwale','Lamu'
]

const WMO_CODES: Record<number, { label: string; icon: string }> = {
  0: { label: 'Clear sky', icon: '☀️' },
  1: { label: 'Mainly clear', icon: '🌤️' },
  2: { label: 'Partly cloudy', icon: '⛅' },
  3: { label: 'Overcast', icon: '☁️' },
  45: { label: 'Foggy', icon: '🌫️' },
  48: { label: 'Foggy', icon: '🌫️' },
  51: { label: 'Light drizzle', icon: '🌦️' },
  61: { label: 'Light rain', icon: '🌧️' },
  63: { label: 'Moderate rain', icon: '🌧️' },
  65: { label: 'Heavy rain', icon: '🌧️' },
  80: { label: 'Rain showers', icon: '🌦️' },
  81: { label: 'Rain showers', icon: '🌦️' },
  82: { label: 'Heavy showers', icon: '⛈️' },
  95: { label: 'Thunderstorm', icon: '⛈️' },
  96: { label: 'Thunderstorm', icon: '⛈️' },
}

const getWeatherInfo = (code: number) => WMO_CODES[code] || { label: 'Variable', icon: '🌤️' }

const alertTypeConfig: Record<string, { bg: string; icon: string }> = {
  spray: { bg: 'bg-blue-50 border-blue-200', icon: '💧' },
  plant: { bg: 'bg-leaf-50 border-leaf-200', icon: '🌱' },
  harvest: { bg: 'bg-amber-50 border-amber-200', icon: '🌾' },
  irrigate: { bg: 'bg-sky-50 border-sky-200', icon: '🚿' },
  warning: { bg: 'bg-red-50 border-red-200', icon: '⚠️' },
  opportunity: { bg: 'bg-leaf-50 border-leaf-200', icon: '✅' },
}

const fungalRiskColors = {
  low: 'text-leaf-600 bg-leaf-50',
  medium: 'text-amber-600 bg-amber-50',
  high: 'text-red-600 bg-red-50',
}

export default function WeatherWidget() {
  const [county, setCounty] = useState('Nairobi')
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState<any>(null)
  const [error, setError] = useState<string | null>(null)
  const [locationLoading, setLocationLoading] = useState(false)
  const [userCoords, setUserCoords] = useState<{ lat: number; lon: number } | null>(null)

  const fetchWeather = async (countyName?: string, coords?: { lat: number; lon: number }) => {
    setLoading(true)
    setError(null)
    try {
      const res = await fetch('/api/weather', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          county: countyName || county,
          lat: coords?.lat,
          lon: coords?.lon,
        }),
      })
      const json = await res.json()
      if (json.error) throw new Error(json.error)
      setData(json)
    } catch (err) {
      setError('Failed to fetch weather. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  const getLocation = () => {
    setLocationLoading(true)
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const coords = { lat: pos.coords.latitude, lon: pos.coords.longitude }
        setUserCoords(coords)
        fetchWeather(undefined, coords)
        setLocationLoading(false)
      },
      () => {
        setLocationLoading(false)
        setError('Location access denied. Please select your county.')
      }
    )
  }

  useEffect(() => {
    fetchWeather('Nairobi')
  }, [])

  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

  return (
    <div className="px-4 py-5">
      <div className="animate-fade-up mb-5">
        <h2 className="font-display text-2xl font-bold text-soil-900 mb-1">Farm Weather</h2>
        <p className="text-soil-500 text-sm">7-day forecast with farming alerts.</p>
      </div>

      {/* Location selector */}
      <div className="flex gap-2 mb-4 animate-fade-up stagger-1">
        <select
          value={county}
          onChange={e => { setCounty(e.target.value); fetchWeather(e.target.value) }}
          className="flex-1 px-3 py-2.5 rounded-xl border border-soil-200 bg-white text-soil-800 text-sm focus:outline-none focus:ring-2 focus:ring-leaf-400"
          disabled={loading}
        >
          {KENYA_COUNTIES.map(c => <option key={c} value={c}>{c}</option>)}
        </select>
        <button
          onClick={getLocation}
          disabled={locationLoading || loading}
          className="px-3 py-2.5 rounded-xl border border-leaf-300 bg-leaf-50 text-leaf-700 text-sm font-medium flex items-center gap-1.5 active:scale-95 transition-transform disabled:opacity-60"
        >
          {locationLoading ? <div className="spinner !w-4 !h-4"/> : (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2"/>
              <path d="M12 2v3M12 19v3M2 12h3M19 12h3" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
            </svg>
          )}
          GPS
        </button>
      </div>

      {loading && (
        <div className="flex flex-col items-center justify-center py-16">
          <div className="spinner !w-8 !h-8"/>
          <p className="text-soil-400 text-sm mt-3">Loading weather...</p>
        </div>
      )}

      {error && <p className="text-red-600 text-sm bg-red-50 px-3 py-2 rounded-lg mb-4">{error}</p>}

      {data && !loading && (
        <div className="space-y-4 animate-fade-up">
          {/* Current weather hero */}
          <div className="shamba-card p-5 bg-gradient-to-br from-leaf-600 to-leaf-800 border-leaf-700 text-white">
            <div className="flex items-center justify-between mb-4">
              <div>
                <p className="text-leaf-200 text-sm font-medium">{data.county}</p>
                <p className="font-display font-bold text-4xl mt-0.5">
                  {Math.round(data.weather.current.temperature_2m)}°C
                </p>
                <p className="text-leaf-200 text-sm mt-1">
                  {getWeatherInfo(data.weather.current.weather_code).label}
                </p>
              </div>
              <div className="text-6xl">
                {getWeatherInfo(data.weather.current.weather_code).icon}
              </div>
            </div>
            <div className="flex gap-4 text-sm text-leaf-200">
              <span>💧 {data.weather.current.relative_humidity_2m}% humidity</span>
              <span>🌬️ {Math.round(data.weather.current.wind_speed_10m)} km/h</span>
              <span>🌧️ {data.weather.current.precipitation}mm</span>
            </div>
          </div>

          {/* AI Summary */}
          {data.farmingAdvice?.summary && (
            <div className="shamba-card p-4">
              <p className="text-sm text-soil-600">{data.farmingAdvice.summary}</p>
            </div>
          )}

          {/* Farming Alerts */}
          {data.farmingAdvice?.farmingAlerts && data.farmingAdvice.farmingAlerts.length > 0 && (
            <div>
              <p className="text-xs font-semibold text-soil-500 uppercase tracking-wide mb-2">🌾 Farming Alerts</p>
              <div className="space-y-2">
                {data.farmingAdvice.farmingAlerts.map((alert: any, i: number) => {
                  const config = alertTypeConfig[alert.type] || alertTypeConfig.opportunity
                  return (
                    <div key={i} className={`shamba-card p-3.5 flex items-start gap-3 ${config.bg}`}>
                      <span className="text-lg shrink-0">{config.icon}</span>
                      <div className="flex-1">
                        <p className="text-sm text-soil-700">{alert.message}</p>
                        {alert.urgent && (
                          <span className="text-[10px] font-bold text-red-600 uppercase tracking-wide mt-1 block">Urgent</span>
                        )}
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          )}

          {/* Fungal risk */}
          {data.farmingAdvice?.fungalRisk && (
            <div className="shamba-card p-4">
              <div className="flex items-center justify-between mb-2">
                <p className="text-xs font-semibold text-soil-500 uppercase tracking-wide">🍄 Fungal Disease Risk</p>
                <span className={`text-xs font-bold px-2 py-1 rounded-full capitalize ${fungalRiskColors[data.farmingAdvice.fungalRisk as keyof typeof fungalRiskColors]}`}>
                  {data.farmingAdvice.fungalRisk}
                </span>
              </div>
              <p className="text-sm text-soil-500">{data.farmingAdvice.fungalNote}</p>
            </div>
          )}

          {/* 7-day forecast */}
          <div>
            <p className="text-xs font-semibold text-soil-500 uppercase tracking-wide mb-2">7-Day Forecast</p>
            <div className="shamba-card overflow-hidden">
              {data.weather.daily.time.map((date: string, i: number) => {
                const d = new Date(date)
                const dayName = i === 0 ? 'Today' : i === 1 ? 'Tomorrow' : days[d.getDay()]
                const weatherInfo = getWeatherInfo(data.weather.daily.weather_code[i])
                const isSprayDay = data.farmingAdvice?.bestDaysToSpray?.includes(date)
                return (
                  <div key={i} className={`flex items-center px-4 py-3 ${i < data.weather.daily.time.length - 1 ? 'border-b border-gray-50' : ''}`}>
                    <span className="text-sm font-semibold text-soil-700 w-20">{dayName}</span>
                    <span className="text-xl mx-3">{weatherInfo.icon}</span>
                    <span className="text-xs text-soil-400 flex-1 truncate">{weatherInfo.label}</span>
                    {data.weather.daily.precipitation_sum[i] > 0 && (
                      <span className="text-xs text-blue-500 mr-2">🌧️ {data.weather.daily.precipitation_sum[i]}mm</span>
                    )}
                    <span className="text-xs text-soil-600 font-semibold w-20 text-right">
                      {Math.round(data.weather.daily.temperature_2m_min[i])}° / {Math.round(data.weather.daily.temperature_2m_max[i])}°
                    </span>
                    {isSprayDay && <span className="ml-2 text-[10px] text-leaf-600 font-bold bg-leaf-50 px-1.5 py-0.5 rounded-full">Spray</span>}
                  </div>
                )
              })}
            </div>
          </div>

          {/* Rain note */}
          {data.farmingAdvice?.rainNote && (
            <div className="shamba-card p-4 bg-blue-50 border-blue-200">
              <p className="text-xs font-semibold text-blue-600 uppercase tracking-wide mb-1">💧 Rain Forecast</p>
              <p className="text-sm text-blue-800">{data.farmingAdvice.rainNote}</p>
            </div>
          )}
        </div>
      )}
    </div>
  )
}