"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 */
		console.log({ userId, password, rememberId, autoLogin });
	}

	return (
		<div className="min-h-screen w-full flex flex-col items-center justify-between">
      <div></div>
			<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full">
				{/* 로고 영역 */}
				<div className="my-10 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-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-[56px] 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
                "
							/>
						</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-[56px] 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
                "
							/>
						</div>
					</div>

					{/* 체크박스들 */}
					<div className="flex items-center justify-start gap-6">
						<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="h-[18px] w-[18px] cursor-pointer rounded border 
                accent-input-border-select border-inactive-checkbox"
							/>
							아이디 기억하기
						</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="h-[18px] w-[18px] cursor-pointer rounded border 
                accent-input-border-select border-inactive-checkbox"
							/>
							자동 로그인
						</label>
					</div>

					{/* 로그인 버튼 */}
					<button
						type="submit"
						className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer bg-inactive-button"
					>
						로그인
					</button>

					{/* 하단 링크들 */}
					<div className="flex items-center justify-between text-[15px]">
						<Link
							href="/register"
							className="underline-offset-2 text-basic-text"
						>
							회원가입
						</Link>
						<div
							className="flex items-center gap-3 text-basic-text"
						>
							<Link href="#" className="underline-offset-2">
								아이디 찾기
							</Link>
							<span className="h-3 w-px bg-input-border" />
							<Link href="#" 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>
	);
}