'use client';

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

export default function CompatibilityForm() {
  const router = useRouter();

  // Person 1
  const [year1, setYear1] = useState('');
  const [month1, setMonth1] = useState('');
  const [day1, setDay1] = useState('');
  const [hour1, setHour1] = useState('');
  const [gender1, setGender1] = useState<'male' | 'female'>('male');

  // Person 2
  const [year2, setYear2] = useState('');
  const [month2, setMonth2] = useState('');
  const [day2, setDay2] = useState('');
  const [hour2, setHour2] = useState('');
  const [gender2, setGender2] = useState<'male' | 'female'>('female');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!year1 || !month1 || !day1) {
      alert('첫 번째 사람의 생년월일을 모두 입력해주세요.');
      return;
    }

    if (!year2 || !month2 || !day2) {
      alert('두 번째 사람의 생년월일을 모두 입력해주세요.');
      return;
    }

    // URL 파라미터로 전달
    const params = new URLSearchParams({
      year1,
      month1,
      day1,
      gender1,
      year2,
      month2,
      day2,
      gender2,
    });

    if (hour1) params.append('hour1', hour1);
    if (hour2) params.append('hour2', hour2);

    router.push(`/compatibility/result?${params.toString()}`);
  };

  return (
    <form onSubmit={handleSubmit} className="bg-white rounded-3xl shadow-2xl p-8 md:p-12">
      <div className="grid md:grid-cols-2 gap-12">
        {/* Person 1 */}
        <div className="space-y-6">
          <div className="text-center mb-6">
            <h3 className="text-2xl font-bold text-pink-600 mb-2">👤 첫 번째 사람</h3>
            <p className="text-sm text-gray-600">본인의 정보를 입력하세요</p>
          </div>

          {/* 생년월일 */}
          <div>
            <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
              생년월일
            </label>
            <div className="grid grid-cols-3 gap-3">
              <input
                type="number"
                placeholder="년"
                className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:outline-none transition"
                min="1900"
                max="2100"
                value={year1}
                onChange={(e) => setYear1(e.target.value)}
                required
              />
              <input
                type="number"
                placeholder="월"
                className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:outline-none transition"
                min="1"
                max="12"
                value={month1}
                onChange={(e) => setMonth1(e.target.value)}
                required
              />
              <input
                type="number"
                placeholder="일"
                className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:outline-none transition"
                min="1"
                max="31"
                value={day1}
                onChange={(e) => setDay1(e.target.value)}
                required
              />
            </div>
          </div>

          {/* 태어난 시간 */}
          <div>
            <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
              태어난 시간 (선택)
            </label>
            <select
              className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-pink-500 focus:outline-none transition"
              value={hour1}
              onChange={(e) => setHour1(e.target.value)}
            >
              <option value="">모름 / 선택 안함</option>
              <option value="0">자시 (23:00-01:00)</option>
              <option value="1">축시 (01:00-03:00)</option>
              <option value="3">인시 (03:00-05:00)</option>
              <option value="5">묘시 (05:00-07:00)</option>
              <option value="7">진시 (07:00-09:00)</option>
              <option value="9">사시 (09:00-11:00)</option>
              <option value="11">오시 (11:00-13:00)</option>
              <option value="13">미시 (13:00-15:00)</option>
              <option value="15">신시 (15:00-17:00)</option>
              <option value="17">유시 (17:00-19:00)</option>
              <option value="19">술시 (19:00-21:00)</option>
              <option value="21">해시 (21:00-23:00)</option>
            </select>
          </div>

          {/* 성별 선택 */}
          <div>
            <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
              성별
            </label>
            <div className="grid grid-cols-2 gap-3">
              <button
                type="button"
                onClick={() => setGender1('male')}
                className={`px-6 py-3 rounded-xl font-semibold transition ${
                  gender1 === 'male'
                    ? 'bg-pink-600 text-white'
                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600'
                }`}
              >
                남성
              </button>
              <button
                type="button"
                onClick={() => setGender1('female')}
                className={`px-6 py-3 rounded-xl font-semibold transition ${
                  gender1 === 'female'
                    ? 'bg-pink-600 text-white'
                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600'
                }`}
              >
                여성
              </button>
            </div>
          </div>
        </div>

        {/* Person 2 */}
        <div className="space-y-6">
          <div className="text-center mb-6">
            <h3 className="text-2xl font-bold text-purple-600 mb-2">👤 두 번째 사람</h3>
            <p className="text-sm text-gray-600">상대방의 정보를 입력하세요</p>
          </div>

          {/* 생년월일 */}
          <div>
            <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
              생년월일
            </label>
            <div className="grid grid-cols-3 gap-3">
              <input
                type="number"
                placeholder="년"
                className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition"
                min="1900"
                max="2100"
                value={year2}
                onChange={(e) => setYear2(e.target.value)}
                required
              />
              <input
                type="number"
                placeholder="월"
                className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition"
                min="1"
                max="12"
                value={month2}
                onChange={(e) => setMonth2(e.target.value)}
                required
              />
              <input
                type="number"
                placeholder="일"
                className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition"
                min="1"
                max="31"
                value={day2}
                onChange={(e) => setDay2(e.target.value)}
                required
              />
            </div>
          </div>

          {/* 태어난 시간 */}
          <div>
            <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
              태어난 시간 (선택)
            </label>
            <select
              className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition"
              value={hour2}
              onChange={(e) => setHour2(e.target.value)}
            >
              <option value="">모름 / 선택 안함</option>
              <option value="0">자시 (23:00-01:00)</option>
              <option value="1">축시 (01:00-03:00)</option>
              <option value="3">인시 (03:00-05:00)</option>
              <option value="5">묘시 (05:00-07:00)</option>
              <option value="7">진시 (07:00-09:00)</option>
              <option value="9">사시 (09:00-11:00)</option>
              <option value="11">오시 (11:00-13:00)</option>
              <option value="13">미시 (13:00-15:00)</option>
              <option value="15">신시 (15:00-17:00)</option>
              <option value="17">유시 (17:00-19:00)</option>
              <option value="19">술시 (19:00-21:00)</option>
              <option value="21">해시 (21:00-23:00)</option>
            </select>
          </div>

          {/* 성별 선택 */}
          <div>
            <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
              성별
            </label>
            <div className="grid grid-cols-2 gap-3">
              <button
                type="button"
                onClick={() => setGender2('male')}
                className={`px-6 py-3 rounded-xl font-semibold transition ${
                  gender2 === 'male'
                    ? 'bg-purple-600 text-white'
                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-600'
                }`}
              >
                남성
              </button>
              <button
                type="button"
                onClick={() => setGender2('female')}
                className={`px-6 py-3 rounded-xl font-semibold transition ${
                  gender2 === 'female'
                    ? 'bg-purple-600 text-white'
                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-600'
                }`}
              >
                여성
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* 제출 버튼 */}
      <div className="mt-8">
        <button
          type="submit"
          className="w-full bg-gradient-to-r from-pink-600 to-purple-600 text-white py-4 rounded-xl text-lg font-bold hover:from-pink-700 hover:to-purple-700 transition shadow-lg hover:shadow-xl"
        >
          💕 궁합 확인하기 →
        </button>
      </div>

      <p className="text-sm text-gray-500 text-center mt-4">
        * 태어난 시간을 정확히 아시면 더 정확한 궁합을 확인할 수 있습니다.
      </p>
    </form>
  );
}