import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'motion/react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/src/components/ui/card';
import { Button } from '@/src/components/ui/button';
import { Input } from '@/src/components/ui/input';
import { LogIn, User, Lock, UserPlus, Mail, ArrowLeft } from 'lucide-react';
import { cn } from '@/src/lib/utils';

export default function Login() {
  const navigate = useNavigate();
  const [isLogin, setIsLogin] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    // Simulate auth
    setTimeout(() => {
      setLoading(false);
      if (isLogin) {
        navigate('/overview');
      } else {
        setIsLogin(true); // Switch back to login after "registering"
      }
    }, 1000);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-[#07101D] relative overflow-hidden">
      {/* Background Glow */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[#336EFF] rounded-full mix-blend-screen filter blur-[128px] opacity-20 animate-pulse" />
      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-600 rounded-full mix-blend-screen filter blur-[128px] opacity-20" />

      <div className="container mx-auto px-4 relative z-10 flex items-center w-full min-h-[600px]">
        {/* Left Side: Brand Info (Only visible in Login mode) */}
        <AnimatePresence>
          {isLogin && (
            <motion.div
              key="brand-info"
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -50 }}
              transition={{ duration: 0.5, ease: 'easeOut' }}
              className="absolute left-4 lg:left-8 xl:left-12 w-1/2 max-w-lg hidden lg:flex flex-col space-y-6"
            >
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel border-white/10 w-fit">
                <span className="w-2 h-2 rounded-full bg-[#336EFF] animate-pulse" />
                <span className="text-sm text-slate-300 font-medium tracking-wide uppercase">Access Portal</span>
              </div>
              
              <div className="space-y-2">
                <h2 className="text-xl text-[#336EFF] font-bold tracking-widest uppercase">YOYUZH.XYZ</h2>
                <h1 className="text-5xl md:text-6xl font-bold text-white leading-tight">
                  个人网站<br />统一入口
                </h1>
              </div>
              
              <p className="text-lg text-slate-400 leading-relaxed">
                欢迎来到 YOYUZH 的个人门户。在这里，你可以集中管理个人网盘文件、查询教务成绩课表，以及体验轻量级小游戏。
              </p>
            </motion.div>
          )}
        </AnimatePresence>

        {/* Form Container */}
        <motion.div
          layout
          transition={{ type: 'spring', stiffness: 200, damping: 25 }}
          className={cn(
            "w-full max-w-md z-10",
            isLogin ? "ml-auto lg:mr-8 xl:mr-12" : "mx-auto"
          )}
        >
            <Card className="border-white/10 backdrop-blur-2xl bg-white/5 shadow-2xl overflow-hidden">
              <AnimatePresence mode="wait">
                {isLogin ? (
                  <motion.div
                    key="login-form"
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -20 }}
                    transition={{ duration: 0.3 }}
                  >
                    <CardHeader className="space-y-1 pb-8">
                      <CardTitle className="text-2xl font-bold text-white flex items-center gap-2">
                        <LogIn className="w-6 h-6 text-[#336EFF]" />
                        登录
                      </CardTitle>
                      <CardDescription className="text-slate-400">
                        请输入您的账号和密码以继续
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <form onSubmit={handleSubmit} className="space-y-6">
                        <div className="space-y-4">
                          <div className="space-y-2">
                            <label className="text-sm font-medium text-slate-300 ml-1">用户名</label>
                            <div className="relative">
                              <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                              <Input
                                type="text"
                                placeholder="账号 / 用户名 / 学号"
                                className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
                                required
                              />
                            </div>
                          </div>
                          <div className="space-y-2">
                            <label className="text-sm font-medium text-slate-300 ml-1">密码</label>
                            <div className="relative">
                              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                              <Input
                                type="password"
                                placeholder="••••••••"
                                className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
                                required
                              />
                            </div>
                          </div>
                        </div>

                        {error && (
                          <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
                            {error}
                          </div>
                        )}

                        <div className="space-y-4">
                          <Button
                            type="submit"
                            className="w-full h-12 text-base font-semibold"
                            disabled={loading}
                          >
                            {loading ? (
                              <span className="flex items-center gap-2">
                                <span className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
                                登录中...
                              </span>
                            ) : (
                              '进入系统'
                            )}
                          </Button>
                          <div className="text-center">
                            <button
                              type="button"
                              onClick={() => setIsLogin(false)}
                              className="text-sm text-slate-400 hover:text-[#336EFF] transition-colors"
                            >
                              还没有账号？立即注册
                            </button>
                          </div>
                        </div>
                      </form>
                    </CardContent>
                  </motion.div>
                ) : (
                  <motion.div
                    key="register-form"
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -20 }}
                    transition={{ duration: 0.3 }}
                  >
                    <CardHeader className="space-y-1 pb-8">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-2xl font-bold text-white flex items-center gap-2">
                          <UserPlus className="w-6 h-6 text-[#336EFF]" />
                          注册账号
                        </CardTitle>
                        <button
                          onClick={() => setIsLogin(true)}
                          className="p-2 rounded-full hover:bg-white/5 text-slate-400 transition-colors"
                        >
                          <ArrowLeft className="w-5 h-5" />
                        </button>
                      </div>
                      <CardDescription className="text-slate-400">
                        创建一个新账号以开启您的门户体验
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <form onSubmit={handleSubmit} className="space-y-6">
                        <div className="space-y-4">
                          <div className="space-y-2">
                            <label className="text-sm font-medium text-slate-300 ml-1">用户名</label>
                            <div className="relative">
                              <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                              <Input
                                type="text"
                                placeholder="设置您的用户名"
                                className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
                                required
                              />
                            </div>
                          </div>
                          <div className="space-y-2">
                            <label className="text-sm font-medium text-slate-300 ml-1">邮箱</label>
                            <div className="relative">
                              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                              <Input
                                type="email"
                                placeholder="your@email.com"
                                className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
                                required
                              />
                            </div>
                          </div>
                          <div className="space-y-2">
                            <label className="text-sm font-medium text-slate-300 ml-1">密码</label>
                            <div className="relative">
                              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                              <Input
                                type="password"
                                placeholder="设置您的密码"
                                className="pl-10 bg-black/20 border-white/10 focus-visible:ring-[#336EFF]"
                                required
                              />
                            </div>
                          </div>
                        </div>

                        <div className="space-y-4">
                          <Button
                            type="submit"
                            className="w-full h-12 text-base font-semibold"
                            disabled={loading}
                          >
                            {loading ? (
                              <span className="flex items-center gap-2">
                                <span className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
                                注册中...
                              </span>
                            ) : (
                              '创建账号'
                            )}
                          </Button>
                          <div className="text-center">
                            <button
                              type="button"
                              onClick={() => setIsLogin(true)}
                              className="text-sm text-slate-400 hover:text-[#336EFF] transition-colors"
                            >
                              已有账号？返回登录
                            </button>
                          </div>
                        </div>
                      </form>
                    </CardContent>
                  </motion.div>
                )}
              </AnimatePresence>
            </Card>
          </motion.div>
      </div>
    </div>
  );
}