"use client";

import { useState } from "react";
import Link from "next/link";
import MainLogo from "@/app/svgs/mainlogosvg"

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 bg-white p-8 ">
				{/* 로고 영역 */}
				<div className="mb-10 flex flex-col items-center">
          <div className="mb-[7px]">
            <MainLogo/>
          </div>
					<div className="text-[28.8px] font-[800] leading-[145%]  text-neutral-700" >
						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="w-[480px] h-[56px] px-[12px] py-[7px] 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-[400] leading-[150%] placeholder:text-input-placeholder-text "

							/>
						</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"
							/>
						</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 cursor-pointer"
						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>
	);
}