'use client';

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { useAuth } from '@/components/providers/auth-provider';
import { Button } from '@nice/ui/components/button';
import { Input } from '@nice/ui/components/input';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@nice/ui/components/form';
import { Alert, AlertDescription } from '@nice/ui/components/alert';
import Link from 'next/link';
import { toast } from '@nice/ui/components/sonner';
import React from 'react';
import { Checkbox } from '@nice/ui/components/checkbox';
import { oidcClient } from '@/lib/auth/oidc-client';
import { Eye, EyeOff } from 'lucide-react';

interface LoginForm {
	username: string;
	password: string;
	remember: boolean;
}

export default function LoginPage() {
	const router = useRouter();
	const searchParams = useSearchParams();
	const { login, isLoading, isAuthenticated } = useAuth();
	const [isRedirecting, setIsRedirecting] = useState(false);
	const [redirectUri, setRedirectUri] = useState('');
	const [passwordVisible, setPasswordVisible] = useState(false);

	const [error, setError] = useState<string | null>(null);
	const redirectUrl = searchParams.get('redirectUrl') || '/dashboard';
	const message = searchParams.get('message');

	useEffect(() => {
		// 设置回调 URI
		setRedirectUri(`${window.location.origin}/auth/callback`);
	}, []);

	const handleSSOLogin = () => {
		if (!redirectUri) return;

		// 构建授权 URL
		const authUrl = oidcClient.buildAuthorizationUrl({
			redirectUri,
			state: 'test-state',
			scope: 'openid profile email',
		});

		// 保存状态到 sessionStorage（包括 redirectUrl）
		sessionStorage.setItem('oauth_state', 'test-state');
		sessionStorage.setItem('oauth_redirect_uri', redirectUri);
		sessionStorage.setItem('oauth_return_url', redirectUrl);

		// 跳转到授权页面
		window.location.href = authUrl;
	};

	const form = useForm<LoginForm>({
		defaultValues: {
			username: '',
			password: '',
			remember: false,
		},
	});

	// 组件加载时检查是否有保存的凭据
	useEffect(() => {
		const savedCredentials = localStorage.getItem('loginCredentials');
		if (savedCredentials) {
			const { username, password } = JSON.parse(savedCredentials);
			form.setValue('username', username);
			form.setValue('password', password);
			form.setValue('remember', true);
		}
	}, [form]);

	// 处理已登录用户的重定向
	React.useEffect(() => {
		if (isAuthenticated && !isRedirecting) {
			setIsRedirecting(true);
			router.push(redirectUrl);
		}
	}, [isAuthenticated, redirectUrl, router, isRedirecting]);

	const handleSubmit = async (data: LoginForm) => {
		setError(null);
		try {
			await login(data.username, data.password);

			// 处理记住密码
			if (data.remember) {
				localStorage.setItem(
					'loginCredentials',
					JSON.stringify({
						username: data.username,
						password: data.password,
					}),
				);
			} else {
				localStorage.removeItem('loginCredentials');
			}

			toast.success('登录成功');
			setIsRedirecting(true);
			router.replace(redirectUrl);
		} catch (err) {
			setError(err instanceof Error ? err.message : '登录失败，请重试');
			toast.error('登录失败，请重试');
		}
	};

	// 如果正在重定向，显示加载状态而不是空白
	if (isRedirecting) {
		return (
			<div className="flex min-h-[428px] items-center justify-center">
				<div className="text-center">
					<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
					<p className="text-gray-600">正在跳转...</p>
				</div>
			</div>
		);
	}

	return (
		<div className="flex">
			<div className="w-full">
				{/* 欢迎标题 */}
				<div className="text-center mb-12">
					<h1 className="text-3xl font-bold text-gray-900 mb-3">欢迎使用FengHuo</h1>

					{/* 成功消息 */}
					{message === 'register_success' && (
						<Alert className="mb-4 border-green-200 bg-green-50">
							<AlertDescription className="text-green-800">注册成功！请使用您的账号登录。</AlertDescription>
						</Alert>
					)}

					{/* 错误消息 */}
					{error && (
						<Alert className="mb-4 border-red-200 bg-red-50">
							<AlertDescription className="text-red-800">{error}</AlertDescription>
						</Alert>
					)}
				</div>

				{/* 登录表单 */}
				<Form {...form}>
					<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
						{/* 用户名输入 */}
						<FormField
							control={form.control}
							name="username"
							rules={{
								required: '请输入用户名',
								minLength: { value: 3, message: '用户名至少3个字符' },
							}}
							render={({ field }) => (
								<FormItem>
									<FormLabel className="text-base text-gray-700 font-medium">用户名</FormLabel>
									<FormControl>
										<Input
											type="text"
											placeholder="请输入用户名"
											className="h-12 text-base focus-visible:ring-1 focus-visible:ring-blue-500 focus-visible:border-blue-500"
											autoComplete="username"
											disabled={isLoading}
											{...field}
										/>
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>

						{/* 密码输入 */}
						<FormField
							control={form.control}
							name="password"
							rules={{
								required: '请输入密码',
								minLength: { value: 4, message: '密码至少4个字符' },
							}}
							render={({ field }) => (
								<FormItem>
									<FormLabel className="text-base text-gray-700 font-medium">密码</FormLabel>
									<FormControl>
										<div className='relative'>
											<Input
												type={passwordVisible ? 'text' : 'password'} // 根据状态切换输入类型
												placeholder="请输入密码"
												className="h-12 text-base focus-visible:ring-1 focus-visible:ring-blue-500 focus-visible:border-blue-500 pr-10" // 增加右侧内边距
												autoComplete="current-password"
												disabled={isLoading}
												{...field}
											/>
											<button
												type="button"
												className="absolute right-3 top-1/2 transform -translate-y-1/2"
												onClick={() => setPasswordVisible(!passwordVisible)} // 点击切换密码可见性
											>
												{passwordVisible ? (
													<Eye className="w-5 h-5 text-gray-600" />
												) : (
													<EyeOff className="w-5 h-5 text-gray-600" />
												)}
											</button>
										</div>
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>

						{/* 添加记住密码复选框 */}
						<FormField
							control={form.control}
							name="remember"
							render={({ field }) => (
								<FormItem className="flex flex-row justify-end items-center space-x-3">
									<FormControl>
										<Checkbox checked={field.value} onCheckedChange={field.onChange} />
									</FormControl>
									<FormLabel className="text-sm text-gray-600 font-normal">记住密码</FormLabel>
								</FormItem>
							)}
						/>

						{/* 登录按钮 */}
						<Button
							type="submit"
							className="w-full h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-base transition-colors mt-4 cursor-pointer"
							disabled={isLoading}
						>
							{isLoading ? '登录中...' : '登录'}
						</Button>
					</form>
				</Form>
				<div className="mt-10">
					<div className="text-center text-sm text-gray-500 mb-6">更多登录方式</div>
					<Button
						variant="outline"
						className="w-full h-12 border-green-300 text-green-700 hover:bg-green-50 rounded-lg font-medium text-base transition-colors cursor-pointer"
						onClick={handleSSOLogin}
					>
						<svg className="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
							<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
						</svg>
						SSO 登录
					</Button>
				</div>

				{/* 注册链接 */}
				<div className="text-center mt-8">
					<span className="text-base text-gray-600">还没有账号？</span>
					<Link href="/auth/register" className="text-base text-blue-600 hover:underline ml-2">
						立即注册
					</Link>
				</div>
			</div>
		</div>
	);
}