/**
 * filekorolheader: 用户登录页面 - 统一身份认证入口
 * 功能：用户密码登录、手机号登录、表单验证、图形验证码
 * 路径：/login
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui语义化样式，支持暗色主题
 */

'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { SmartFieldBackground } from '@/components/auth/SmartFieldBackground';
import { Shield } from 'lucide-react';
import { LoginForm } from './components/LoginForm';

export default function LoginPage() {
  const router = useRouter();

  const handleRegisterClick = () => {
    router.push('/register');
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
      {/* 智慧大田动态背景 */}
      <SmartFieldBackground />

      {/* 内容区域 */}
      <div className="w-full max-w-md relative z-10">
        {/* Logo和标题 */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-2xl mb-4 shadow-lg">
            <Shield className="w-8 h-8 text-green-600" />
          </div>
          <h1 className="text-white mb-2 drop-shadow-lg">智慧农业生产管理系统</h1>
          <p className="text-sm text-white/90 drop-shadow-md">安全、智能、高效的农业管理平台</p>
        </div>

        {/* 登录表单 */}
        <LoginForm onRegisterClick={handleRegisterClick} />

        {/* 安全提示 */}
        <div className="mt-6 p-3 bg-green-50 dark:bg-green-950 rounded-lg">
          <div className="flex items-start gap-2">
            <Shield className="w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
            <div className="text-xs text-green-900 dark:text-green-100">
              <p className="mb-1">安全保障：</p>
              <ul className="space-y-0.5">
                <li>• 登录信息加密传输</li>
                <li>• 会话自动管理，24小时有效期</li>
                <li>• 记录登录IP、设备信息用于安全审计</li>
              </ul>
            </div>
          </div>
        </div>

        {/* 页脚 */}
        <div className="mt-6 text-center text-xs text-white/80 drop-shadow-md">
          <p>© 2024 智慧农业生产管理系统. All rights reserved.</p>
        </div>
      </div>
    </div>
  );
}