'use client';

import { Card } from '@/components/ui/card';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

interface DataTrendsProps {
  timeRange: '1h' | '6h' | '24h' | '7d';
  onTimeRangeChange: (value: '1h' | '6h' | '24h' | '7d') => void;
}

export function DataTrends({ timeRange, onTimeRangeChange }: DataTrendsProps) {
  const environmentData = [
    { time: '00:00', temperature: 18, humidity: 75, co2: 380, light: 0, pm25: 25 },
    { time: '03:00', temperature: 16, humidity: 80, co2: 390, light: 0, pm25: 22 },
    { time: '06:00', temperature: 15, humidity: 85, co2: 400, light: 5000, pm25: 20 },
    { time: '09:00', temperature: 20, humidity: 70, co2: 410, light: 35000, pm25: 28 },
    { time: '12:00', temperature: 25, humidity: 55, co2: 420, light: 50000, pm25: 35 },
    { time: '15:00', temperature: 24.5, humidity: 62, co2: 420, light: 45000, pm25: 35 },
    { time: '18:00', temperature: 22, humidity: 65, co2: 410, light: 15000, pm25: 30 },
    { time: '21:00', temperature: 19, humidity: 72, co2: 395, light: 0, pm25: 26 },
  ];

  return (
    <div className="space-y-4">
      <div className="flex gap-2">
        {(['1h', '6h', '24h', '7d'] as const).map((range) => (
          <button
            key={range}
            onClick={() => onTimeRangeChange(range)}
            className={`px-3 py-1 rounded-lg text-sm transition-colors ${
              timeRange === range
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted text-muted-foreground hover:bg-muted/80'
            }`}
          >
            {range === '1h' && '1小时'}
            {range === '6h' && '6小时'}
            {range === '24h' && '24小时'}
            {range === '7d' && '7天'}
          </button>
        ))}
      </div>

      <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={environmentData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" className="dark:stroke-gray-600" />
              <XAxis
                dataKey="time"
                tick={{ fontSize: 12, fill: '#6b7280' }}
                className="dark:fill-gray-400"
              />
              <YAxis
                tick={{ fontSize: 12, fill: '#6b7280' }}
                className="dark:fill-gray-400"
                label={{
                  value: '温度 (°C)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fontSize: 12, fill: '#6b7280' },
                  className: "dark:fill-gray-400"
                }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'var(--card)',
                  border: '1px solid var(--border)',
                  borderRadius: '6px'
                }}
                formatter={(value: number) => [`${value}°C`, '温度']}
              />
              <Line
                type="monotone"
                dataKey="temperature"
                stroke="#dc2626"
                strokeWidth={2}
                dot={{ fill: '#dc2626', r: 3 }}
              />
            </LineChart>
          </ResponsiveContainer>
        </Card>

        <Card className="p-6">
          <h3 className="mb-4">湿度变化曲线</h3>
          <ResponsiveContainer width="100%" height={220}>
            <LineChart data={environmentData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" className="dark:stroke-gray-600" />
              <XAxis
                dataKey="time"
                tick={{ fontSize: 12, fill: '#6b7280' }}
                className="dark:fill-gray-400"
              />
              <YAxis
                tick={{ fontSize: 12, fill: '#6b7280' }}
                className="dark:fill-gray-400"
                label={{
                  value: '湿度 (%)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fontSize: 12, fill: '#6b7280' },
                  className: "dark:fill-gray-400"
                }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'var(--card)',
                  border: '1px solid var(--border)',
                  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">CO₂浓度曲线</h3>
          <ResponsiveContainer width="100%" height={220}>
            <LineChart data={environmentData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" className="dark:stroke-gray-600" />
              <XAxis
                dataKey="time"
                tick={{ fontSize: 12, fill: '#6b7280' }}
                className="dark:fill-gray-400"
              />
              <YAxis
                tick={{ fontSize: 12, fill: '#6b7280' }}
                className="dark:fill-gray-400"
                label={{
                  value: 'CO₂ (ppm)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fontSize: 12, fill: '#6b7280' },
                  className: "dark:fill-gray-400"
                }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'var(--card)',
                  border: '1px solid var(--border)',
                  borderRadius: '6px'
                }}
                formatter={(value: number) => [`${value} ppm`, 'CO₂浓度']}
              />
              <Line
                type="monotone"
                dataKey="co2"
                stroke="#22c55e"
                strokeWidth={2}
                dot={{ fill: '#22c55e', r: 3 }}
              />
            </LineChart>
          </ResponsiveContainer>
        </Card>

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