"use client";

import { useState } from "react";
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";

export default function LoginPage() {
	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 [idError, setIdError] = useState("");
  const [passwordError, setPasswordError] = useState("");

	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
		e.preventDefault();
		if (userId.trim().length === 0 || password.trim().length === 0) {
			return;
		}

		try {
			const response = await fetch("https://hrdi.coconutmeet.net/auth/login", {
				method: "POST",
				headers: {"Content-Type": "application/json",},
				body: JSON.stringify({
					email: userId,
					password: password
				})
			});

			if (!response.ok) {
				let errorMessage = `로그인 실패 (${response.status})`;
				try {
					const errorData = await response.json();
					if (errorData.error) {
						errorMessage = errorData.error;
					} else if (errorData.message) {
						errorMessage = errorData.message;
					} else if (response.statusText) {
						errorMessage = `${response.statusText} (${response.status})`;
					}
				} catch (parseError) {
					if (response.statusText) {
						errorMessage = `${response.statusText} (${response.status})`;
					}
				}
				console.error("로그인 실패:", errorMessage);
				setIsLoginErrorOpen(true);
				return;
			}

			const data = await response.json();
			console.log("로그인 성공:", data);
			
			// 로그인 성공 시 처리 (예: 토큰 저장, 리다이렉트 등)
			// TODO: 성공 시 처리 로직 추가 (예: localStorage에 토큰 저장, 메인 페이지로 이동 등)
			// if (data.token) {
			//   localStorage.setItem('token', data.token);
			//   window.location.href = '/menu';
			// }
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : "네트워크 오류가 발생했습니다.";
			console.error("로그인 오류:", errorMessage);
			setIsLoginErrorOpen(true);
		}
	}

	return (
		<div className="min-h-screen w-full flex flex-col items-center justify-between">

			<LoginErrorModal
				open={isLoginErrorOpen}
				onClose={() => setIsLoginErrorOpen(false)}
			/>
      <LoginOption
				onClick={() => setIsLoginErrorOpen(true)}
        loginErrorModalEnabled={isLoginErrorOpen}
        setLoginErrorModalEnabled={setIsLoginErrorOpen}
			/>

			<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full">
				{/* 로고 영역 */}
				<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-5">
					<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)}
								onFocus={() => setIsUserIdFocused(true)}
								onBlur={() => setIsUserIdFocused(false)}
								placeholder="아이디 (이메일)"
								className="
                h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40
                focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
                focus:appearance-none focus:border-neutral-700
                text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
                pr-[40px]
                "
							/>
							{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>
						{/* 비밀번호 */}
						<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)}
								onFocus={() => setIsPasswordFocused(true)}
								onBlur={() => setIsPasswordFocused(false)}
								placeholder="비밀번호"
								className="
								h-[40px] px-[12px] py-[7px] rounded-[8px] w-full border border-neutral-40
								focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
								focus:appearance-none focus:border-neutral-700
								text-[18px] text-neutral-700 font-normal leading-[150%] placeholder:text-input-placeholder-text
								pr-[40px]
								"
							/>
							{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>
					</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-[40px] 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" : "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></div>
			<p className="text-center py-[40px] text-[15px] text-basic-text">
				Copyright ⓒ 2025 XL LMS. All rights reserved
			</p>
		</div>
	);
}