XRLMS/app/register/page.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import RadioOff from '../../public/svg/radio_off';
import RadioOn from '../../public/svg/radio_on';
import CheckOff from '../../public/svg/check_off';
import CheckOn from '../../public/svg/check_on';

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 [verificationCode, setVerificationCode] = useState('');
  const [isVerificationSent, setIsVerificationSent] = useState(false);
  const [isVerificationComplete, setIsVerificationComplete] = useState(false);
  const [verificationError, setVerificationError] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    const prevValue = formData[name as keyof typeof formData];
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
    if (errors[name as keyof typeof errors]) {
      setErrors((prev) => ({
        ...prev,
        [name]: '',
      }));
    }
    // 이메일이 실제로 변경되었을 때만 인증 상태 초기화
    if (name === 'email' && prevValue !== value && isVerificationSent) {
      setIsVerificationSent(false);
      setVerificationCode('');
      setIsVerificationComplete(false);
    }
  };

  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 호출
    setIsVerificationSent(true);
    setVerificationCode('');
    setIsVerificationComplete(false);
    setVerificationError('');
  };

  const handleVerificationCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setVerificationCode(e.target.value);
    // 인증번호 입력 시 에러 초기화
    if (verificationError) {
      setVerificationError('');
    }
  };

  const handleVerifyCode = () => {
    if (!verificationCode.trim()) {
      return;
    }
    // TODO: 인증번호 확인 API 호출
    // API 연동 전까지 맞는 인증번호는 123456
    if (verificationCode.trim() === '123456') {
      setIsVerificationComplete(true);
      setVerificationError('');
    } else {
      // 인증번호가 틀렸을 때 에러 메시지 표시
      setVerificationError('인증번호가 잘못되었습니다.');
    }
  };

  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="relative min-h-screen flex flex-col items-center bg-white pb-[100px]">
      {/* 제목 */}
      <h1 className="font-bold text-[#1D1D1D] text-[32px] leading-tight mt-[100px]">
        회원가입
      </h1>

      {/* 회원정보 입력 폼 */}
      <form
        className="w-[829px] border border-[#b9b9b9] rounded-[8px] mt-[56px] px-[31px] py-[29px]"
        autoComplete="off"
        onSubmit={handleSubmit}
      >
        <div className="flex flex-col gap-[20px]">
          {/* 이름 */}
          <div className="flex flex-col">
            <div className="flex gap-[16px] items-center h-[41px]">
              <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                이름
              </span>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleChange}
                className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.name ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                placeholder="이름을 입력해 주세요."
              />
            </div>
            {errors.name && (
              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.name}</p>
            )}
          </div>

          {/* 휴대폰 */}
          <div className="flex flex-col">
            <div className="flex gap-[16px] items-center h-[41px]">
              <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                휴대폰
              </span>
              <input
                type="text"
                name="phone"
                value={formData.phone}
                onChange={handlePhoneChange}
                maxLength={11}
                className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.phone ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                placeholder="-없이 입력해 주세요."
              />
            </div>
            {errors.phone && (
              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.phone}</p>
            )}
          </div>

          {/* 이메일(아이디) + 인증번호 발송 */}
          <div className="flex flex-col">
            <div className="flex gap-[16px] items-center h-[42px]">
              <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                이메일(아이디)
              </span>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[401px] ${errors.email ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                placeholder="이메일을 입력해 주세요."
              />
              <button
                type="button"
                onClick={handleSendVerificationCode}
                className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[42px] w-[158px] transition hover:bg-[#1669ca]"
              >
                {isVerificationSent ? '인증번호 재발송' : '인증번호 발송'}
              </button>
            </div>
            {errors.email && (
              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.email}</p>
            )}
          </div>

          {/* 인증번호 입력 폼 */}
          {isVerificationSent && (
            <div className="flex flex-col">
              <div className="flex gap-[16px] items-center h-[41px]">
                <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                </span>
                <input
                  type="text"
                  value={verificationCode}
                  onChange={handleVerificationCodeChange}
                  className="h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#1669ca] text-[#515151] bg-white w-[401px]"
                  placeholder="인증번호를 입력해 주세요."
                />
                <button
                  type="button"
                  onClick={handleVerifyCode}
                  disabled={!verificationCode.trim() || isVerificationComplete}
                  className={`rounded-[10px] h-[43px] w-[158px] text-[18px] font-medium transition flex items-center justify-center
                    ${verificationCode.trim() && !isVerificationComplete
                      ? 'bg-[#2B82E8] text-white hover:bg-[#1669ca]'
                      : 'bg-[#b9b9b9] text-white cursor-not-allowed'
                    }`}
                >
                  인증번호 확인
                </button>
              </div>
              {verificationError && (
                <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{verificationError}</p>
              )}
              {!isVerificationComplete && !verificationError && (
                <div className="flex items-center ml-[193px] mt-[16px]">
                  <p className="text-[#1669ca] text-[12px] font-medium leading-[14px] max-w-[575px]">
                    인증 확인을 위해 작성한 이메일로 인증번호를 발송했어요.<br />이메일을 확인해 주세요.
                  </p>
                </div>
              )}
              {isVerificationComplete && (
                <div className="flex items-center ml-[193px] mt-[16px]">
                  <p className="text-[#1669ca] text-[12px] font-medium">
                    이메일 인증을 완료했어요.
                  </p>
                </div>
              )}
            </div>
          )}

          {/* 비밀번호 */}
          <div className="flex flex-col">
            <div className="flex gap-[16px] items-center h-[41px]">
              <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                비밀번호
              </span>
              <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.password ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
              />
            </div>
            {errors.password && (
              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.password}</p>
            )}
          </div>

          {/* 비밀번호 확인 */}
          <div className="flex flex-col">
            <div className="flex gap-[16px] items-center h-[41px]">
              <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                비밀번호 확인
              </span>
              <input
                type="password"
                name="passwordConfirm"
                value={formData.passwordConfirm}
                onChange={handleChange}
                className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.passwordConfirm ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                placeholder="비밀번호를 다시 입력해 주세요."
              />
            </div>
            {errors.passwordConfirm && (
              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.passwordConfirm}</p>
            )}
          </div>

          {/* 성별 */}
          <div className="flex gap-[16px] items-center h-[24px]">
            <span className="text-[#515151] text-[18px] font-medium w-[177px]">
              성별
            </span>
            <div className="flex gap-[14px] items-center">
              <button
                type="button"
                className="flex items-center gap-[10px]"
                onClick={() => handleGenderChange('male')}
              >
                {formData.gender === 'male' ? <RadioOn /> : <RadioOff />}
                <span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
                  남성
                </span>
              </button>
              <button
                type="button"
                className="flex items-center gap-[10px]"
                onClick={() => handleGenderChange('female')}
              >
                {formData.gender === 'female' ? <RadioOn /> : <RadioOff />}
                <span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
                  여성
                </span>
              </button>
            </div>
          </div>

          {/* 생년월일 */}
          <div className="flex gap-[16px] items-center h-[41px]">
            <span className="text-[#515151] text-[18px] font-medium w-[177px]">
              생년월일
            </span>
            <div className="flex gap-[8px] flex-1">
              <div className="relative flex-1">
                <select
                  name="birthYear"
                  value={formData.birthYear}
                  onChange={handleChange}
                  className="w-full h-[42px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
                >
                  <option value="" className="text-[#b9b9b9]">년도</option>
                  {[...Array(100)].map((_, idx) => {
                    const year = new Date().getFullYear() - idx;
                    return <option key={year} value={year}>{year}</option>
                  })}
                </select>
                <img
                  src={imgLsiconDownFilled}
                  alt=""
                  className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
                />
              </div>
              <div className="relative flex-1">
                <select
                  name="birthMonth"
                  value={formData.birthMonth}
                  onChange={handleChange}
                  className="w-full h-[42px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
                >
                  <option value="" className="text-[#b9b9b9]">월</option>
                  {[...Array(12)].map((_, idx) => (
                    <option key={idx + 1} value={idx + 1}>{idx + 1}</option>
                  ))}
                </select>
                <img
                  src={imgLsiconDownFilled}
                  alt=""
                  className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
                />
              </div>
              <div className="relative flex-1">
                <select
                  name="birthDay"
                  value={formData.birthDay}
                  onChange={handleChange}
                  className="w-full h-[42px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
                >
                  <option value="" className="text-[#b9b9b9]">일</option>
                  {[...Array(31)].map((_, idx) => (
                    <option key={idx + 1} value={idx + 1}>{idx + 1}</option>
                  ))}
                </select>
                <img
                  src={imgLsiconDownFilled}
                  alt=""
                  className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
                />
              </div>
            </div>
          </div>
        </div>
      </form>

      {/* 약관 동의 */}
      <div className="mt-[46px] w-[829px] border border-[#b9b9b9] rounded-[8px] h-[221px] relative">
        <div className="px-[31px] py-[29px]">
          {/* 전체동의 */}
          <div
            className="flex items-center gap-[16px] cursor-pointer select-none mb-[17px]"
            onClick={() => handleAgreementChange('all')}
          >
            {agreements.all ? <CheckOn /> : <CheckOff />}
            <span className="font-bold text-[20px] text-[#515151]">
              모든 항목에 동의합니다.
            </span>
          </div>

          {/* 개별 동의들 */}
          <div className="flex flex-col gap-[17px]">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('age14')}>
                {agreements.age14 ? <CheckOn /> : <CheckOff />}
                <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
                  만 14세 이상입니다. (필수)
                </span>
              </div>
              <button
                type="button"
                className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
              >
                전체
              </button>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('terms')}>
                {agreements.terms ? <CheckOn /> : <CheckOff />}
                <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
                  이용 약관 동의 (필수)
                </span>
              </div>
              <button
                type="button"
                className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
              >
                전체
              </button>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('privacy')}>
                {agreements.privacy ? <CheckOn /> : <CheckOff />}
                <span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
                  개인정보 수집 및 이용 동의 (필수)
                </span>
              </div>
              <button
                type="button"
                className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
              >
                전체
              </button>
            </div>
          </div>
        </div>
      </div>

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

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