XRLMS/app/register/page.tsx

'use client';

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

export default function RegisterPage() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    passwordConfirm: '',
    phone: '',
    gender: 'male',
    birthDate: '',
    verificationCode: '',
  });

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

  // 입력 필드 변경 핸들러
  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 validateEmail = (email: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  // 비밀번호 유효성 검사 (최소 8자, 영문/숫자 조합)
  const validatePassword = (password: string) => {
    return password.length >= 8 && /[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 validateForm = () => {
    const newErrors = {
      name: '',
      email: '',
      password: '',
      passwordConfirm: '',
      phone: '',
    };

    let isValid = true;

    // 이름 검사
    if (formData.name.trim() === '') {
      newErrors.name = '이름을 입력해주세요.';
      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자 이상, 영문과 숫자를 포함해야 합니다.';
      isValid = false;
    }

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

    // 전화번호 검사 (선택 항목)
    if (formData.phone && !validatePhone(formData.phone)) {
      newErrors.phone = '올바른 전화번호 형식이 아닙니다. (예: 01012345678)';
      isValid = false;
    }

    setErrors({
      ...newErrors,
      birthDate: '',
      verificationCode: '',
    });
    return isValid;
  };

  // 전화번호 자동 포맷팅 (하이픈 없이)
  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,
    }));
  };

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

  // 생년월일 핸들러
  const handleBirthDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData((prev) => ({
      ...prev,
      birthDate: e.target.value,
    }));
  };

  // 폼 제출 핸들러
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validateForm()) {
      // 회원가입 완료 페이지로 이동
      // 실제로는 API 호출을 하여 회원가입 처리를 해야 합니다
      window.location.href = '/registercomplete';
    }
  };

  // 필수 항목 입력 여부 확인
  const canProceed = 
    formData.name.trim() !== '' &&
    formData.email.trim() !== '' &&
    formData.password !== '' &&
    formData.passwordConfirm !== '';

  return (
    <div className="min-h-screen bg-white flex flex-col items-center pb-10 pt-48 px-[720px]">
      <div className="flex flex-col gap-[60px] items-start w-[480px]">
        {/* 제목 */}
        <div className="flex gap-2 items-center justify-center w-full">
          <h1 className="text-[24px] font-extrabold text-[#333c47] leading-[1.45]">회원가입</h1>
        </div>

        {/* 단계 표시 */}
        <div className="flex flex-col gap-5 items-center w-full">
          <div className="flex gap-5 items-center">
            <div className="flex flex-col items-center justify-center text-[#8c95a1] text-[15px] w-[88px]">
              <p className="leading-[1.5]">01</p>
              <p className="leading-[1.5]">약관 동의</p>
            </div>
            <span className="text-[#8c95a1] text-xl">&gt;</span>
            <div className="flex flex-col items-center justify-center text-[#1f2b91] text-[15px] font-bold w-[88px]">
              <p className="leading-[1.5]">02</p>
              <p className="leading-[1.5]">회원정보입력</p>
            </div>
            <span className="text-[#8c95a1] text-xl">&gt;</span>
            <div className="flex flex-col items-center justify-center text-[#8c95a1] text-[15px] w-[88px]">
              <p className="leading-[1.5]">03</p>
              <p className="leading-[1.5]">회원가입완료</p>
            </div>
          </div>
        </div>

        {/* 회원정보 입력 폼 */}
        <form onSubmit={handleSubmit} className="flex flex-col gap-6 items-start w-full">
          {/* 이름 */}
          <div className="flex flex-col gap-2 items-start justify-center w-full">
            <label htmlFor="name" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
              이름
            </label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name}
              onChange={handleChange}
              className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
                errors.name
                  ? 'border-red-500'
                  : 'border-[#dee1e6]'
              } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
              placeholder="이름을 입력해 주세요."
            />
            {errors.name && (
              <p className="text-sm text-red-500">{errors.name}</p>
            )}
          </div>

          {/* 휴대폰 */}
          <div className="flex flex-col gap-2 items-start justify-center w-full">
            <label htmlFor="phone" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
              휴대폰
            </label>
            <input
              type="text"
              id="phone"
              name="phone"
              value={formData.phone}
              onChange={handlePhoneChange}
              className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
                errors.phone
                  ? 'border-red-500'
                  : 'border-[#dee1e6]'
              } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
              placeholder="-없이 입력해 주세요."
              maxLength={11}
            />
            {errors.phone && (
              <p className="text-sm text-red-500">{errors.phone}</p>
            )}
          </div>

          {/* 아이디(이메일) */}
          <div className="flex flex-col gap-2 items-start justify-center w-full">
            <label htmlFor="email" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
              아이디(이메일)
            </label>
            <div className="flex gap-2 items-center w-full">
              <input
                type="email"
                id="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                className={`flex-1 h-10 px-3 py-2 border rounded-lg bg-white ${
                  errors.email
                    ? 'border-red-500'
                    : 'border-[#dee1e6]'
                } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
                placeholder="이메일을 입력해 주세요."
              />
              <button
                type="button"
                onClick={handleSendVerificationCode}
                className="h-10 px-3 py-0 bg-[#f9fafb] rounded-lg shrink-0 w-[136px] flex items-center justify-center text-[#b1b8c0] text-[16px] font-semibold hover:bg-[#f1f3f5]"
              >
                인증번호 전송
              </button>
            </div>
            {errors.email && (
              <p className="text-sm text-red-500">{errors.email}</p>
            )}
          </div>

          {/* 비밀번호 */}
          <div className="flex flex-col gap-2 items-start justify-center w-full">
            <label htmlFor="password" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
              비밀번호
            </label>
            <input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
                errors.password
                  ? 'border-red-500'
                  : 'border-[#dee1e6]'
              } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
              placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
            />
            {errors.password && (
              <p className="text-sm text-red-500">{errors.password}</p>
            )}
          </div>

          {/* 비밀번호 확인 */}
          <div className="flex flex-col gap-2 items-start justify-center w-full">
            <label htmlFor="passwordConfirm" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
              비밀번호 확인
            </label>
            <input
              type="password"
              id="passwordConfirm"
              name="passwordConfirm"
              value={formData.passwordConfirm}
              onChange={handleChange}
              className={`w-full h-10 px-3 py-2 border rounded-lg bg-white ${
                errors.passwordConfirm
                  ? 'border-red-500'
                  : 'border-[#dee1e6]'
              } focus:outline-none focus:ring-2 focus:ring-[#1f2b91]`}
              placeholder="비밀번호를 다시 입력해 주세요."
            />
            {errors.passwordConfirm && (
              <p className="text-sm text-red-500">{errors.passwordConfirm}</p>
            )}
          </div>

          {/* 성별 */}
          <div className="flex flex-col gap-2 items-start justify-center w-full">
            <label className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
              성별
            </label>
            <div className="flex gap-5 h-10 items-center w-[328px]">
              <label className="flex gap-2 items-center cursor-pointer">
                <input
                  type="radio"
                  name="gender"
                  value="male"
                  checked={formData.gender === 'male'}
                  onChange={(e) => setFormData((prev) => ({ ...prev, gender: e.target.value }))}
                  className="w-[18px] h-[18px] border-[1.5px] border-[#1f2b91] rounded-full appearance-none relative checked:before:content-[''] checked:before:absolute checked:before:w-[9px] checked:before:h-[9px] checked:before:bg-[#1f2b91] checked:before:rounded-full checked:before:top-[4.5px] checked:before:left-[4.5px]"
                />
                <span className="text-[#333c47] text-[15px] leading-[1.5]">남성</span>
              </label>
              <label className="flex gap-2 items-center cursor-pointer">
                <input
                  type="radio"
                  name="gender"
                  value="female"
                  checked={formData.gender === 'female'}
                  onChange={(e) => setFormData((prev) => ({ ...prev, gender: e.target.value }))}
                  className="w-[18px] h-[18px] border-[1.5px] border-[#8c95a1] rounded-full appearance-none"
                />
                <span className="text-[#333c47] text-[15px] leading-[1.5]">여성</span>
              </label>
            </div>
          </div>

          {/* 생년월일 */}
          <div className="flex flex-col gap-2 items-start justify-center w-full">
            <label htmlFor="birthDate" className="text-[#6c7682] text-[15px] font-semibold leading-[1.5]">
              생년월일
            </label>
            <div className="w-full h-10 px-3 py-2 border border-[#dee1e6] rounded-lg bg-white flex items-center gap-2">
              <input
                type="text"
                id="birthDate"
                name="birthDate"
                value={formData.birthDate}
                onChange={handleBirthDateChange}
                className="flex-1 outline-none text-[#6c7682] text-[16px]"
                placeholder="생년월일"
              />
              <svg className="w-6 h-6 shrink-0 text-[#333c47]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            {errors.birthDate && (
              <p className="text-sm text-red-500">{errors.birthDate}</p>
            )}
          </div>

          {/* 버튼 영역 */}
          <div className="flex gap-3 items-start w-full mt-4">
            <Link
              href="/registeragreement"
              className="h-14 px-2 py-0 bg-[#f1f3f5] rounded-xl shrink-0 w-[144px] flex items-center justify-center text-[#4c5561] text-[18px] font-semibold hover:bg-[#e5e7eb] transition"
            >
              이전
            </Link>
            <button
              type="submit"
              disabled={!canProceed}
              className={`flex-1 h-14 px-2 py-0 rounded-xl font-semibold text-[18px] transition ${
                canProceed
                  ? 'bg-[#8598e8] text-white hover:bg-[#7588d7]'
                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
              }`}
            >
              다음
            </button>
          </div>
        </form>
      </div>

      {/* 카피라이트 */}
      <div className="text-center text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] tracking-[-0.08px] mt-10">
        <p>Copyright ⓒ 2025 XL LMS. All rights reserved</p>
      </div>
    </div>
  );
}