"use client";

import Link from "next/link";

// 이미지 상수
const imgLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";

type CheckboxProps = {
  className?: string;
  status?: "Inactive" | "Focused" | "Disabled";
};

function Checkbox({ className, status = "Inactive" }: CheckboxProps) {
  return (
    <div className={className}>
      <div className="absolute border border-[#b9b9b9] border-solid left-0 rounded-[4px] size-[18px] top-0" />
    </div>
  );
}

export default function LoginPage() {
  return (
    <div className="bg-white min-h-screen flex flex-col items-center justify-center py-8">
      {/* 로고 */}
      <div className="mb-16 w-[179px] h-[185px] flex items-center justify-center">
        <div className="relative w-full h-full overflow-hidden pointer-events-none">
          <img
            alt="Logo"
            className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]"
            src={imgLogo}
          />
        </div>
      </div>

      {/* 콘텐츠 영역 */}
      <div className="flex flex-col gap-[54px] items-center w-full max-w-[480px] px-4">
        {/* 입력 폼 영역 */}
        <div className="flex flex-col gap-[20px] items-start w-full">
          {/* 아이디 입력 필드 */}
          <div className="flex flex-col gap-[8px] items-center w-full">
            <div className="flex flex-col gap-[4px] items-center w-full">
              <div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
                <div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
                  <input
                    type="text"
                    placeholder="아이디(이메일)"
                    className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
                    style={{ fontVariationSettings: "'wght' 500" }}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* 비밀번호 입력 필드 */}
          <div className="flex flex-col gap-[8px] items-center w-full">
            <div className="flex flex-col gap-[4px] items-center rounded-[8px] w-full">
              <div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
                <div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
                  <input
                    type="password"
                    placeholder="비밀번호"
                    className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
                    style={{ fontVariationSettings: "'wght' 500" }}
                  />
                </div>
              </div>
            </div>
          </div>

          {/* 체크박스 영역 */}
          <div className="flex gap-[46px] items-center justify-start w-full">
            <div className="flex gap-[10px] items-center">
              <Checkbox className="relative shrink-0 size-[18px]" />
              <p
                className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
                style={{ fontVariationSettings: "'wght' 500" }}
              >
                아이디 기억하기
              </p>
            </div>
            <div className="flex gap-[10px] items-center">
              <Checkbox className="relative shrink-0 size-[18px]" />
              <p
                className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
                style={{ fontVariationSettings: "'wght' 500" }}
              >
                자동 로그인
              </p>
            </div>
          </div>
        </div>

        {/* 로그인 버튼 */}
        <div className="flex flex-col gap-[16px] items-center w-full">
          <button
            type="submit"
            className="bg-[#2b82e8] box-border flex gap-[10px] items-center justify-center px-[120px] py-[13px] rounded-[8px] w-full hover:bg-[#1e6bc7] transition-colors"
          >
            <p
              className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[16px] text-white text-center whitespace-pre"
              style={{ fontVariationSettings: "'wght' 700" }}
            >
              로그인
            </p>
          </button>
        </div>
      </div>

      {/* 하단 링크 영역 */}
      <div className="mt-8 flex gap-[6px] items-center justify-center flex-wrap">
        <Link
          href="/registeragreement"
          className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] hover:opacity-80 transition-opacity"
        >
          <p
            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
            style={{ fontVariationSettings: "'wght' 500" }}
          >
            회원가입
          </p>
        </Link>
        <div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
          <p
            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
            style={{ fontVariationSettings: "'wght' 500" }}
          >
            |
          </p>
        </div>
        <button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
          <p
            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
            style={{ fontVariationSettings: "'wght' 500" }}
          >
            아이디 찾기
          </p>
        </button>
        <div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
          <p
            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
            style={{ fontVariationSettings: "'wght' 500" }}
          >
            |
          </p>
        </div>
        <button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
          <p
            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
            style={{ fontVariationSettings: "'wght' 500" }}
          >
            비밀번호 재설정
          </p>
        </button>
      </div>

      {/* 카피라이트 */}
      <div className="mt-8 flex flex-col font-['Pretendard','Noto_Sans',sans-serif] justify-center text-[16px] text-[rgba(0,0,0,0.55)] text-center tracking-[-0.08px]">
        <p className="leading-[1.45] whitespace-pre" style={{ fontVariationSettings: "'CTGR' 0, 'wdth' 100, 'wght' 500" }}>
          Copyright ⓒ 2025 XL LMS. All rights reserved
        </p>
      </div>
    </div>
  );
}