import { useWeatherStore } from "@/store/weatherStore";
import { Cloud, CloudDrizzle, CloudFog, CloudLightning, CloudMoon, CloudRain, CloudSnow, CloudSun, MapPin, Moon, Sun, ThermometerSun } from "lucide-react";
import { formatTemperature } from "../lib/utils";

interface WeatherIconProps {
    description: string;
    isDay: string;
    className?: string;
}

function WeatherIcon({ description, isDay, className='w-16 h-16 md:w-20 md:h-20' }: WeatherIconProps) {
    const desc = description.toLowerCase();
    const isDaytime = isDay === 'yes';

    if(desc.includes('雨') || desc.includes('rain')) return <CloudRain className={className}/>
    if(desc.includes('雪') || desc.includes('snow')) return <CloudSnow className={className}/>
    if(desc.includes('雷') || desc.includes('thunderstorm')) return <CloudLightning className={className}/>
    if(desc.includes('fog') || desc.includes('雾')) return <CloudFog className={className}/>
    if(desc.includes('cloudy') || desc.includes('阴') || desc.includes('overcast')) return <Cloud className={className}/>
    if(desc.includes('heavy') || desc.includes('暴')) return <CloudDrizzle className={className}/>
    if(desc.includes('晴') || desc.includes('clear') || desc.includes('sunny')) return (
        isDaytime ? <Sun className={className}/> : <Moon className={className}/>
    )
    if(desc.includes('scattered') || desc.includes('多云') || desc.includes('partial')) return (
        isDaytime ? <CloudSun className={className}/> : <CloudMoon className={className}/>
    )
    return isDaytime ? <Sun className={className}/> : <Moon className={className}/>
}

export function WeatherDisplay(){
    const {currentWeather} = useWeatherStore();
    if (!currentWeather) return null;

    return (
        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 via-cyan-500 to-blue-600 dark:from-blue-600 dark:via-cyan-600 dark:to-blue-700 p-6 mb-4">
      <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
      <div className="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>

      <div className="relative z-10">
        <div className="flex items-start justify-between mb-6">
          <div>
            <h2 className="text-3xl font-semibold text-white mb-2">{currentWeather.location.name}</h2>
            <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-white/20 backdrop-blur-sm">
              <MapPin className="w-3 h-3 text-white/90" />
              <span className="text-sm text-white/90">{currentWeather.location.country}</span>
            </div>
          </div>
          <div className="text-white/90">
            <WeatherIcon
              description={currentWeather.current.weather_descriptions[0]}
              isDay={currentWeather.current.is_day}
            />
          </div>
        </div>

        <div className="flex items-baseline gap-2 mb-2">
          <span className="text-6xl font-light text-white">
            {formatTemperature(currentWeather.current.temperature)}
          </span>
          <span className="text-2xl text-white/80">°C</span>
        </div>
        <p className="text-lg text-white/90 font-medium mb-2 capitalize">
          {currentWeather.current.weather_descriptions[0]}
        </p>
        <div className="flex items-center gap-2 text-white/80 text-sm">
          <ThermometerSun className="w-4 h-4" />
          <span>体感 {formatTemperature(currentWeather.current.feelslike)}°C</span>
        </div>
      </div>
    </div>
    )
}