'use client';

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

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

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

  // 입력 필드 변경 핸들러
  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{4}-\d{4}$/;
    return phoneRegex.test(phone);
  };

  // 폼 제출 전 유효성 검사
  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 = '올바른 전화번호 형식이 아닙니다. (예: 010-1234-5678)';
      isValid = false;
    }

    setErrors(newErrors);
    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);
    
    if (value.length > 7) {
      value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7);
    } else if (value.length > 3) {
      value = value.slice(0, 3) + '-' + value.slice(3);
    }
    
    setFormData((prev) => ({
      ...prev,
      phone: 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 flex items-center justify-center bg-white">
      <div className="w-full max-w-2xl px-4">
        {/* 회원가입 카드 */}
        <div className="bg-white rounded-lg shadow-lg p-8">
          {/* 제목 */}
          <h1 className="text-2xl font-bold text-center mb-8">회원가입</h1>

          {/* 단계 표시 */}
          <div className="flex items-center justify-center mb-8 text-sm">
            <div className="flex items-center">
              <span className="px-3 py-1 text-gray-500">01 약관 동의</span>
              <span className="mx-2 text-gray-400">&gt;</span>
              <span className="px-3 py-1 bg-blue-500 text-white rounded-md font-semibold">
                02 회원정보입력
              </span>
              <span className="mx-2 text-gray-400">&gt;</span>
              <span className="px-3 py-1 text-gray-500">03 회원가입완료</span>
            </div>
          </div>

          {/* 회원정보 입력 폼 */}
          <form onSubmit={handleSubmit} className="space-y-4">
            {/* 이름 */}
            <div>
              <label htmlFor="name" className="block text-sm font-medium mb-1">
                이름 <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                id="name"
                name="name"
                value={formData.name}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
                  errors.name
                    ? 'border-red-500 focus:ring-red-500'
                    : 'border-gray-300 focus:ring-blue-500'
                }`}
                placeholder="이름을 입력하세요"
              />
              {errors.name && (
                <p className="mt-1 text-sm text-red-500">{errors.name}</p>
              )}
            </div>

            {/* 이메일 */}
            <div>
              <label htmlFor="email" className="block text-sm font-medium mb-1">
                이메일 <span className="text-red-500">*</span>
              </label>
              <input
                type="email"
                id="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
                  errors.email
                    ? 'border-red-500 focus:ring-red-500'
                    : 'border-gray-300 focus:ring-blue-500'
                }`}
                placeholder="이메일을 입력하세요"
              />
              {errors.email && (
                <p className="mt-1 text-sm text-red-500">{errors.email}</p>
              )}
            </div>

            {/* 비밀번호 */}
            <div>
              <label htmlFor="password" className="block text-sm font-medium mb-1">
                비밀번호 <span className="text-red-500">*</span>
              </label>
              <input
                type="password"
                id="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
                  errors.password
                    ? 'border-red-500 focus:ring-red-500'
                    : 'border-gray-300 focus:ring-blue-500'
                }`}
                placeholder="8자 이상, 영문과 숫자 조합"
              />
              {errors.password && (
                <p className="mt-1 text-sm text-red-500">{errors.password}</p>
              )}
            </div>

            {/* 비밀번호 확인 */}
            <div>
              <label htmlFor="passwordConfirm" className="block text-sm font-medium mb-1">
                비밀번호 확인 <span className="text-red-500">*</span>
              </label>
              <input
                type="password"
                id="passwordConfirm"
                name="passwordConfirm"
                value={formData.passwordConfirm}
                onChange={handleChange}
                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
                  errors.passwordConfirm
                    ? 'border-red-500 focus:ring-red-500'
                    : 'border-gray-300 focus:ring-blue-500'
                }`}
                placeholder="비밀번호를 다시 입력하세요"
              />
              {errors.passwordConfirm && (
                <p className="mt-1 text-sm text-red-500">{errors.passwordConfirm}</p>
              )}
            </div>

            {/* 전화번호 */}
            <div>
              <label htmlFor="phone" className="block text-sm font-medium mb-1">
                전화번호 <span className="text-gray-500 text-xs">(선택)</span>
              </label>
              <input
                type="text"
                id="phone"
                name="phone"
                value={formData.phone}
                onChange={handlePhoneChange}
                className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
                  errors.phone
                    ? 'border-red-500 focus:ring-red-500'
                    : 'border-gray-300 focus:ring-blue-500'
                }`}
                placeholder="010-1234-5678"
                maxLength={13}
              />
              {errors.phone && (
                <p className="mt-1 text-sm text-red-500">{errors.phone}</p>
              )}
            </div>

            {/* 버튼 영역 */}
            <div className="mt-8 flex space-x-4">
              <Link
                href="/registeragreement"
                className="flex-1 py-3 bg-gray-200 text-gray-700 rounded-md text-center hover:bg-gray-300 transition font-medium"
              >
                이전 단계
              </Link>
              <button
                type="submit"
                disabled={!canProceed}
                className={`flex-1 py-3 rounded-md font-medium transition ${
                  canProceed
                    ? 'bg-blue-500 text-white hover:bg-blue-600'
                    : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                }`}
              >
                가입하기
              </button>
            </div>
          </form>
        </div>

        {/* 카피라이트 */}
        <div className="mt-8 text-center text-sm text-gray-500">
          Copyright © 2025 XL LMS. All rights reserved
        </div>
      </div>
    </div>
  );
}