'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { WeatherStatistics, WeatherData } from './weatherDataReducer';

interface WeatherAnalysisProps {
  statistics: WeatherStatistics | null;
  weatherData: WeatherData[];
}

export default function WeatherAnalysis({ statistics, weatherData }: WeatherAnalysisProps) {
  if (!statistics) {
    return (
      <Card className="p-8 text-center">
        <div className="text-muted-foreground">
          <p>暂无统计数据</p>
          <p className="text-sm mt-1">请等待数据加载完成</p>
        </div>
      </Card>
    );
  }

  const getTemperatureLevel = (temp: number) => {
    if (temp < 0) return { label: '严寒', color: 'text-blue-700' };
    if (temp < 10) return { label: '寒冷', color: 'text-blue-600' };
    if (temp < 20) return { label: '凉爽', color: 'text-green-600' };
    if (temp < 30) return { label: '温暖', color: 'text-orange-500' };
    return { label: '炎热', color: 'text-red-600' };
  };

  const getRainfallLevel = (rainfall: number) => {
    if (rainfall === 0) return { label: '无雨', color: 'text-gray-500' };
    if (rainfall < 10) return { label: '小雨', color: 'text-blue-400' };
    if (rainfall < 25) return { label: '中雨', color: 'text-blue-500' };
    if (rainfall < 50) return { label: '大雨', color: 'text-blue-600' };
    return { label: '暴雨', color: 'text-blue-700' };
  };

  const getWindLevel = (speed: number) => {
    if (speed < 1.6) return { label: '软风', color: 'text-green-500' };
    if (speed < 3.4) return { label: '轻风', color: 'text-green-600' };
    if (speed < 5.5) return { label: '微风', color: 'text-yellow-600' };
    if (speed < 8.0) return { label: '和风', color: 'text-orange-500' };
    if (speed < 10.8) return { label: '清风', color: 'text-orange-600' };
    return { label: '强风', color: 'text-red-600' };
  };

  const avgTemp = statistics.temperature.avg;
  const avgHumidity = statistics.other.avgHumidity;
  const totalRainfall = statistics.precipitation.total;

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* 温度统计 */}
        <Card className="p-6">
          <h3 className="mb-4">温度统计</h3>
          <div className="space-y-3 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">最高温度:</span>
              <span className="text-red-600 font-medium">{statistics.temperature.max}°C</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">最低温度:</span>
              <span className="text-blue-600 font-medium">{statistics.temperature.min}°C</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">平均温度:</span>
              <span className="font-medium">{statistics.temperature.avg}°C</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">温差:</span>
              <span className="font-medium">{statistics.temperature.range}°C</span>
            </div>
            <div className="flex justify-between items-center pt-2 border-t">
              <span className="text-muted-foreground">温度等级:</span>
              <Badge variant="outline" className={getTemperatureLevel(avgTemp).color}>
                {getTemperatureLevel(avgTemp).label}
              </Badge>
            </div>
          </div>
        </Card>

        {/* 降水统计 */}
        <Card className="p-6">
          <h3 className="mb-4">降水统计</h3>
          <div className="space-y-3 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">累计降雨:</span>
              <span className="text-blue-600 font-medium">{statistics.precipitation.total} mm</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">最大降雨:</span>
              <span className="font-medium">{statistics.precipitation.maxHourly} mm/3h</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">降雨时段:</span>
              <span className="font-medium">{statistics.precipitation.timeRange}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">降雨天数:</span>
              <span className="font-medium">{weatherData.filter(d => d.rainfall > 0).length} 天</span>
            </div>
            <div className="flex justify-between items-center pt-2 border-t">
              <span className="text-muted-foreground">降雨强度:</span>
              <Badge variant="outline" className={getRainfallLevel(totalRainfall).color}>
                {getRainfallLevel(totalRainfall).label}
              </Badge>
            </div>
          </div>
        </Card>

        {/* 风力统计 */}
        <Card className="p-6">
          <h3 className="mb-4">风力统计</h3>
          <div className="space-y-3 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">最大风速:</span>
              <span className="text-cyan-600 font-medium">{statistics.wind.maxSpeed} m/s</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">平均风速:</span>
              <span className="font-medium">{statistics.wind.avgSpeed} m/s</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">风力等级:</span>
              <span className="font-medium">{statistics.wind.level}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">主导风向:</span>
              <span className="font-medium">{statistics.wind.direction}</span>
            </div>
            <div className="flex justify-between items-center pt-2 border-t">
              <span className="text-muted-foreground">风力状态:</span>
              <Badge variant="outline" className={getWindLevel(statistics.wind.avgSpeed).color}>
                {getWindLevel(statistics.wind.avgSpeed).label}
              </Badge>
            </div>
          </div>
        </Card>
      </div>

      {/* 综合气象条件评价 */}
      <Card className="p-6">
        <h3 className="mb-4">气象条件综合评价</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-4 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg">
            <h4 className="text-green-900 dark:text-green-100 mb-2 font-medium">有利条件</h4>
            <ul className="text-sm text-green-800 dark:text-green-200 space-y-1">
              <li>• 温度适宜，{avgTemp >= 15 && avgTemp <= 25 ? '利于作物生长' : '温度条件一般'}</li>
              <li>• {statistics.other.totalSunlight > 1000 ? '光照充足，光合作用强' : '光照条件适中'}</li>
              <li>• {totalRainfall > 0 && totalRainfall < 50 ? '适量降雨，补充土壤水分' : totalRainfall === 0 ? '天气干燥，需要灌溉' : '降雨较多，注意排水'}</li>
              <li>• {avgHumidity >= 40 && avgHumidity <= 70 ? '湿度适中，有利于作物发育' : '湿度条件需要关注'}</li>
            </ul>
          </div>
          <div className="p-4 bg-orange-50 dark:bg-orange-950 border border-orange-200 dark:border-orange-800 rounded-lg">
            <h4 className="text-orange-900 dark:text-orange-100 mb-2 font-medium">注意事项</h4>
            <ul className="text-sm text-orange-800 dark:text-orange-200 space-y-1">
              <li>• {statistics.temperature.range > 15 ? '昼夜温差较大，注意保温措施' : '温差适中，作物适应性好'}</li>
              <li>• {statistics.wind.maxSpeed > 5 ? '风力较大，加固农业设施' : '风力条件良好'}</li>
              <li>• {statistics.other.avgPressure < 1000 ? '气压偏低，关注天气变化' : '气压稳定，天气状况良好'}</li>
              <li>• 密切关注未来天气变化趋势</li>
            </ul>
          </div>
        </div>
      </Card>

      {/* 农业生产建议 */}
      <Card className="p-6">
        <h3 className="mb-4">农业生产建议</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div className="p-4 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg">
            <h4 className="text-blue-900 dark:text-blue-100 mb-2 font-medium">播种建议</h4>
            <p className="text-sm text-blue-800 dark:text-blue-200">
              {avgTemp >= 15 && avgTemp <= 25 && totalRainfall < 30 ?
                '当前气象条件适宜播种，建议抓住有利时机进行播种作业' :
                '气象条件一般，建议等待更适宜的天气条件'
              }
            </p>
          </div>

          <div className="p-4 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg">
            <h4 className="text-green-900 dark:text-green-100 mb-2 font-medium">施肥建议</h4>
            <p className="text-sm text-green-800 dark:text-green-200">
              {avgHumidity >= 50 && avgHumidity <= 70 ?
                '湿度条件适宜，有利于肥料吸收和利用' :
                '湿度条件需要调节，建议结合灌溉进行施肥'
              }
            </p>
          </div>

          <div className="p-4 bg-purple-50 dark:bg-purple-950 border border-purple-200 dark:border-purple-800 rounded-lg">
            <h4 className="text-purple-900 dark:text-purple-100 mb-2 font-medium">病虫害防治</h4>
            <p className="text-sm text-purple-800 dark:text-purple-200">
              {statistics.wind.avgSpeed < 3 ?
                '风速较小，有利于喷药作业，建议进行病虫害防治' :
                '风力较大，不适合喷药作业，建议等待风力减小'
              }
            </p>
          </div>
        </div>

        {/* 气象风险等级 */}
        <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg">
          <h4 className="text-gray-900 dark:text-gray-100 mb-2 font-medium">气象风险等级</h4>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">综合风险:</span>
              <Badge
                variant={statistics.wind.maxSpeed > 8 || statistics.precipitation.total > 50 ? 'destructive' :
                       statistics.wind.maxSpeed > 5 || statistics.precipitation.total > 25 ? 'default' : 'secondary'}
                className="font-light"
              >
                {statistics.wind.maxSpeed > 8 || statistics.precipitation.total > 50 ? '高风险' :
                 statistics.wind.maxSpeed > 5 || statistics.precipitation.total > 25 ? '中等风险' : '低风险'}
              </Badge>
            </div>
            <div className="text-sm text-muted-foreground">
              建议密切关注天气变化，做好防范措施
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}