'use client';

import { Card } from '@/components/ui/card';
import { WeatherForecast } from './weatherDataReducer';
import {
  Sun,
  Cloud,
  CloudRain,
  Wind,
} from 'lucide-react';

interface WeatherForecastProps {
  weatherForecast: WeatherForecast[];
}

export default function WeatherForecast({ weatherForecast }: WeatherForecastProps) {
  const getWeatherIcon = (icon: string) => {
    switch (icon) {
      case 'sun':
        return <Sun className="w-8 h-8" />;
      case 'cloud':
        return <Cloud className="w-8 h-8" />;
      case 'rain':
        return <CloudRain className="w-8 h-8" />;
      case 'wind':
        return <Wind className="w-8 h-8" />;
      default:
        return <Cloud className="w-8 h-8" />;
    }
  };

  const getIconColor = (weather: string) => {
    switch (weather) {
      case '晴':
        return 'text-yellow-500';
      case '多云':
        return 'text-gray-500';
      case '阴':
        return 'text-gray-600';
      case '小雨':
      case '中雨':
      case '大雨':
      case '暴雨':
        return 'text-blue-500';
      case '大风':
        return 'text-cyan-500';
      default:
        return 'text-gray-500';
    }
  };

  return (
    <div className="space-y-4">
      {/* 7天天气预报卡片 */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
        {weatherForecast.map((forecast, index) => (
          <Card
            key={index}
            className="p-4 text-center hover:bg-muted/50 transition-colors cursor-pointer"
          >
            <p className="text-sm font-medium mb-2">{forecast.day}</p>
            <div className={`flex justify-center mb-2 ${getIconColor(forecast.weather)}`}>
              {getWeatherIcon(forecast.icon)}
            </div>
            <p className="text-xs text-muted-foreground mb-1">{forecast.weather}</p>
            <p className="text-sm font-medium">{forecast.tempRange}</p>
            {forecast.description && (
              <p className="text-xs text-muted-foreground mt-2 line-clamp-2">
                {forecast.description}
              </p>
            )}
          </Card>
        ))}
      </div>

      {/* 趋势分析 */}
      <Card className="p-6">
        <h3 className="mb-4">未来7天趋势分析</h3>
        <div className="space-y-4">
          {/* 温度趋势图 */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div>
              <h4 className="text-sm font-medium mb-3">温度变化趋势</h4>
              <div className="relative h-32 border rounded-lg p-4 bg-gradient-to-b from-red-50 to-blue-50">
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-red-600">18°C</div>
                    <div className="text-sm text-muted-foreground">平均温度</div>
                    <div className="text-xs text-green-600 mt-1">↑ 3°C vs 昨日</div>
                  </div>
                </div>
                {/* 简化的趋势线 */}
                <svg className="absolute inset-0 w-full h-full" style={{ pointerEvents: 'none' }}>
                  <polyline
                    points="10,80 50,60 90,40 130,30 170,35 210,25 250,20"
                    fill="none"
                    stroke="#dc2626"
                    strokeWidth="2"
                    opacity="0.6"
                  />
                </svg>
              </div>
            </div>

            <div>
              <h4 className="text-sm font-medium mb-3">降水概率分析</h4>
              <div className="space-y-2">
                {[
                  { day: '明天', probability: 20 },
                  { day: '后天', probability: 80 },
                  { day: '周四', probability: 10 },
                  { day: '周五', probability: 30 },
                ].map((item, index) => (
                  <div key={index} className="flex items-center gap-3">
                    <span className="text-xs w-12">{item.day}</span>
                    <div className="flex-1 h-4 bg-muted rounded-full overflow-hidden">
                      <div
                        className={`h-full ${
                          item.probability > 60 ? 'bg-blue-500' :
                          item.probability > 30 ? 'bg-blue-400' : 'bg-green-400'
                        }`}
                        style={{ width: `${item.probability}%` }}
                      />
                    </div>
                    <span className="text-xs w-10 text-right">{item.probability}%</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 综合天气分析 */}
          <div className="p-4 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg">
            <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3">天气综合分析</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-800 dark:text-blue-200">
              <div>
                <p><strong>温度趋势：</strong>本周气温整体呈上升趋势，周末最高温度可达28°C</p>
                <p><strong>降水情况：</strong>周三有明显降水，其他时间以晴好天气为主</p>
              </div>
              <div>
                <p><strong>风力条件：</strong>周二风力较大，需注意防范</p>
                <p><strong>农业建议：</strong>适宜进行田间作业，注意周三排水防涝</p>
              </div>
            </div>
          </div>

          {/* 重要提醒 */}
          <div className="p-4 bg-amber-50 dark:bg-amber-950 border border-amber-200 dark:border-amber-800 rounded-lg">
            <h4 className="text-sm font-medium text-amber-900 dark:text-amber-100 mb-2">重要天气提醒</h4>
            <ul className="text-sm text-amber-800 dark:text-amber-200 space-y-1">
              <li>• 周二有大风天气，请加固农业设施</li>
              <li>• 周三有降雨，注意提前做好排水准备</li>
              <li>• 周末温度较高，注意作物防暑降温</li>
            </ul>
          </div>
        </div>
      </Card>
    </div>
  );
}