XRLMS/app/register/page.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

const imgRiCheckboxCircleLine = "http://localhost:3845/assets/e4c498605e2559d2764a3112ae9a9019e6ad798e.svg";
const imgFormkitRadio = "http://localhost:3845/assets/ea30a9a80d95ced4bfb1174d3a8475a4a1dbbabb.svg";
const imgAkarIconsRadio = "http://localhost:3845/assets/d772bd292f6dfddfcbd42cc1f22aa796ed671b11.svg";
const imgLsiconDownFilled = "http://localhost:3845/assets/1c65a7143b6e9a0eee4b0878c33198a22da091cf.svg";

export default function RegisterPage() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    password: '',
    passwordConfirm: '',
    gender: 'male',
    birthYear: '',
    birthMonth: '',
    birthDay: '',
  });

  const [agreements, setAgreements] = useState({
    all: false,
    age14: false,
    terms: false,
    privacy: false,
  });

  const [errors, setErrors] = useState({
    name: '',
    phone: '',
    email: '',
    password: '',
    passwordConfirm: '',
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
    if (errors[name as keyof typeof errors]) {
      setErrors((prev) => ({
        ...prev,
        [name]: '',
      }));
    }
  };

  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let value = e.target.value.replace(/[^\d]/g, '');
    if (value.length > 11) value = value.slice(0, 11);
    setFormData((prev) => ({
      ...prev,
      phone: value,
    }));
    if (errors.phone) {
      setErrors((prev) => ({
        ...prev,
        phone: '',
      }));
    }
  };

  const handleAgreementChange = (key: keyof typeof agreements) => {
    if (key === 'all') {
      const newValue = !agreements.all;
      setAgreements({
        all: newValue,
        age14: newValue,
        terms: newValue,
        privacy: newValue,
      });
    } else {
      const newAgreements = {
        ...agreements,
        [key]: !agreements[key],
      };
      setAgreements({
        ...newAgreements,
        all: newAgreements.age14 && newAgreements.terms && newAgreements.privacy,
      });
    }
  };

  const handleGenderChange = (gender: 'male' | 'female') => {
    setFormData((prev) => ({
      ...prev,
      gender,
    }));
  };

  const validateEmail = (email: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  const validatePassword = (password: string) => {
    return password.length >= 8 && password.length <= 16 && /[a-zA-Z]/.test(password) && /[0-9]/.test(password);
  };

  const validatePhone = (phone: string) => {
    if (phone === '') return true;
    const phoneRegex = /^010\d{8}$/;
    return phoneRegex.test(phone.replace(/[^\d]/g, ''));
  };

  const handleSendVerificationCode = () => {
    if (!formData.email || !validateEmail(formData.email)) {
      setErrors((prev) => ({
        ...prev,
        email: '올바른 이메일을 입력해주세요.',
      }));
      return;
    }
    // TODO: 인증번호 전송 API 호출
    alert('인증번호가 전송되었습니다.');
  };

  const validateForm = () => {
    const newErrors = {
      name: '',
      phone: '',
      email: '',
      password: '',
      passwordConfirm: '',
    };

    let isValid = true;

    if (formData.name.trim() === '') {
      newErrors.name = '이름을 입력해주세요.';
      isValid = false;
    }

    if (formData.phone && !validatePhone(formData.phone)) {
      newErrors.phone = '올바른 전화번호 형식이 아닙니다.';
      isValid = false;
    }

    if (formData.email.trim() === '') {
      newErrors.email = '이메일을 입력해주세요.';
      isValid = false;
    } else if (!validateEmail(formData.email)) {
      newErrors.email = '올바른 이메일 형식이 아닙니다.';
      isValid = false;
    }

    if (formData.password === '') {
      newErrors.password = '비밀번호를 입력해주세요.';
      isValid = false;
    } else if (!validatePassword(formData.password)) {
      newErrors.password = '비밀번호는 8~16자의 영문/숫자를 포함해야 합니다.';
      isValid = false;
    }

    if (formData.passwordConfirm === '') {
      newErrors.passwordConfirm = '비밀번호 확인을 입력해주세요.';
      isValid = false;
    } else if (formData.password !== formData.passwordConfirm) {
      newErrors.passwordConfirm = '비밀번호가 일치하지 않습니다.';
      isValid = false;
    }

    setErrors(newErrors);
    return isValid;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!agreements.age14 || !agreements.terms || !agreements.privacy) {
      alert('필수 약관에 동의해주세요.');
      return;
    }
    if (validateForm()) {
      router.push('/registercomplete');
    }
  };

  const canProceed =
    formData.name.trim() !== '' &&
    formData.email.trim() !== '' &&
    formData.password !== '' &&
    formData.passwordConfirm !== '' &&
    agreements.age14 &&
    agreements.terms &&
    agreements.privacy;

  return (
    <div className="bg-white relative min-h-screen flex flex-col items-center">
      {/* 제목 */}
      <p className="font-bold text-[#1d1d1d] text-[32px] leading-normal mt-[146px] mb-0">
        회원가입
      </p>

      {/* 회원정보 입력 폼 */}
      <div className="mt-[160px] w-[767px] flex flex-col gap-[61px]">
        {/* 이름 */}
        <div className="flex items-center gap-[10px]">
          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
            이름
          </p>
          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.name ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
              placeholder="이름을 입력해 주세요."
            />
          </div>
        </div>

        {/* 휴대폰 */}
        <div className="flex items-center gap-[10px]">
          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
            휴대폰
          </p>
          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.phone ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
            <input
              type="text"
              name="phone"
              value={formData.phone}
              onChange={handlePhoneChange}
              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
              placeholder="-없이 입력해 주세요."
              maxLength={11}
            />
          </div>
        </div>

        {/* 이메일(아이디) */}
        <div className="flex items-center gap-[10px]">
          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
            이메일(아이디)
          </p>
          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] ${errors.email ? 'border-red-500' : 'border-[#b9b9b9]'} w-[401px]`}>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
              placeholder="이메일을 입력해 주세요."
            />
          </div>
          <button
            type="button"
            onClick={handleSendVerificationCode}
            className="bg-[#2b82e8] box-border flex items-center justify-center p-[10px] rounded-[10px] w-[158px] h-[43px]"
          >
            <p className="font-medium text-[18px] text-white text-center">
              인증번호 발송
            </p>
          </button>
        </div>

        {/* 비밀번호 */}
        <div className="flex items-center gap-[10px]">
          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
            비밀번호
          </p>
          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.password ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
            <input
              type="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
              placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
            />
          </div>
        </div>

        {/* 비밀번호 확인 */}
        <div className="flex items-center gap-[10px]">
          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
            비밀번호 확인
          </p>
          <div className={`border border-solid box-border flex items-center p-[10px] rounded-[8px] flex-1 ${errors.passwordConfirm ? 'border-red-500' : 'border-[#b9b9b9]'}`}>
            <input
              type="password"
              name="passwordConfirm"
              value={formData.passwordConfirm}
              onChange={handleChange}
              className="flex-1 outline-none font-medium text-[18px] text-[#1d1d1d] placeholder:text-[#b9b9b9]"
              placeholder="비밀번호를 다시 입력해 주세요."
            />
          </div>
        </div>

        {/* 성별 */}
        <div className="flex items-start gap-[14px]">
          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
            성별
          </p>
          <div className="flex gap-[14px] items-center">
            <div className="flex gap-[10px] items-center cursor-pointer" onClick={() => handleGenderChange('male')}>
              <div className="relative w-[24px] h-[24px] shrink-0">
                {formData.gender === 'male' ? (
                  <img alt="" className="block max-w-none w-full h-full" src={imgFormkitRadio} />
                ) : (
                  <img alt="" className="block max-w-none w-full h-full" src={imgAkarIconsRadio} />
                )}
              </div>
              <p className="font-medium text-[14px] text-[#515151] leading-[1.6]">남성</p>
            </div>
            <div className="flex gap-[10px] items-center cursor-pointer" onClick={() => handleGenderChange('female')}>
              <div className="relative w-[24px] h-[24px] shrink-0">
                {formData.gender === 'female' ? (
                  <img alt="" className="block max-w-none w-full h-full" src={imgFormkitRadio} />
                ) : (
                  <img alt="" className="block max-w-none w-full h-full" src={imgAkarIconsRadio} />
                )}
              </div>
              <p className="font-medium text-[14px] text-[#515151] leading-[1.6]">여성</p>
            </div>
          </div>
        </div>

        {/* 생년월일 */}
        <div className="flex items-center gap-[10px]">
          <p className="font-medium text-[#515151] text-[18px] leading-normal w-[177px]">
            생년월일
          </p>
          <div className="flex gap-[10px]">
            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
              <p className="font-medium text-[18px] text-[#b9b9b9]">
                {formData.birthYear || '년도'}
              </p>
              <div className="relative w-[16px] h-[16px] shrink-0">
                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
              </div>
            </div>
            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
              <p className="font-medium text-[18px] text-[#b9b9b9]">
                {formData.birthMonth || '월'}
              </p>
              <div className="relative w-[16px] h-[16px] shrink-0">
                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
              </div>
            </div>
            <div className="border border-[#b9b9b9] border-solid box-border flex items-center justify-between p-[10px] rounded-[8px] w-[180.667px] cursor-pointer">
              <p className="font-medium text-[18px] text-[#b9b9b9]">
                {formData.birthDay || '일'}
              </p>
              <div className="relative w-[16px] h-[16px] shrink-0">
                <img alt="" className="block max-w-none w-full h-full" src={imgLsiconDownFilled} />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 약관 동의 */}
      <div className="mt-[100px] border border-[#b9b9b9] border-solid rounded-[8px] w-[829px]">
        <div className="p-[29px] flex flex-col gap-[17px]">
          {/* 전체 동의 */}
          <div className="flex items-center justify-between">
            <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('all')}>
              <div className="relative w-[24px] h-[24px] shrink-0">
                {agreements.all ? (
                  <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
                    <div className="w-[8px] h-[8px] rounded-full bg-white" />
                  </div>
                ) : (
                  <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
                )}
              </div>
              <p className="font-bold text-[#515151] text-[20px] leading-normal">
                모든 항목에 동의합니다.
              </p>
            </div>
          </div>

          {/* 개별 약관 */}
          <div className="flex flex-col gap-[17px]">
            <div className="flex items-center justify-between">
              <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('age14')}>
                <div className="relative w-[24px] h-[24px] shrink-0">
                  {agreements.age14 ? (
                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
                    </div>
                  ) : (
                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
                  )}
                </div>
                <p className="font-medium text-[#515151] text-[16px] leading-[1.6]">
                  만 14세 이상입니다. (필수)
                </p>
              </div>
              <div className="border border-[#eeeeee] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[90px] h-[27px] cursor-pointer hover:bg-gray-50">
                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
                  전체
                </p>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('terms')}>
                <div className="relative w-[24px] h-[24px] shrink-0">
                  {agreements.terms ? (
                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
                    </div>
                  ) : (
                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
                  )}
                </div>
                <p className="font-medium text-[#515151] text-[16px] leading-[1.6]">
                  이용 약관 동의 (필수)
                </p>
              </div>
              <div className="border border-[#eeeeee] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[90px] h-[27px] cursor-pointer hover:bg-gray-50">
                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
                  전체
                </p>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex gap-[16px] items-end cursor-pointer" onClick={() => handleAgreementChange('privacy')}>
                <div className="relative w-[24px] h-[24px] shrink-0">
                  {agreements.privacy ? (
                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#1669ca] bg-[#1669ca] flex items-center justify-center">
                      <div className="w-[8px] h-[8px] rounded-full bg-white" />
                    </div>
                  ) : (
                    <div className="w-[24px] h-[24px] rounded-full border-2 border-[#b9b9b9]" />
                  )}
                </div>
                <p className="font-medium text-[#515151] text-[16px] leading-[1.6]">
                  개인정보 수집 및 이용 동의 (필수)
                </p>
              </div>
              <div className="border border-[#eeeeee] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[90px] h-[27px] cursor-pointer hover:bg-gray-50">
                <p className="font-medium text-[#1669ca] text-[12px] leading-normal">
                  전체
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 버튼 영역 */}
      <div className="mt-[50px] flex gap-[21px] items-center">
        <Link
          href="/registeragreement"
          className="border border-[#1669ca] border-solid box-border flex items-center justify-center p-[10px] rounded-[10px] w-[334px] h-[55px]"
        >
          <p className="font-medium text-[#515151] text-[18px] leading-normal">
            돌아기기
          </p>
        </Link>
        <button
          type="button"
          onClick={handleSubmit}
          disabled={!canProceed}
          className={`box-border flex items-center justify-center p-[10px] rounded-[10px] w-[334px] h-[55px] ${canProceed
            ? 'bg-[#2b82e8] hover:bg-[#1669ca]'
            : 'bg-[#b9b9b9] cursor-not-allowed'
            }`}
        >
          <p className={`font-medium text-[18px] leading-normal ${canProceed ? 'text-white' : 'text-white'
            }`}>
            회원가입 완료
          </p>
        </button>
      </div>

      {/* 카피라이트 */}
      <div className="absolute bottom-[89.5px] flex flex-col justify-center left-1/2 -translate-x-1/2 translate-y-1/2">
        <p className="font-medium text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] tracking-[-0.08px]">
          Copyright ⓒ 2025 XL LMS. All rights reserved
        </p>
      </div>
    </div>
  );
}