import React, { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useAuth } from "@web/src/providers/auth-provider";
import { RegisterForm } from "./register";
import { LoginForm } from "./login";
import { Card, Typography, Button, Spin, Divider } from "antd";
import { AnimatePresence, motion } from "framer-motion";
import { useAuthForm } from "./useAuthForm";
import { env } from "@web/src/env";

const { Title, Text, Paragraph } = Typography;

const AuthPage: React.FC = () => {
	const { showLogin, isLoading, toggleForm, handleLogin, handleRegister } =
		useAuthForm();
	const { isAuthenticated } = useAuth();
	const location = useLocation();
	const navigate = useNavigate();

	useEffect(() => {
		if (isAuthenticated) {
			const params = new URLSearchParams(location.search);
			const redirectUrl = params.get("redirect_url") || "/";
			navigate(redirectUrl, { replace: true });
		}
	}, [isAuthenticated, location]);

	return (
		<div className="min-h-screen flex items-center justify-center p-4">
			<motion.div
				initial={{ opacity: 0, y: 20 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ duration: 0.5 }}>
				<div className="w-full max-w-5xl  shadow-elegant border-2 border-white rounded-xl overflow-hidden transition-all duration-300  relative">
					<div className="flex flex-col md:flex-row min-h-[650px]">
						{/* Left Panel - Welcome Section */}
						<div className="w-full md:w-1/2 p-12 bg-gradient-to-br from-primary to-primary-600 text-white flex flex-col justify-center relative overflow-hidden">
							<motion.div
								initial={{ opacity: 0, y: 20 }}
								animate={{ opacity: 1, y: 0 }}
								transition={{ delay: 0.2, duration: 0.5 }}>
								<div className="text-4xl text-white mb-4 font-serif">
									{env.APP_NAME || "心灵树洞"}
								</div>
								<Paragraph className="text-lg mb-8 text-blue-100 leading-relaxed text-justify">
								聆听细语 润泽心灵 <br></br>
								勤勉解困 化雨无声
								</Paragraph>
								{showLogin && (
									<Button
										type="default"
										ghost
										size="large"
										onClick={toggleForm}
										className="w-fit hover:bg-white hover:text-blue-700 transition-all">
										注册账号
									</Button>
								)}
							</motion.div>
						</div>

						{/* Right Panel - Form Section */}
						<div className="w-full md:w-1/2 p-10 lg:p-16 bg-white relative rounded-xl">
							<AnimatePresence mode="wait">
								{showLogin ? (
									<motion.div
										key="login"
										initial={{ opacity: 0, x: 50 }}
										animate={{ opacity: 1, x: 0 }}
										exit={{ opacity: 0, x: -50 }}
										transition={{ duration: 0.3 }}>
										<motion.div className="mb-8">
											<Title level={3} className="mb-2">
												登录
											</Title>
											<Text type="secondary">
												首次使用？{" "}
												<Button
													type="link"
													onClick={toggleForm}
													className="p-0 font-medium">
													注册账号
												</Button>
											</Text>
										</motion.div>
										<LoginForm
											onSubmit={handleLogin}
											isLoading={isLoading}
										/>
									</motion.div>
								) : (
									<motion.div
										key="register"
										initial={{ opacity: 0, x: 50 }}
										animate={{ opacity: 1, x: 0 }}
										exit={{ opacity: 0, x: -50 }}
										transition={{ duration: 0.3 }}>
										<motion.div className="mb-8">
											<Title level={3} className="mb-2">
												注册账号
											</Title>
											<Text type="secondary">
												已有账号？{" "}
												<Button
													type="link"
													onClick={toggleForm}
													className="p-0 font-medium">
													登录平台
												</Button>
											</Text>
										</motion.div>
										<RegisterForm
											onSubmit={handleRegister}
											isLoading={isLoading}
										/>
									</motion.div>
								)}
							</AnimatePresence>
						</div>
					</div>
				</div>
			</motion.div>
		</div>
	);
};

export default AuthPage;