import React, { useState, useEffect } from 'react';
import {
	Layout, Card, Row, Col, Statistic, Tag, Button, Table,
	Typography, Space, Progress, Badge, Timeline, message,
	Select, Modal
} from 'antd';
import {
	EnvironmentOutlined, RobotOutlined, BranchesOutlined,
	ThunderboltOutlined, CheckCircleOutlined, PauseOutlined,
	RocketOutlined, SyncOutlined, WarningOutlined,
	CloudOutlined, ClockCircleOutlined, ReloadOutlined,
	AimOutlined, ApiOutlined, SettingOutlined,
	PlusOutlined, ArrowRightOutlined,
	EditOutlined, FullscreenOutlined, InfoCircleOutlined
} from '@ant-design/icons';

import { useSelector } from 'react-redux';
import { getDeviceListApi, getLiveStream, getPlaneDeviceList } from '../../api/device.ts';
import { RootState } from '@/src/store';
import DroneLivePlayer from '../VolcRtcPlayer.jsx';

const { Content } = Layout;
const { Text, Title } = Typography;




const taskTimeline = [
	{ time: '10:24:18', color: 'blue', text: 'UAV-C01 开始执行清洗航线 C-05', status: '任务开始' },
	{ time: '10:21:35', color: 'orange', text: 'RBT-01 开始执行巡检航线 P-02', status: '任务开始' },
	{ time: '10:18:02', color: 'green', text: 'GR-02 开始除草作业 G-01', status: '任务开始' },
	{ time: '10:15:47', color: 'gray', text: 'UAV-C02 任务待命就绪', status: '待命就绪' },
	{ time: '10:12:33', color: 'blue', text: 'UAV-C01 再次返机补水', status: '返机补给' },
	{ time: '09:58:10', color: 'green', text: 'RBT-02 完成巡检航线 P-01', status: '任务完成' },
];

const logs = [
	{ time: '10:24:35', device: 'UAV-C01', type: '命令', desc: '起飞指令下发，开始作业' },
	{ time: '10:21:40', device: 'RBT-01', type: '命令', desc: '开始巡检任务 P-02' },
	{ time: '10:20:11', device: 'UAV-C02', type: '命令', desc: '转入待命状态' },
	{ time: '10:18:05', device: 'GR-02', type: '命令', desc: '除草作业开始 G-01' },
	{ time: '10:12:35', device: 'UAV-C01', type: '告警', desc: '返航补水' },
	{ time: '10:05:22', device: 'RBT-01', type: '事件', desc: '电量较低，建议回充', level: '低电量' },
];

// 设备总览组件
export default function DeviceOverviewPage({ devices, planedevices, devicesAll, onViewStatus }) {
	const [selectedDevice, setSelectedDevice] = useState(null);
	const [planeVideo, setPlaneVideo] = useState([]); // 初始为空数组
	const [zoomedVideo, setZoomedVideo] = useState(null); // 放大查看的视频数据

	// 动态计算顶部卡片数据
	const dynamicTopCards = React.useMemo(() => {
		const totalDrones = planedevices?.length || 0;
		const onlineDrones = planedevices?.filter(d => d.onlineStatus === 1).length || 0;

		const totalRobots = devicesAll?.filter(d => d.productName?.includes('巡检')).length || 0;
		const activeRobots = devicesAll?.filter(d => d.productName?.includes('巡检') && d.onlineStatus === 1).length || 0;

		const totalMowers = devicesAll?.filter(d => d.productName?.includes('割草机')).length || 0;
		const activeMowers = devicesAll?.filter(d => d.productName?.includes('割草机') && d.onlineStatus === 1).length || 0;

		return [
			{ title: '无人机机场状态', icon: <EnvironmentOutlined />, value: `${onlineDrones} / ${totalDrones}`, desc: onlineDrones > 0 ? '在线' : '离线', sub: `可调度 ${onlineDrones} 架`, color: '#1890ff' },
			//{ title: '巡检机器人', icon: <RobotOutlined />, value: `${totalRobots} 台`, desc: '', sub: `执行中 ${activeRobots}`, color: '#722ed1' },
			{ title: '机器人', icon: <BranchesOutlined />, value: `${totalMowers} 台`, desc: '', sub: `作业中 ${activeMowers}`, color: '#13c2c2' },
			{ title: '无人机', icon: <CloudOutlined />, value: `${totalDrones} 架`, desc: '', sub: `待命 ${planedevices?.filter(d => d.productName?.includes('清洗') && d.onlineStatus === 1).length || 0}`, color: '#eb2f96' },
			{ title: '设备平均电量', icon: <ThunderboltOutlined />, value: '86%', desc: '', sub: '', color: '#52c41a' },
			{ title: '今日任务执行', icon: <CheckCircleOutlined />, value: '12 / 15', desc: '', sub: '完成率 80%', color: '#2f54eb' },
		];
	}, [devicesAll, planedevices]);

	// 动态生成调度列表
	const dynamicScheduleList = React.useMemo(() => {
		return devicesAll.map((d, index) => ({
			id: d.deviceId || index,
			name: d.deviceAlias || d.deviceName || d.callsign || '未知设备',
			type: d.productName || '未知类型',
			status: d.onlineStatus === 1 ? '在线' : '离线',
			mode: d.status === 4 ? '待命' : '作业中',
			battery: d.capacity_percent || 100,
			position: d.position || '站内',
			task: d.status === 4 ? '待命' : '作业中',
			comm: d.rssi ? `${d.rssi}dBm` : '良好'
		}));
	}, [devicesAll]);


	const handleStart = () => message.success('任务已启动');
	const handlePause = () => message.info('任务已暂停');
	const handleReturn = () => message.info('返航指令已下发');
	const handleRecharge = () => message.info('回充指令已下发');
	const handleEmergencyStop = () => message.error('已触发急停！');
	const getLiveDefault = () => {
		if (!selectedDevice?.gateway_sn) return;
		const data = {
			getway_sn: selectedDevice?.gateway_sn,
			drone_sn: selectedDevice?.device_sn,
			getway_camera_list: selectedDevice?.gateway_camera_list ?? [],
			drone_camera_list: selectedDevice?.drone_camera_list ?? [],
			video_expire: 7200,
			quality_type: "adaptive",
		}
		getLiveStream(data).then(res => {
			if (res.code == 200) {
				setPlaneVideo(res.data);
			}
		})
	}


	// 数字保留两位小数
	const fix2 = (val) => {
		if (val === null || val === undefined || isNaN(val)) return '-';
		return Number(val).toFixed(2);
	};

	// 安全取值
	const getVal = (val) => val == "no_rain" ? "无" : (val || '-');

	// 默认选中第一个
	useEffect(() => {
		if (devicesAll && devicesAll.length > 0) {
			setSelectedDevice(devicesAll[0]); // 🔥 修复：存整个对象
		}
	}, [devicesAll]);
	useEffect(() => {
		getLiveDefault();
	}, [selectedDevice])

	// 切换设备
	const handleDeviceChange = (id) => {
		const target = devicesAll.find(item => (item.device_sn || item.serialNumber) === id);
		setSelectedDevice(target || null); // 🔥 修复：存对象
	};

	return (
		<Content style={{ maxWidth: 1800, margin: '0 auto', }}>
			<div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', marginBottom: 20 }}>
				{dynamicTopCards.map((card, idx) => (
					<div key={idx} style={{ flex: 1 }}>
						<Card bordered={false} style={{ borderRadius: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.05)', height: '110px', display: 'flex', alignItems: 'center' }}>
							<div style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%' }}>
								<div style={{ width: 48, height: 48, borderRadius: 10, background: `${card.color}15`, color: card.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>
									{card.icon}
								</div>
								<div style={{ flex: 1 }}>
									<div style={{ fontSize: 13, color: '#666' }}>{card.title}</div>
									<div style={{ fontSize: 24, fontWeight: 700, color: '#222' }}>{card.value}</div>
									{card.sub && <div style={{ fontSize: 12, color: '#999' }}>{card.sub}</div>}
								</div>
							</div>
						</Card>
					</div>
				))}
			</div>

			<Row gutter={16}>
				<Col xs={24} lg={14}>
					<Card title={<><EnvironmentOutlined /> 装备协同态势图</>} extra={<Button type="text" icon={<SettingOutlined />} />} bordered={false} style={{ borderRadius: 12, marginBottom: 16 }} bodyStyle={{ padding: 0 }}>
						<div style={{ width: '100%', height: 400, background: '#e6f7ff url(https://picsum.photos/seed/solarfarm/1600/800) center/cover', borderRadius: 12, position: 'relative', overflow: 'hidden' }}>
							<div style={{ position: 'absolute', top: 16, left: 16, background: 'rgba(255,255,255,0.95)', borderRadius: 8, padding: 12 }}>
								<div style={{ fontSize: 12, fontWeight: 60, marginBottom: 8 }}>图例说明</div>
								<div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 11 }}>
									<div><span style={{ color: '#1890ff' }}>———</span> 巡检航线</div>
									<div><span style={{ color: '#fa8c16' }}>———</span> 机器人路径</div>
									<div><span style={{ color: '#52c41a' }}>———</span> 清洗路径</div>
									<div><span style={{ color: '#52c41a' }}>●</span> 设备位置</div>
									<div><span style={{ color: '#1890ff' }}>●</span> 补给/充电点</div>
									<div><span style={{ color: '#ff4d4f' }}>■</span> 障碍/禁入区</div>
								</div>
							</div>
						</div>
					</Card>

					<Card title={<><SettingOutlined /> 装备调度列表</>} bordered={false} style={{ borderRadius: 12, marginBottom: 16 }}>
						<Table rowKey={(record) => record.id || record.serialNumber || record.device_sn} size="small" pagination={false}
							columns={[
								{ title: '装备名称', dataIndex: 'name', width: 160 },
								{ title: '类型', dataIndex: 'type', width: 100 },
								{ title: '当前状态', dataIndex: 'status', width: 80, render: s => <Tag color={s === '作业中' || s === '在线' ? 'success' : 'default'}>{s}</Tag> },
								{ title: '模式', dataIndex: 'mode', width: 80 },
								{ title: '电量', dataIndex: 'battery', width: 80, render: v => <Progress percent={v} size="small" status={v < 40 ? 'exception' : 'active'} /> },
								{ title: '位置', dataIndex: 'position', width: 100 },
								{ title: '当前任务', dataIndex: 'task', width: 120 },
								{ title: '通讯状态', dataIndex: 'comm', width: 80, render: v => <Badge status={v.includes('-') ? 'warning' : 'success'} text={v} /> },
								{ title: '操作', key: 'action', width: 100, render: () => <Space><Button size="small" type="text" icon={<EditOutlined />} /><Button size="small" type="text" icon={<SettingOutlined />} /></Space> }
							]}
							dataSource={dynamicScheduleList}
							scroll={{ x: 'max-content', y: 320 }}
						/>
					</Card>

					<Card title={<><SettingOutlined /> <span >控制日志 / 告警记录</span></>} bordered={false} style={{ borderRadius: 12 }} extra={<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Button size="small" style={{ borderRadius: 8, border: '1px solid #d9d9d9' }}>全部级别 ▼</Button></div>}>
						<Table rowKey="time" size="small" pagination={false} dataSource={logs} scroll={{ x: 'max-content' }}
							columns={[
								{ title: '时间', dataIndex: 'time', width: 100, render: t => <span style={{ fontSize: 14 }}>{t}</span> },
								{ title: '设备', dataIndex: 'device', width: 120, render: t => <span style={{ fontSize: 14 }}>{t}</span> },
								{ title: '类型', dataIndex: 'type', width: 80, render: t => { let c = '#52c41a'; if (t === '告警') c = '#fa8c16'; if (t === 'events') c = '#1890ff'; return <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 12, height: 12, borderRadius: 2, background: c }} /><span style={{ fontSize: 14 }}>{t}</span></div> } },
								{ title: '描述', dataIndex: 'desc', render: t => <span style={{ fontSize: 14 }}>{t}</span> },
								{ title: '', width: 80, render: (_, r) => r.level ? <Tag color="red" style={{ fontSize: 12 }}>{r.level}</Tag> : null }
							]}
						/>
						<div style={{ textAlign: 'center', marginTop: 12 }}><Button type="link" style={{ fontSize: 16, color: '#1890ff' }}>查看更多日志</Button></div>
					</Card>
				</Col>

				<Col xs={24} lg={10}>
					<Card
						title={<><SettingOutlined style={{ marginRight: 6, }} /> 设备控制面板</>}
						bordered={false}
						style={{ borderRadius: 12, marginBottom: 16 }}
						bodyStyle={{ padding: 16, paddingBottom: 0 }}
					>						<Select
							style={{ width: 220, marginBottom: 10 }}
							placeholder="请选择设备"
							value={selectedDevice?.device_sn || selectedDevice?.serialNumber}
							onChange={handleDeviceChange}
							showSearch  // 👈 开启搜索
							allowClear // 允许删除/清空
							optionFilterProp="label"  // 👈 按设备名称搜索
							filterOption={(input, option) =>
								option.label.toLowerCase().includes(input.toLowerCase())
							}
							options={devicesAll.map(item => ({
								value: item.device_sn || item.serialNumber,
								label: item.deviceAlias || item.drone_callsign || item.callsign || item.deviceName || '未知设备'
							}))}
						/>

						{selectedDevice && (
							<Row gutter={16}>
								<Col span={12}>
									<div style={{ marginBottom: 24 }}>
										<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
											<span style={{ fontSize: 24, color: '#1890ff' }}><RocketOutlined /></span>
											<span style={{ fontSize: 16, fontWeight: 600 }}>{selectedDevice.deviceAlias || selectedDevice.drone_callsign || selectedDevice.callsign || selectedDevice.deviceName}</span>
											<Tag color={selectedDevice.onlineStatus === 1 ? "success" : "default"} size="small">
												{selectedDevice.onlineStatus == 1 ? "在线" : "离线"}
											</Tag>
											<Button
												type="primary"
												ghost
												size="small"
												icon={<InfoCircleOutlined />}
												style={{ borderRadius: 4, fontSize: 12, marginLeft: 'auto' }}
												onClick={() => onViewStatus && onViewStatus(selectedDevice.device_sn || selectedDevice.serialNumber)}
											>
												详情
											</Button>
										</div>

										<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
											<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
												<span style={{ color: '#52c41a' }}><ThunderboltOutlined /></span>
												<span style={{ fontSize: 12 }}>电量 {fix2(selectedDevice.capacity_percent || 100)}%</span>
											</div>
											{selectedDevice.environment_temperature && (
												<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
													<span style={{ fontSize: 12 }}>温度</span>
													<span style={{ color: '#faad14' }}>{fix2(selectedDevice.environment_temperature || 25)}℃</span>
												</div>
											)}

										</div>

										<div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12, maxHeight: "160px", overflow: "auto", scrollbarWidth: 'thin', scrollbarColor: '#ccc transparent' }}>
											<div style={{ display: 'flex', justifyContent: 'space-between' }}>
												<span style={{ color: '#666', fontSize: 12 }}>产品类型</span>
												<span style={{ fontSize: 12 }}>{getVal(selectedDevice.productName)}</span>
											</div>
											<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
												<span style={{ color: '#666', fontSize: 12, whiteSpace: 'nowrap' }}>设备SN</span>
												<span
													style={{
														fontSize: 12,
														wordBreak: 'break-all',   // 强制换行
														whiteSpace: 'normal',     // 允许换行
														textAlign: 'right',      // 右对齐
														maxWidth: '70%',          // 限制宽度，避免撑满
													}}
												>
													{getVal(selectedDevice.device_sn || selectedDevice.serialNumber)}
												</span>
											</div>
											{selectedDevice.activeTime && (
												<div style={{ display: 'flex', justifyContent: 'space-between' }}>
													<span style={{ color: '#666', fontSize: 12 }}>激活时间</span>
													<span style={{ fontSize: 12 }}>{selectedDevice.activeTime}</span>
												</div>
											)}
											{selectedDevice.firmwareVersion && (
												<div style={{ display: 'flex', justifyContent: 'space-between' }}>
													<span style={{ color: '#666', fontSize: 12 }}>固件版本</span>
													<span style={{ fontSize: 12 }}>v{selectedDevice.firmwareVersion}</span>
												</div>
											)}
											{/* 无人机特定信息 */}
											{(selectedDevice.productName?.includes('无人机') || selectedDevice.device_sn) && (
												<>
													<div style={{ display: 'flex', justifyContent: 'space-between' }}>
														<span style={{ color: '#666', fontSize: 12 }}>飞行高度</span>
														<span style={{ fontSize: 12 }}>{fix2(selectedDevice.height)} m</span>
													</div>
													<div style={{ display: 'flex', justifyContent: 'space-between' }}>
														<span style={{ color: '#666', fontSize: 12 }}>飞行风速</span>
														<span style={{ fontSize: 12 }}>{fix2(selectedDevice.wind_speed)} m/s</span>
													</div>
												</>
											)}

										</div>

										<div style={{ display: 'flex', justifyContent: "space-between", flexWrap: 'wrap', gap: 6 }}>
											<Button type="primary" size="large" style={{ borderRadius: 8, flex: 1 }} onClick={handleStart}>启动任务</Button>
											<Button style={{ borderRadius: 8, flex: 1 }} size="large" onClick={handlePause}>暂停</Button>
											<Button type="primary" style={{ borderRadius: 8, flex: 1 }} size="large" onClick={handleReturn}>返航</Button>
											<Button style={{ background: '#52c41a', borderColor: '#52c41a', color: "#fff", borderRadius: 8, flex: 1 }} size="large" onClick={handleRecharge}>回充</Button>
										</div>
									</div>
								</Col>

								<Col span={12}>
									<div style={{ marginBottom: 16 }}>
										<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
											<span style={{ fontSize: 14, fontWeight: 500, color: "#666" }}>实时画面</span>
											<span style={{ fontSize: 13, color: '#999' }}>实时监控</span>
										</div>
										<div style={{ width: '100%', height: 160, borderRadius: 8, position: 'relative', overflow: 'hidden', background: '#000' }}>
											<DroneLivePlayer streamData={planeVideo?.[0] || null} />
											{selectedDevice.device_sn && (
												<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(0,0,0,0.6)', color: '#fff', display: 'flex', justifyContent: 'space-between', padding: '8px 12px', fontSize: 14 }}>
													<span>高度 {fix2(selectedDevice.height)}m</span>
													<span>风速 {fix2(selectedDevice.wind_speed)}m/s</span>
												</div>
											)}


										</div>
									</div>

									<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
										<Button size="large" style={{ flex: 1, borderRadius: 8 }}>切换手动</Button>
										<Button danger size="large" style={{ flex: 1, borderRadius: 8 }} onClick={handleEmergencyStop}>急停</Button>
									</div>
								</Col>
							</Row>
						)}
					</Card>

					<Card title={<><ApiOutlined /> AI分析与操作建议</>} bordered={false} style={{ borderRadius: 12, marginBottom: 16 }}>
						<Row gutter={16} style={{ marginBottom: 20 }}>
							<Col span={6}><div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 12px 4px', borderRadius: 12, border: '1px solid #e8e8e8' }}><div style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(255,77,79,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ff4d4f', fontSize: 20 }}><span role="img" aria-label="hotspot">🔥</span></div><div><div style={{ fontSize: 11, color: '#666' }}>热斑疑似</div><div style={{ fontSize: 22, fontWeight: 700, color: '#222' }}>2 <span style={{ fontSize: 12 }}>处</span></div></div></div></Col>
							<Col span={6}><div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 12px 4px', borderRadius: 12, border: '1px solid #e8e8e8' }}><div style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(82,196,26,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#52c41a', fontSize: 16 }}><BranchesOutlined /></div><div><div style={{ fontSize: 11, color: '#666' }}>杂草高发区</div><div style={{ fontSize: 22, fontWeight: 700, color: '#222' }}>3 <span style={{ fontSize: 12 }}>块</span></div></div></div></Col>
							<Col span={6}><div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 12px 4px', borderRadius: 12, border: '1px solid #e8e8e8' }}><div style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(24,144,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1890ff', fontSize: 16 }}><CloudOutlined /></div><div><div style={{ fontSize: 11, color: '#666' }}>组件风险区</div><div style={{ fontSize: 22, fontWeight: 700, color: '#222' }}>4 <span style={{ fontSize: 12 }}>块</span></div></div></div></Col>
							<Col span={6}><div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 12px 4px', borderRadius: 12, border: '1px solid #e8e8e8' }}><div style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(255,77,79,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ff4d4f', fontSize: 16 }}><WarningOutlined /></div><div><div style={{ fontSize: 11, color: '#666' }}>围栏异常</div><div style={{ fontSize: 22, fontWeight: 700, color: '#ff4d4f' }}>1 <span style={{ fontSize: 12 }}>处</span></div></div></div></Col>
						</Row>
						<Row gutter={16}>
							<Col span={14}>
								<div style={{ marginBottom: 12 }}>
									<div style={{ fontSize: 16, fontWeight: 600, color: '#1890ff', marginBottom: 12 }}>建议操作</div>
									<div style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '16px', borderRadius: 12, border: '1px solid #e8e8e8' }}>
										<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ color: '#1890ff' }}>⦿</span><span style={{ fontSize: 16 }}>优先执行巡检航线 P-03</span></div><ArrowRightOutlined style={{ color: '#666' }} /></div>
										<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ color: '#1890ff' }}>⦿</span><span style={{ fontSize: 16 }}>先行安排除草任务 G-02</span></div><ArrowRightOutlined style={{ color: '#666' }} /></div>
										<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ color: '#1890ff' }}>⦿</span><span style={{ fontSize: 16 }}>建议生成清洗工单</span></div><ArrowRightOutlined style={{ color: '#666' }} /></div>
									</div>
								</div>
							</Col>
							<Col span={10}>
								<div style={{ display: 'flex', flexDirection: 'column', paddingBottom: "12px", gap: 16, height: '100%', justifyContent: "end" }}>
									<div style={{ display: 'flex', gap: 12, flexWrap: "wrap" }}>
										<Button type="primary" size="large" style={{ flex: 1, borderRadius: 8, fontSize: 16 }}>生成任务</Button>
										<Button size="large" style={{ flex: 1, borderRadius: 8, fontSize: 16, border: '1px solid #1890ff', color: '#1890ff' }}>AI优化路径</Button>
									</div>
									<Button type="primary" size="large" style={{ borderRadius: 8, fontSize: 16 }}>一键联动作业</Button>
								</div>
							</Col>
						</Row>
					</Card>

					{/* 条件渲染：只有无人机显示环境与飞行条件 */}
					{(selectedDevice?.productName?.includes('无人机') || selectedDevice?.device_sn) && (
						<Card title="环境与飞行条件" bordered={false} style={{ borderRadius: 12, marginBottom: 16 }}>
							<div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center" }}>
								<div style={{ display: "flex", border: "1px solid #e8e8e8", borderRadius: 12, overflow: "hidden", flex: 1 }}>
									<div style={{ flex: 1, textAlign: 'center', whiteSpace: "nowrap", padding: "12px 4px", borderRight: "1px solid #e8e8e8" }}><div style={{ fontSize: 11, color: '#666', fontWeight: 600 }}>风速</div><div style={{ fontSize: 14, fontWeight: 700, color: '#222', marginTop: 2 }}>{fix2(selectedDevice?.wind_speed)} m/s</div></div>
									<div style={{ flex: 1, textAlign: 'center', whiteSpace: "nowrap", padding: "12px 4px", borderRight: "1px solid #e8e8e8" }}><div style={{ fontSize: 11, color: '#666', fontWeight: 600 }}>温度</div><div style={{ fontSize: 14, fontWeight: 700, color: '#222', marginTop: 2 }}>{fix2(selectedDevice?.environment_temperature)}℃</div></div>
									<div style={{ flex: 1, textAlign: 'center', whiteSpace: "nowrap", padding: "12px 4px", borderRight: "1px solid #e8e8e8" }}><div style={{ fontSize: 11, color: '#666', fontWeight: 600 }}>降雨</div><div style={{ fontSize: 14, fontWeight: 700, color: '#222', marginTop: 2 }}>{getVal(selectedDevice?.rainfall)}</div></div>
									<div style={{ flex: 1, textAlign: 'center', whiteSpace: "nowrap", padding: "12px 4px" }}><div style={{ fontSize: 11, color: '#666', fontWeight: 600 }}>RTK</div><div style={{ fontSize: 14, fontWeight: 700, color: '#52c41a', marginTop: 2 }}>{selectedDevice?.position_state?.is_fixed === 'fixing_successful' ? '固定' : '未固定'}</div></div>
								</div>
								<div style={{ width: 110, padding: '12px 8px', borderRadius: 8, background: '#f6ffed', border: '1px solid #b7eb8f', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
									<div style={{ fontSize: 14, fontWeight: 700, color: '#52c41a' }}>适宜执行</div>
									<div style={{ width: 18, height: 18, borderRadius: '50%', background: '#52c41a', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CheckCircleOutlined style={{ fontSize: 12, color: '#fff' }} /></div>
									<div style={{ fontSize: 11, color: '#666' }}>可正常作业</div>
								</div>
							</div>
						</Card>
					)}

					{/* 条件渲染：机器人显示其余信息（此处以任务详情为例） */}
					{(!selectedDevice?.productName?.includes('无人机') && !selectedDevice?.device_sn) && (
						<Card title={<><RobotOutlined /> 机器人作业状态</>} bordered={false} style={{ borderRadius: 12, marginBottom: 16 }}>
							<Row gutter={16}>
								<Col span={8}>
									<Statistic title="累计里程" value={128.5} suffix="km" valueStyle={{ fontSize: 20 }} />
								</Col>
								<Col span={8}>
									<Statistic title="本次作业耗时" value={45} suffix="min" valueStyle={{ fontSize: 20 }} />
								</Col>
								<Col span={8}>
									<Statistic title="预计剩余时间" value={12} suffix="min" valueStyle={{ fontSize: 20 }} />
								</Col>
							</Row>
						</Card>
					)}

					<Card title={<><ClockCircleOutlined /> 任务执行时间线</>} bordered={false} style={{ borderRadius: 12 }} extra={<div style={{ fontSize: 12, color: '#666' }}>今天 2025-05-24</div>}>
						<Timeline mode="left">
							{taskTimeline.map((item, idx) => (
								<Timeline.Item key={idx} color={item.color} label={<div style={{ fontSize: 11, color: '#999' }}>{item.time}</div>}>
									<div style={{ fontSize: 13 }}>{item.text}</div>
									<div style={{ fontSize: 11, color: '#999' }}>{item.status}</div>
								</Timeline.Item>
							))}
						</Timeline>
						<div style={{ textAlign: 'center', marginTop: 12 }}><Button type="link">查看更多</Button></div>
					</Card>
				</Col>
			</Row>

			<Modal
				title="视频预览"
				open={!!zoomedVideo}
				onCancel={() => setZoomedVideo(null)}
				footer={null}
				width={1000}
				centered
				bodyStyle={{ padding: 0, height: 600, background: '#000' }}
				destroyOnClose
			>
				{zoomedVideo && <DroneLivePlayer streamData={zoomedVideo} videoMode="LARGE" />}
			</Modal>
		</Content>
	);
}