'use client';

import { Card } from '@/components/ui/card';
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from 'recharts';
import { WeatherData } from './weatherDataReducer';

interface WeatherChartsProps {
  weatherData: WeatherData[];
  timeRange: '24h' | '7d' | '30d';
}

export default function WeatherCharts({ weatherData, timeRange }: WeatherChartsProps) {
  // 根据时间范围调整图表高度
  const chartHeight = timeRange === '24h' ? 280 : 220;

  return (
    <div className="space-y-4">
      {/* 温度变化曲线 */}
      <Card className="p-6">
        <h3 className="mb-4">温度变化曲线</h3>
        <ResponsiveContainer width="100%" height={chartHeight}>
          <LineChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
            <XAxis
              dataKey="time"
              tick={{ fontSize: 12, fill: '#6b7280' }}
              label={{
                value: timeRange === '24h' ? '时间' : '日期',
                position: 'insideBottom',
                offset: -5,
                style: { fontSize: 12, fill: '#6b7280' }
              }}
            />
            <YAxis
              tick={{ fontSize: 12, fill: '#6b7280' }}
              label={{
                value: '温度 (°C)',
                angle: -90,
                position: 'insideLeft',
                style: { fontSize: 12, fill: '#6b7280' }
              }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: '#fff',
                border: '1px solid #e5e7eb',
                borderRadius: '6px'
              }}
              formatter={(value: number) => [`${value}°C`, '温度']}
            />
            <Line
              type="monotone"
              dataKey="temperature"
              stroke="#dc2626"
              strokeWidth={2}
              dot={{ fill: '#dc2626', r: 4 }}
              activeDot={{ r: 6 }}
            />
          </LineChart>
        </ResponsiveContainer>
      </Card>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* 湿度变化曲线 */}
        <Card className="p-6">
          <h3 className="mb-4">湿度变化曲线</h3>
          <ResponsiveContainer width="100%" height={220}>
            <LineChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
              <XAxis
                dataKey="time"
                tick={{ fontSize: 12, fill: '#6b7280' }}
              />
              <YAxis
                tick={{ fontSize: 12, fill: '#6b7280' }}
                label={{
                  value: '湿度 (%)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fontSize: 12, fill: '#6b7280' }
                }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #e5e7eb',
                  borderRadius: '6px'
                }}
                formatter={(value: number) => [`${value}%`, '湿度']}
              />
              <Line
                type="monotone"
                dataKey="humidity"
                stroke="#2563eb"
                strokeWidth={2}
                dot={{ fill: '#2563eb', r: 3 }}
              />
            </LineChart>
          </ResponsiveContainer>
        </Card>

        {/* 风速变化曲线 */}
        <Card className="p-6">
          <h3 className="mb-4">风速变化曲线</h3>
          <ResponsiveContainer width="100%" height={220}>
            <LineChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
              <XAxis
                dataKey="time"
                tick={{ fontSize: 12, fill: '#6b7280' }}
              />
              <YAxis
                tick={{ fontSize: 12, fill: '#6b7280' }}
                label={{
                  value: '风速 (m/s)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fontSize: 12, fill: '#6b7280' }
                }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #e5e7eb',
                  borderRadius: '6px'
                }}
                formatter={(value: number) => [`${value} m/s`, '风速']}
              />
              <Line
                type="monotone"
                dataKey="windSpeed"
                stroke="#06b6d4"
                strokeWidth={2}
                dot={{ fill: '#06b6d4', r: 3 }}
              />
            </LineChart>
          </ResponsiveContainer>
        </Card>

        {/* 降雨量统计 */}
        <Card className="p-6">
          <h3 className="mb-4">降雨量统计</h3>
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
              <XAxis
                dataKey="time"
                tick={{ fontSize: 12, fill: '#6b7280' }}
              />
              <YAxis
                tick={{ fontSize: 12, fill: '#6b7280' }}
                label={{
                  value: '降雨量 (mm)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fontSize: 12, fill: '#6b7280' }
                }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #e5e7eb',
                  borderRadius: '6px'
                }}
                formatter={(value: number) => [`${value} mm`, '降雨量']}
              />
              <Bar
                dataKey="rainfall"
                fill="#6366f1"
                radius={[4, 4, 0, 0]}
              />
            </BarChart>
          </ResponsiveContainer>
        </Card>

        {/* 光照强度曲线 */}
        <Card className="p-6">
          <h3 className="mb-4">光照强度曲线</h3>
          <ResponsiveContainer width="100%" height={220}>
            <LineChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
              <XAxis
                dataKey="time"
                tick={{ fontSize: 12, fill: '#6b7280' }}
              />
              <YAxis
                tick={{ fontSize: 12, fill: '#6b7280' }}
                label={{
                  value: '光照 (W/m²)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fontSize: 12, fill: '#6b7280' }
                }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #e5e7eb',
                  borderRadius: '6px'
                }}
                formatter={(value: number) => [`${value} W/m²`, '光照强度']}
              />
              <Line
                type="monotone"
                dataKey="sunlight"
                stroke="#eab308"
                strokeWidth={2}
                dot={{ fill: '#eab308', r: 3 }}
              />
            </LineChart>
          </ResponsiveContainer>
        </Card>
      </div>
    </div>
  );
}