import { Metadata } from 'next'

export const metadata: Metadata = {
  title: '实时位置追踪 - Crop-X 智慧农业管理系统',
  description: '农机设备定位监控',
}

export default function RealTimeLocationTrackingPage() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-2xl font-bold text-gray-800 mb-6">
          📍 实时位置追踪
        </h2>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            <div className="bg-gray-100 rounded-lg h-96 flex items-center justify-center">
              <div className="text-center">
                <div className="text-6xl mb-4">🗺️</div>
                <h3 className="text-lg font-semibold text-gray-700 mb-2">
                  地图视图
                </h3>
                <p className="text-gray-600">
                  实时显示所有农机的地理位置
                </p>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <div className="bg-green-50 rounded-lg p-4">
              <h3 className="font-semibold text-green-900 mb-3">
                在线农机
              </h3>
              <div className="space-y-2">
                {[
                  { id: 'NJ001', name: '拖拉机-001', location: '东区农田', status: '工作中' },
                  { id: 'NJ002', name: '收割机-002', location: '西区农田', status: '工作中' },
                  { id: 'NJ003', name: '播种机-003', location: '南区农田', status: '空闲' },
                ].map((machine) => (
                  <div key={machine.id} className="bg-white rounded-lg p-3 shadow-sm">
                    <div className="flex items-center justify-between">
                      <div>
                        <h4 className="font-medium text-gray-800">{machine.name}</h4>
                        <p className="text-sm text-gray-600">{machine.location}</p>
                      </div>
                      <div className={`w-2 h-2 rounded-full ${
                        machine.status === '工作中' ? 'bg-green-500' : 'bg-gray-400'
                      }`} />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-blue-50 rounded-lg p-4">
              <h3 className="font-semibold text-blue-900 mb-3">
                统计信息
              </h3>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-gray-600">总农机数</span>
                  <span className="font-semibold">12 台</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">在线</span>
                  <span className="font-semibold text-green-600">10 台</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">离线</span>
                  <span className="font-semibold text-gray-600">2 台</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
          <button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
            🔄 刷新位置
          </button>
          <button className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
            📍 定位特定农机
          </button>
          <button className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors">
            📊 历史轨迹
          </button>
        </div>
      </div>
    </div>
  )
}