import { Metadata } from 'next'

export const metadata: Metadata = {
  title: '农机档案录入与维护 - Crop-X 智慧农业管理系统',
  description: '农机设备信息管理',
}

export default function MachineryEntryPage() {
  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-green-50 rounded-lg p-6">
            <h3 className="text-lg font-semibold text-green-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-green-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-green-500">
                  <option>拖拉机</option>
                  <option>收割机</option>
                  <option>播种机</option>
                  <option>喷洒机</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  购买日期
                </label>
                <input
                  type="date"
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                />
              </div>
              <button
                type="submit"
                className="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
              >
                添加农机
              </button>
            </form>
          </div>

          <div className="bg-blue-50 rounded-lg p-6">
            <h3 className="text-lg font-semibold text-blue-900 mb-4">
              农机列表
            </h3>
            <div className="space-y-3">
              {[
                { id: 'NJ001', type: '拖拉机', status: '运行中', date: '2023-01-15' },
                { id: 'NJ002', type: '收割机', status: '空闲中', date: '2023-03-20' },
                { id: 'NJ003', type: '播种机', status: '维护中', date: '2023-02-10' },
              ].map((machine) => (
                <div key={machine.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">{machine.id}</h4>
                      <p className="text-sm text-gray-600">{machine.type}</p>
                      <p className="text-xs text-gray-500">购买日期: {machine.date}</p>
                    </div>
                    <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                      machine.status === '运行中' ? 'bg-green-100 text-green-800' :
                      machine.status === '空闲中' ? 'bg-gray-100 text-gray-800' :
                      'bg-yellow-100 text-yellow-800'
                    }`}>
                      {machine.status}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}