"use client";

import { useState } from "react";
import Link from "next/link";

export default function LoginPage() {
	const [userId, setUserId] = useState("");
	const [password, setPassword] = useState("");
	const [rememberId, setRememberId] = useState(false);
	const [autoLogin, setAutoLogin] = useState(false);

	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
		e.preventDefault();
		// TODO: 실제 인증 연동 시 이곳에서 처리
		// 현재는 UI만 구현
		console.log({ userId, password, rememberId, autoLogin });
	}

	return (
		<div className="min-h-screen w-full flex flex-col items-center justify-center">
			{/* 카드 컨테이너 */}
			<div className="w-[480px] rounded-xl border border-[var(--color-input-border)] bg-white p-8 shadow-sm">
				{/* 로고 영역 */}
				<div className="mb-10 flex flex-col items-center">
					<div className="mb-2 flex h-[54px] w-[72px] items-center justify-center rounded-md bg-[var(--color-inactive-button)]/20" />
					<div
						className="text-[28px] font-semibold leading-none"
						style={{ color: "var(--color-logo-text)" }}
					>
						XR LMS
					</div>
				</div>

				{/* 폼 */}
				<form onSubmit={handleSubmit} className="space-y-6">
					<div className="space-y-4">
						{/* 아이디 */}
						<div>
							<label htmlFor="userId" className="sr-only">
								아이디
							</label>
							<input
								id="userId"
								name="userId"
								value={userId}
								onChange={(e) => setUserId(e.target.value)}
								placeholder="아이디"
								className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
								style={{
									borderColor: "var(--color-input-border)",
									color: "var(--color-basic-text)",
									// placeholder 색상
									// Tailwind v4 arbitrary 적용이 번거로워 인라인 사용
								}}
								onFocus={(e) => {
									e.currentTarget.style.boxShadow =
										"0 0 0 2px rgba(51,60,71,0.15)";
									e.currentTarget.style.borderColor =
										"var(--color-input-border-select)";
								}}
								onBlur={(e) => {
									e.currentTarget.style.boxShadow = "none";
									e.currentTarget.style.borderColor =
										"var(--color-input-border)";
								}}
							/>
						</div>
						{/* 비밀번호 */}
						<div>
							<label htmlFor="password" className="sr-only">
								비밀번호
							</label>
							<input
								id="password"
								name="password"
								type="password"
								value={password}
								onChange={(e) => setPassword(e.target.value)}
								placeholder="비밀번호"
								className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
								style={{
									borderColor: "var(--color-input-border)",
									color: "var(--color-basic-text)",
								}}
								onFocus={(e) => {
									e.currentTarget.style.boxShadow =
										"0 0 0 2px rgba(51,60,71,0.15)";
									e.currentTarget.style.borderColor =
										"var(--color-input-border-select)";
								}}
								onBlur={(e) => {
									e.currentTarget.style.boxShadow = "none";
									e.currentTarget.style.borderColor =
										"var(--color-input-border)";
								}}
							/>
						</div>
					</div>

					{/* 체크박스들 */}
					<div className="flex items-center justify-start gap-6">
						<label className="flex cursor-pointer select-none items-center gap-2 text-[15px]"
							style={{ color: "var(--color-basic-text)" }}>
							<input
								type="checkbox"
								checked={rememberId}
								onChange={(e) => setRememberId(e.target.checked)}
								className="h-[18px] w-[18px] cursor-pointer rounded border"
								style={{
									accentColor: "var(--color-input-border-select)",
									borderColor: "var(--color-inactive-checkbox)",
								}}
							/>
							아이디 기억하기
						</label>
						<label className="flex cursor-pointer select-none items-center gap-2 text-[15px]"
							style={{ color: "var(--color-basic-text)" }}>
							<input
								type="checkbox"
								checked={autoLogin}
								onChange={(e) => setAutoLogin(e.target.checked)}
								className="h-[18px] w-[18px] cursor-pointer rounded border"
								style={{
									accentColor: "var(--color-input-border-select)",
									borderColor: "var(--color-inactive-checkbox)",
								}}
							/>
							자동 로그인
						</label>
					</div>

					{/* 로그인 버튼 */}
					<button
						type="submit"
						className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity"
						style={{ backgroundColor: "var(--color-active-button)" }}
					>
						로그인
					</button>

					{/* 하단 링크들 */}
					<div className="flex items-center justify-between text-[15px]">
						<Link
							href="#"
							className="underline-offset-2 hover:underline"
							style={{ color: "var(--color-basic-text)" }}
						>
							회원가입
						</Link>
						<div
							className="flex items-center gap-3"
							style={{ color: "var(--color-basic-text)" }}
						>
							<Link href="#" className="underline-offset-2 hover:underline">
								아이디 찾기
							</Link>
							<span className="h-3 w-px bg-[var(--color-input-border)]" />
							<Link href="#" className="underline-offset-2 hover:underline">
								비밀번호 재설정
							</Link>
						</div>
					</div>
				</form>
			</div>

			{/* 카피라이트 */}
			<p
				className="mt-10 text-center text-[15px]"
				style={{ color: "var(--color-basic-text)" }}
			>
				Copyright ⓒ 2025 XL LMS. All rights reserved
			</p>
		</div>
	);
}