import { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Switch } from '../ui/switch';
import { Slider } from '../ui/slider';
import { Progress } from '../ui/progress';
import {
  Droplets,
  Power,
  Settings,
  Activity,
  Gauge,
  Zap,
  Battery,
  Sun,
  ThermometerSun,
  Waves,
  Beaker,
  Flask,
  TestTube,
  TrendingUp,
  Calendar,
  Download,
  RefreshCw,
  Play,
  Pause,
  AlertCircle,
  CheckCircle,
  XCircle,
  Eye,
  BarChart3,
  LineChart as LineChartIcon,
  MapPin,
  Layers,
} from 'lucide-react';
import { toast } from 'sonner@2.0.3';
import {
  LineChart,
  Line,
  AreaChart,
  Area,
  BarChart,
  Bar,
  ComposedChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RechartsTooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';

interface WaterFertilizerControlProps {
  activePath?: string;
}

type SystemStatus = '运行中' | '已停止' | '待机';
type ValveStatus = '开启' | '关闭' | '故障';

interface FertilizerTank {
  id: string;
  tankNo: string;
  name: string;
  fertilizer: string;
  concentration: number;
  ratio: number;
  currentLevel: number;
  flowRate: number;
}

interface WaterFertilizerMachine {
  id: string;
  name: string;
  ecValue: number;
  ecTarget: number;
  phValue: number;
  phTarget: number;
  status: SystemStatus;
}

interface Valve {
  id: string;
  valveNo: string;
  fieldName: string;
  location: string;
  status: ValveStatus;
  batteryVoltage: number;
  solarVoltage: number;
  pressure: number;
  flowRate: number;
  totalVolume: number;
}

interface SoilData {
  layer: string;
  depth: string;
  temperature: number;
  humidity: number;
}

interface RealtimeData {
  time: string;
  tankALevel: number;
  tankBLevel: number;
  tankCLevel: number;
  tankAFlow: number;
  tankBFlow: number;
  tankCFlow: number;
  ec: number;
  ph: number;
  pressure: number;
  flowRate: number;
  totalVolume: number;
}

interface HistoryData {
  date: string;
  tankAFlow: number;
  tankBFlow: number;
  tankCFlow: number;
  avgEc: number;
  avgPh: number;
  avgPressure: number;
  avgFlowRate: number;
}

export function WaterFertilizerControl({ activePath }: WaterFertilizerControlProps) {
  const [activeTab, setActiveTab] = useState('params');
  const [systemEnabled, setSystemEnabled] = useState(false);
  const [selectedValveId, setSelectedValveId] = useState('valve-1');
  const [historyDateRange, setHistoryDateRange] = useState('7');
  const [selectedMachineId, setSelectedMachineId] = useState('wf-001');
  const [isEditMode, setIsEditMode] = useState(false);

  // 水肥机设备列表
  const [machines, setMachines] = useState<WaterFertilizerMachine[]>([
    {
      id: 'wf-001',
      name: '1号大棚水肥一体机',
      ecValue: 2.35,
      ecTarget: 2.5,
      phValue: 6.8,
      phTarget: 6.5,
      status: '运行中',
    },
    {
      id: 'wf-002',
      name: '2号大棚水肥一体机',
      ecValue: 2.18,
      ecTarget: 2.3,
      phValue: 6.5,
      phTarget: 6.4,
      status: '待机',
    },
    {
      id: 'wf-003',
      name: '3号田块水肥一体机',
      ecValue: 2.52,
      ecTarget: 2.6,
      phValue: 6.9,
      phTarget: 6.7,
      status: '运行中',
    },
    {
      id: 'wf-004',
      name: '4号田块水肥一体机',
      ecValue: 2.08,
      ecTarget: 2.2,
      phValue: 6.3,
      phTarget: 6.2,
      status: '已停止',
    },
  ]);

  // 肥料桶数据（按水肥机分组）
  const [allTanks, setAllTanks] = useState<(FertilizerTank & { machineId: string })[]>([
    // 1号水肥机
    { id: 'tank-1-1', machineId: 'wf-001', tankNo: 'A', name: 'A肥料桶', fertilizer: '氮肥溶液', concentration: 15, ratio: 40, currentLevel: 320, flowRate: 8.5 },
    { id: 'tank-1-2', machineId: 'wf-001', tankNo: 'B', name: 'B肥料桶', fertilizer: '磷肥溶液', concentration: 12, ratio: 30, currentLevel: 180, flowRate: 6.2 },
    { id: 'tank-1-3', machineId: 'wf-001', tankNo: 'C', name: 'C肥料桶', fertilizer: '钾肥溶液', concentration: 18, ratio: 30, currentLevel: 425, flowRate: 6.8 },
    // 2号水肥机
    { id: 'tank-2-1', machineId: 'wf-002', tankNo: 'A', name: 'A肥料桶', fertilizer: '氮肥溶液', concentration: 16, ratio: 35, currentLevel: 285, flowRate: 7.2 },
    { id: 'tank-2-2', machineId: 'wf-002', tankNo: 'B', name: 'B肥料桶', fertilizer: '磷肥溶液', concentration: 14, ratio: 35, currentLevel: 215, flowRate: 5.8 },
    { id: 'tank-2-3', machineId: 'wf-002', tankNo: 'C', name: 'C肥料桶', fertilizer: '钾肥溶液', concentration: 17, ratio: 30, currentLevel: 380, flowRate: 6.5 },
    // 3号水肥机
    { id: 'tank-3-1', machineId: 'wf-003', tankNo: 'A', name: 'A肥料桶', fertilizer: '氮肥溶液', concentration: 14, ratio: 42, currentLevel: 295, flowRate: 8.8 },
    { id: 'tank-3-2', machineId: 'wf-003', tankNo: 'B', name: 'B肥料桶', fertilizer: '磷肥溶液', concentration: 13, ratio: 28, currentLevel: 165, flowRate: 5.5 },
    { id: 'tank-3-3', machineId: 'wf-003', tankNo: 'C', name: 'C肥料桶', fertilizer: '钾肥溶液', concentration: 19, ratio: 30, currentLevel: 445, flowRate: 7.2 },
    // 4号水肥机
    { id: 'tank-4-1', machineId: 'wf-004', tankNo: 'A', name: 'A肥料桶', fertilizer: '氮肥溶液', concentration: 15, ratio: 38, currentLevel: 310, flowRate: 0 },
    { id: 'tank-4-2', machineId: 'wf-004', tankNo: 'B', name: 'B肥料桶', fertilizer: '磷肥溶液', concentration: 12, ratio: 32, currentLevel: 195, flowRate: 0 },
    { id: 'tank-4-3', machineId: 'wf-004', tankNo: 'C', name: 'C肥料桶', fertilizer: '钾肥溶液', concentration: 18, ratio: 30, currentLevel: 405, flowRate: 0 },
  ]);

  // 阀门数据（按水肥机分组）
  const [allValves, setAllValves] = useState<(Valve & { machineId: string })[]>([
    // 1号水肥机的阀门
    { id: 'valve-1-1', machineId: 'wf-001', valveNo: 'V-01', fieldName: '1号大棚', location: '东区A01', status: '开启', batteryVoltage: 12.5, solarVoltage: 18.2, pressure: 2.8, flowRate: 25.6, totalVolume: 1450 },
    { id: 'valve-1-2', machineId: 'wf-001', valveNo: 'V-02', fieldName: '1号大棚-西侧', location: '东区A02', status: '关闭', batteryVoltage: 11.8, solarVoltage: 17.5, pressure: 0, flowRate: 0, totalVolume: 0 },
    // 2号水肥机的阀门
    { id: 'valve-2-1', machineId: 'wf-002', valveNo: 'V-03', fieldName: '2号大棚', location: '西区B01', status: '开启', batteryVoltage: 12.2, solarVoltage: 18.8, pressure: 2.6, flowRate: 23.2, totalVolume: 1280 },
    { id: 'valve-2-2', machineId: 'wf-002', valveNo: 'V-04', fieldName: '2号大棚-东侧', location: '西区B02', status: '关闭', batteryVoltage: 12.0, solarVoltage: 18.0, pressure: 0, flowRate: 0, totalVolume: 0 },
    // 3号水肥机的阀门
    { id: 'valve-3-1', machineId: 'wf-003', valveNo: 'V-05', fieldName: '3号田块', location: '南区C01', status: '开启', batteryVoltage: 12.8, solarVoltage: 19.2, pressure: 2.9, flowRate: 27.8, totalVolume: 1580 },
    { id: 'valve-3-2', machineId: 'wf-003', valveNo: 'V-06', fieldName: '3号田块-北侧', location: '南区C02', status: '开启', batteryVoltage: 12.3, solarVoltage: 18.5, pressure: 2.7, flowRate: 24.5, totalVolume: 1320 },
    // 4号水肥机的阀门
    { id: 'valve-4-1', machineId: 'wf-004', valveNo: 'V-07', fieldName: '4号田块', location: '北区D01', status: '故障', batteryVoltage: 10.5, solarVoltage: 15.2, pressure: 0, flowRate: 0, totalVolume: 0 },
    { id: 'valve-4-2', machineId: 'wf-004', valveNo: 'V-08', fieldName: '4号田块-南侧', location: '北区D02', status: '关闭', batteryVoltage: 11.5, solarVoltage: 17.0, pressure: 0, flowRate: 0, totalVolume: 0 },
  ]);

  // 土壤数据
  const [soilData] = useState<SoilData[]>([
    { layer: '表层', depth: '0-20cm', temperature: 22.5, humidity: 65 },
    { layer: '中层', depth: '20-40cm', temperature: 21.8, humidity: 72 },
    { layer: '深层', depth: '40-60cm', temperature: 21.2, humidity: 78 },
  ]);

  // 实时数据（最近2小时）
  const [realtimeData] = useState<RealtimeData[]>(() => {
    const data: RealtimeData[] = [];
    const now = new Date();
    for (let i = 120; i >= 0; i -= 5) {
      const time = new Date(now.getTime() - i * 60 * 1000);
      data.push({
        time: `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}`,
        tankALevel: 300 + Math.random() * 40,
        tankBLevel: 160 + Math.random() * 40,
        tankCLevel: 400 + Math.random() * 40,
        tankAFlow: 7 + Math.random() * 3,
        tankBFlow: 5 + Math.random() * 3,
        tankCFlow: 5.5 + Math.random() * 3,
        ec: 2.2 + Math.random() * 0.5,
        ph: 6.3 + Math.random() * 0.6,
        pressure: 2.3 + Math.random() * 0.8,
        flowRate: 20 + Math.random() * 10,
        totalVolume: 1200 + (120 - i) * 8,
      });
    }
    return data;
  });

  // 历史数据（最近7天）
  const [historyData] = useState<HistoryData[]>([
    { date: '10-09', tankAFlow: 180, tankBFlow: 145, tankCFlow: 155, avgEc: 2.4, avgPh: 6.5, avgPressure: 2.5, avgFlowRate: 24.5 },
    { date: '10-10', tankAFlow: 195, tankBFlow: 160, tankCFlow: 165, avgEc: 2.5, avgPh: 6.6, avgPressure: 2.6, avgFlowRate: 26.2 },
    { date: '10-11', tankAFlow: 175, tankBFlow: 140, tankCFlow: 150, avgEc: 2.3, avgPh: 6.4, avgPressure: 2.4, avgFlowRate: 23.8 },
    { date: '10-12', tankAFlow: 205, tankBFlow: 170, tankCFlow: 175, avgEc: 2.6, avgPh: 6.7, avgPressure: 2.7, avgFlowRate: 27.5 },
    { date: '10-13', tankAFlow: 165, tankBFlow: 130, tankCFlow: 140, avgEc: 2.2, avgPh: 6.3, avgPressure: 2.3, avgFlowRate: 22.8 },
    { date: '10-14', tankAFlow: 210, tankBFlow: 175, tankCFlow: 180, avgEc: 2.7, avgPh: 6.8, avgPressure: 2.8, avgFlowRate: 28.2 },
    { date: '10-15', tankAFlow: 190, tankBFlow: 155, tankCFlow: 160, avgEc: 2.5, avgPh: 6.6, avgPressure: 2.6, avgFlowRate: 25.8 },
  ]);

  // 根据路径自动切换Tab
  useEffect(() => {
    if (activePath) {
      if (activePath.includes('/params')) {
        setActiveTab('params');
      } else if (activePath.includes('/tank-realtime')) {
        setActiveTab('tank-realtime');
      } else if (activePath.includes('/valve-control')) {
        setActiveTab('valve-control');
      } else if (activePath.includes('/valve-realtime')) {
        setActiveTab('valve-realtime');
      } else if (activePath.includes('/fertilizer-history')) {
        setActiveTab('fertilizer-history');
      } else if (activePath.includes('/valve-history')) {
        setActiveTab('valve-history');
      }
    }
  }, [activePath]);

  // 切换水肥机时，更新选中的阀门为当前水肥机的第一个阀门
  useEffect(() => {
    const currentMachineValves = allValves.filter(v => v.machineId === selectedMachineId);
    if (currentMachineValves.length > 0 && !currentMachineValves.find(v => v.id === selectedValveId)) {
      setSelectedValveId(currentMachineValves[0].id);
    }
  }, [selectedMachineId, allValves, selectedValveId]);

  // 根据选中的水肥机筛选数据
  const tanks = allTanks.filter(tank => tank.machineId === selectedMachineId);
  const valves = allValves.filter(valve => valve.machineId === selectedMachineId);
  const machine = machines.find(m => m.id === selectedMachineId) || machines[0];
  const selectedValve = valves.find(v => v.id === selectedValveId) || valves[0];

  const getValveStatusColor = (status: ValveStatus) => {
    switch (status) {
      case '开启': return 'bg-success-muted text-success-muted-foreground';
      case '关闭': return 'bg-muted text-muted-foreground';
      case '故障': return 'bg-error-muted text-error-muted-foreground';
      default: return 'bg-muted text-muted-foreground';
    }
  };

  const handleSystemToggle = (enabled: boolean) => {
    setSystemEnabled(enabled);
    setMachines(machines.map(m => 
      m.id === selectedMachineId 
        ? { ...m, status: enabled ? '运行中' : '已停止' }
        : m
    ));
    toast.success(`${machine.name} ${enabled ? '已启动' : '已停止'}`);
  };

  const handleTankUpdate = (tankId: string, field: keyof FertilizerTank, value: string | number) => {
    setAllTanks(allTanks.map(t => t.id === tankId ? { ...t, [field]: value } : t));
  };

  const handleMachineUpdate = (field: keyof WaterFertilizerMachine, value: number) => {
    setMachines(machines.map(m => 
      m.id === selectedMachineId 
        ? { ...m, [field]: value }
        : m
    ));
  };

  const handleValveToggle = (valveId: string) => {
    const valve = allValves.find(v => v.id === valveId);
    if (!valve) return;

    if (valve.status === '故障') {
      toast.error('阀门故障，无法操作');
      return;
    }

    const newStatus: ValveStatus = valve.status === '开启' ? '关闭' : '开启';
    setAllValves(allValves.map(v => v.id === valveId ? { ...v, status: newStatus } : v));
    toast.success(`${valve.valveNo} 已${newStatus === '开启' ? '开启' : '关闭'}`);
  };

  const handleEditParams = () => {
    setIsEditMode(true);
    toast.info('进入编辑模式', {
      description: '现在可以修改肥料参数配置',
    });
  };

  const handleSaveParams = () => {
    // 保存肥料参数配置
    setIsEditMode(false);
    toast.success(`${machine.name} 参数配置已保存`, {
      description: '肥料桶参数和EC/PH目标值已更新',
    });
  };

  const handleCancelEdit = () => {
    setIsEditMode(false);
    toast.info('已取消编辑');
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2>水肥控制</h2>
          <p className="text-sm text-muted-foreground mt-1">
            施肥参数配置、实时监测、阀门控制、历史数据分析
          </p>
        </div>
      </div>

      {/* 水肥机选择 */}
      <Card className="p-4">
        <div className="flex items-center gap-4">
          <Label>选择水肥机设备</Label>
          <Select value={selectedMachineId} onValueChange={setSelectedMachineId}>
            <SelectTrigger className="w-96">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {machines.map((machine) => (
                <SelectItem key={machine.id} value={machine.id}>
                  {machine.name}
                  <Badge className="ml-2 bg-success-muted text-success-muted-foreground" variant="outline">
                    {machine.status}
                  </Badge>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <div className="text-sm text-muted-foreground">
            当前设备：<span className="text-foreground">{machine.name}</span>
          </div>
        </div>
      </Card>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">系统状态</p>
              <p className="mt-2 text-3xl text-green-600">
                {machine.status === '运行中' ? '运行' : '停止'}
              </p>
              <p className="text-xs text-green-600 mt-1">{machine.name}</p>
            </div>
            <Activity className={`w-12 h-12 ${machine.status === '运行中' ? 'text-green-600 animate-pulse' : 'text-gray-400'} opacity-50`} />
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">当前EC值</p>
              <p className="mt-2 text-3xl text-blue-600">{machine.ecValue}</p>
              <p className="text-xs text-blue-600 mt-1">mS/cm (目标:{machine.ecTarget})</p>
            </div>
            <Zap className="w-12 h-12 text-blue-600 opacity-50" />
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">当前PH值</p>
              <p className="mt-2 text-3xl text-purple-600">{machine.phValue}</p>
              <p className="text-xs text-purple-600 mt-1">pH (目标:{machine.phTarget})</p>
            </div>
            <TestTube className="w-12 h-12 text-purple-600 opacity-50" />
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-muted-foreground">开启阀门</p>
              <p className="mt-2 text-3xl text-orange-600">
                {valves.filter(v => v.status === '开启').length}
              </p>
              <p className="text-xs text-orange-600 mt-1">/ {valves.length} 个阀门</p>
            </div>
            <Droplets className="w-12 h-12 text-orange-600 opacity-50" />
          </div>
        </Card>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-6">
          <TabsTrigger value="params">施肥参数</TabsTrigger>
          <TabsTrigger value="tank-realtime">肥料桶实时</TabsTrigger>
          <TabsTrigger value="valve-control">阀门控制</TabsTrigger>
          <TabsTrigger value="valve-realtime">电动阀实时</TabsTrigger>
          <TabsTrigger value="fertilizer-history">施肥历史</TabsTrigger>
          <TabsTrigger value="valve-history">阀门历史</TabsTrigger>
        </TabsList>

        {/* 施肥参数设置 */}
        <TabsContent value="params" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-green-50 to-teal-50 border-green-200">
            <div className="flex items-start gap-2">
              <Settings className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-green-900">
                <p className="mb-2">施肥参数设置功能：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>肥料配置</strong>: 设置各肥料桶名称、浓度、配比比例</li>
                  <li>• <strong>EC/PH目标</strong>: 设定水肥机EC电导率和PH目标值</li>
                  <li>• <strong>一键启停</strong>: 一键开启/关闭施肥系统</li>
                  <li>• <strong>集中管理</strong>: 施肥过程集中化参数管理</li>
                  <li>• <strong>快速控制</strong>: 快速启停控制，响应迅速</li>
                  <li>• <strong>参数保存</strong>: 配置参数自动保存</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* 系统控制 */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h4 className="flex items-center gap-2">
                  <Power className={`w-5 h-5 ${systemEnabled ? 'text-green-600' : 'text-gray-400'}`} />
                  施肥系统控制
                </h4>
                <p className="text-sm text-muted-foreground mt-1">
                  当前状态: <Badge className={systemEnabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'}>
                    {machine.status}
                  </Badge>
                </p>
              </div>
              <div className="flex items-center gap-4">
                <Label>系统开关</Label>
                <Switch checked={systemEnabled} onCheckedChange={handleSystemToggle} />
              </div>
            </div>
          </Card>

          {/* 肥料桶参数 */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <h4 className="flex items-center gap-2">
                <Beaker className="w-5 h-5 text-blue-600" />
                肥料桶参数配置
              </h4>
              <div className="flex items-center gap-3">
                {!isEditMode ? (
                  <Button onClick={handleEditParams} variant="outline">
                    <Settings className="w-4 h-4 mr-2" />
                    编辑参数
                  </Button>
                ) : (
                  <>
                    <Button onClick={handleCancelEdit} variant="outline">
                      <XCircle className="w-4 h-4 mr-2" />
                      取消编辑
                    </Button>
                    <Button onClick={handleSaveParams} className="bg-green-600 hover:bg-green-700">
                      <CheckCircle className="w-4 h-4 mr-2" />
                      保存参数配置
                    </Button>
                  </>
                )}
              </div>
            </div>
            <div className="space-y-4">
              {tanks.map((tank) => (
                <Card key={tank.id} className="p-4 bg-gray-50">
                  <div className="flex items-center gap-2 mb-4">
                    <Badge variant="outline" className="text-lg px-3 py-1">{tank.tankNo}桶</Badge>
                    <h4>{tank.name}</h4>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                      <Label>肥料名称</Label>
                      <Input
                        value={tank.fertilizer}
                        onChange={(e) => handleTankUpdate(tank.id, 'fertilizer', e.target.value)}
                        className="mt-2"
                        disabled={!isEditMode}
                      />
                    </div>
                    <div>
                      <Label>浓度 (%)</Label>
                      <Input
                        type="number"
                        value={tank.concentration}
                        onChange={(e) => handleTankUpdate(tank.id, 'concentration', parseFloat(e.target.value))}
                        className="mt-2"
                        disabled={!isEditMode}
                      />
                    </div>
                    <div>
                      <Label>配比比例 (%)</Label>
                      <Input
                        type="number"
                        value={tank.ratio}
                        onChange={(e) => handleTankUpdate(tank.id, 'ratio', parseFloat(e.target.value))}
                        className="mt-2"
                        disabled={!isEditMode}
                      />
                    </div>
                    <div>
                      <Label>当前液位 (L)</Label>
                      <div className="mt-2 px-3 py-2 bg-white rounded-md border flex items-center justify-between">
                        <span>{tank.currentLevel}</span>
                        <Badge variant="outline">{Math.round((tank.currentLevel / 500) * 100)}%</Badge>
                      </div>
                    </div>
                  </div>
                </Card>
              ))}

              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div className="flex items-start gap-2">
                  <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
                  <div className="text-sm text-blue-900">
                    <p className="mb-1">配比说明：</p>
                    <p className="text-xs">总配比: {tanks.reduce((sum, t) => sum + t.ratio, 0)}% (建议为100%)</p>
                  </div>
                </div>
              </div>
            </div>
          </Card>

          {/* 水肥机EC/PH设置 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <TestTube className="w-5 h-5 text-purple-600" />
              水肥机EC/PH目标值设置
            </h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <div className="flex items-center justify-between mb-2">
                  <Label>EC目标值 (mS/cm)</Label>
                  <Badge variant="outline">{machine.ecTarget}</Badge>
                </div>
                <Slider
                  value={[machine.ecTarget]}
                  onValueChange={(v) => handleMachineUpdate('ecTarget', v[0])}
                  min={0.5}
                  max={5}
                  step={0.1}
                  className="mt-2"
                  disabled={!isEditMode}
                />
                <div className="flex justify-between text-xs text-muted-foreground mt-2">
                  <span>当前EC: {machine.ecValue}</span>
                  <span>偏差: {(machine.ecValue - machine.ecTarget).toFixed(2)}</span>
                </div>
              </div>

              <div>
                <div className="flex items-center justify-between mb-2">
                  <Label>PH目标值</Label>
                  <Badge variant="outline">{machine.phTarget}</Badge>
                </div>
                <Slider
                  value={[machine.phTarget]}
                  onValueChange={(v) => handleMachineUpdate('phTarget', v[0])}
                  min={4}
                  max={9}
                  step={0.1}
                  className="mt-2"
                  disabled={!isEditMode}
                />
                <div className="flex justify-between text-xs text-muted-foreground mt-2">
                  <span>当前PH: {machine.phValue}</span>
                  <span>偏差: {(machine.phValue - machine.phTarget).toFixed(2)}</span>
                </div>
              </div>
            </div>

            <div className="mt-6 grid grid-cols-2 gap-4">
              <Card className="p-4 bg-blue-50">
                <p className="text-xs text-muted-foreground mb-1">EC状态</p>
                <div className="flex items-center gap-2">
                  <Zap className="w-5 h-5 text-blue-600" />
                  <p className="text-lg">
                    {Math.abs(machine.ecValue - machine.ecTarget) <= 0.2 ? '正常' : '偏差'}
                  </p>
                  <Badge className={Math.abs(machine.ecValue - machine.ecTarget) <= 0.2 ? 'bg-green-100 text-green-700' : 'bg-orange-100 text-orange-700'}>
                    {Math.abs(machine.ecValue - machine.ecTarget) <= 0.2 ? '✓' : '!'}
                  </Badge>
                </div>
              </Card>

              <Card className="p-4 bg-purple-50">
                <p className="text-xs text-muted-foreground mb-1">PH状态</p>
                <div className="flex items-center gap-2">
                  <TestTube className="w-5 h-5 text-purple-600" />
                  <p className="text-lg">
                    {Math.abs(machine.phValue - machine.phTarget) <= 0.3 ? '正常' : '偏差'}
                  </p>
                  <Badge className={Math.abs(machine.phValue - machine.phTarget) <= 0.3 ? 'bg-green-100 text-green-700' : 'bg-orange-100 text-orange-700'}>
                    {Math.abs(machine.phValue - machine.phTarget) <= 0.3 ? '✓' : '!'}
                  </Badge>
                </div>
              </Card>
            </div>
          </Card>
        </TabsContent>

        {/* 肥料桶实时监测 */}
        <TabsContent value="tank-realtime" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-blue-50 to-cyan-50 border-blue-200">
            <div className="flex items-start gap-2">
              <Activity className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-blue-900">
                <p className="mb-2">肥料桶实时监测数据：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>液位监测</strong>: 实时展示各肥料桶液位高度</li>
                  <li>• <strong>流量趋势</strong>: 近2小时累计流量变化趋势</li>
                  <li>• <strong>EC监测</strong>: 实时EC值与设定值对比</li>
                  <li>• <strong>PH监测</strong>: 实时PH值与设定值对比</li>
                  <li>• <strong>组合图表</strong>: 多维度数据综合展示</li>
                  <li>• <strong>动态掌握</strong>: 动态掌握施肥状态</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* 实时指标卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {tanks.map((tank) => (
              <Card key={tank.id} className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="flex items-center gap-2">
                    <Beaker className="w-5 h-5 text-blue-600" />
                    {tank.name}
                  </h4>
                  <Badge variant="outline">{tank.tankNo}桶</Badge>
                </div>
                <div className="space-y-3">
                  <div>
                    <p className="text-xs text-muted-foreground">当前液位</p>
                    <div className="flex items-baseline gap-2 mt-1">
                      <p className="text-2xl text-blue-600">{tank.currentLevel}</p>
                      <p className="text-sm text-muted-foreground">L</p>
                    </div>
                    <Progress value={Math.round((tank.currentLevel / 500) * 100)} className="h-2 mt-2" />
                  </div>
                  <div>
                    <p className="text-xs text-muted-foreground">实时流量</p>
                    <div className="flex items-baseline gap-2 mt-1">
                      <p className="text-2xl text-green-600">{tank.flowRate}</p>
                      <p className="text-sm text-muted-foreground">L/h</p>
                    </div>
                  </div>
                </div>
              </Card>
            ))}
          </div>

          {/* 液位趋势图 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <LineChartIcon className="w-5 h-5 text-blue-600" />
              各肥料桶液位变化趋势（最近2小时）
            </h4>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={realtimeData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis label={{ value: '液位 (L)', angle: -90, position: 'insideLeft' }} />
                <RechartsTooltip />
                <Legend />
                <Line type="monotone" dataKey="tankALevel" stroke="#3b82f6" strokeWidth={2} name="A桶液位" />
                <Line type="monotone" dataKey="tankBLevel" stroke="#a855f7" strokeWidth={2} name="B桶液位" />
                <Line type="monotone" dataKey="tankCLevel" stroke="#10b981" strokeWidth={2} name="C桶液位" />
              </LineChart>
            </ResponsiveContainer>
          </Card>

          {/* 流量趋势图 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <Waves className="w-5 h-5 text-green-600" />
              各肥料桶累计流量趋势（最近2小时）
            </h4>
            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={realtimeData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis label={{ value: '流量 (L/h)', angle: -90, position: 'insideLeft' }} />
                <RechartsTooltip />
                <Legend />
                <Area type="monotone" dataKey="tankAFlow" stackId="1" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.6} name="A桶流量" />
                <Area type="monotone" dataKey="tankBFlow" stackId="1" stroke="#a855f7" fill="#a855f7" fillOpacity={0.6} name="B桶流量" />
                <Area type="monotone" dataKey="tankCFlow" stackId="1" stroke="#10b981" fill="#10b981" fillOpacity={0.6} name="C桶流量" />
              </AreaChart>
            </ResponsiveContainer>
          </Card>

          {/* EC/PH监测 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="p-6">
              <h4 className="mb-4 flex items-center gap-2">
                <Zap className="w-5 h-5 text-blue-600" />
                水肥机EC值监测
              </h4>
              <ResponsiveContainer width="100%" height={250}>
                <ComposedChart data={realtimeData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="time" />
                  <YAxis />
                  <RechartsTooltip />
                  <Legend />
                  <Line type="monotone" dataKey="ec" stroke="#3b82f6" strokeWidth={2} name="实时EC" />
                  <Line 
                    type="monotone" 
                    dataKey={() => machine.ecTarget} 
                    stroke="#f97316" 
                    strokeWidth={2} 
                    strokeDasharray="5 5" 
                    name="EC设定值" 
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </Card>

            <Card className="p-6">
              <h4 className="mb-4 flex items-center gap-2">
                <TestTube className="w-5 h-5 text-purple-600" />
                水肥机PH值监测
              </h4>
              <ResponsiveContainer width="100%" height={250}>
                <ComposedChart data={realtimeData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="time" />
                  <YAxis />
                  <RechartsTooltip />
                  <Legend />
                  <Line type="monotone" dataKey="ph" stroke="#a855f7" strokeWidth={2} name="实时PH" />
                  <Line 
                    type="monotone" 
                    dataKey={() => machine.phTarget} 
                    stroke="#f97316" 
                    strokeWidth={2} 
                    strokeDasharray="5 5" 
                    name="PH设定值" 
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </Card>
          </div>
        </TabsContent>

        {/* 阀门控制 */}
        <TabsContent value="valve-control" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-purple-50 to-pink-50 border-purple-200">
            <div className="flex items-start gap-2">
              <Droplets className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-purple-900">
                <p className="mb-2">阀门控制功能：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>状态展示</strong>: 展示各地块阀门实时状态</li>
                  <li>• <strong>电池监测</strong>: 电池电压实时监控</li>
                  <li>• <strong>光伏监测</strong>: 光伏电压实时监控</li>
                  <li>• <strong>开关状态</strong>: 开启/关闭/故障状态显示</li>
                  <li>• <strong>远程控制</strong>: 支持远程手动开启或关闭</li>
                  <li>• <strong>灵活控制</strong>: 实现灌溉区域灵活控制</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* 阀门列表 */}
          <div className="grid grid-cols-1 gap-4">
            {valves.map((valve) => (
              <Card key={valve.id} className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                      <h4>{valve.valveNo}</h4>
                      <Badge variant="outline">{valve.fieldName}</Badge>
                      <Badge className={getValveStatusColor(valve.status)}>
                        {valve.status}
                      </Badge>
                      <Badge variant="outline">
                        <MapPin className="w-3 h-3 mr-1" />
                        {valve.location}
                      </Badge>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    {valve.status !== '故障' && (
                      <Button
                        variant={valve.status === '开启' ? 'outline' : 'default'}
                        className={valve.status === '关闭' ? 'bg-green-600 hover:bg-green-700' : ''}
                        onClick={() => handleValveToggle(valve.id)}
                      >
                        {valve.status === '开启' ? (
                          <>
                            <Pause className="w-4 h-4 mr-2" />
                            关闭阀门
                          </>
                        ) : (
                          <>
                            <Play className="w-4 h-4 mr-2" />
                            开启阀门
                          </>
                        )}
                      </Button>
                    )}
                    {valve.status === '故障' && (
                      <Button variant="outline" disabled>
                        <XCircle className="w-4 h-4 mr-2" />
                        故障维修中
                      </Button>
                    )}
                  </div>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                  <Card className="p-4 bg-yellow-50">
                    <div className="flex items-center gap-2 mb-2">
                      <Battery className="w-4 h-4 text-yellow-600" />
                      <p className="text-xs text-muted-foreground">电池电压</p>
                    </div>
                    <p className="text-lg">{valve.batteryVoltage} V</p>
                    <Progress 
                      value={Math.min((valve.batteryVoltage / 13) * 100, 100)} 
                      className="h-1 mt-2" 
                    />
                  </Card>

                  <Card className="p-4 bg-orange-50">
                    <div className="flex items-center gap-2 mb-2">
                      <Sun className="w-4 h-4 text-orange-600" />
                      <p className="text-xs text-muted-foreground">光伏电压</p>
                    </div>
                    <p className="text-lg">{valve.solarVoltage} V</p>
                    <Progress 
                      value={Math.min((valve.solarVoltage / 20) * 100, 100)} 
                      className="h-1 mt-2" 
                    />
                  </Card>

                  <Card className="p-4 bg-blue-50">
                    <div className="flex items-center gap-2 mb-2">
                      <Gauge className="w-4 h-4 text-blue-600" />
                      <p className="text-xs text-muted-foreground">水压</p>
                    </div>
                    <p className="text-lg">{valve.pressure} bar</p>
                  </Card>

                  <Card className="p-4 bg-green-50">
                    <div className="flex items-center gap-2 mb-2">
                      <Waves className="w-4 h-4 text-green-600" />
                      <p className="text-xs text-muted-foreground">流量</p>
                    </div>
                    <p className="text-lg">{valve.flowRate} L/min</p>
                  </Card>

                  <Card className="p-4 bg-purple-50">
                    <div className="flex items-center gap-2 mb-2">
                      <Droplets className="w-4 h-4 text-purple-600" />
                      <p className="text-xs text-muted-foreground">累计水量</p>
                    </div>
                    <p className="text-lg">{valve.totalVolume} L</p>
                  </Card>
                </div>
              </Card>
            ))}
          </div>
        </TabsContent>

        {/* 电动阀实时监测 */}
        <TabsContent value="valve-realtime" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200">
            <div className="flex items-start gap-2">
              <Gauge className="w-5 h-5 text-orange-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-orange-900">
                <p className="mb-2">电动阀实时监测数据：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>多维图表</strong>: 水压、瞬时流量、累计流量变化</li>
                  <li>• <strong>时间范围</strong>: 展示近2小时变化趋势</li>
                  <li>• <strong>土壤数据</strong>: 同步显示对应地块土层温湿度</li>
                  <li>• <strong>分层监测</strong>: 表层、中层、深层三层数据</li>
                  <li>• <strong>决策依据</strong>: 为灌溉决策提供全面环境依据</li>
                  <li>• <strong>实时更新</strong>: 数据实时刷新显示</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* 选择阀门 */}
          <Card className="p-4">
            <div className="flex items-center gap-4">
              <Label>选择电动阀</Label>
              <Select value={selectedValveId} onValueChange={setSelectedValveId}>
                <SelectTrigger className="w-80">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {valves.map((valve) => (
                    <SelectItem key={valve.id} value={valve.id}>
                      {valve.valveNo} - {valve.fieldName} ({valve.location})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <Badge className={getValveStatusColor(selectedValve.status)}>
                {selectedValve.status}
              </Badge>
            </div>
          </Card>

          {/* 电动阀监测数据 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <Gauge className="w-5 h-5 text-blue-600" />
              {selectedValve.valveNo} 水压变化趋势（最近2小时）
            </h4>
            <ResponsiveContainer width="100%" height={250}>
              <AreaChart data={realtimeData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis />
                <RechartsTooltip />
                <Area 
                  type="monotone" 
                  dataKey="pressure" 
                  stroke="#3b82f6" 
                  fill="#3b82f6" 
                  fillOpacity={0.3}
                  name="水压 (bar)"
                />
              </AreaChart>
            </ResponsiveContainer>
          </Card>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="p-6">
              <h4 className="mb-4 flex items-center gap-2">
                <Waves className="w-5 h-5 text-green-600" />
                瞬时流量变化
              </h4>
              <ResponsiveContainer width="100%" height={250}>
                <LineChart data={realtimeData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="time" />
                  <YAxis />
                  <RechartsTooltip />
                  <Line 
                    type="monotone" 
                    dataKey="flowRate" 
                    stroke="#10b981" 
                    strokeWidth={2}
                    name="流量 (L/min)"
                  />
                </LineChart>
              </ResponsiveContainer>
            </Card>

            <Card className="p-6">
              <h4 className="mb-4 flex items-center gap-2">
                <Droplets className="w-5 h-5 text-purple-600" />
                累计流量变化
              </h4>
              <ResponsiveContainer width="100%" height={250}>
                <AreaChart data={realtimeData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="time" />
                  <YAxis />
                  <RechartsTooltip />
                  <Area 
                    type="monotone" 
                    dataKey="totalVolume" 
                    stroke="#a855f7" 
                    fill="#a855f7" 
                    fillOpacity={0.3}
                    name="累计流量 (L)"
                  />
                </AreaChart>
              </ResponsiveContainer>
            </Card>
          </div>

          {/* 土壤温湿度数据 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <Layers className="w-5 h-5 text-green-600" />
              {selectedValve.fieldName} 土壤温湿度数据
            </h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {soilData.map((soil, index) => (
                <Card key={index} className="p-4 bg-gradient-to-br from-green-50 to-teal-50">
                  <div className="flex items-center justify-between mb-3">
                    <h4>{soil.layer}</h4>
                    <Badge variant="outline">{soil.depth}</Badge>
                  </div>
                  <div className="space-y-3">
                    <div>
                      <div className="flex items-center gap-2 mb-1">
                        <ThermometerSun className="w-4 h-4 text-orange-600" />
                        <p className="text-xs text-muted-foreground">温度</p>
                      </div>
                      <p className="text-2xl text-orange-600">{soil.temperature}°C</p>
                    </div>
                    <div>
                      <div className="flex items-center gap-2 mb-1">
                        <Droplets className="w-4 h-4 text-blue-600" />
                        <p className="text-xs text-muted-foreground">湿度</p>
                      </div>
                      <p className="text-2xl text-blue-600">{soil.humidity}%</p>
                      <Progress value={soil.humidity} className="h-2 mt-2" />
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </Card>
        </TabsContent>

        {/* 施肥与配比历史数据 */}
        <TabsContent value="fertilizer-history" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-green-50 to-teal-50 border-green-200">
            <div className="flex items-start gap-2">
              <BarChart3 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-green-900">
                <p className="mb-2">施肥与配比历史数据：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>流量统计</strong>: 各肥料桶近7天累计流量变化</li>
                  <li>• <strong>EC历史</strong>: 水肥机EC历史数据曲线</li>
                  <li>• <strong>PH历史</strong>: 水肥机PH历史数据曲线</li>
                  <li>• <strong>长期查询</strong>: 支持最长30天历史查询</li>
                  <li>• <strong>效果分析</strong>: 助力分析施肥效果</li>
                  <li>• <strong>稳定性评估</strong>: 评估系统稳定性</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* 时间范围选择 */}
          <Card className="p-4">
            <div className="flex items-center gap-4">
              <Label>查询时段</Label>
              <Select value={historyDateRange} onValueChange={setHistoryDateRange}>
                <SelectTrigger className="w-40">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">最近1天</SelectItem>
                  <SelectItem value="3">最近3天</SelectItem>
                  <SelectItem value="7">最近7天</SelectItem>
                  <SelectItem value="15">最近15天</SelectItem>
                  <SelectItem value="30">最近30天</SelectItem>
                </SelectContent>
              </Select>
              <Button variant="outline">
                <Calendar className="w-4 h-4 mr-2" />
                自定义时段
              </Button>
            </div>
          </Card>

          {/* 统计卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
            <Card className="p-4">
              <p className="text-xs text-muted-foreground mb-2">A桶总流量</p>
              <p className="text-2xl text-blue-600">
                {historyData.reduce((sum, d) => sum + d.tankAFlow, 0)} L
              </p>
              <p className="text-xs text-green-600 mt-1 flex items-center gap-1">
                <TrendingUp className="w-3 h-3" />
                稳定
              </p>
            </Card>

            <Card className="p-4">
              <p className="text-xs text-muted-foreground mb-2">B桶总流量</p>
              <p className="text-2xl text-purple-600">
                {historyData.reduce((sum, d) => sum + d.tankBFlow, 0)} L
              </p>
              <p className="text-xs text-green-600 mt-1 flex items-center gap-1">
                <TrendingUp className="w-3 h-3" />
                稳定
              </p>
            </Card>

            <Card className="p-4">
              <p className="text-xs text-muted-foreground mb-2">C桶总流量</p>
              <p className="text-2xl text-green-600">
                {historyData.reduce((sum, d) => sum + d.tankCFlow, 0)} L
              </p>
              <p className="text-xs text-green-600 mt-1 flex items-center gap-1">
                <TrendingUp className="w-3 h-3" />
                稳定
              </p>
            </Card>

            <Card className="p-4">
              <p className="text-xs text-muted-foreground mb-2">平均EC值</p>
              <p className="text-2xl text-orange-600">
                {(historyData.reduce((sum, d) => sum + d.avgEc, 0) / historyData.length).toFixed(2)}
              </p>
              <p className="text-xs text-muted-foreground mt-1">mS/cm</p>
            </Card>

            <Card className="p-4">
              <p className="text-xs text-muted-foreground mb-2">平均PH值</p>
              <p className="text-2xl text-purple-600">
                {(historyData.reduce((sum, d) => sum + d.avgPh, 0) / historyData.length).toFixed(2)}
              </p>
              <p className="text-xs text-muted-foreground mt-1">pH</p>
            </Card>
          </div>

          {/* 肥料桶流量历史 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <BarChart3 className="w-5 h-5 text-blue-600" />
              各肥料桶累计流量历史（最近{historyDateRange}天）
            </h4>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={historyData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis label={{ value: '流量 (L)', angle: -90, position: 'insideLeft' }} />
                <RechartsTooltip />
                <Legend />
                <Bar dataKey="tankAFlow" fill="#3b82f6" name="A桶流量" />
                <Bar dataKey="tankBFlow" fill="#a855f7" name="B桶流量" />
                <Bar dataKey="tankCFlow" fill="#10b981" name="C桶流量" />
              </BarChart>
            </ResponsiveContainer>
          </Card>

          {/* EC/PH历史趋势 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="p-6">
              <h4 className="mb-4 flex items-center gap-2">
                <Zap className="w-5 h-5 text-blue-600" />
                水肥机EC历史数据
              </h4>
              <ResponsiveContainer width="100%" height={250}>
                <LineChart data={historyData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" />
                  <YAxis />
                  <RechartsTooltip />
                  <Legend />
                  <Line type="monotone" dataKey="avgEc" stroke="#3b82f6" strokeWidth={2} name="平均EC (mS/cm)" />
                </LineChart>
              </ResponsiveContainer>
            </Card>

            <Card className="p-6">
              <h4 className="mb-4 flex items-center gap-2">
                <TestTube className="w-5 h-5 text-purple-600" />
                水肥机PH历史数据
              </h4>
              <ResponsiveContainer width="100%" height={250}>
                <LineChart data={historyData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" />
                  <YAxis />
                  <RechartsTooltip />
                  <Legend />
                  <Line type="monotone" dataKey="avgPh" stroke="#a855f7" strokeWidth={2} name="平均PH" />
                </LineChart>
              </ResponsiveContainer>
            </Card>
          </div>
        </TabsContent>

        {/* 电动阀历史监测 */}
        <TabsContent value="valve-history" className="space-y-4">
          <Card className="p-4 bg-gradient-to-r from-purple-50 to-pink-50 border-purple-200">
            <div className="flex items-start gap-2">
              <LineChartIcon className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-purple-900">
                <p className="mb-2">电动阀历史监测数据：</p>
                <ul className="space-y-1 text-xs">
                  <li>• <strong>水压历史</strong>: 近7天水压变化趋势</li>
                  <li>• <strong>流量历史</strong>: 近7天流量变化趋势</li>
                  <li>• <strong>土壤数据</strong>: 对应地块土层温湿度历史</li>
                  <li>• <strong>30天查询</strong>: 支持30天内数据查询</li>
                  <li>• <strong>灌溉评估</strong>: 用于灌溉效果评估</li>
                  <li>• <strong>故障回溯</strong>: 故障追溯与策略优化</li>
                </ul>
              </div>
            </div>
          </Card>

          {/* 选择阀门 */}
          <Card className="p-4">
            <div className="flex items-center gap-4">
              <Label>选择电动阀</Label>
              <Select value={selectedValveId} onValueChange={setSelectedValveId}>
                <SelectTrigger className="w-80">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {valves.map((valve) => (
                    <SelectItem key={valve.id} value={valve.id}>
                      {valve.valveNo} - {valve.fieldName} ({valve.location})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <Label>查询时段</Label>
              <Select value={historyDateRange} onValueChange={setHistoryDateRange}>
                <SelectTrigger className="w-40">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="7">最近7天</SelectItem>
                  <SelectItem value="15">最近15天</SelectItem>
                  <SelectItem value="30">最近30天</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </Card>

          {/* 统计卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card className="p-4">
              <p className="text-xs text-muted-foreground mb-2">平均水压</p>
              <p className="text-2xl text-blue-600">
                {(historyData.reduce((sum, d) => sum + d.avgPressure, 0) / historyData.length).toFixed(2)} bar
              </p>
              <p className="text-xs text-green-600 mt-1 flex items-center gap-1">
                <CheckCircle className="w-3 h-3" />
                正常
              </p>
            </Card>

            <Card className="p-4">
              <p className="text-xs text-muted-foreground mb-2">平均流量</p>
              <p className="text-2xl text-green-600">
                {(historyData.reduce((sum, d) => sum + d.avgFlowRate, 0) / historyData.length).toFixed(1)} L/min
              </p>
              <p className="text-xs text-green-600 mt-1 flex items-center gap-1">
                <CheckCircle className="w-3 h-3" />
                稳定
              </p>
            </Card>

            <Card className="p-4">
              <p className="text-xs text-muted-foreground mb-2">运行天数</p>
              <p className="text-2xl text-purple-600">{historyDateRange}</p>
              <p className="text-xs text-muted-foreground mt-1">天</p>
            </Card>
          </div>

          {/* 水压历史趋势 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <Gauge className="w-5 h-5 text-blue-600" />
              {selectedValve.valveNo} 水压历史趋势（最近{historyDateRange}天）
            </h4>
            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={historyData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis label={{ value: '水压 (bar)', angle: -90, position: 'insideLeft' }} />
                <RechartsTooltip />
                <Area 
                  type="monotone" 
                  dataKey="avgPressure" 
                  stroke="#3b82f6" 
                  fill="#3b82f6" 
                  fillOpacity={0.3}
                  name="平均水压"
                />
              </AreaChart>
            </ResponsiveContainer>
          </Card>

          {/* 流量历史趋势 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <Waves className="w-5 h-5 text-green-600" />
              {selectedValve.valveNo} 流量历史趋势（最近{historyDateRange}天）
            </h4>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={historyData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis label={{ value: '流量 (L/min)', angle: -90, position: 'insideLeft' }} />
                <RechartsTooltip />
                <Line 
                  type="monotone" 
                  dataKey="avgFlowRate" 
                  stroke="#10b981" 
                  strokeWidth={2}
                  name="平均流量"
                />
              </LineChart>
            </ResponsiveContainer>
          </Card>

          {/* 土壤温湿度历史 */}
          <Card className="p-6">
            <h4 className="mb-4 flex items-center gap-2">
              <ThermometerSun className="w-5 h-5 text-orange-600" />
              {selectedValve.fieldName} 土壤温湿度历史趋势
            </h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
              {soilData.map((soil, index) => (
                <Card key={index} className="p-3 bg-gray-50">
                  <div className="flex items-center justify-between">
                    <span className="text-sm">{soil.layer}</span>
                    <Badge variant="outline" className="text-xs">{soil.depth}</Badge>
                  </div>
                </Card>
              ))}
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <ResponsiveContainer width="100%" height={250}>
                <LineChart data={historyData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" />
                  <YAxis />
                  <RechartsTooltip />
                  <Legend />
                  <Line type="monotone" dataKey={() => 22 + Math.random() * 2} stroke="#f97316" strokeWidth={2} name="表层温度 (°C)" />
                  <Line type="monotone" dataKey={() => 21 + Math.random() * 2} stroke="#3b82f6" strokeWidth={2} name="中层温度 (°C)" />
                  <Line type="monotone" dataKey={() => 20 + Math.random() * 2} stroke="#10b981" strokeWidth={2} name="深层温度 (°C)" />
                </LineChart>
              </ResponsiveContainer>

              <ResponsiveContainer width="100%" height={250}>
                <LineChart data={historyData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" />
                  <YAxis />
                  <RechartsTooltip />
                  <Legend />
                  <Line type="monotone" dataKey={() => 60 + Math.random() * 10} stroke="#f97316" strokeWidth={2} name="表层湿度 (%)" />
                  <Line type="monotone" dataKey={() => 68 + Math.random() * 10} stroke="#3b82f6" strokeWidth={2} name="中层湿度 (%)" />
                  <Line type="monotone" dataKey={() => 74 + Math.random() * 10} stroke="#10b981" strokeWidth={2} name="深层湿度 (%)" />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}