/**
 * filekorolheader: 物联设备数据接入页面 - IoT设备数据管理中心
 * 功能：设备列表管理、实时数据监控、设备详情查看、设备配置管理
 * 路径：/ai-crop-model/data-sense-center/iot
 * 规范：遵循crop-x/docs/开发项目规范.md，使用useState状态管理，shadcn语义化样式
 */
'use client';

import { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Progress } from '@/components/ui/progress';
import { Switch } from '@/components/ui/switch';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer } from 'recharts';
import {
  Wifi,
  Plus,
  CheckCircle,
  XCircle,
  WifiOff,
  Activity,
  MapPin,
  Signal,
  Zap,
  Eye,
  Settings,
  Cloud,
  Gauge,
  Camera,
  Droplet,
  Thermometer,
  AlertTriangle,
  RefreshCw,
  PlayCircle,
  PauseCircle,
  Database,
  Clock,
  Sun,
  Wind,
  TrendingUp,
  Download,
  BarChart3,
  Search,
} from 'lucide-react';
import { toast } from 'sonner';

type DeviceType = '气象站' | '土壤传感器' | '摄像头' | '水质传感器' | '环境监测站';
type DeviceStatus = '在线' | '离线' | '故障' | '维护中';
type Protocol = 'MQTT' | 'HTTP' | 'CoAP' | 'WebSocket';

interface IoTDevice {
  id: string;
  code: string;
  name: string;
  type: DeviceType;
  deviceTypeId?: string;
  manufacturer: string;
  model: string;
  location: string;
  fieldId: string;
  fieldName: string;
  protocol: Protocol;
  ipAddress?: string;
  mqttTopic?: string;
  status: DeviceStatus;
  bindingStatus: '未绑定' | '已绑定';
  bindingSystem?: string;
  lastReportTime: string;
  dataFrequency: string;
  batteryLevel?: number;
  signalStrength?: number;
  sensors: {
    name: string;
    unit: string;
    currentValue: number;
    normalRange: string;
  }[];
}

interface DataQuality {
  completeness: number;
  accuracy: number;
  timeliness: number;
  consistency: number;
}

export default function IoTIoTPage() {
  const [showDeviceDialog, setShowDeviceDialog] = useState(false);
  const [showDeviceDetailDialog, setShowDeviceDetailDialog] = useState(false);
  const [showRealtimeDataDialog, setShowRealtimeDataDialog] = useState(false);
  const [selectedDevice, setSelectedDevice] = useState<IoTDevice | null>(null);
  const [deviceTypes, setDeviceTypes] = useState<Array<{ id: string; name: string }>>([]);

  // 加载设备类型数据
  useEffect(() => {
    const loadDeviceTypes = () => {
      const data = localStorage.getItem('smart_agriculture_ai_device_types');
      if (data) {
        const types = JSON.parse(data);
        setDeviceTypes(types.map((t: any) => ({ id: t.id, name: t.name })));
      }
    };
    loadDeviceTypes();
  }, []);

  // 地块数据（模拟从地块管理获取）
  const [fieldsList] = useState([
    { id: 'field_001', name: '1号大棚', area: 2.5, cropType: '番茄' },
    { id: 'field_002', name: '2号大棚', area: 3.0, cropType: '番茄' },
    { id: 'field_003', name: '3号地块', area: 5.0, cropType: '小麦' },
    { id: 'field_004', name: '4号地块', area: 4.2, cropType: '玉米' },
    { id: 'field_005', name: '5号大棚', area: 2.8, cropType: '黄瓜' },
    { id: 'field_006', name: '6号地块', area: 8.0, cropType: '水稻' },
    { id: 'field_007', name: '7号大棚', area: 2.2, cropType: '茄子' },
    { id: 'field_008', name: '8号地块', area: 6.5, cropType: '花生' },
  ]);

  // 物联设备模拟数据
  const [iotDevices] = useState<IoTDevice[]>([
    {
      id: 'iot-1',
      code: 'WS-2024-001',
      name: '1号气象站',
      type: '气象站',
      deviceTypeId: 'device-type-2',
      manufacturer: '华为',
      model: 'HW-WS-Pro',
      location: '1号大棚北侧',
      fieldId: 'field_001',
      fieldName: '1号大棚',
      protocol: 'MQTT',
      mqttTopic: 'farm/weather/station01',
      status: '在线',
      bindingStatus: '已绑定',
      bindingSystem: '智能灌溉控制系统',
      lastReportTime: '2024-10-15 14:05:00',
      dataFrequency: '每5分钟',
      batteryLevel: 85,
      signalStrength: 92,
      sensors: [
        { name: '温度', unit: '℃', currentValue: 24.5, normalRange: '-10~40' },
        { name: '湿度', unit: '%', currentValue: 68, normalRange: '0~100' },
        { name: '气压', unit: 'hPa', currentValue: 1013, normalRange: '950~1050' },
        { name: '风速', unit: 'm/s', currentValue: 3.2, normalRange: '0~30' },
      ],
    },
    {
      id: 'iot-2',
      code: 'SS-2024-012',
      name: '2号土壤传感器',
      type: '土壤传感器',
      deviceTypeId: 'device-type-1',
      manufacturer: '中科院',
      model: 'CAS-SS-300',
      location: '3号地块中心',
      fieldId: 'field_003',
      fieldName: '3号地块',
      protocol: 'MQTT',
      mqttTopic: 'farm/soil/sensor02',
      status: '在线',
      bindingStatus: '已绑定',
      bindingSystem: '智能灌溉控制系统',
      lastReportTime: '2024-10-15 14:03:00',
      dataFrequency: '每10分钟',
      batteryLevel: 72,
      signalStrength: 88,
      sensors: [
        { name: '土壤温度', unit: '℃', currentValue: 18.3, normalRange: '0~35' },
        { name: '土壤湿度', unit: '%', currentValue: 45, normalRange: '20~80' },
        { name: 'EC值', unit: 'mS/cm', currentValue: 1.2, normalRange: '0.5~3' },
        { name: 'pH值', unit: '', currentValue: 6.8, normalRange: '5.5~8.5' },
      ],
    },
    {
      id: 'iot-3',
      code: 'CAM-2024-003',
      name: '3号监控摄像头',
      type: '摄像头',
      deviceTypeId: 'device-type-3',
      manufacturer: '海康威视',
      model: 'HIK-IPC-6M',
      location: '2号大棚上方',
      fieldId: 'field_002',
      fieldName: '2号大棚',
      protocol: 'HTTP',
      ipAddress: '192.168.1.103',
      status: '在线',
      bindingStatus: '已绑定',
      bindingSystem: '视频监控系统',
      lastReportTime: '2024-10-15 14:06:00',
      dataFrequency: '实时',
      batteryLevel: undefined,
      signalStrength: 95,
      sensors: [
        { name: '图像分辨率', unit: 'MP', currentValue: 4.0, normalRange: '2~8' },
        { name: '帧率', unit: 'fps', currentValue: 25, normalRange: '15~30' },
      ],
    },
    {
      id: 'iot-4',
      code: 'WS-2024-004',
      name: '4号气象站',
      type: '气象站',
      deviceTypeId: 'device-type-2',
      manufacturer: '华为',
      model: 'HW-WS-Pro',
      location: '6号地块东侧',
      fieldId: 'field_006',
      fieldName: '6号地块',
      protocol: 'MQTT',
      mqttTopic: 'farm/weather/station04',
      status: '离线',
      bindingStatus: '已绑定',
      bindingSystem: '智能灌溉控制系统',
      lastReportTime: '2024-10-15 12:30:00',
      dataFrequency: '每5分钟',
      batteryLevel: 15,
      signalStrength: 25,
      sensors: [
        { name: '温度', unit: '℃', currentValue: 22.1, normalRange: '-10~40' },
        { name: '湿度', unit: '%', currentValue: 65, normalRange: '0~100' },
        { name: '气压', unit: 'hPa', currentValue: 1010, normalRange: '950~1050' },
        { name: '风速', unit: 'm/s', currentValue: 2.8, normalRange: '0~30' },
      ],
    },
    {
      id: 'iot-5',
      code: 'AQ-2024-005',
      name: '5号环境监测站',
      type: '环境监测站',
      deviceTypeId: 'device-type-5',
      manufacturer: '绿盟科技',
      model: 'GRE-AQ-2000',
      location: '8号地块中心',
      fieldId: 'field_008',
      fieldName: '8号地块',
      protocol: 'CoAP',
      ipAddress: '192.168.1.105',
      status: '故障',
      bindingStatus: '未绑定',
      lastReportTime: '2024-10-15 08:15:00',
      dataFrequency: '每30分钟',
      batteryLevel: 45,
      signalStrength: 67,
      sensors: [
        { name: 'PM2.5', unit: 'μg/m³', currentValue: 35, normalRange: '0~75' },
        { name: 'CO₂', unit: 'ppm', currentValue: 450, normalRange: '300~1000' },
        { name: '光照强度', unit: 'lux', currentValue: 25000, normalRange: '0~50000' },
      ],
    },
  ]);

  // 外部数据源统计（模拟）
  const [externalDataSources] = useState([
    { id: 'ext-1', status: '正常' },
    { id: 'ext-2', status: '正常' },
    { id: 'ext-3', status: '异常' },
    { id: 'ext-4', status: '正常' },
  ]);

  // 数据质量评估
  const [dataQuality] = useState<DataQuality>({
    completeness: 94.5,
    accuracy: 96.8,
    timeliness: 92.3,
    consistency: 95.2,
  });

  // 计算统计数据
  const totalExternalSources = externalDataSources.length;
  const activeExternalSources = externalDataSources.filter(s => s.status === '正常').length;
  const totalDevices = iotDevices.length;
  const onlineDevices = iotDevices.filter(d => d.status === '在线').length;
  const offlineDevices = iotDevices.filter(d => d.status === '离线').length;
  const faultDevices = iotDevices.filter(d => d.status === '故障').length;

  // 设备数据采集趋势
  const deviceDataTrend = [
    { time: '10:00', 数据点: 1250 },
    { time: '11:00', 数据点: 1420 },
    { time: '12:00', 数据点: 1380 },
    { time: '13:00', 数据点: 1560 },
    { time: '14:00', 数据点: 1680 },
  ];

  // 获取设备状态图标
  const getStatusIcon = (status: DeviceStatus) => {
    switch (status) {
      case '在线':
        return <CheckCircle className="w-4 h-4 text-green-600" />;
      case '故障':
        return <XCircle className="w-4 h-4 text-red-600" />;
      case '离线':
        return <WifiOff className="w-4 h-4 text-gray-500" />;
      case '维护中':
        return <AlertTriangle className="w-4 h-4 text-yellow-600" />;
      default:
        return <AlertTriangle className="w-4 h-4 text-gray-500" />;
    }
  };

  // 获取设备状态颜色
  const getStatusColor = (status: DeviceStatus) => {
    switch (status) {
      case '在线':
        return 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/50 dark:text-green-300';
      case '故障':
        return 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/50 dark:text-red-300';
      case '离线':
        return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-900/50 dark:text-gray-300';
      case '维护中':
        return 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-900/50 dark:text-yellow-300';
      default:
        return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-900/50 dark:text-gray-300';
    }
  };

  // 获取设备类型图标
  const getDeviceTypeIcon = (type: DeviceType) => {
    switch (type) {
      case '气象站':
        return <Cloud className="w-4 h-4 text-blue-600" />;
      case '土壤传感器':
        return <Gauge className="w-4 h-4 text-green-600" />;
      case '摄像头':
        return <Camera className="w-4 h-4 text-purple-600" />;
      case '水质传感器':
        return <Droplet className="w-4 h-4 text-cyan-600" />;
      case '环境监测站':
        return <Thermometer className="w-4 h-4 text-orange-600" />;
      default:
        return <Activity className="w-4 h-4 text-gray-600" />;
    }
  };

  // 处理设备详情
  const handleDeviceDetail = (device: IoTDevice) => {
    setSelectedDevice(device);
    setShowDeviceDetailDialog(true);
  };

  // 处理实时数据
  const handleRealtimeData = (device: IoTDevice) => {
    setSelectedDevice(device);
    setShowRealtimeDataDialog(true);
  };

  // 处理设备重启
  const handleDeviceRestart = () => {
    toast.success('设备重启指令已发送');
  };

  // 处理开始数据采集
  const handleStartDataCollection = () => {
    toast.success('数据采集已启动');
  };

  // 处理停止数据采集
  const handleStopDataCollection = () => {
    toast.success('数据采集已停止');
  };

  return (
    <div className="p-6 space-y-6 bg-background">
      {/* 页面标题和说明 */}
      <div className="space-y-4">
        <div className="flex items-center gap-3">
          <Wifi className="w-8 h-8 text-green-600" />
          <div>
            <h1 className="text-3xl font-bold text-foreground">物联设备数据接入</h1>
            <p className="text-muted-foreground">IoT设备管理和数据采集监控中心</p>
          </div>
        </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-sky-600">{activeExternalSources}/{totalExternalSources}</p>
              <p className="text-xs text-sky-600 mt-1">正常运行</p>
            </div>
            <Database className="w-12 h-12 text-sky-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">{onlineDevices}/{totalDevices}</p>
              <p className="text-xs text-green-600 mt-1">在线设备</p>
            </div>
            <Wifi 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-green-600">{dataQuality.accuracy}%</p>
              <p className="text-xs text-green-600 mt-1">准确率</p>
            </div>
            <CheckCircle 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-amber-600">{offlineDevices + faultDevices}</p>
              <p className="text-xs text-amber-600 mt-1">待处理</p>
            </div>
            <AlertTriangle className="w-12 h-12 text-amber-600 opacity-50" />
          </div>
        </Card>
      </div>

      {/* 功能说明卡片 */}
      <Card className="p-4 bg-gradient-to-r from-green-50 to-blue-50 border-green-200 dark:from-green-950/50 dark:to-blue-950/50 dark:border-green-800">
        <div className="flex items-start gap-2">
          <Wifi className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
          <div className="text-sm text-green-800 dark:text-green-200">
            <p className="mb-2 font-medium">物联设备数据接入功能：</p>
            <ul className="space-y-1 text-xs">
              <li>• <strong>无缝接入</strong>: 支持气象站、土壤传感器、摄像头等多种设备</li>
              <li>• <strong>实时采集</strong>: 环境温湿度、土壤墒情、作物影像等多维数据</li>
              <li>• <strong>标准协议</strong>: 支持MQTT、HTTP、CoAP等物联网标准协议</li>
              <li>• <strong>状态监控</strong>: 设备在线状态、电池电量、信号强度实时监控</li>
              <li>• <strong>质量控制</strong>: 数据质量控制与异常检测能力</li>
            </ul>
          </div>
        </div>
      </Card>

      {/* 操作按钮 */}
      <div className="flex gap-4">
        <Button onClick={() => {
          setSelectedDevice(null);
          setShowDeviceDialog(true);
        }}>
          <Plus className="w-4 h-4 mr-2" />
          添加设备
        </Button>
      </div>

      {/* 设备状态概览 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="p-4 bg-green-50 border-green-200 dark:bg-green-950/50 dark:border-green-800">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center dark:bg-green-900">
              <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">在线设备</p>
              <p className="text-2xl text-green-600 dark:text-green-400">{onlineDevices}</p>
            </div>
          </div>
        </Card>

        <Card className="p-4 bg-gray-50 border-gray-200 dark:bg-gray-950/50 dark:border-gray-800">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center dark:bg-gray-900">
              <WifiOff className="w-5 h-5 text-gray-600 dark:text-gray-400" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">离线设备</p>
              <p className="text-2xl text-gray-600 dark:text-gray-400">{offlineDevices}</p>
            </div>
          </div>
        </Card>

        <Card className="p-4 bg-red-50 border-red-200 dark:bg-red-950/50 dark:border-red-800">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center dark:bg-red-900">
              <XCircle className="w-5 h-5 text-red-600 dark:text-red-400" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">故障设备</p>
              <p className="text-2xl text-red-600 dark:text-red-400">{faultDevices}</p>
            </div>
          </div>
        </Card>

        <Card className="p-4 bg-blue-50 border-blue-200 dark:bg-blue-950/50 dark:border-blue-800">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center dark:bg-blue-900">
              <Activity className="w-5 h-5 text-blue-600 dark:text-blue-400" />
            </div>
            <div>
              <p className="text-xs text-muted-foreground">数据采集率</p>
              <p className="text-2xl text-blue-600 dark:text-blue-400">98.5%</p>
            </div>
          </div>
        </Card>
      </div>

      {/* 设备列表 */}
      <Card className="bg-card border-border">
        <div className="p-4 border-b border-border bg-muted/30">
          <h3 className="flex items-center gap-2 text-lg font-semibold">
            <Wifi className="w-5 h-5 text-green-600" />
            物联网设备
          </h3>
        </div>

        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted/50">
                <TableHead className="font-medium">设备编号</TableHead>
                <TableHead className="font-medium">设备名称</TableHead>
                <TableHead className="font-medium">设备类型</TableHead>
                <TableHead className="font-medium">所属地块</TableHead>
                <TableHead className="font-medium">位置</TableHead>
                <TableHead className="font-medium">绑定状态</TableHead>
                <TableHead className="font-medium">通信协议</TableHead>
                <TableHead className="font-medium">传感器状态</TableHead>
                <TableHead className="font-medium">信号/电量</TableHead>
                <TableHead className="font-medium">最后上报</TableHead>
                <TableHead className="font-medium">设备状态</TableHead>
                <TableHead className="font-medium">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {iotDevices.map((device) => (
                <TableRow key={device.id} className="hover:bg-muted/30">
                  <TableCell className="font-medium">{device.code}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      {getDeviceTypeIcon(device.type)}
                      <div>
                        <div className="font-medium">{device.name}</div>
                        <div className="text-xs text-muted-foreground">{device.model}</div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline" className="font-light">{device.type}</Badge>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300 dark:bg-green-900/50 dark:text-green-300">
                      {device.fieldName}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-xs">
                    <div className="flex items-center gap-1">
                      <MapPin className="w-3 h-3 text-muted-foreground" />
                      {device.location}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-col gap-1">
                      <Badge className={device.bindingStatus === '已绑定'
                        ? 'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/50 dark:text-green-300'
                        : 'bg-gray-100 text-gray-800 border-gray-300 dark:bg-gray-900/50 dark:text-gray-300'}>
                        {device.bindingStatus}
                      </Badge>
                      {device.bindingSystem && (
                        <span className="text-xs text-muted-foreground">{device.bindingSystem}</span>
                      )}
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline" className="font-light">{device.protocol}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="text-xs space-y-1">
                      {device.sensors.slice(0, 2).map((sensor, idx) => (
                        <div key={idx} className="flex items-center gap-2">
                          <span className="text-muted-foreground">{sensor.name}:</span>
                          <span className="font-medium">{sensor.currentValue}{sensor.unit}</span>
                        </div>
                      ))}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="text-xs space-y-1">
                      {device.signalStrength !== undefined && (
                        <div className="flex items-center gap-1">
                          <Signal className="w-3 h-3 text-muted-foreground" />
                          <span>{device.signalStrength}%</span>
                        </div>
                      )}
                      {device.batteryLevel !== undefined && (
                        <div className="flex items-center gap-1">
                          <Zap className="w-3 h-3 text-muted-foreground" />
                          <span>{device.batteryLevel}%</span>
                        </div>
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">{device.lastReportTime}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      {getStatusIcon(device.status)}
                      <Badge className={`font-light ${getStatusColor(device.status)}`}>{device.status}</Badge>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline" onClick={() => handleRealtimeData(device)} title="实时数据">
                        <Activity className="w-3 h-3" />
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => handleDeviceDetail(device)} title="设备详情">
                        <Eye className="w-3 h-3" />
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => {
                        setSelectedDevice(device);
                        setShowDeviceDialog(true);
                      }} title="编辑配置">
                        <Settings className="w-3 h-3" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </Card>

      {/* 设备配置对话框 - 1:1还原原始设计 */}
      <Dialog open={showDeviceDialog} onOpenChange={setShowDeviceDialog}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Wifi className="w-5 h-5 text-green-600" />
              {selectedDevice ? '编辑设备' : '添加设备'}
            </DialogTitle>
            <DialogDescription>
              {selectedDevice ? '修改设备信息和配置参数' : '添加新的物联设备到数据采集系统'}
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            {/* 基本信息 */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>设备编号 *</Label>
                <Input
                  placeholder="例如：WS-2024-001"
                  defaultValue={selectedDevice?.code}
                />
              </div>
              <div>
                <Label>设备名称 *</Label>
                <Input
                  placeholder="例如：1号气象站"
                  defaultValue={selectedDevice?.name}
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>设备类型 *</Label>
                <Select defaultValue={selectedDevice?.type || '气象站'}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="气象站">气象站</SelectItem>
                    <SelectItem value="土壤传感器">土壤传感器</SelectItem>
                    <SelectItem value="摄像头">摄像头</SelectItem>
                    <SelectItem value="水质传感器">水质传感器</SelectItem>
                    <SelectItem value="环境监测站">环境监测站</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>通信协议 *</Label>
                <Select defaultValue={selectedDevice?.protocol || 'MQTT'}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="MQTT">MQTT</SelectItem>
                    <SelectItem value="HTTP">HTTP</SelectItem>
                    <SelectItem value="CoAP">CoAP</SelectItem>
                    <SelectItem value="WebSocket">WebSocket</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>生产厂家</Label>
                <Input
                  placeholder="例如：华为"
                  defaultValue={selectedDevice?.manufacturer}
                />
              </div>
              <div>
                <Label>设备型号</Label>
                <Input
                  placeholder="例如：HW-WS-Pro"
                  defaultValue={selectedDevice?.model}
                />
              </div>
            </div>

            <div>
              <Label>安装位置</Label>
              <Input
                placeholder="例如：1号大棚北侧"
                defaultValue={selectedDevice?.location}
              />
            </div>

            <div>
              <Label>数据上报频率</Label>
              <Select defaultValue={selectedDevice?.dataFrequency || '每5分钟'}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="实时">实时</SelectItem>
                  <SelectItem value="每1分钟">每1分钟</SelectItem>
                  <SelectItem value="每5分钟">每5分钟</SelectItem>
                  <SelectItem value="每10分钟">每10分钟</SelectItem>
                  <SelectItem value="每30分钟">每30分钟</SelectItem>
                  <SelectItem value="每小时">每小时</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label>所属地块</Label>
              <Select defaultValue={selectedDevice?.fieldId}>
                <SelectTrigger>
                  <SelectValue placeholder="选择所属地块" />
                </SelectTrigger>
                <SelectContent>
                  {fieldsList.map(field => (
                    <SelectItem key={field.id} value={field.id}>
                      {field.name} ({field.cropType} · {field.area}亩)
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground mt-1">
                选择地块后，设备位置将自动从地块信息中获取
              </p>
            </div>

            {selectedDevice?.protocol === 'MQTT' && (
              <div>
                <Label>MQTT主题</Label>
                <Input
                  placeholder="例如：farm/weather/station01"
                  defaultValue={selectedDevice?.mqttTopic}
                />
              </div>
            )}

            {(selectedDevice?.protocol === 'HTTP' || selectedDevice?.protocol === 'WebSocket') && (
              <div>
                <Label>IP地址</Label>
                <Input
                  placeholder="例如：192.168.1.100"
                  defaultValue={selectedDevice?.ipAddress}
                />
              </div>
            )}

            <div className="flex items-center justify-between p-4 bg-green-50 dark:bg-green-950/30 rounded-lg border border-green-200 dark:border-green-800">
              <div className="flex items-center gap-2">
                <Switch defaultChecked />
                <span className="text-sm font-medium">启用设备</span>
              </div>
              <Button size="sm" variant="outline" onClick={() => toast.success('连接测试成功')}>
                <Database className="w-3 h-3 mr-1" />
                测试连接
              </Button>
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDeviceDialog(false)}>
              取消
            </Button>
            <Button className="bg-green-600 hover:bg-green-700" onClick={() => {
              toast.success(selectedDevice ? '设备信息已更新' : '设备添加成功');
              setShowDeviceDialog(false);
            }}>
              {selectedDevice ? '保存配置' : '添加设备'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 设备详情对话框 - 1:1还原原始设计 */}
      <Dialog open={showDeviceDetailDialog} onOpenChange={setShowDeviceDetailDialog}>
        <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>设备详情 - {selectedDevice?.name}</DialogTitle>
            <DialogDescription>
              查看设备详细信息、传感器配置和运行状态
            </DialogDescription>
          </DialogHeader>

          {selectedDevice && (
            <div className="space-y-6">
              {/* 设备基本信息 */}
              <Card className="p-4">
                <h4 className="mb-4 flex items-center gap-2">
                  <Wifi className="w-4 h-4 text-green-600" />
                  基本信息
                </h4>
                <div className="grid grid-cols-3 gap-4">
                  <div>
                    <Label className="text-xs">设备编号</Label>
                    <p className="mt-1 text-sm font-medium">{selectedDevice?.code}</p>
                  </div>
                  <div>
                    <Label className="text-xs">设备名称</Label>
                    <p className="mt-1 text-sm font-medium">{selectedDevice?.name}</p>
                  </div>
                  <div>
                    <Label className="text-xs">设备类型</Label>
                    <p className="mt-1">
                      <Badge variant="outline">{selectedDevice?.type}</Badge>
                    </p>
                  </div>
                  <div>
                    <Label className="text-xs">设备型号</Label>
                    <p className="mt-1 text-sm">{selectedDevice?.model}</p>
                  </div>
                  <div>
                    <Label className="text-xs">生产厂家</Label>
                    <p className="mt-1 text-sm">{selectedDevice?.manufacturer}</p>
                  </div>
                  <div>
                    <Label className="text-xs">所属地块</Label>
                    <p className="mt-1">
                      <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300 dark:bg-green-900/50 dark:text-green-300">
                        {selectedDevice?.fieldName}
                      </Badge>
                    </p>
                  </div>
                  <div>
                    <Label className="text-xs">安装位置</Label>
                    <p className="mt-1 text-sm flex items-center gap-1">
                      <MapPin className="w-3 h-3 text-muted-foreground" />
                      {selectedDevice?.location}
                    </p>
                  </div>
                  <div>
                    <Label className="text-xs">通信协议</Label>
                    <p className="mt-1">
                      <Badge variant="outline">{selectedDevice?.protocol}</Badge>
                    </p>
                  </div>
                  <div>
                    <Label className="text-xs">上报频率</Label>
                    <p className="mt-1 text-sm">{selectedDevice?.dataFrequency}</p>
                  </div>
                  <div>
                    <Label className="text-xs">设备状态</Label>
                    <p className="mt-1">
                      <Badge className={getStatusColor(selectedDevice?.status || '在线')}>
                        {selectedDevice?.status}
                      </Badge>
                    </p>
                  </div>
                </div>
              </Card>

              {/* 通信状态 */}
              <Card className="p-4">
                <h4 className="mb-4 flex items-center gap-2">
                  <Signal className="w-4 h-4 text-blue-600" />
                  通信状态
                </h4>
                <div className="grid grid-cols-4 gap-4">
                  {selectedDevice?.signalStrength !== undefined && (
                    <div>
                      <Label className="text-xs">信号强度</Label>
                      <div className="mt-2 flex items-center gap-2">
                        <Progress value={selectedDevice.signalStrength} className="flex-1" />
                        <span className="text-sm font-medium">{selectedDevice.signalStrength}%</span>
                      </div>
                    </div>
                  )}
                  {selectedDevice?.batteryLevel !== undefined && (
                    <div>
                      <Label className="text-xs">电池电量</Label>
                      <div className="mt-2 flex items-center gap-2">
                        <Progress value={selectedDevice.batteryLevel} className="flex-1" />
                        <span className="text-sm font-medium">{selectedDevice.batteryLevel}%</span>
                      </div>
                    </div>
                  )}
                  <div>
                    <Label className="text-xs">最后上报时间</Label>
                    <p className="mt-1 text-sm flex items-center gap-1">
                      <Clock className="w-3 h-3 text-muted-foreground" />
                      {selectedDevice?.lastReportTime}
                    </p>
                  </div>
                  <div>
                    <Label className="text-xs">绑定状态</Label>
                    <p className="mt-1">
                      <Badge className={selectedDevice?.bindingStatus === '已绑定'
                        ? 'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/50 dark:text-green-300'
                        : 'bg-gray-100 text-gray-800 border-gray-300 dark:bg-gray-900/50 dark:text-gray-300'}>
                        {selectedDevice?.bindingStatus}
                      </Badge>
                    </p>
                  </div>
                </div>
              </Card>

              {/* 传感器数据 */}
              <Card className="p-4">
                <h4 className="mb-4 flex items-center gap-2">
                  <Gauge className="w-4 h-4 text-green-600" />
                  传感器数据
                </h4>
                <div className="grid grid-cols-2 gap-4">
                  {selectedDevice?.sensors.map((sensor, idx) => (
                    <div key={idx} className="p-3 bg-muted rounded-lg">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          {sensor.name.includes('温度') && <Thermometer className="w-4 h-4 text-red-600" />}
                          {sensor.name.includes('湿度') && <Droplet className="w-4 h-4 text-blue-600" />}
                          {!sensor.name.includes('温度') && !sensor.name.includes('湿度') && <Gauge className="w-4 h-4 text-gray-600" />}
                          <span className="text-sm font-medium">{sensor.name}</span>
                        </div>
                        <div className="text-right">
                          <div className="text-lg font-bold">{sensor.currentValue}{sensor.unit}</div>
                          <div className="text-xs text-green-600">正常</div>
                        </div>
                      </div>
                      <div className="mt-2 text-xs text-muted-foreground">
                        正常范围: {sensor.normalRange}
                      </div>
                    </div>
                  ))}
                </div>
              </Card>

              {/* 操作按钮 */}
              <div className="flex gap-2 pt-4">
                <Button onClick={handleDeviceRestart} className="bg-blue-600 hover:bg-blue-700">
                  <RefreshCw className="w-4 h-4 mr-2" />
                  重启设备
                </Button>
                <Button variant="outline" onClick={handleStartDataCollection}>
                  <PlayCircle className="w-4 h-4 mr-2" />
                  开始采集
                </Button>
                <Button variant="outline" onClick={handleStopDataCollection}>
                  <PauseCircle className="w-4 h-4 mr-2" />
                  停止采集
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* 实时数据监控对话框 - 1:1还原原始设计 */}
      <Dialog open={showRealtimeDataDialog} onOpenChange={setShowRealtimeDataDialog}>
        <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>实时数据监控 - {selectedDevice?.name}</DialogTitle>
            <DialogDescription>
              查看设备实时采集的传感器数据和数据流状态
            </DialogDescription>
          </DialogHeader>

          {selectedDevice && (
            <div className="space-y-6">
              {/* 数据流状态 */}
              <div className="grid grid-cols-4 gap-4">
                <Card className="p-4 bg-gradient-to-br from-sky-100 to-sky-200 dark:from-sky-900/50 dark:to-sky-800/50">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-sky-600 rounded-full flex items-center justify-center">
                      <Activity className="w-5 h-5 text-white" />
                    </div>
                    <div>
                      <p className="text-xs text-muted-foreground">数据流状态</p>
                      <p className="text-lg text-sky-600 flex items-center gap-1">
                        正常
                        <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                      </p>
                    </div>
                  </div>
                </Card>
                <Card className="p-4 bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/50 dark:to-green-800/50">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center">
                      <Zap className="w-5 h-5 text-white" />
                    </div>
                    <div>
                      <p className="text-xs text-muted-foreground">数据速率</p>
                      <p className="text-lg text-green-600">2条/分钟</p>
                    </div>
                  </div>
                </Card>
                <Card className="p-4 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/50 dark:to-purple-800/50">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center">
                      <Clock className="w-5 h-5 text-white" />
                    </div>
                    <div>
                      <p className="text-xs text-muted-foreground">最后更新</p>
                      <p className="text-lg text-purple-600">2秒前</p>
                    </div>
                  </div>
                </Card>
                <Card className="p-4 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-900/50 dark:to-amber-800/50">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-amber-600 rounded-full flex items-center justify-center">
                      <TrendingUp className="w-5 h-5 text-white" />
                    </div>
                    <div>
                      <p className="text-xs text-muted-foreground">数据质量</p>
                      <p className="text-lg text-amber-600">优秀</p>
                    </div>
                  </div>
                </Card>
              </div>

              {/* 实时传感器数据 */}
              <Card className="p-4">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="flex items-center gap-2">
                    <Gauge className="w-4 h-4 text-green-600" />
                    实时传感器读数
                  </h4>
                  <Button size="sm" variant="outline" onClick={() => toast.success('数据已刷新')}>
                    <RefreshCw className="w-3 h-3 mr-1" />
                    刷新
                  </Button>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  {selectedDevice?.sensors.map((sensor, idx) => (
                    <Card key={idx} className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-2">
                            {sensor.name.includes('温度') && <Thermometer className="w-4 h-4 text-red-600" />}
                            {sensor.name.includes('湿度') && <Droplet className="w-4 h-4 text-blue-600" />}
                            {sensor.name.includes('光照') && <Sun className="w-4 h-4 text-yellow-600" />}
                            {sensor.name.includes('风速') && <Wind className="w-4 h-4 text-gray-600" />}
                            {!sensor.name.includes('温度') && !sensor.name.includes('湿度') && !sensor.name.includes('光照') && !sensor.name.includes('风速') && <Gauge className="w-4 h-4 text-gray-600" />}
                            <span className="text-sm font-medium">{sensor.name}</span>
                          </div>
                          <div className="flex items-baseline gap-2">
                            <span className="text-3xl font-medium text-green-600">{sensor.currentValue}</span>
                            <span className="text-sm text-muted-foreground">{sensor.unit}</span>
                          </div>
                          <div className="mt-2 text-xs text-muted-foreground">
                            正常范围: {sensor.normalRange}
                          </div>
                          <div className="mt-2">
                            <div className="flex items-center justify-between text-xs mb-1">
                              <span className="text-muted-foreground">当前值位置</span>
                              <span className="text-green-600">正常</span>
                            </div>
                            <Progress value={75} className="h-1.5" />
                          </div>
                        </div>
                        <Badge className="bg-green-100 text-green-800">正常</Badge>
                      </div>
                      {/* 迷你趋势图 */}
                      <div className="mt-3 h-16">
                        <ResponsiveContainer width="100%" height="100%">
                          <LineChart data={[
                            { time: 1, value: parseFloat(sensor.currentValue) - 2 },
                            { time: 2, value: parseFloat(sensor.currentValue) - 1.5 },
                            { time: 3, value: parseFloat(sensor.currentValue) - 1 },
                            { time: 4, value: parseFloat(sensor.currentValue) - 0.5 },
                            { time: 5, value: parseFloat(sensor.currentValue) },
                          ]}>
                            <Line type="monotone" dataKey="value" stroke="#10b981" strokeWidth={2} dot={false} />
                          </LineChart>
                        </ResponsiveContainer>
                      </div>
                    </Card>
                  ))}
                </div>
              </Card>

              {/* 数据采集日志 */}
              <Card className="p-4">
                <h4 className="mb-4 flex items-center gap-2">
                  <Clock className="w-4 h-4 text-sky-600" />
                  数据采集日志（最近10条）
                </h4>
                <div className="space-y-2 max-h-60 overflow-y-auto">
                  {[
                    { time: '2024-10-23 14:32:15', status: 'success', msg: '数据采集成功，所有传感器正常' },
                    { time: '2024-10-23 14:31:45', status: 'success', msg: '数据采集成功，所有传感器正常' },
                    { time: '2024-10-23 14:31:15', status: 'success', msg: '数据采集成功，所有传感器正常' },
                    { time: '2024-10-23 14:30:45', status: 'warning', msg: '湿度传感器读数略低，已标记' },
                    { time: '2024-10-23 14:30:15', status: 'success', msg: '数据采集成功，所有传感器正常' },
                    { time: '2024-10-23 14:29:45', status: 'success', msg: '数据采集成功，所有传感器正常' },
                    { time: '2024-10-23 14:29:15', status: 'success', msg: '数据采集成功，所有传感器正常' },
                    { time: '2024-10-23 14:28:45', status: 'error', msg: '温度传感器通信失败，重试成功' },
                    { time: '2024-10-23 14:28:15', status: 'success', msg: '数据采集成功，所有传感器正常' },
                    { time: '2024-10-23 14:27:45', status: 'success', msg: '数据采集成功，所有传感器正常' },
                  ].map((log, idx) => (
                    <div key={idx} className="flex items-start gap-3 p-2 bg-muted rounded text-xs">
                      <Clock className="w-3 h-3 text-muted-foreground flex-shrink-0 mt-0.5" />
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <span className="text-muted-foreground">{log.time}</span>
                          {log.status === 'success' && <CheckCircle className="w-3 h-3 text-green-600" />}
                          {log.status === 'warning' && <AlertTriangle className="w-3 h-3 text-yellow-600" />}
                          {log.status === 'error' && <XCircle className="w-3 h-3 text-red-600" />}
                        </div>
                        <p className="mt-0.5">{log.msg}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </Card>

              {/* 历史传感器数据报表 */}
              <Card className="p-4">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="flex items-center gap-2">
                    <BarChart3 className="w-4 h-4 text-purple-600" />
                    历史传感器数据报表
                  </h4>
                  <div className="flex gap-2">
                    <Button size="sm" variant="outline" onClick={() => toast.success('数据报表已刷新')}>
                      <RefreshCw className="w-3 h-3 mr-1" />
                      刷新
                    </Button>
                    <Button size="sm" className="bg-green-600 hover:bg-green-700" onClick={() => toast.success('历史数据已导出为Excel文件')}>
                      <Download className="w-3 h-3 mr-1" />
                      导出Excel
                    </Button>
                  </div>
                </div>
                {/* 时间范围选择 */}
                <div className="flex gap-4 mb-4">
                  <div className="flex-1">
                    <Label className="text-xs">开始时间</Label>
                    <Input type="datetime-local" defaultValue="2024-10-23T00:00" className="mt-1" />
                  </div>
                  <div className="flex-1">
                    <Label className="text-xs">结束时间</Label>
                    <Input type="datetime-local" defaultValue="2024-10-23T23:59" className="mt-1" />
                  </div>
                  <div className="flex items-end">
                    <Button onClick={() => toast.success('数据已筛选')}>
                      <Search className="w-4 h-4 mr-2" />
                      查询
                    </Button>
                  </div>
                </div>
                {/* 历史数据表格 */}
                <div className="overflow-x-auto max-h-80 overflow-y-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="w-40">采集时间</TableHead>
                        {selectedDevice?.sensors.map((sensor, idx) => (
                          <TableHead key={idx}>{sensor.name} ({sensor.unit})</TableHead>
                        ))}
                        <TableHead className="w-24">数据状态</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {[
                        { time: '2024-10-23 14:30:00', values: ['25.5', '62', '45000', '2.3'], status: '正常' },
                        { time: '2024-10-23 14:00:00', values: ['25.2', '63', '44500', '2.1'], status: '正常' },
                        { time: '2024-10-23 13:30:00', values: ['24.8', '65', '44000', '1.8'], status: '正常' },
                        { time: '2024-10-23 13:00:00', values: ['24.5', '66', '43500', '1.6'], status: '正常' },
                        { time: '2024-10-23 12:30:00', values: ['24.2', '68', '43000', '1.5'], status: '正常' },
                        { time: '2024-10-23 12:00:00', values: ['23.8', '70', '42500', '1.3'], status: '正常' },
                        { time: '2024-10-23 11:30:00', values: ['23.5', '71', '42000', '1.2'], status: '正常' },
                        { time: '2024-10-23 11:00:00', values: ['23.2', '72', '41500', '1.1'], status: '正常' },
                        { time: '2024-10-23 10:30:00', values: ['22.8', '74', '41000', '1.0'], status: '正常' },
                        { time: '2024-10-23 10:00:00', values: ['22.5', '75', '40500', '0.9'], status: '正常' },
                        { time: '2024-10-23 09:30:00', values: ['22.2', '76', '40000', '0.8'], status: '正常' },
                        { time: '2024-10-23 09:00:00', values: ['21.8', '78', '39500', '0.7'], status: '正常' },
                        { time: '2024-10-23 08:30:00', values: ['21.5', '79', '39000', '0.6'], status: '正常' },
                        { time: '2024-10-23 08:00:00', values: ['21.2', '80', '38500', '0.5'], status: '正常' },
                        { time: '2024-10-23 07:30:00', values: ['20.8', '82', '38000', '0.4'], status: '正常' },
                      ].map((record, idx) => (
                        <TableRow key={idx}>
                          <TableCell className="text-xs font-medium">{record.time}</TableCell>
                          {record.values.map((value, vIdx) => (
                            <TableCell key={vIdx} className="text-xs">{value}</TableCell>
                          ))}
                          <TableCell>
                            <Badge className="bg-green-100 text-green-800 text-xs">{record.status}</Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
                {/* 统计信息 */}
                <div className="mt-4 grid grid-cols-4 gap-4 pt-4 border-t">
                  <div className="text-center">
                    <p className="text-xs text-muted-foreground">数据记录数</p>
                    <p className="text-lg font-medium text-sky-600">15 条</p>
                  </div>
                  <div className="text-center">
                    <p className="text-xs text-muted-foreground">时间跨度</p>
                    <p className="text-lg font-medium text-green-600">7.5 小时</p>
                  </div>
                  <div className="text-center">
                    <p className="text-xs text-muted-foreground">采集频率</p>
                    <p className="text-lg font-medium text-purple-600">30 分钟</p>
                  </div>
                  <div className="text-center">
                    <p className="text-xs text-muted-foreground">数据完整率</p>
                    <p className="text-lg font-medium text-amber-600">100%</p>
                  </div>
                </div>
              </Card>
            </div>
          )}

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowRealtimeDataDialog(false)}>
              关闭
            </Button>
            <Button onClick={() => {
              setShowRealtimeDataDialog(false);
              setShowDeviceDetailDialog(true);
            }}>
              <Eye className="w-4 h-4 mr-2" />
              查看设备详情
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}