import { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = {
  title: '登录 - Crop-X 智慧农业管理系统',
  description: '用户登录页面',
}

export default function LoginPage() {
  return (
    <div className="bg-white rounded-lg shadow-xl p-8">
      <div className="text-center mb-8">
        <div className="text-4xl mb-4">🌱</div>
        <h1 className="text-2xl font-bold text-gray-800 mb-2">
          Crop-X 智慧农业
        </h1>
        <p className="text-gray-600">
          登录您的账户
        </p>
      </div>

      <form className="space-y-6">
        <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 focus:border-transparent"
            placeholder="请输入用户名"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            密码
          </label>
          <input
            type="password"
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
            placeholder="请输入密码"
          />
        </div>

        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <input
              type="checkbox"
              className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
            />
            <label className="ml-2 block text-sm text-gray-700">
              记住我
            </label>
          </div>
          <a href="#" className="text-sm text-green-600 hover:text-green-500">
            忘记密码？
          </a>
        </div>

        <button
          type="submit"
          className="w-full py-2 px-4 bg-green-600 hover:bg-green-700 rounded-md text-white font-medium transition-colors"
        >
          登录
        </button>
      </form>

      <div className="mt-6 text-center">
        <p className="text-sm text-gray-600">
          还没有账户？{' '}
          <Link href="/register" className="text-green-600 hover:text-green-500 font-medium">
            立即注册
          </Link>
        </p>
      </div>

      <div className="mt-8 pt-6 border-t border-gray-200">
        <p className="text-xs text-gray-500 text-center">
          © 2024 Crop-X. All rights reserved.
        </p>
      </div>
    </div>
  )
}