"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import MainLogo from "@/app/svgs/mainlogosvg"
import LoginCheckboxActiveSvg from "@/app/svgs/logincheckboxactivesvg";
import LoginCheckboxInactiveSvg from "@/app/svgs/logincheckboxinactivesvg";
import LoginInputSvg from "@/app/svgs/inputformx";
import LoginErrorModal from "./LoginErrorModal";
import LoginOption from "@/app/login/loginoption";
import apiService from "@/app/lib/apiService";

export default function LoginPage() {
	const router = useRouter();
	const [userId, setUserId] = useState("");
	const [password, setPassword] = useState("");
	const [rememberId, setRememberId] = useState(false);
	const [autoLogin, setAutoLogin] = useState(false);
	const [isUserIdFocused, setIsUserIdFocused] = useState(false);
	const [isPasswordFocused, setIsPasswordFocused] = useState(false);
	const [isLoginErrorOpen, setIsLoginErrorOpen] = useState(false);
	const [loginErrorMessage, setLoginErrorMessage] = useState("");
	const [idError, setIdError] = useState("");
	const [passwordError, setPasswordError] = useState("");

	// 컴포넌트 마운트 시 저장된 아이디 불러오기 및 자동 로그인 확인
	useEffect(() => {
		const savedId = localStorage.getItem('savedUserId');
		if (savedId) {
			setUserId(savedId);
			setRememberId(true);
		}

		// 자동 로그인 확인: localStorage에 토큰이 있고 쿠키에도 토큰이 있으면 자동 로그인
		const savedToken = localStorage.getItem('token');
		const cookieToken = document.cookie
			.split('; ')
			.find(row => row.startsWith('token='))
			?.split('=')[1];

		if (savedToken && cookieToken && savedToken === cookieToken) {
			// 토큰이 유효한지 확인
			apiService.getCurrentUser()
				.then(response => {
					const userData = response.data;
					// 계정 상태 확인
					const userStatus = userData.status || userData.userStatus;
					if (userStatus === 'INACTIVE' || userStatus === 'inactive') {
						// 비활성화된 계정인 경우 로그아웃 처리
						localStorage.removeItem('token');
						document.cookie = 'token=; path=/; max-age=0';
						return;
					}

					// 사용자 권한 확인
					const userRole = userData.role || userData.userRole;
					if (userRole === 'ADMIN' || userRole === 'admin') {
						// admin 권한이면 /admin/id로 리다이렉트
						router.push('/admin/id');
					} else {
						// 그 외의 경우 홈 페이지로 이동 (redirect 파라미터 무시)
						router.push('/');
					}
				})
				.catch(() => {
					// 에러 발생 시 토큰 삭제
					localStorage.removeItem('token');
					document.cookie = 'token=; path=/; max-age=0';
				});
		}
	}, [router]);

	// 아이디 기억하기 상태나 아이디가 변경될 때마다 저장 처리
	useEffect(() => {
		if (rememberId && userId.trim()) {
			localStorage.setItem('savedUserId', userId);
		} else if (!rememberId) {
			localStorage.removeItem('savedUserId');
		}
	}, [rememberId, userId]);

	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
		e.preventDefault();

		// 에러 초기화
		setIdError("");
		setPasswordError("");

		// 입력 검증
		let hasError = false;
		if (userId.trim().length === 0) {
			setIdError("아이디를 입력해 주세요.");
			hasError = true;
		}
		if (password.trim().length === 0) {
			setPasswordError("비밀번호를 입력해 주세요.");
			hasError = true;
		}

		if (hasError) {
			return;
		}

		try {
			const response = await apiService.login(userId, password);
			const data = response.data;
			console.log("로그인 성공:", data);

			// 로그인 성공 시 토큰 저장 (다양한 필드명 지원)
			const token = data.token || data.accessToken || data.access_token;
			if (token) {
				if (autoLogin) {
					// 자동 로그인이 체크되어 있으면 localStorage와 쿠키에 장기 저장 (30일)
					localStorage.setItem('token', token);
					document.cookie = `token=${token}; path=/; max-age=${30 * 24 * 60 * 60}; SameSite=Lax`;
					console.log("자동 로그인 토큰 저장 완료 (30일 유지)");
				} else {
					// 자동 로그인이 체크되어 있지 않으면 쿠키에만 세션 쿠키로 저장 (브라우저 종료 시 삭제)
					// localStorage에는 저장하지 않음
					document.cookie = `token=${token}; path=/; SameSite=Lax`;
					console.log("세션 토큰 저장 완료 (브라우저 종료 시 삭제)");
				}
			} else {
				console.warn("토큰이 응답에 없습니다. 응답 데이터:", data);
				// 토큰이 없어도 로그인은 성공했으므로 진행
			}

			// 사용자 정보 가져오기 (권한 확인을 위해)
			try {
				const userResponse = await apiService.getCurrentUser();
				const userData = userResponse.data;
				const userRole = userData.role || userData.userRole;

				// admin 권한이면 /admin/id로 리다이렉트
				if (userRole === 'ADMIN' || userRole === 'admin') {
					router.push('/admin/id');
					return;
				}
			} catch (error) {
				console.error("사용자 정보 조회 오류:", error);
				// 사용자 정보 조회 실패 시에도 기존 로직대로 진행
			}

			// redirect 파라미터 무시하고 계정에 따른 메인 페이지로 이동
			// admin이 아닌 경우 홈 페이지로 이동
			router.push('/');
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
			console.error("로그인 오류:", errorMessage);
			setLoginErrorMessage(errorMessage);
			setIsLoginErrorOpen(true);
		}
	}

	return (
		<>
			<LoginErrorModal
				open={isLoginErrorOpen}
				onClose={() => {
					setIsLoginErrorOpen(false);
					setLoginErrorMessage("");
				}}
				errorMessage={loginErrorMessage}
			/>
			<LoginOption
				onClick={() => setIsLoginErrorOpen(true)}
				loginErrorModalEnabled={isLoginErrorOpen}
				setLoginErrorModalEnabled={setIsLoginErrorOpen}
			/>
			<div className="h-screen w-full flex flex-col overflow-hidden">
				{/* 메인 컨텐츠 영역 - flex-1로 남은 공간 차지 */}
				<div className="flex-1 flex items-center justify-center min-h-0">
					<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full my-auto">
						{/* 로고 영역 */}
						<div className="my-15 flex flex-col items-center">
							<div className="mb-[7px]">
								<MainLogo />
							</div>
							<div className="text-[28.8px] font-extrabold leading-[145%]  text-neutral-700" >
								XR LMS
							</div>
						</div>

						{/* 폼 */}
						<form onSubmit={handleSubmit} className="space-y-4">
							<div className="space-y-4">
								{/* 아이디 */}
								<div className="relative">
									<label htmlFor="userId" className="sr-only">
										아이디
									</label>
									<input
										id="userId"
										name="userId"
										value={userId}
										onChange={(e) => {
											setUserId(e.target.value);
											if (idError) setIdError("");
										}}
										onFocus={() => setIsUserIdFocused(true)}
										onBlur={() => setIsUserIdFocused(false)}
										placeholder="아이디(이메일)"
										className={`h-[56px] px-[12px] py-[7px] w-full rounded-[8px] border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${idError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
									/>
									{userId.trim().length > 0 && isUserIdFocused && (
										<button
											type="button"
											onMouseDown={(e) => {
												e.preventDefault();
												setUserId("");
											}}
											aria-label="입력 지우기"
											className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
										>
											<LoginInputSvg />
										</button>
									)}
								</div>
								{idError && <p className="text-error text-[13px] leading-tight mt-[10px]">{idError}</p>}
								{/* 비밀번호 */}
								<div className="relative">
									<label htmlFor="password" className="sr-only">
										비밀번호
									</label>
									<input
										id="password"
										name="password"
										type="password"
										value={password}
										onChange={(e) => {
											setPassword(e.target.value);
											if (passwordError) setPasswordError("");
										}}
										onFocus={() => setIsPasswordFocused(true)}
										onBlur={() => setIsPasswordFocused(false)}
										placeholder="비밀번호 입력"
										className={`h-[56px] px-[12px] py-[7px] rounded-[8px] w-full border focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none focus:appearance-none text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text pr-[40px] ${passwordError ? 'border-error' : 'border-neutral-40 focus:border-neutral-700'}`}
									/>
									{password.trim().length > 0 && isPasswordFocused && (
										<button
											type="button"
											onMouseDown={(e) => {
												e.preventDefault();
												setPassword("");
											}}
											aria-label="입력 지우기"
											className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
										>
											<LoginInputSvg />
										</button>
									)}
								</div>
								{passwordError && <p className="text-error text-[13px] leading-tight mt-[4px]">{passwordError}</p>}
							</div>

							{/* 체크박스들 */}
							<div className="flex items-center justify-start gap-6 mb-15">
								<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
									<input
										type="checkbox"
										checked={rememberId}
										onChange={(e) => setRememberId(e.target.checked)}
										className="sr-only"
									/>
									{rememberId ? (
										<LoginCheckboxActiveSvg />
									) : (
										<LoginCheckboxInactiveSvg />
									)}
									아이디 기억하기
								</label>
								<label className="flex cursor-pointer select-none items-center gap-2 text-[15px] font-normal text-basic-text">
									<input
										type="checkbox"
										checked={autoLogin}
										onChange={(e) => setAutoLogin(e.target.checked)}
										className="sr-only"
									/>
									{autoLogin ? (
										<LoginCheckboxActiveSvg />
									) : (
										<LoginCheckboxInactiveSvg />
									)}
									자동 로그인
								</label>
							</div>

							{/* 로그인 버튼 */}
							<button
								type="submit"
								className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 ${userId.trim().length > 0 && password.trim().length > 0 ? "bg-active-button hover:bg-[#1F2B91]" : "bg-inactive-button"}`}
							>
								로그인
							</button>

							{/* 하단 링크들 */}
							<div className="flex items-center justify-between text-[15px] leading-[150%] h-[36px]">
								<Link
									href="/register"
									className="underline-offset-2 text-basic-text font-bold"
								>
									회원가입
								</Link>
								<div
									className="flex items-center gap-3 text-basic-text"
								>
									<Link href="/find-id" className="underline-offset-2">
										아이디 찾기
									</Link>
									<span className="h-3 w-px bg-input-border" />
									<Link href="/reset-password" className="underline-offset-2">
										비밀번호 재설정
									</Link>
								</div>
							</div>
						</form>
					</div>
				</div>
				{/* Copyright 영역 - 하단 고정 */}
				<p className="text-center py-[40px] text-[15px] text-basic-text flex-shrink-0">
					Copyright ⓒ 2025 XL LMS. All rights reserved
				</p>
			</div>
		</>
	);
}
