'use client';

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

export default function RegisterAgreementPage() {
  const [allAgreed, setAllAgreed] = useState(false);
  const [ageAgreed, setAgeAgreed] = useState(false);
  const [termsAgreed, setTermsAgreed] = useState(false);
  const [privacyAgreed, setPrivacyAgreed] = useState(false);

  // 전체 동의 핸들러
  const handleAllAgreed = (checked: boolean) => {
    setAllAgreed(checked);
    setAgeAgreed(checked);
    setTermsAgreed(checked);
    setPrivacyAgreed(checked);
  };

  // 개별 체크박스 변경 시 전체 동의 상태 업데이트
  const updateAllAgreed = () => {
    if (ageAgreed && termsAgreed && privacyAgreed) {
      setAllAgreed(true);
    } else {
      setAllAgreed(false);
    }
  };

  // 개별 체크박스 핸들러
  const handleAgeAgreed = (checked: boolean) => {
    setAgeAgreed(checked);
    updateAllAgreed();
  };

  const handleTermsAgreed = (checked: boolean) => {
    setTermsAgreed(checked);
    updateAllAgreed();
  };

  const handlePrivacyAgreed = (checked: boolean) => {
    setPrivacyAgreed(checked);
    updateAllAgreed();
  };

  // 다음 단계 진행 가능 여부
  const canProceed = ageAgreed && termsAgreed && privacyAgreed;

  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 bg-blue-500 text-white rounded-md font-semibold">
                01 약관 동의
              </span>
              <span className="mx-2 text-gray-400">&gt;</span>
              <span className="px-3 py-1 text-gray-500">02 회원정보입력</span>
              <span className="mx-2 text-gray-400">&gt;</span>
              <span className="px-3 py-1 text-gray-500">03 회원가입완료</span>
            </div>
          </div>

          {/* 약관 동의 섹션 */}
          <div className="space-y-4">
            {/* 전체 동의 */}
            <div className="pb-4 border-b border-gray-300">
              <label className="flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={allAgreed}
                  onChange={(e) => handleAllAgreed(e.target.checked)}
                  className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
                />
                <span className="text-base font-medium">모든 항목에 동의합니다.</span>
              </label>
            </div>

            {/* 개별 약관 */}
            <div className="space-y-4">
              {/* 만 14세 이상 */}
              <div className="flex items-center justify-between">
                <label className="flex items-center cursor-pointer flex-1">
                  <input
                    type="checkbox"
                    checked={ageAgreed}
                    onChange={(e) => handleAgeAgreed(e.target.checked)}
                    className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
                  />
                  <span className="text-sm">
                    만 14세 이상입니다. <span className="text-red-500">(필수)</span>
                  </span>
                </label>
                <button className="text-sm text-gray-500 hover:text-gray-700">
                  전체 &gt;
                </button>
              </div>

              {/* 이용 약관 */}
              <div className="flex items-center justify-between">
                <label className="flex items-center cursor-pointer flex-1">
                  <input
                    type="checkbox"
                    checked={termsAgreed}
                    onChange={(e) => handleTermsAgreed(e.target.checked)}
                    className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
                  />
                  <span className="text-sm">
                    이용 약관 동의 <span className="text-red-500">(필수)</span>
                  </span>
                </label>
                <button className="text-sm text-gray-500 hover:text-gray-700">
                  전체 &gt;
                </button>
              </div>

              {/* 개인정보 수집 및 이용 */}
              <div className="flex items-center justify-between">
                <label className="flex items-center cursor-pointer flex-1">
                  <input
                    type="checkbox"
                    checked={privacyAgreed}
                    onChange={(e) => handlePrivacyAgreed(e.target.checked)}
                    className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
                  />
                  <span className="text-sm">
                    개인정보 수집 및 이용 동의 <span className="text-red-500">(필수)</span>
                  </span>
                </label>
                <button className="text-sm text-gray-500 hover:text-gray-700">
                  전체 &gt;
                </button>
              </div>
            </div>
          </div>

          {/* 버튼 영역 */}
          <div className="mt-8 flex space-x-4">
            <Link
              href="/login"
              className="flex-1 py-3 bg-gray-200 text-gray-700 rounded-md text-center hover:bg-gray-300 transition font-medium"
            >
              돌아가기
            </Link>
            <Link
              href={canProceed ? '/register' : '#'}
              className={`flex-1 py-3 rounded-md text-center font-medium transition ${
                canProceed
                  ? 'bg-blue-500 text-white hover:bg-blue-600'
                  : 'bg-gray-300 text-gray-500 cursor-not-allowed pointer-events-none'
              }`}
              onClick={(e) => !canProceed && e.preventDefault()}
            >
              동의 후 가입하기
            </Link>
          </div>
        </div>

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