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 { Textarea } from '../ui/textarea';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../ui/dialog';
import { Label } from '../ui/label';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
import { Switch } from '../ui/switch';
import { WaterFertilizerDevice } from './WaterFertilizerDevice';
import { WaterFertilizerComponent } from './WaterFertilizerComponent';
import { WaterFertilizerParameter } from './WaterFertilizerParameter';
import { WaterFertilizerMapping } from './WaterFertilizerMapping';
import {
  Search,
  Plus,
  Edit,
  Eye,
  Trash2,
  Download,
  Upload,
  Filter,
  RefreshCw,
  Settings,
  CheckCircle,
  XCircle,
  AlertCircle,
  Activity,
  Cpu,
  Zap,
  Gauge,
  Droplets,
  Wifi,
  MapPin,
  Link,
  GitBranch,
  Layers,
  Server,
  HardDrive,
  Signal,
  Power,
  Info,
  Copy,
} from 'lucide-react';
import { toast } from 'sonner@2.0.3';

interface WaterFertilizerManagementProps {
  activePath?: string;
}

type DeviceStatus = '在线' | '离线' | '故障' | '维护';
type ComponentType = '泵体' | '传感器' | '控制器' | '阀门' | '流量计';
type ParameterType = '压力' | '流量' | 'EC值' | 'PH值' | '温度' | '湿度';
type ParameterUnit = 'bar' | 'L/min' | 'mS/cm' | 'pH' | '℃' | '%';
type ProtocolType = 'Modbus-RTU' | 'Modbus-TCP' | 'HTTP' | 'MQTT' | 'OPC-UA';

interface WFDevice {
  id: string;
  deviceNo: string;
  deviceName: string;
  model: string;
  manufacturer: string;
  status: DeviceStatus;
  fieldName: string;
  location: string;
  installDate: string;
  ipAddress?: string;
  port?: number;
  protocol: ProtocolType;
  lastOnlineTime: string;
  workingHours: number;
  notes?: string;
}

interface WFComponent {
  id: string;
  componentNo: string;
  componentName: string;
  type: ComponentType;
  deviceName: string;
  specification: string;
  range: string;
  accuracy: string;
  unit: string;
  manufacturer: string;
  installDate: string;
  status: '正常' | '异常' | '维护';
  notes?: string;
}

interface WFParameter {
  id: string;
  parameterNo: string;
  parameterName: string;
  type: ParameterType;
  unit: ParameterUnit;
  minValue: number;
  maxValue: number;
  defaultValue: number;
  warningThreshold?: number;
  alarmThreshold?: number;
  deviceName: string;
  description: string;
  isEnabled: boolean;
}

interface DeviceMapping {
  id: string;
  mappingNo: string;
  logicName: string;
  logicType: '阀门' | '泵' | '施肥机' | '传感器';
  physicalDevice: string;
  deviceAddress: string;
  protocol: ProtocolType;
  controlPoint: string;
  readAddress?: string;
  writeAddress?: string;
  dataType: 'Boolean' | 'Int16' | 'Int32' | 'Float' | 'String';
  status: '已映射' | '未映射' | '异常';
  testResult?: '成功' | '失败';
  lastTestTime?: string;
  notes?: string;
}

export function WaterFertilizerManagement({ activePath }: WaterFertilizerManagementProps) {
  // 如果是水肥机设备页面，直接渲染专门的设备管理组件
  if (activePath?.includes('/device')) {
    return <WaterFertilizerDevice />;
  }

  // 如果是水肥机部件配置页面，直接渲染专门的部件配置组件
  if (activePath?.includes('/component')) {
    return <WaterFertilizerComponent />;
  }

  // 如果是水肥机参数配置页面，直接渲染专门的参数配置组件
  if (activePath?.includes('/parameter')) {
    return <WaterFertilizerParameter />;
  }

  // 如果是水肥设备映射页面，直接渲染专门的映射管理组件
  if (activePath?.includes('/mapping')) {
    return <WaterFertilizerMapping />;
  }

  const [activeTab, setActiveTab] = useState('device');
  const [showDeviceDialog, setShowDeviceDialog] = useState(false);
  const [showComponentDialog, setShowComponentDialog] = useState(false);
  const [showParameterDialog, setShowParameterDialog] = useState(false);
  const [showMappingDialog, setShowMappingDialog] = useState(false);
  const [showDetailDialog, setShowDetailDialog] = useState(false);
  const [editingItem, setEditingItem] = useState<any>(null);
  const [viewingItem, setViewingItem] = useState<any>(null);

  // 根据路径自动切换Tab
  useEffect(() => {
    if (activePath) {
      if (activePath.includes('/component')) {
        setActiveTab('component');
      } else if (activePath.includes('/parameter')) {
        setActiveTab('parameter');
      } else if (activePath.includes('/mapping')) {
        setActiveTab('mapping');
      }
    }
  }, [activePath]);

  // 水肥机设备数据
  const [devices, setDevices] = useState<WFDevice[]>([
    {
      id: 'dev-1',
      deviceNo: 'WF-2024-001',
      deviceName: '1号大棚水肥机',
      model: 'SF-3000Pro',
      manufacturer: '智农科技',
      status: '在线',
      fieldName: '1号大棚',
      location: '大棚东南角',
      installDate: '2024-03-15',
      ipAddress: '192.168.1.101',
      port: 502,
      protocol: 'Modbus-TCP',
      lastOnlineTime: '2024-10-15 18:30:25',
      workingHours: 2580,
      notes: '主力设备，性能稳定',
    },
    {
      id: 'dev-2',
      deviceNo: 'WF-2024-002',
      deviceName: '2号田块水肥机',
      model: 'SF-2000',
      manufacturer: '农智通',
      status: '在线',
      fieldName: '2号田块',
      location: '田块中央',
      installDate: '2024-05-20',
      ipAddress: '192.168.1.102',
      port: 502,
      protocol: 'Modbus-TCP',
      lastOnlineTime: '2024-10-15 18:28:10',
      workingHours: 1850,
    },
    {
      id: 'dev-3',
      deviceNo: 'WF-2024-003',
      deviceName: '3号田块水肥机',
      model: 'SF-3000Pro',
      manufacturer: '智农科技',
      status: '离线',
      fieldName: '3号田块',
      location: '田块北侧',
      installDate: '2024-06-10',
      ipAddress: '192.168.1.103',
      port: 502,
      protocol: 'Modbus-TCP',
      lastOnlineTime: '2024-10-15 16:45:00',
      workingHours: 1420,
      notes: '通信异常，需检查',
    },
  ]);

  // 水肥机部件数据
  const [components, setComponents] = useState<WFComponent[]>([
    {
      id: 'comp-1',
      componentNo: 'COMP-001',
      componentName: '主水泵',
      type: '泵体',
      deviceName: '1号大棚水肥机',
      specification: '1.5kW/220V',
      range: '0-50L/min',
      accuracy: '±2%',
      unit: 'L/min',
      manufacturer: '格兰富',
      installDate: '2024-03-15',
      status: '正常',
    },
    {
      id: 'comp-2',
      componentNo: 'COMP-002',
      componentName: 'EC传感器',
      type: '传感器',
      deviceName: '1号大棚水肥机',
      specification: 'EC-200',
      range: '0-5 mS/cm',
      accuracy: '±0.01 mS/cm',
      unit: 'mS/cm',
      manufacturer: '梅特勒-托利多',
      installDate: '2024-03-15',
      status: '正常',
    },
    {
      id: 'comp-3',
      componentNo: 'COMP-003',
      componentName: 'PH传感器',
      type: '传感器',
      deviceName: '1号大棚水肥机',
      specification: 'PH-300',
      range: '0-14 pH',
      accuracy: '±0.02 pH',
      unit: 'pH',
      manufacturer: '梅特勒-托利多',
      installDate: '2024-03-15',
      status: '正常',
    },
    {
      id: 'comp-4',
      componentNo: 'COMP-004',
      componentName: 'PLC控制器',
      type: '控制器',
      deviceName: '1号大棚水肥机',
      specification: 'S7-1200',
      range: '-',
      accuracy: '-',
      unit: '-',
      manufacturer: '西门子',
      installDate: '2024-03-15',
      status: '正常',
    },
    {
      id: 'comp-5',
      componentNo: 'COMP-005',
      componentName: '流量计',
      type: '流量计',
      deviceName: '2号田块水肥机',
      specification: 'FM-100',
      range: '0-100L/min',
      accuracy: '±1%',
      unit: 'L/min',
      manufacturer: '艾默生',
      installDate: '2024-05-20',
      status: '正常',
    },
  ]);

  // 水肥机参数数据
  const [parameters, setParameters] = useState<WFParameter[]>([
    {
      id: 'param-1',
      parameterNo: 'PARAM-001',
      parameterName: '系统压力',
      type: '压力',
      unit: 'bar',
      minValue: 0,
      maxValue: 10,
      defaultValue: 2.5,
      warningThreshold: 8,
      alarmThreshold: 9.5,
      deviceName: '1号大棚水肥机',
      description: '系统主管道压力，正常工作范围2-6bar',
      isEnabled: true,
    },
    {
      id: 'param-2',
      parameterNo: 'PARAM-002',
      parameterName: '灌溉流量',
      type: '流量',
      unit: 'L/min',
      minValue: 0,
      maxValue: 50,
      defaultValue: 20,
      warningThreshold: 45,
      alarmThreshold: 48,
      deviceName: '1号大棚水肥机',
      description: '主管道流量，建议设置20-30L/min',
      isEnabled: true,
    },
    {
      id: 'param-3',
      parameterNo: 'PARAM-003',
      parameterName: '溶液EC值',
      type: 'EC值',
      unit: 'mS/cm',
      minValue: 0,
      maxValue: 5,
      defaultValue: 2.0,
      warningThreshold: 4.5,
      alarmThreshold: 4.8,
      deviceName: '1号大棚水肥机',
      description: '营养液电导率，番茄适宜范围1.8-2.5 mS/cm',
      isEnabled: true,
    },
    {
      id: 'param-4',
      parameterNo: 'PARAM-004',
      parameterName: '溶液PH值',
      type: 'PH值',
      unit: 'pH',
      minValue: 0,
      maxValue: 14,
      defaultValue: 6.5,
      warningThreshold: 8,
      alarmThreshold: 9,
      deviceName: '1号大棚水肥机',
      description: '营养液酸碱度，大多数作物适宜范围5.5-7.0',
      isEnabled: true,
    },
    {
      id: 'param-5',
      parameterNo: 'PARAM-005',
      parameterName: '水温',
      type: '温度',
      unit: '℃',
      minValue: 0,
      maxValue: 50,
      defaultValue: 20,
      warningThreshold: 35,
      alarmThreshold: 40,
      deviceName: '2号田块水肥机',
      description: '灌溉水温度，建议15-25℃',
      isEnabled: true,
    },
  ]);

  // 设备映射数据
  const [mappings, setMappings] = useState<DeviceMapping[]>([
    {
      id: 'map-1',
      mappingNo: 'MAP-001',
      logicName: '1号主阀门',
      logicType: '阀门',
      physicalDevice: '1号大棚水肥机-电磁阀1',
      deviceAddress: '192.168.1.101:502',
      protocol: 'Modbus-TCP',
      controlPoint: 'DO0',
      readAddress: '40001',
      writeAddress: '40001',
      dataType: 'Boolean',
      status: '已映射',
      testResult: '成功',
      lastTestTime: '2024-10-15 10:30:00',
    },
    {
      id: 'map-2',
      mappingNo: 'MAP-002',
      logicName: '1号主水泵',
      logicType: '泵',
      physicalDevice: '1号大棚水肥机-水泵1',
      deviceAddress: '192.168.1.101:502',
      protocol: 'Modbus-TCP',
      controlPoint: 'DO1',
      readAddress: '40002',
      writeAddress: '40002',
      dataType: 'Boolean',
      status: '已映射',
      testResult: '成功',
      lastTestTime: '2024-10-15 10:30:00',
    },
    {
      id: 'map-3',
      mappingNo: 'MAP-003',
      logicName: '1号施肥机-A通道',
      logicType: '施肥机',
      physicalDevice: '1号大棚水肥机-施肥泵A',
      deviceAddress: '192.168.1.101:502',
      protocol: 'Modbus-TCP',
      controlPoint: 'AO0',
      readAddress: '40010',
      writeAddress: '40010',
      dataType: 'Float',
      status: '已映射',
      testResult: '成功',
      lastTestTime: '2024-10-15 10:30:00',
      notes: '控制施肥量，单位mL/min',
    },
    {
      id: 'map-4',
      mappingNo: 'MAP-004',
      logicName: 'EC传感器',
      logicType: '传感器',
      physicalDevice: '1号大棚水肥机-EC传感器',
      deviceAddress: '192.168.1.101:502',
      protocol: 'Modbus-TCP',
      controlPoint: 'AI0',
      readAddress: '30001',
      dataType: 'Float',
      status: '已映射',
      testResult: '成功',
      lastTestTime: '2024-10-15 10:30:00',
    },
    {
      id: 'map-5',
      mappingNo: 'MAP-005',
      logicName: '3号主阀门',
      logicType: '阀门',
      physicalDevice: '3号田块水肥机-电磁阀1',
      deviceAddress: '192.168.1.103:502',
      protocol: 'Modbus-TCP',
      controlPoint: 'DO0',
      readAddress: '40001',
      writeAddress: '40001',
      dataType: 'Boolean',
      status: '异常',
      testResult: '失败',
      lastTestTime: '2024-10-15 16:45:00',
      notes: '通信超时',
    },
  ]);

  const getStatusColor = (status: DeviceStatus) => {
    switch (status) {
      case '在线': return 'bg-green-100 text-green-700';
      case '离线': return 'bg-gray-100 text-gray-700';
      case '故障': return 'bg-red-100 text-red-700';
      case '维护': return 'bg-yellow-100 text-yellow-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const getComponentStatusColor = (status: string) => {
    switch (status) {
      case '正常': return 'bg-green-100 text-green-700';
      case '异常': return 'bg-red-100 text-red-700';
      case '维护': return 'bg-yellow-100 text-yellow-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const getMappingStatusColor = (status: string) => {
    switch (status) {
      case '已映射': return 'bg-green-100 text-green-700';
      case '未映射': return 'bg-gray-100 text-gray-700';
      case '异常': return 'bg-red-100 text-red-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const handleAddDevice = () => {
    setEditingItem(null);
    setShowDeviceDialog(true);
  };

  const handleEditDevice = (device: WFDevice) => {
    setEditingItem(device);
    setShowDeviceDialog(true);
  };

  const handleDeleteDevice = (deviceNo: string) => {
    setDevices(devices.filter(d => d.deviceNo !== deviceNo));
    toast.success(`设备 ${deviceNo} 已删除`);
  };

  const handleAddComponent = () => {
    setEditingItem(null);
    setShowComponentDialog(true);
  };

  const handleEditComponent = (component: WFComponent) => {
    setEditingItem(component);
    setShowComponentDialog(true);
  };

  const handleDeleteComponent = (componentNo: string) => {
    setComponents(components.filter(c => c.componentNo !== componentNo));
    toast.success(`部件 ${componentNo} 已删除`);
  };

  const handleAddParameter = () => {
    setEditingItem(null);
    setShowParameterDialog(true);
  };

  const handleEditParameter = (parameter: WFParameter) => {
    setEditingItem(parameter);
    setShowParameterDialog(true);
  };

  const handleDeleteParameter = (parameterNo: string) => {
    setParameters(parameters.filter(p => p.parameterNo !== parameterNo));
    toast.success(`参数 ${parameterNo} 已删除`);
  };

  const handleAddMapping = () => {
    setEditingItem(null);
    setShowMappingDialog(true);
  };

  const handleEditMapping = (mapping: DeviceMapping) => {
    setEditingItem(mapping);
    setShowMappingDialog(true);
  };

  const handleDeleteMapping = (mappingNo: string) => {
    setMappings(mappings.filter(m => m.mappingNo !== mappingNo));
    toast.success(`映射 ${mappingNo} 已删除`);
  };

  const handleTestMapping = (mappingNo: string) => {
    toast.success(`映射 ${mappingNo} 连接测试成功`);
  };

  const handleViewDetail = (item: any, type: string) => {
    setViewingItem({ ...item, _type: type });
    setShowDetailDialog(true);
  };

  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 className="flex gap-2">
          <Button variant="outline">
            <Download className="w-4 h-4 mr-2" />
            导出数据
          </Button>
          <Button variant="outline">
            <Upload className="w-4 h-4 mr-2" />
            导入数据
          </Button>
        </div>
      </div>

      {/* 统计卡片 */}
      <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-blue-600">{devices.length}</p>
              <p className="text-xs text-blue-600 mt-1">
                在线: {devices.filter(d => d.status === '在线').length}台
              </p>
            </div>
            <Server 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">部件数量</p>
              <p className="mt-2 text-3xl text-green-600">{components.length}</p>
              <p className="text-xs text-green-600 mt-1">
                正常: {components.filter(c => c.status === '正常').length}个
              </p>
            </div>
            <Cpu className="w-12 h-12 text-green-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-purple-600">{parameters.length}</p>
              <p className="text-xs text-purple-600 mt-1">
                启用: {parameters.filter(p => p.isEnabled).length}个
              </p>
            </div>
            <Settings 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">{mappings.length}</p>
              <p className="text-xs text-orange-600 mt-1">
                正常: {mappings.filter(m => m.status === '已映射').length}个
              </p>
            </div>
            <Link 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-4">
          <TabsTrigger value="device">水肥机设备</TabsTrigger>
          <TabsTrigger value="component">部件配置</TabsTrigger>
          <TabsTrigger value="parameter">参数配置</TabsTrigger>
          <TabsTrigger value="mapping">设备映射</TabsTrigger>
        </TabsList>

        {/* 水肥机设备 */}
        <TabsContent value="device" 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">
              <Server 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>: 型号、状态、所属地块、安装位置等完整信息</li>
                  <li>• <strong>状态监控</strong>: 在线/离线状态、工作时长、最后在线时间</li>
                  <li>• <strong>网络配置</strong>: IP地址、端口、通信协议配置</li>
                  <li>• <strong>完整功能</strong>: 新增、编辑、查看、搜索、删除等全流程管理</li>
                  <li>• <strong>数据一致性</strong>: 确保系统信息与实际部署一致</li>
                </ul>
              </div>
            </div>
          </Card>

          <Card className="p-4">
            <div className="flex items-center justify-between mb-4">
              <div className="flex gap-4 flex-1">
                <div className="flex-1">
                  <Input placeholder="搜索设备名称、编号..." prefix={<Search className="w-4 h-4" />} />
                </div>
                <Select defaultValue="all-status">
                  <SelectTrigger className="w-40">
                    <SelectValue placeholder="设备状态" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-status">全部状态</SelectItem>
                    <SelectItem value="online">在线</SelectItem>
                    <SelectItem value="offline">离线</SelectItem>
                    <SelectItem value="fault">故障</SelectItem>
                    <SelectItem value="maintenance">维护</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all-field">
                  <SelectTrigger className="w-40">
                    <SelectValue placeholder="所属地块" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-field">全部地块</SelectItem>
                    <SelectItem value="field-1">1号大棚</SelectItem>
                    <SelectItem value="field-2">2号田块</SelectItem>
                    <SelectItem value="field-3">3号田块</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button className="ml-4" onClick={handleAddDevice}>
                <Plus className="w-4 h-4 mr-2" />
                新增设备
              </Button>
            </div>
          </Card>

          <Card>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>设备信息</TableHead>
                  <TableHead>型号/厂商</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>所属地块</TableHead>
                  <TableHead>网络配置</TableHead>
                  <TableHead>工作状态</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {devices.map((device) => (
                  <TableRow key={device.id}>
                    <TableCell>
                      <div>
                        <div className="font-medium">{device.deviceName}</div>
                        <div className="text-xs text-muted-foreground">#{device.deviceNo}</div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-sm">
                        <div>{device.model}</div>
                        <div className="text-xs text-muted-foreground">{device.manufacturer}</div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge className={getStatusColor(device.status)}>
                        {device.status}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="text-sm">
                        <div>{device.fieldName}</div>
                        <div className="text-xs text-muted-foreground flex items-center gap-1">
                          <MapPin className="w-3 h-3" />
                          {device.location}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-xs space-y-1">
                        <div className="flex items-center gap-1">
                          <Wifi className="w-3 h-3" />
                          {device.ipAddress}:{device.port}
                        </div>
                        <div>
                          <Badge variant="outline" className="text-xs">{device.protocol}</Badge>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-xs space-y-1">
                        <div>运行: {device.workingHours}小时</div>
                        <div className="text-muted-foreground">
                          {device.lastOnlineTime.substring(5, 16)}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleViewDetail(device, 'device')}>
                          <Eye className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleEditDevice(device)}>
                          <Edit className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleDeleteDevice(device.deviceNo)}>
                          <Trash2 className="w-3 h-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>
        </TabsContent>

        {/* 部件配置 */}
        <TabsContent value="component" 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">
              <Cpu 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>运行参数</strong>: 量程、精度、单位等关键参数配置</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 justify-between mb-4">
              <div className="flex gap-4 flex-1">
                <div className="flex-1">
                  <Input placeholder="搜索部件名称、编号..." prefix={<Search className="w-4 h-4" />} />
                </div>
                <Select defaultValue="all-type">
                  <SelectTrigger className="w-40">
                    <SelectValue placeholder="部件类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-type">全部类型</SelectItem>
                    <SelectItem value="pump">泵体</SelectItem>
                    <SelectItem value="sensor">传感器</SelectItem>
                    <SelectItem value="controller">控制器</SelectItem>
                    <SelectItem value="valve">阀门</SelectItem>
                    <SelectItem value="flowmeter">流量计</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all-device">
                  <SelectTrigger className="w-40">
                    <SelectValue placeholder="所属设备" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-device">全部设备</SelectItem>
                    <SelectItem value="dev-1">1号大棚水肥机</SelectItem>
                    <SelectItem value="dev-2">2号田块水肥机</SelectItem>
                    <SelectItem value="dev-3">3号田块水肥机</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button className="ml-4" onClick={handleAddComponent}>
                <Plus className="w-4 h-4 mr-2" />
                新增部件
              </Button>
            </div>
          </Card>

          <Card>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>部件信息</TableHead>
                  <TableHead>类型</TableHead>
                  <TableHead>所属设备</TableHead>
                  <TableHead>技术参数</TableHead>
                  <TableHead>厂商</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {components.map((component) => (
                  <TableRow key={component.id}>
                    <TableCell>
                      <div>
                        <div className="font-medium">{component.componentName}</div>
                        <div className="text-xs text-muted-foreground">#{component.componentNo}</div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{component.type}</Badge>
                    </TableCell>
                    <TableCell className="text-sm">{component.deviceName}</TableCell>
                    <TableCell>
                      <div className="text-xs space-y-1">
                        <div>规格: {component.specification}</div>
                        <div>量程: {component.range}</div>
                        <div>精度: {component.accuracy}</div>
                      </div>
                    </TableCell>
                    <TableCell className="text-sm">{component.manufacturer}</TableCell>
                    <TableCell>
                      <Badge className={getComponentStatusColor(component.status)}>
                        {component.status}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleViewDetail(component, 'component')}>
                          <Eye className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleEditComponent(component)}>
                          <Edit className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleDeleteComponent(component.componentNo)}>
                          <Trash2 className="w-3 h-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>
        </TabsContent>

        {/* 参数配置 */}
        <TabsContent value="parameter" 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">
              <Settings 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>: 压力范围、流量阈值、EC/PH标定值等</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>

          <Card className="p-4">
            <div className="flex items-center justify-between mb-4">
              <div className="flex gap-4 flex-1">
                <div className="flex-1">
                  <Input placeholder="搜索参数名称、编号..." prefix={<Search className="w-4 h-4" />} />
                </div>
                <Select defaultValue="all-type">
                  <SelectTrigger className="w-40">
                    <SelectValue placeholder="参数类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-type">全部类型</SelectItem>
                    <SelectItem value="pressure">压力</SelectItem>
                    <SelectItem value="flow">流量</SelectItem>
                    <SelectItem value="ec">EC值</SelectItem>
                    <SelectItem value="ph">PH值</SelectItem>
                    <SelectItem value="temperature">温度</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all-device">
                  <SelectTrigger className="w-40">
                    <SelectValue placeholder="所属设备" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-device">全部设备</SelectItem>
                    <SelectItem value="dev-1">1号大棚水肥机</SelectItem>
                    <SelectItem value="dev-2">2号田块水肥机</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button className="ml-4" onClick={handleAddParameter}>
                <Plus className="w-4 h-4 mr-2" />
                新增参数
              </Button>
            </div>
          </Card>

          <Card>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>参数信息</TableHead>
                  <TableHead>类型/单位</TableHead>
                  <TableHead>取值范围</TableHead>
                  <TableHead>阈值配置</TableHead>
                  <TableHead>所属设备</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {parameters.map((parameter) => (
                  <TableRow key={parameter.id}>
                    <TableCell>
                      <div>
                        <div className="font-medium">{parameter.parameterName}</div>
                        <div className="text-xs text-muted-foreground">#{parameter.parameterNo}</div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-sm space-y-1">
                        <Badge variant="outline">{parameter.type}</Badge>
                        <div className="text-xs text-muted-foreground">{parameter.unit}</div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-xs space-y-1">
                        <div>最小: {parameter.minValue} {parameter.unit}</div>
                        <div>最大: {parameter.maxValue} {parameter.unit}</div>
                        <div className="text-blue-600">默认: {parameter.defaultValue} {parameter.unit}</div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-xs space-y-1">
                        {parameter.warningThreshold && (
                          <div className="text-yellow-600">
                            预警: {parameter.warningThreshold} {parameter.unit}
                          </div>
                        )}
                        {parameter.alarmThreshold && (
                          <div className="text-red-600">
                            报警: {parameter.alarmThreshold} {parameter.unit}
                          </div>
                        )}
                      </div>
                    </TableCell>
                    <TableCell className="text-sm">{parameter.deviceName}</TableCell>
                    <TableCell>
                      <Switch checked={parameter.isEnabled} />
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleViewDetail(parameter, 'parameter')}>
                          <Eye className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleEditParameter(parameter)}>
                          <Edit className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleDeleteParameter(parameter.parameterNo)}>
                          <Trash2 className="w-3 h-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>
        </TabsContent>

        {/* 设备映射 */}
        <TabsContent value="mapping" 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">
              <Link 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>: 设备地址、通信协议、控制点位配置</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 justify-between mb-4">
              <div className="flex gap-4 flex-1">
                <div className="flex-1">
                  <Input placeholder="搜索逻辑名称、物理设备..." prefix={<Search className="w-4 h-4" />} />
                </div>
                <Select defaultValue="all-type">
                  <SelectTrigger className="w-40">
                    <SelectValue placeholder="逻辑类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-type">全部类型</SelectItem>
                    <SelectItem value="valve">阀门</SelectItem>
                    <SelectItem value="pump">泵</SelectItem>
                    <SelectItem value="fertilizer">施肥机</SelectItem>
                    <SelectItem value="sensor">传感器</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all-status">
                  <SelectTrigger className="w-40">
                    <SelectValue placeholder="映射状态" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-status">全部状态</SelectItem>
                    <SelectItem value="mapped">已映射</SelectItem>
                    <SelectItem value="unmapped">未映射</SelectItem>
                    <SelectItem value="error">异常</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <Button className="ml-4" onClick={handleAddMapping}>
                <Plus className="w-4 h-4 mr-2" />
                新增映射
              </Button>
            </div>
          </Card>

          <Card>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>逻辑对象</TableHead>
                  <TableHead>物理设备</TableHead>
                  <TableHead>网络配置</TableHead>
                  <TableHead>地址配置</TableHead>
                  <TableHead>测试结果</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mappings.map((mapping) => (
                  <TableRow key={mapping.id}>
                    <TableCell>
                      <div>
                        <div className="font-medium">{mapping.logicName}</div>
                        <Badge variant="outline" className="text-xs mt-1">{mapping.logicType}</Badge>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-sm">
                        <div>{mapping.physicalDevice}</div>
                        <div className="text-xs text-muted-foreground mt-1">
                          点位: {mapping.controlPoint}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-xs space-y-1">
                        <div className="flex items-center gap-1">
                          <Signal className="w-3 h-3" />
                          {mapping.deviceAddress}
                        </div>
                        <Badge variant="outline" className="text-xs">{mapping.protocol}</Badge>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="text-xs space-y-1">
                        {mapping.readAddress && <div>读: {mapping.readAddress}</div>}
                        {mapping.writeAddress && <div>写: {mapping.writeAddress}</div>}
                        <Badge variant="outline" className="text-xs">{mapping.dataType}</Badge>
                      </div>
                    </TableCell>
                    <TableCell>
                      {mapping.testResult && (
                        <div className="text-xs space-y-1">
                          <Badge className={mapping.testResult === '成功' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}>
                            {mapping.testResult}
                          </Badge>
                          {mapping.lastTestTime && (
                            <div className="text-muted-foreground">
                              {mapping.lastTestTime.substring(5, 16)}
                            </div>
                          )}
                        </div>
                      )}
                    </TableCell>
                    <TableCell>
                      <Badge className={getMappingStatusColor(mapping.status)}>
                        {mapping.status}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline" onClick={() => handleTestMapping(mapping.mappingNo)}>
                          <Zap className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleViewDetail(mapping, 'mapping')}>
                          <Eye className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleEditMapping(mapping)}>
                          <Edit className="w-3 h-3" />
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => handleDeleteMapping(mapping.mappingNo)}>
                          <Trash2 className="w-3 h-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 设备对话框 */}
      <Dialog open={showDeviceDialog} onOpenChange={setShowDeviceDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{editingItem ? '编辑设备' : '新增设备'}</DialogTitle>
            <DialogDescription>
              填写水肥机设备的基本信息和网络配置
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>设备名称</Label>
                <Input placeholder="输入设备名称" defaultValue={editingItem?.deviceName} />
              </div>
              <div>
                <Label>设备编号</Label>
                <Input placeholder="自动生成" defaultValue={editingItem?.deviceNo} disabled />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>设备型号</Label>
                <Input placeholder="输入设备型号" defaultValue={editingItem?.model} />
              </div>
              <div>
                <Label>生产厂商</Label>
                <Input placeholder="输入厂商名称" defaultValue={editingItem?.manufacturer} />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>所属地块</Label>
                <Select defaultValue={editingItem?.fieldName}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择地块" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1号大棚">1号大棚</SelectItem>
                    <SelectItem value="2号田块">2号田块</SelectItem>
                    <SelectItem value="3号田块">3号田块</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>安装位置</Label>
                <Input placeholder="输入安装位置" defaultValue={editingItem?.location} />
              </div>
            </div>

            <div className="grid grid-cols-3 gap-4">
              <div>
                <Label>IP地址</Label>
                <Input placeholder="192.168.1.101" defaultValue={editingItem?.ipAddress} />
              </div>
              <div>
                <Label>端口</Label>
                <Input placeholder="502" defaultValue={editingItem?.port} />
              </div>
              <div>
                <Label>通信协议</Label>
                <Select defaultValue={editingItem?.protocol}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择协议" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Modbus-RTU">Modbus-RTU</SelectItem>
                    <SelectItem value="Modbus-TCP">Modbus-TCP</SelectItem>
                    <SelectItem value="HTTP">HTTP</SelectItem>
                    <SelectItem value="MQTT">MQTT</SelectItem>
                    <SelectItem value="OPC-UA">OPC-UA</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div>
              <Label>备注</Label>
              <Textarea placeholder="输入备注信息" defaultValue={editingItem?.notes} rows={3} />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeviceDialog(false)}>
              取消
            </Button>
            <Button onClick={() => {
              toast.success(editingItem ? '设备信息已更新' : '设备已添加');
              setShowDeviceDialog(false);
            }}>
              确定
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 部件对话框 */}
      <Dialog open={showComponentDialog} onOpenChange={setShowComponentDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{editingItem ? '编辑部件' : '新增部件'}</DialogTitle>
            <DialogDescription>
              配置水肥机核心部件的技术参数
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>部件名称</Label>
                <Input placeholder="输入部件名称" defaultValue={editingItem?.componentName} />
              </div>
              <div>
                <Label>部件类型</Label>
                <Select defaultValue={editingItem?.type}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="泵体">泵体</SelectItem>
                    <SelectItem value="传感器">传感器</SelectItem>
                    <SelectItem value="控制器">控制器</SelectItem>
                    <SelectItem value="阀门">阀门</SelectItem>
                    <SelectItem value="流量计">流量计</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div>
              <Label>所属设备</Label>
              <Select defaultValue={editingItem?.deviceName}>
                <SelectTrigger>
                  <SelectValue placeholder="选择设备" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1号大棚水肥机">1号大棚水肥机</SelectItem>
                  <SelectItem value="2号田块水肥机">2号田块水肥机</SelectItem>
                  <SelectItem value="3号田块水肥机">3号田块水肥机</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>规格型号</Label>
                <Input placeholder="输入规格型号" defaultValue={editingItem?.specification} />
              </div>
              <div>
                <Label>生产厂商</Label>
                <Input placeholder="输入厂商名称" defaultValue={editingItem?.manufacturer} />
              </div>
            </div>

            <div className="grid grid-cols-3 gap-4">
              <div>
                <Label>量程范围</Label>
                <Input placeholder="例如: 0-50L/min" defaultValue={editingItem?.range} />
              </div>
              <div>
                <Label>精度</Label>
                <Input placeholder="例如: ±2%" defaultValue={editingItem?.accuracy} />
              </div>
              <div>
                <Label>单位</Label>
                <Input placeholder="例如: L/min" defaultValue={editingItem?.unit} />
              </div>
            </div>

            <div>
              <Label>备注</Label>
              <Textarea placeholder="输入备注信息" defaultValue={editingItem?.notes} rows={3} />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowComponentDialog(false)}>
              取消
            </Button>
            <Button onClick={() => {
              toast.success(editingItem ? '部件信息已更新' : '部件已添加');
              setShowComponentDialog(false);
            }}>
              确定
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 参数对话框 */}
      <Dialog open={showParameterDialog} onOpenChange={setShowParameterDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{editingItem ? '编辑参数' : '新增参数'}</DialogTitle>
            <DialogDescription>
              配置水肥机运行参数和阈值
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>参数名称</Label>
                <Input placeholder="输入参数名称" defaultValue={editingItem?.parameterName} />
              </div>
              <div>
                <Label>参数类型</Label>
                <Select defaultValue={editingItem?.type}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="压力">压力</SelectItem>
                    <SelectItem value="流量">流量</SelectItem>
                    <SelectItem value="EC值">EC值</SelectItem>
                    <SelectItem value="PH值">PH值</SelectItem>
                    <SelectItem value="温度">温度</SelectItem>
                    <SelectItem value="湿度">湿度</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div>
              <Label>所属设备</Label>
              <Select defaultValue={editingItem?.deviceName}>
                <SelectTrigger>
                  <SelectValue placeholder="选择设备" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1号大棚水肥机">1号大棚水肥机</SelectItem>
                  <SelectItem value="2号田块水肥机">2号田块水肥机</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="grid grid-cols-4 gap-4">
              <div>
                <Label>单位</Label>
                <Select defaultValue={editingItem?.unit}>
                  <SelectTrigger>
                    <SelectValue placeholder="单位" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="bar">bar</SelectItem>
                    <SelectItem value="L/min">L/min</SelectItem>
                    <SelectItem value="mS/cm">mS/cm</SelectItem>
                    <SelectItem value="pH">pH</SelectItem>
                    <SelectItem value="℃">℃</SelectItem>
                    <SelectItem value="%">%</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>最小值</Label>
                <Input type="number" placeholder="0" defaultValue={editingItem?.minValue} />
              </div>
              <div>
                <Label>最大值</Label>
                <Input type="number" placeholder="100" defaultValue={editingItem?.maxValue} />
              </div>
              <div>
                <Label>默认值</Label>
                <Input type="number" placeholder="50" defaultValue={editingItem?.defaultValue} />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>预警阈值</Label>
                <Input type="number" placeholder="输入预警阈值" defaultValue={editingItem?.warningThreshold} />
              </div>
              <div>
                <Label>报警阈值</Label>
                <Input type="number" placeholder="输入报警阈值" defaultValue={editingItem?.alarmThreshold} />
              </div>
            </div>

            <div>
              <Label>参数说明</Label>
              <Textarea placeholder="输入参数说明" defaultValue={editingItem?.description} rows={3} />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowParameterDialog(false)}>
              取消
            </Button>
            <Button onClick={() => {
              toast.success(editingItem ? '参数信息已更新' : '参数已添加');
              setShowParameterDialog(false);
            }}>
              确定
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 映射对话框 */}
      <Dialog open={showMappingDialog} onOpenChange={setShowMappingDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>{editingItem ? '编辑映射' : '新增映射'}</DialogTitle>
            <DialogDescription>
              配置逻辑对象与物理设备的映射关系
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>逻辑名称</Label>
                <Input placeholder="输入逻辑名称" defaultValue={editingItem?.logicName} />
              </div>
              <div>
                <Label>逻辑类型</Label>
                <Select defaultValue={editingItem?.logicType}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="阀门">阀门</SelectItem>
                    <SelectItem value="泵">泵</SelectItem>
                    <SelectItem value="施肥机">施肥机</SelectItem>
                    <SelectItem value="传感器">传感器</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div>
              <Label>物理设备</Label>
              <Input placeholder="输入物理设备名称" defaultValue={editingItem?.physicalDevice} />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>设备地址</Label>
                <Input placeholder="例如: 192.168.1.101:502" defaultValue={editingItem?.deviceAddress} />
              </div>
              <div>
                <Label>通信协议</Label>
                <Select defaultValue={editingItem?.protocol}>
                  <SelectTrigger>
                    <SelectValue placeholder="选择协议" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Modbus-RTU">Modbus-RTU</SelectItem>
                    <SelectItem value="Modbus-TCP">Modbus-TCP</SelectItem>
                    <SelectItem value="HTTP">HTTP</SelectItem>
                    <SelectItem value="MQTT">MQTT</SelectItem>
                    <SelectItem value="OPC-UA">OPC-UA</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="grid grid-cols-3 gap-4">
              <div>
                <Label>控制点位</Label>
                <Input placeholder="例如: DO0" defaultValue={editingItem?.controlPoint} />
              </div>
              <div>
                <Label>读地址</Label>
                <Input placeholder="例如: 40001" defaultValue={editingItem?.readAddress} />
              </div>
              <div>
                <Label>写地址</Label>
                <Input placeholder="例如: 40001" defaultValue={editingItem?.writeAddress} />
              </div>
            </div>

            <div>
              <Label>数据类型</Label>
              <Select defaultValue={editingItem?.dataType}>
                <SelectTrigger>
                  <SelectValue placeholder="选择数据类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Boolean">Boolean</SelectItem>
                  <SelectItem value="Int16">Int16</SelectItem>
                  <SelectItem value="Int32">Int32</SelectItem>
                  <SelectItem value="Float">Float</SelectItem>
                  <SelectItem value="String">String</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label>备注</Label>
              <Textarea placeholder="输入备注信息" defaultValue={editingItem?.notes} rows={3} />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowMappingDialog(false)}>
              取消
            </Button>
            <Button onClick={() => {
              toast.success(editingItem ? '映射信息已更新' : '映射已添加');
              setShowMappingDialog(false);
            }}>
              确定
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 详情对话框 */}
      <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>详细信息</DialogTitle>
          </DialogHeader>

          {viewingItem && (
            <div className="space-y-4">
              {viewingItem._type === 'device' && (
                <>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>设备编号</Label>
                      <div className="field-value">{viewingItem.deviceNo}</div>
                    </div>
                    <div>
                      <Label>设备名称</Label>
                      <div className="field-value">{viewingItem.deviceName}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>设备型号</Label>
                      <div className="field-value">{viewingItem.model}</div>
                    </div>
                    <div>
                      <Label>生产厂商</Label>
                      <div className="field-value">{viewingItem.manufacturer}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>所属地块</Label>
                      <div className="field-value">{viewingItem.fieldName}</div>
                    </div>
                    <div>
                      <Label>安装位置</Label>
                      <div className="field-value">{viewingItem.location}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <Label>IP地址</Label>
                      <div className="field-value">{viewingItem.ipAddress}</div>
                    </div>
                    <div>
                      <Label>端口</Label>
                      <div className="field-value">{viewingItem.port}</div>
                    </div>
                    <div>
                      <Label>通信协议</Label>
                      <div className="field-value">{viewingItem.protocol}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>设备状态</Label>
                      <div className="field-value">
                        <Badge className={getStatusColor(viewingItem.status)}>
                          {viewingItem.status}
                        </Badge>
                      </div>
                    </div>
                    <div>
                      <Label>工作时长</Label>
                      <div className="field-value">{viewingItem.workingHours} 小时</div>
                    </div>
                  </div>
                  {viewingItem.notes && (
                    <div>
                      <Label>备注</Label>
                      <div className="field-value">{viewingItem.notes}</div>
                    </div>
                  )}
                </>
              )}

              {viewingItem._type === 'component' && (
                <>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>部件编号</Label>
                      <div className="field-value">{viewingItem.componentNo}</div>
                    </div>
                    <div>
                      <Label>部件名称</Label>
                      <div className="field-value">{viewingItem.componentName}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>部件类型</Label>
                      <div className="field-value">{viewingItem.type}</div>
                    </div>
                    <div>
                      <Label>所属设备</Label>
                      <div className="field-value">{viewingItem.deviceName}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>规格型号</Label>
                      <div className="field-value">{viewingItem.specification}</div>
                    </div>
                    <div>
                      <Label>生产厂商</Label>
                      <div className="field-value">{viewingItem.manufacturer}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <Label>量程范围</Label>
                      <div className="field-value">{viewingItem.range}</div>
                    </div>
                    <div>
                      <Label>精度</Label>
                      <div className="field-value">{viewingItem.accuracy}</div>
                    </div>
                    <div>
                      <Label>单位</Label>
                      <div className="field-value">{viewingItem.unit}</div>
                    </div>
                  </div>
                </>
              )}

              {viewingItem._type === 'parameter' && (
                <>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>参数编号</Label>
                      <div className="field-value">{viewingItem.parameterNo}</div>
                    </div>
                    <div>
                      <Label>参数名称</Label>
                      <div className="field-value">{viewingItem.parameterName}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>参数类型</Label>
                      <div className="field-value">{viewingItem.type}</div>
                    </div>
                    <div>
                      <Label>单位</Label>
                      <div className="field-value">{viewingItem.unit}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <Label>最小值</Label>
                      <div className="field-value">{viewingItem.minValue} {viewingItem.unit}</div>
                    </div>
                    <div>
                      <Label>最大值</Label>
                      <div className="field-value">{viewingItem.maxValue} {viewingItem.unit}</div>
                    </div>
                    <div>
                      <Label>默认值</Label>
                      <div className="field-value">{viewingItem.defaultValue} {viewingItem.unit}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>预警阈值</Label>
                      <div className="field-value">{viewingItem.warningThreshold} {viewingItem.unit}</div>
                    </div>
                    <div>
                      <Label>报警阈值</Label>
                      <div className="field-value">{viewingItem.alarmThreshold} {viewingItem.unit}</div>
                    </div>
                  </div>
                  <div>
                    <Label>参数说明</Label>
                    <div className="field-value">{viewingItem.description}</div>
                  </div>
                </>
              )}

              {viewingItem._type === 'mapping' && (
                <>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>映射编号</Label>
                      <div className="field-value">{viewingItem.mappingNo}</div>
                    </div>
                    <div>
                      <Label>逻辑名称</Label>
                      <div className="field-value">{viewingItem.logicName}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>逻辑类型</Label>
                      <div className="field-value">{viewingItem.logicType}</div>
                    </div>
                    <div>
                      <Label>物理设备</Label>
                      <div className="field-value">{viewingItem.physicalDevice}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label>设备地址</Label>
                      <div className="field-value">{viewingItem.deviceAddress}</div>
                    </div>
                    <div>
                      <Label>通信协议</Label>
                      <div className="field-value">{viewingItem.protocol}</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div>
                      <Label>控制点位</Label>
                      <div className="field-value">{viewingItem.controlPoint}</div>
                    </div>
                    <div>
                      <Label>读地址</Label>
                      <div className="field-value">{viewingItem.readAddress || '-'}</div>
                    </div>
                    <div>
                      <Label>写地址</Label>
                      <div className="field-value">{viewingItem.writeAddress || '-'}</div>
                    </div>
                  </div>
                  <div>
                    <Label>数据类型</Label>
                    <div className="field-value">{viewingItem.dataType}</div>
                  </div>
                  {viewingItem.testResult && (
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <Label>测试结果</Label>
                        <div className="field-value">
                          <Badge className={viewingItem.testResult === '成功' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}>
                            {viewingItem.testResult}
                          </Badge>
                        </div>
                      </div>
                      <div>
                        <Label>测试时间</Label>
                        <div className="field-value">{viewingItem.lastTestTime}</div>
                      </div>
                    </div>
                  )}
                </>
              )}
            </div>
          )}

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDetailDialog(false)}>
              关闭
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}