import React, { useState, useEffect } from 'react'
import { Tag, Spin, Tooltip } from 'antd'
import { CloudOutlined, SunOutlined, CloudRain, ThunderboltOutlined } from '@ant-design/icons'
import axios from 'axios'

function Weather() {
  const [weather, setWeather] = useState(null)
  const [loading, setLoading] = useState(true)

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

  const fetchWeather = async () => {
    try {
      const res = await axios.get('/api/weather/current?city=beijing')
      if (res.data.success) {
        setWeather(res.data.data)
      }
    } catch (err) {
      console.error('获取天气失败:', err)
    } finally {
      setLoading(false)
    }
  }

  const getWeatherIcon = (code) => {
    if (code === 0) return <SunOutlined style={{ color: '#faad14' }} />
    if ([95, 96, 99].includes(code)) return <ThunderboltOutlined style={{ color: '#722ed1' }} />
    if ([61, 63, 65, 80, 81, 82].includes(code)) return <CloudRainOutlined style={{ color: '#1890ff' }} />
    return <CloudOutlined style={{ color: '#8c8c8c' }} />
  }

  if (loading) {
    return <Spin size="small" />
  }

  if (!weather) {
    return null
  }

  return (
    <Tooltip title={`${weather.city} · 湿度 ${weather.current.humidity}% · 风速 ${weather.current.windSpeed}km/h`}>
      <Tag icon={getWeatherIcon(weather.current.code)} color="default" style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 8px', fontSize: 14 }}>
        <span>{weather.city}</span>
        <span style={{ fontWeight: 600 }}>{weather.current.temp}°C</span>
        <span>{weather.current.weather}</span>
        <span style={{ color: '#999', fontSize: 12 }}>H:{weather.daily.maxTemp}° L:{weather.daily.minTemp}°</span>
      </Tag>
    </Tooltip>
  )
}

export default Weather