import { useState, useEffect } from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { Badge } from '../../ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
import { Video, MapPin, Gauge, Lock, Power } from 'lucide-react';
import { machineryStorage } from '../../../lib/machineryStorage';
import { MachineryRecord } from '../../../types/machinery';

export function Cockpit() {
  const [machinery, setMachinery] = useState<MachineryRecord[]>([]);
  const [selectedMachineryId, setSelectedMachineryId] = useState<string>('');
  const [selectedMachinery, setSelectedMachinery] = useState<MachineryRecord | null>(null);

  useEffect(() => {
    // 加载农机列表
    const machineryData = machineryStorage.getAllMachinery();
    setMachinery(machineryData);
    
    // 默认选择第一台农机
    if (machineryData.length > 0) {
      setSelectedMachineryId(machineryData[0].id);
      setSelectedMachinery(machineryData[0]);
    }
  }, []);

  // 切换农机
  const handleMachineryChange = (machineryId: string) => {
    setSelectedMachineryId(machineryId);
    const selected = machinery.find(m => m.id === machineryId);
    setSelectedMachinery(selected || null);
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-primary">农业驾驶舱</h2>
          <p className="text-muted-foreground">融合视频、参数、地图、数据的综合监控界面</p>
        </div>
        
        {/* 农机选择器 */}
        <div className="flex items-center gap-3">
          <span className="text-sm text-muted-foreground">选择农机:</span>
          <Select value={selectedMachineryId} onValueChange={handleMachineryChange}>
            <SelectTrigger className="w-64">
              <SelectValue placeholder="选择要监控的农机" />
            </SelectTrigger>
            <SelectContent>
              {machinery.map(m => (
                <SelectItem key={m.id} value={m.id}>
                  {m.name} ({m.model})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Badge className={
            selectedMachinery?.status === '作业中' ? 'bg-success-muted text-success' :
            selectedMachinery?.status === '空闲' ? 'bg-info-muted text-info' :
            selectedMachinery?.status === '维修中' ? 'bg-warning-muted text-warning' :
            'bg-muted text-muted-foreground'
          }>
            {selectedMachinery?.status || '在线'}
          </Badge>
        </div>
      </div>

      {/* 农机信息卡片 */}
      {selectedMachinery && (
        <Card className="p-4 bg-gradient-to-r from-green-50 to-blue-50">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="mb-1">{selectedMachinery.name}</h3>
              <p className="text-sm text-muted-foreground">
                {selectedMachinery.model} · 设备编号: {selectedMachinery.equipmentNumber || selectedMachinery.id}
              </p>
            </div>
            <div className="text-right">
              <div className="text-xs text-muted-foreground">当前位置</div>
              <div className="flex items-center gap-1 mt-1">
                <MapPin className="w-4 h-4 text-success" />
                <span className="text-sm">{selectedMachinery.currentField || '未知地块'}</span>
              </div>
            </div>
          </div>
        </Card>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 视频监控 */}
        <div className="lg:col-span-2 space-y-4">
          <Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <h3>实时视频 {selectedMachinery && <span className="text-sm text-muted-foreground ml-2">({selectedMachinery.name})</span>}</h3>
              <div className="flex gap-2">
                <Badge variant="outline">RTSP</Badge>
                <Badge variant="outline">1080P</Badge>
              </div>
            </div>
            <div className="aspect-video bg-gray-900 rounded-lg flex items-center justify-center text-white">
              <div className="text-center">
                <Video className="w-16 h-16 mx-auto mb-3" />
                <p>实时视频流</p>
                <p className="text-xs text-gray-400 mt-1">农机摄像头直播</p>
              </div>
            </div>
          </Card>

          {/* 地图定位 */}
          <Card className="p-6">
            <h3 className="mb-4">实时位置</h3>
            <div className="aspect-video bg-success-muted rounded-lg flex items-center justify-center">
              <div className="text-center text-muted-foreground">
                <MapPin className="w-12 h-12 mx-auto mb-3 text-success" />
                <p>地图显示</p>
                <p className="text-xs mt-1">北斗定位 | 精度±2m</p>
              </div>
            </div>
          </Card>
        </div>

        {/* 右侧控制面板 */}
        <div className="space-y-4">
          {/* 运行参数 */}
          <Card className="p-6">
            <h3 className="mb-4">运行参数</h3>
            <div className="space-y-3">
              <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                <span className="text-sm">发动机转速</span>
                <span className="">1850 RPM</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                <span className="text-sm">水温</span>
                <span className="text-success">85°C</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                <span className="text-sm">油压</span>
                <span className="text-success">3.5 bar</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
                <span className="text-sm">油量</span>
                <span>65%</span>
              </div>
            </div>
          </Card>

          {/* 作业数据 */}
          <Card className="p-6">
            <h3 className="mb-4">作业数据</h3>
            <div className="space-y-3">
              <div>
                <div className="text-xs text-muted-foreground mb-1">已作业面积</div>
                <div className="text-2xl text-success">28.5 亩</div>
              </div>
              <div>
                <div className="text-xs text-muted-foreground mb-1">作业速率</div>
                <div className="">7.2 亩/时</div>
              </div>
              <div>
                <div className="text-xs text-muted-foreground mb-1">行驶速度</div>
                <div className="">15 km/h</div>
              </div>
            </div>
          </Card>

          {/* 远程控制 */}
          <Card className="p-6">
            <h3 className="mb-4">远程控制</h3>
            <div className="space-y-2">
              <Button variant="destructive" className="w-full" size="sm">
                <Power className="w-4 h-4 mr-2" />
                远程熄火
              </Button>
              <Button variant="outline" className="w-full" size="sm">
                <Lock className="w-4 h-4 mr-2" />
                车辆锁定
              </Button>
            </div>
            <p className="text-xs text-muted-foreground mt-3">
              * 所有控制指令加密传输
            </p>
          </Card>
        </div>
      </div>

      {/* 功能说明 */}
      <Card className="p-6 bg-info-muted border-info">
        <h4 className="mb-3 text-muted-foreground">驾驶舱功能</h4>
        <ul className="space-y-2 text-sm text-muted-foreground">
          <li>• 多路视频切换：前视、后视、侧视摄像头</li>
          <li>• 实时参数监控：发动机、油温、油压等关键指标</li>
          <li>• 地图轨迹显示：当前位置、作业路线、作业区域</li>
          <li>• 远程控制接口：紧急熄火、车辆锁定等安全功能</li>
          <li>• 指令传输采用SSL加密，确保安全可靠</li>
        </ul>
      </Card>
    </div>
  );
}
