'use client';

import { Card } from '@/components/ui/card';
import { WeatherData } from './weatherDataReducer';
import {
  Thermometer,
  Droplets,
  Wind,
  CloudRain,
  Sun,
  Activity,
} from 'lucide-react';

interface RealtimeWeatherCardsProps {
  weatherData: WeatherData[];
}

export default function RealtimeWeatherCards({ weatherData }: RealtimeWeatherCardsProps) {
  // 获取最新的数据（最后一个数据点）
  const latestData = weatherData[weatherData.length - 1];

  // 如果没有数据，显示占位符
  if (!latestData) {
    return (
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <Card key={i} className="p-4 animate-pulse">
            <div className="flex items-center justify-between">
              <div className="space-y-2">
                <div className="h-3 bg-muted rounded w-16"></div>
                <div className="h-6 bg-muted rounded w-12"></div>
              </div>
              <div className="w-10 h-10 bg-muted rounded"></div>
            </div>
          </Card>
        ))}
      </div>
    );
  }

  // 计算变化趋势（与上一个数据点比较）
  const previousData = weatherData[weatherData.length - 2];
  const getTrend = (current: number, previous?: number) => {
    if (!previous) return null;
    const diff = current - previous;
    if (Math.abs(diff) < 0.1) return null;
    return diff > 0 ? 'up' : 'down';
  };

  const tempTrend = getTrend(latestData.temperature, previousData?.temperature);
  const humidityTrend = getTrend(latestData.humidity, previousData?.humidity);
  const windTrend = getTrend(latestData.windSpeed, previousData?.windSpeed);

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
      {/* 温度 */}
      <Card className="p-4 bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">温度</p>
            <p className="mt-2 text-2xl text-red-600 dark:text-red-400 font-semibold">
              {latestData.temperature}°C
            </p>
            {tempTrend && (
              <p className={`text-xs mt-1 ${tempTrend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
                {tempTrend === 'up' ? '↑' : '↓'} {Math.abs(latestData.temperature - (previousData?.temperature || 0)).toFixed(1)}°C
              </p>
            )}
          </div>
          <Thermometer className="w-10 h-10 text-red-600 dark:text-red-400 opacity-50" />
        </div>
      </Card>

      {/* 湿度 */}
      <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">湿度</p>
            <p className="mt-2 text-2xl text-blue-600 dark:text-blue-400 font-semibold">
              {latestData.humidity}%
            </p>
            {humidityTrend && (
              <p className={`text-xs mt-1 ${humidityTrend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
                {humidityTrend === 'up' ? '↑' : '↓'} {Math.abs(latestData.humidity - (previousData?.humidity || 0)).toFixed(0)}%
              </p>
            )}
          </div>
          <Droplets className="w-10 h-10 text-blue-600 dark:text-blue-400 opacity-50" />
        </div>
      </Card>

      {/* 风速 */}
      <Card className="p-4 bg-cyan-50 dark:bg-cyan-950 border-cyan-200 dark:border-cyan-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">风速</p>
            <p className="mt-2 text-2xl text-cyan-600 dark:text-cyan-400 font-semibold">
              {latestData.windSpeed} m/s
            </p>
            {windTrend && (
              <p className={`text-xs mt-1 ${windTrend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
                {windTrend === 'up' ? '↑' : '↓'} {Math.abs(latestData.windSpeed - (previousData?.windSpeed || 0)).toFixed(1)} m/s
              </p>
            )}
          </div>
          <Wind className="w-10 h-10 text-cyan-600 dark:text-cyan-400 opacity-50" />
        </div>
      </Card>

      {/* 降雨量 */}
      <Card className="p-4 bg-indigo-50 dark:bg-indigo-950 border-indigo-200 dark:border-indigo-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">降雨量</p>
            <p className="mt-2 text-2xl text-indigo-600 dark:text-indigo-400 font-semibold">
              {latestData.rainfall} mm
            </p>
            <p className="text-xs text-muted-foreground mt-1">
              {weatherData.length > 0 ? '今日累计' : '暂无数据'}
            </p>
          </div>
          <CloudRain className="w-10 h-10 text-indigo-600 dark:text-indigo-400 opacity-50" />
        </div>
      </Card>

      {/* 光照强度 */}
      <Card className="p-4 bg-yellow-50 dark:bg-yellow-950 border-yellow-200 dark:border-yellow-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">光照强度</p>
            <p className="mt-2 text-2xl text-yellow-600 dark:text-yellow-400 font-semibold">
              {latestData.sunlight}
            </p>
            <p className="text-xs text-muted-foreground mt-1">W/m²</p>
          </div>
          <Sun className="w-10 h-10 text-yellow-600 dark:text-yellow-400 opacity-50" />
        </div>
      </Card>

      {/* 气压 */}
      <Card className="p-4 bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs text-muted-foreground">气压</p>
            <p className="mt-2 text-2xl text-purple-600 dark:text-purple-400 font-semibold">
              {latestData.pressure}
            </p>
            <p className="text-xs text-muted-foreground mt-1">hPa</p>
          </div>
          <Activity className="w-10 h-10 text-purple-600 dark:text-purple-400 opacity-50" />
        </div>
      </Card>
    </div>
  );
}