import React, { useState, useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { motion } from 'framer-motion';
import { Eye, EyeOff, LogIn, Building2, Factory, Droplets } from 'lucide-react';
import { useResponsive } from '../hooks/useResponsive';
import { ComingSoonModal } from '../components/ComingSoonModal';
import { DEMO_ACCOUNTS, SHOW_DEMO_ACCOUNTS, APP_CONFIG, STORAGE_KEYS } from '../config/app';

// 图标映射（将字符串映射到实际组件）
const iconMap: Record<string, typeof Building2> = {
  Building2,
  Factory,
  Droplets,
};

// 从配置中心获取演示账号，并映射图标组件
const demoAccounts = DEMO_ACCOUNTS.map(account => ({
  ...account,
  icon: iconMap[account.icon] || Building2,
}));

// 纺织主题背景动画组件
function YarnAnimation() {
  const { isMobile } = useResponsive();

  // 移动端也展示丰富的动画，只是减少元素数量
  const verticalCount = isMobile ? 6 : 12;
  const horizontalCount = isMobile ? 4 : 8;
  const dotCount = isMobile ? 10 : 20;
  const floatCount = isMobile ? 3 : 5;

  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {/* 垂直纱线 - 经线 */}
      {[...Array(verticalCount)].map((_, i) => (
        <motion.div
          key={`v-${i}`}
          className="absolute top-0 w-px bg-gradient-to-b from-transparent via-amber-100/20 to-transparent"
          style={{
            left: `${8 + i * (isMobile ? 16 : 8)}%`,
            height: '100%'
          }}
          animate={{
            opacity: [0.1, 0.3, 0.1],
            scaleX: [1, 1.5, 1]
          }}
          transition={{
            duration: 3 + Math.random() * 2,
            repeat: Infinity,
            ease: "easeInOut",
            delay: i * 0.2
          }}
        />
      ))}

      {/* 水平编织线 - 纬线 */}
      {[...Array(horizontalCount)].map((_, i) => (
        <motion.div
          key={`h-${i}`}
          className="absolute left-0 h-px bg-gradient-to-r from-transparent via-blue-100/15 to-transparent"
          style={{
            top: `${10 + i * (isMobile ? 20 : 12)}%`,
            width: '100%'
          }}
          animate={{
            opacity: [0.1, 0.25, 0.1],
            scaleY: [1, 2, 1]
          }}
          transition={{
            duration: 4 + Math.random() * 2,
            repeat: Infinity,
            ease: "easeInOut",
            delay: i * 0.3
          }}
        />
      ))}

      {/* 交织点发光效果 */}
      {[...Array(dotCount)].map((_, i) => (
        <motion.div
          key={`dot-${i}`}
          className="absolute w-1 h-1 rounded-full bg-amber-200/40"
          style={{
            left: `${10 + (i % (isMobile ? 4 : 6)) * (isMobile ? 25 : 15)}%`,
            top: `${15 + Math.floor(i / (isMobile ? 4 : 6)) * (isMobile ? 30 : 20)}%`
          }}
          animate={{
            opacity: [0, 0.6, 0],
            scale: [0.5, 1.5, 0.5]
          }}
          transition={{
            duration: 2 + Math.random(),
            repeat: Infinity,
            ease: "easeInOut",
            delay: Math.random() * 3
          }}
        />
      ))}

      {/* 飘动的纱线 */}
      {[...Array(floatCount)].map((_, i) => (
        <motion.div
          key={`float-${i}`}
          className="absolute w-24 h-px bg-gradient-to-r from-transparent via-amber-200/30 to-transparent"
          style={{
            top: `${20 + i * (isMobile ? 25 : 15)}%`,
            left: '-100px'
          }}
          animate={{
            x: ['0vw', '120vw'],
            y: [0, Math.sin(i) * 30, 0],
            opacity: [0, 0.5, 0]
          }}
          transition={{
            duration: 8 + i * 2,
            repeat: Infinity,
            ease: "linear",
            delay: i * 1.5
          }}
        />
      ))}

      {/* 旋转的编织图案 - 移动端缩小 */}
      <motion.div
        className={`absolute top-1/4 right-1/4 opacity-10 ${isMobile ? 'w-20 h-20' : 'w-32 h-32'}`}
        animate={{ rotate: 360 }}
        transition={{ duration: 60, repeat: Infinity, ease: "linear" }}
      >
        <svg viewBox="0 0 100 100" className="w-full h-full">
          <defs>
            <pattern id="weave" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M0,10 L20,10 M10,0 L10,20" stroke="currentColor" strokeWidth="0.5" fill="none" className="text-amber-100"/>
              <circle cx="10" cy="10" r="2" className="text-blue-100" fill="currentColor"/>
            </pattern>
          </defs>
          <rect width="100" height="100" fill="url(#weave)"/>
        </svg>
      </motion.div>

      {/* 底部波浪纱线效果 */}
      <svg className={`absolute bottom-0 left-0 w-full opacity-20 ${isMobile ? 'h-20' : 'h-32'}`} viewBox="0 0 1440 120" preserveAspectRatio="none">
        <motion.path
          d="M0,60 Q360,120 720,60 T1440,60 L1440,120 L0,120 Z"
          fill="url(#yarnGradient)"
          animate={{
            d: [
              "M0,60 Q360,120 720,60 T1440,60 L1440,120 L0,120 Z",
              "M0,60 Q360,0 720,60 T1440,60 L1440,120 L0,120 Z",
              "M0,60 Q360,120 720,60 T1440,60 L1440,120 L0,120 Z"
            ]
          }}
          transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
        />
        <defs>
          <linearGradient id="yarnGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#fbbf24" stopOpacity="0.3"/>
            <stop offset="50%" stopColor="#60a5fa" stopOpacity="0.3"/>
            <stop offset="100%" stopColor="#fbbf24" stopOpacity="0.3"/>
          </linearGradient>
        </defs>
      </svg>

    </div>
  );
}

// 纺织行业Logo组件
function TextileLogo() {
  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-amber-500 via-orange-500 to-amber-600 rounded-2xl shadow-2xl shadow-amber-500/30 mb-4"
    >
      <svg className="w-10 h-10 text-white" viewBox="0 0 48 48" fill="none">
        {/* 经线 (垂直) */}
        <motion.path
          d="M12 8 L12 40 M20 8 L20 40 M28 8 L28 40 M36 8 L36 40"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: 1 }}
          transition={{ duration: 1, ease: "easeOut" }}
        />
        {/* 纬线 (水平) */}
        <motion.path
          d="M8 16 L40 16 M8 24 L40 24 M8 32 L40 32"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: 1 }}
          transition={{ duration: 1, delay: 0.3, ease: "easeOut" }}
        />
        {/* 交织点 */}
        <motion.circle cx="16" cy="16" r="2" fill="currentColor"
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ delay: 0.8 }}
        />
        <motion.circle cx="24" cy="24" r="2" fill="currentColor"
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ delay: 0.9 }}
        />
        <motion.circle cx="32" cy="32" r="2" fill="currentColor"
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ delay: 1 }}
        />
        {/* 梭子/织针 */}
        <motion.ellipse 
          cx="36" cy="20" rx="4" ry="2" 
          fill="currentColor"
          initial={{ x: -10, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          transition={{ delay: 1.2, duration: 0.5 }}
        />
      </svg>
    </motion.div>
  );
}

// 梭子形状鼠标指针组件
function ShuttleCursor() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isVisible, setIsVisible] = useState(false);
  const { isMobile } = useResponsive();

  useEffect(() => {
    if (isMobile) return;

    const handleMouseMove = (e: MouseEvent) => {
      setPosition({ x: e.clientX, y: e.clientY });
      setIsVisible(true);
    };

    const handleMouseLeave = () => {
      setIsVisible(false);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [isMobile]);

  if (isMobile || !isVisible) return null;

  return (
    <motion.div
      className="fixed pointer-events-none z-[9999]"
      style={{
        left: position.x - 12,
        top: position.y - 8,
      }}
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.15 }}
    >
      <svg width="24" height="16" viewBox="0 0 24 16" fill="none" className="drop-shadow-lg">
        {/* 梭子主体 */}
        <ellipse cx="12" cy="8" rx="10" ry="5" fill="#fbbf24" stroke="#f59e0b" strokeWidth="1"/>
        {/* 梭子中间孔 */}
        <ellipse cx="12" cy="8" rx="4" ry="2" fill="#1e293b"/>
        {/* 纱线 */}
        <motion.path
          d="M2,8 Q12,4 22,8"
          stroke="#e0f2fe"
          strokeWidth="0.5"
          fill="none"
          animate={{ d: ["M2,8 Q12,4 22,8", "M2,8 Q12,12 22,8", "M2,8 Q12,4 22,8"] }}
          transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
        />
      </svg>
    </motion.div>
  );
}

export function LoginPage() {
  const navigate = useNavigate();
  const { login } = useAuth();
  const { isMobile } = useResponsive();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [showComingSoon, setShowComingSoon] = useState(false);

  // 记住密码和免密登录状态
  const [rememberPassword, setRememberPassword] = useState(false);
  const [autoLogin, setAutoLogin] = useState(false);

  // 页面加载时检查本地存储的登录信息
  useEffect(() => {
    const savedUsername = localStorage.getItem(STORAGE_KEYS.savedUsername);
    const savedPassword = localStorage.getItem(STORAGE_KEYS.savedPassword);
    const savedAutoLogin = localStorage.getItem(STORAGE_KEYS.autoLogin);
    const autoLoginExpiry = localStorage.getItem(STORAGE_KEYS.autoLoginExpiry);

    if (savedUsername) {
      setUsername(savedUsername);
      setRememberPassword(true);
    }

    if (savedPassword) {
      setPassword(savedPassword);
    }

    // 检查是否开启免密登录且未过期
    if (savedAutoLogin === 'true' && autoLoginExpiry) {
      const expiryTime = parseInt(autoLoginExpiry, 10);
      if (Date.now() < expiryTime) {
        setAutoLogin(true);
        // 自动执行登录
        handleAutoLogin(savedUsername, savedPassword);
      } else {
        // 已过期，清除免密登录状态
        localStorage.removeItem(STORAGE_KEYS.autoLogin);
        localStorage.removeItem(STORAGE_KEYS.autoLoginExpiry);
      }
    }
  }, []);

  // 自动登录处理
  const handleAutoLogin = async (uname: string | null, pwd: string | null) => {
    if (!uname || !pwd) return;
    setLoading(true);
    const success = await login(uname, pwd);
    if (success) {
      navigate('/role-select');
    } else {
      setError('自动登录失败，请重新输入密码');
      setLoading(false);
    }
  };

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    const success = await login(username, password);
    if (success) {
      // 保存登录信息到本地存储
      if (rememberPassword) {
        localStorage.setItem(STORAGE_KEYS.savedUsername, username);
        localStorage.setItem(STORAGE_KEYS.savedPassword, password);
      } else {
        localStorage.removeItem(STORAGE_KEYS.savedUsername);
        localStorage.removeItem(STORAGE_KEYS.savedPassword);
      }

      // 保存免密登录设置
      if (autoLogin) {
        localStorage.setItem(STORAGE_KEYS.autoLogin, 'true');
        localStorage.setItem(STORAGE_KEYS.autoLoginExpiry, String(Date.now() + APP_CONFIG.autoLoginExpiryMs));
      } else {
        localStorage.removeItem(STORAGE_KEYS.autoLogin);
        localStorage.removeItem(STORAGE_KEYS.autoLoginExpiry);
      }

      navigate('/role-select');
    } else {
      setError('登录失败，请检查用户名和密码');
    }
    setLoading(false);
  };

  const handleDemoLogin = async (uname: string) => {
    setLoading(true);
    setError('');
    const success = await login(uname, APP_CONFIG.defaultDemoPassword);
    if (success) {
      navigate('/role-select');
    } else {
      setError('登录失败');
    }
    setLoading(false);
  };

  return (
    <div
      className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-amber-900 flex items-center justify-center p-3 sm:p-4 md:p-8 relative overflow-hidden"
    >

      {/* 功能开发中弹窗 */}
      <ComingSoonModal isOpen={showComingSoon} onClose={() => setShowComingSoon(false)} />

      {/* 纺织主题背景动画 */}
      <YarnAnimation />

      {/* 背景装饰 */}
      <div className="absolute inset-0 overflow-hidden">
        <motion.div
          animate={{
            scale: isMobile ? [1, 1.1, 1] : [1, 1.2, 1],
            opacity: [0.1, 0.2, 0.1]
          }}
          transition={{ duration: isMobile ? 6 : 8, repeat: Infinity, ease: "easeInOut" }}
          className="absolute -top-20 -right-20 w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 bg-gradient-to-br from-amber-400/20 to-orange-400/20 rounded-full blur-3xl"
        />
        <motion.div
          animate={{
            scale: isMobile ? [1.1, 1, 1.1] : [1.2, 1, 1.2],
            opacity: [0.1, 0.2, 0.1]
          }}
          transition={{ duration: isMobile ? 8 : 10, repeat: Infinity, ease: "easeInOut" }}
          className="absolute -bottom-20 -left-20 w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 bg-gradient-to-br from-blue-400/20 to-amber-400/20 rounded-full blur-3xl"
        />
      </div>

      <motion.div
        initial={{ opacity: 0, y: 20, scale: 0.98 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        transition={{ duration: 0.5, ease: 'easeOut' }}
        className="w-full max-w-sm sm:max-w-md relative z-10 px-2 sm:px-0"
      >
        {/* Logo 区域 */}
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.15, duration: 0.4 }}
          className="text-center mb-6 sm:mb-8"
        >
          <TextileLogo />
          {/* 主标题 - 毛笔字体 */}
          <h1
            className="text-5xl sm:text-6xl md:text-7xl text-white mb-2 sm:mb-3 font-bold"
            style={{
              fontFamily: "'LiSu', 'STLiti', 'STXingkai', 'Xingkai SC', 'KaiTi', 'STKaiti', cursive, serif",
              fontWeight: 700,
              letterSpacing: '0.15em'
            }}
          >
            昱森
          </h1>
          {/* Slogan */}
          <p
            className="text-amber-200/90 text-base sm:text-lg md:text-xl mb-2"
            style={{
              fontFamily: "'STXingkai', 'Xingkai SC', 'KaiTi', 'STKaiti', cursive, serif",
              letterSpacing: '0.15em',
              textAlign: 'center'
            }}
          >
            以AI为梭 织天地经纬
          </p>
          {/* 定位 - 半透明 */}
          <p className="text-white/40 text-xs sm:text-sm tracking-wide">
            纺织行业全流程协作管理平台
          </p>
        </motion.div>

        {/* 登录表单 */}
        <motion.div
          initial={{ opacity: 0, y: 15 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.25, duration: 0.4 }}
          className="bg-white/10 backdrop-blur-xl rounded-2xl p-4 sm:p-6 md:p-8 border border-white/20 shadow-2xl"
        >
          <form onSubmit={handleLogin} className="space-y-4 sm:space-y-5">
            <div>
              <label className="block text-xs sm:text-sm font-medium text-amber-200/90 mb-1.5 sm:mb-2">用户名</label>
              <div className="relative">
                <input
                  type="text"
                  value={username}
                  onChange={e => setUsername(e.target.value)}
                  className="w-full px-3 sm:px-4 py-2.5 sm:py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/40 focus:ring-2 focus:ring-amber-400/50 focus:border-amber-400/50 transition-all text-sm sm:text-base"
                  placeholder="请输入用户名"
                  required
                />
                <svg className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
              </div>
            </div>
            <div>
              <label className="block text-xs sm:text-sm font-medium text-amber-200/90 mb-1.5 sm:mb-2">密码</label>
              <div className="relative">
                <input
                  type={showPassword ? 'text' : 'password'}
                  value={password}
                  onChange={e => setPassword(e.target.value)}
                  className="w-full px-3 sm:px-4 py-2.5 sm:py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/40 focus:ring-2 focus:ring-amber-400/50 focus:border-amber-400/50 transition-all pr-10 sm:pr-12 text-sm sm:text-base"
                  placeholder="请输入密码"
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 text-white/50 hover:text-white/80 transition-colors p-1"
                >
                  {showPassword ? <EyeOff size={isMobile ? 16 : 18} /> : <Eye size={isMobile ? 16 : 18} />}
                </button>
              </div>
            </div>

            {/* 记住密码和免密登录选项 */}
            <div className="flex items-center justify-between gap-2">
              <label className="flex items-center gap-2 cursor-pointer group whitespace-nowrap">
                <input
                  type="checkbox"
                  checked={rememberPassword}
                  onChange={(e) => setRememberPassword(e.target.checked)}
                  className="w-4 h-4 rounded border-white/30 bg-white/10 text-amber-500 focus:ring-amber-400/50 focus:ring-2 cursor-pointer"
                />
                <span className="text-white/70 text-xs sm:text-sm group-hover:text-white/90 transition-colors">记住密码</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer group whitespace-nowrap">
                <input
                  type="checkbox"
                  checked={autoLogin}
                  onChange={(e) => setAutoLogin(e.target.checked)}
                  className="w-4 h-4 rounded border-white/30 bg-white/10 text-amber-500 focus:ring-amber-400/50 focus:ring-2 cursor-pointer"
                />
                <span className="text-white/70 text-xs sm:text-sm group-hover:text-white/90 transition-colors">30天免密登录</span>
              </label>
            </div>

            {error && (
              <motion.p
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                className="text-red-400 text-xs sm:text-sm text-center bg-red-400/10 py-2 rounded-lg border border-red-400/20"
              >
                {error}
              </motion.p>
            )}

            <motion.button
              whileHover={isMobile ? {} : { scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              type="submit"
              disabled={loading}
              className="w-full py-3 sm:py-3.5 bg-gradient-to-r from-amber-500 via-orange-500 to-amber-600 text-white rounded-xl font-medium hover:from-amber-600 hover:via-orange-600 hover:to-amber-700 transition-all shadow-lg shadow-amber-500/30 disabled:opacity-50 flex items-center justify-center gap-2 text-sm sm:text-base"
            >
              <LogIn size={isMobile ? 16 : 18} />
              {loading ? '登录中...' : '登录'}
            </motion.button>
          </form>
        </motion.div>

        {/* 演示账号 */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.4, duration: 0.4 }}
          className="mt-4 sm:mt-6"
        >
          <motion.p
            className="text-center text-amber-200/50 text-xs mb-2 sm:mb-3"
            animate={{ opacity: [0.5, 0.8, 0.5] }}
            transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
          >
            快速体验（密码: {APP_CONFIG.defaultDemoPassword}）
          </motion.p>
          <div className="grid grid-cols-3 gap-2 sm:gap-3">
            {demoAccounts.map((account, i) => (
              <motion.button
                key={account.username}
                initial={{ opacity: 0, y: 20, scale: 0.9 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                transition={{
                  delay: 0.5 + i * 0.12,
                  duration: 0.4,
                  type: "spring",
                  stiffness: 200,
                  damping: 15
                }}
                whileHover={{
                  scale: 1.05,
                  y: -2,
                  boxShadow: "0 10px 20px rgba(0,0,0,0.2)"
                }}
                whileTap={{ scale: 0.95 }}
                onClick={() => account.enabled ? handleDemoLogin(account.username) : setShowComingSoon(true)}
                disabled={loading}
                className={`py-2 sm:py-2.5 rounded-lg text-[10px] sm:text-xs font-medium bg-gradient-to-r ${account.color} text-white shadow-md hover:shadow-lg transition-all disabled:opacity-50 flex flex-col items-center justify-center gap-1 relative overflow-hidden whitespace-nowrap`}
              >
                {/* 按钮内部动画背景 */}
                <motion.div
                  className="absolute inset-0 bg-white/20"
                  initial={{ x: '-100%' }}
                  whileHover={{ x: '100%' }}
                  transition={{ duration: 0.6, ease: "easeInOut" }}
                />
                {/* 脉冲光环效果 */}
                <motion.div
                  className="absolute inset-0 rounded-xl"
                  animate={{
                    boxShadow: [
                      '0 0 0 0 rgba(255,255,255,0)',
                      '0 0 0 4px rgba(255,255,255,0.1)',
                      '0 0 0 0 rgba(255,255,255,0)'
                    ]
                  }}
                  transition={{
                    duration: 2,
                    repeat: Infinity,
                    delay: i * 0.3,
                    ease: "easeOut"
                  }}
                />
                <motion.div
                  animate={{
                    rotate: [0, 5, -5, 0],
                    scale: [1, 1.05, 1]
                  }}
                  transition={{
                    duration: 3,
                    repeat: Infinity,
                    delay: i * 0.5,
                    ease: "easeInOut"
                  }}
                >
                  <account.icon size={isMobile ? 12 : 14} />
                </motion.div>
                <span className="truncate w-full text-center px-1 relative z-10">{account.label}</span>
              </motion.button>
            ))}
          </div>
        </motion.div>

        {/* 注册入口 */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.6, duration: 0.4 }}
          className="mt-4 sm:mt-6 text-center"
        >
          <p className="text-amber-200/60 text-xs sm:text-sm">
            还没有账号？{' '}
            <Link to="/register" className="text-amber-300 hover:text-amber-200 font-medium transition-colors underline underline-offset-2">
              立即注册
            </Link>
          </p>
        </motion.div>
      </motion.div>
    </div>
  );
}
