import { Metadata } from 'next'

export const metadata: Metadata = {
  title: '任务分配 - Crop-X 智慧农业管理系统',
  description: '农机作业任务分配',
}

export default function TaskAssignmentPage() {
  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-2 gap-6">
          <div className="bg-blue-50 rounded-lg p-6">
            <h3 className="text-lg font-semibold text-blue-900 mb-4">
              创建新任务
            </h3>
            <form className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  任务名称
                </label>
                <input
                  type="text"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="请输入任务名称"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  选择农机
                </label>
                <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                  <option>拖拉机-001</option>
                  <option>收割机-002</option>
                  <option>播种机-003</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  选择驾驶员
                </label>
                <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                  <option>张师傅</option>
                  <option>李师傅</option>
                  <option>王师傅</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  作业地块
                </label>
                <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                  <option>东区农田-01</option>
                  <option>西区农田-02</option>
                  <option>南区农田-03</option>
                </select>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    开始时间
                  </label>
                  <input
                    type="datetime-local"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    预计结束时间
                  </label>
                  <input
                    type="datetime-local"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>
              <button
                type="submit"
                className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
              >
                创建任务
              </button>
            </form>
          </div>

          <div className="bg-green-50 rounded-lg p-6">
            <h3 className="text-lg font-semibold text-green-900 mb-4">
              待分配任务列表
            </h3>
            <div className="space-y-3">
              {[
                { id: 'T001', name: '东区收割作业', priority: '高', deadline: '2024-10-25' },
                { id: 'T002', name: '南区犁地作业', priority: '中', deadline: '2024-10-26' },
                { id: 'T003', name: '北区播种作业', priority: '低', deadline: '2024-10-27' },
              ].map((task) => (
                <div key={task.id} className="bg-white rounded-lg p-4 shadow-sm">
                  <div className="flex justify-between items-start">
                    <div>
                      <h4 className="font-semibold text-gray-800">{task.name}</h4>
                      <p className="text-sm text-gray-600">任务编号: {task.id}</p>
                      <p className="text-sm text-gray-600">截止日期: {task.deadline}</p>
                    </div>
                    <div className="text-right">
                      <span className={`inline-block px-2 py-1 text-xs font-medium rounded-full mb-2 ${
                        task.priority === '高' ? 'bg-red-100 text-red-800' :
                        task.priority === '中' ? 'bg-yellow-100 text-yellow-800' :
                        'bg-green-100 text-green-800'
                      }`}>
                        {task.priority}优先级
                      </span>
                      <br />
                      <button className="text-blue-600 hover:text-blue-800 text-sm">
                        分配任务
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-6 bg-yellow-50 rounded-lg p-6">
          <h3 className="text-lg font-semibold text-yellow-900 mb-4">
            当前任务状态
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white rounded-lg p-4 text-center">
              <div className="text-2xl font-bold text-blue-600 mb-2">8</div>
              <div className="text-sm text-gray-600">待分配任务</div>
            </div>
            <div className="bg-white rounded-lg p-4 text-center">
              <div className="text-2xl font-bold text-green-600 mb-2">15</div>
              <div className="text-sm text-gray-600">进行中任务</div>
            </div>
            <div className="bg-white rounded-lg p-4 text-center">
              <div className="text-2xl font-bold text-purple-600 mb-2">23</div>
              <div className="text-sm text-gray-600">已完成任务</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}