'use client';

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

export default function TojeongForm() {
  const router = useRouter();
  const [year, setYear] = useState('');
  const [month, setMonth] = useState('');
  const [day, setDay] = useState('');
  const [gender, setGender] = useState<'male' | 'female'>('male');
  const [targetYear, setTargetYear] = useState(new Date().getFullYear().toString());

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

    if (!year || !month || !day) {
      alert('생년월일을 모두 입력해주세요.');
      return;
    }

    // URL 파라미터로 전달
    const params = new URLSearchParams({
      year,
      month,
      day,
      gender,
      targetYear
    });

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

  return (
    <form onSubmit={handleSubmit} className="bg-white rounded-3xl shadow-2xl p-8 md:p-12">
      <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">생년월일 입력</h2>

      <div className="space-y-6">
        {/* 생년월일 */}
        <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="년 (예: 1990)"
              className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-amber-500 focus:outline-none transition"
              min="1900"
              max="2100"
              value={year}
              onChange={(e) => setYear(e.target.value)}
              required
            />
            <input
              type="number"
              placeholder="월 (1-12)"
              className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-amber-500 focus:outline-none transition"
              min="1"
              max="12"
              value={month}
              onChange={(e) => setMonth(e.target.value)}
              required
            />
            <input
              type="number"
              placeholder="일 (1-31)"
              className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-amber-500 focus:outline-none transition"
              min="1"
              max="31"
              value={day}
              onChange={(e) => setDay(e.target.value)}
              required
            />
          </div>
        </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={() => setGender('male')}
              className={`px-6 py-3 rounded-xl font-semibold transition ${
                gender === 'male'
                  ? 'bg-amber-600 text-white'
                  : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-amber-500 hover:text-amber-600'
              }`}
            >
              남성
            </button>
            <button
              type="button"
              onClick={() => setGender('female')}
              className={`px-6 py-3 rounded-xl font-semibold transition ${
                gender === 'female'
                  ? 'bg-amber-600 text-white'
                  : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-amber-500 hover:text-amber-600'
              }`}
            >
              여성
            </button>
          </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-amber-500 focus:outline-none transition"
            value={targetYear}
            onChange={(e) => setTargetYear(e.target.value)}
          >
            <option value={new Date().getFullYear() - 1}>{new Date().getFullYear() - 1}년</option>
            <option value={new Date().getFullYear()}>{new Date().getFullYear()}년 (올해)</option>
            <option value={new Date().getFullYear() + 1}>{new Date().getFullYear() + 1}년 (내년)</option>
          </select>
        </div>
      </div>

      {/* 제출 버튼 */}
      <button
        type="submit"
        className="w-full mt-8 bg-gradient-to-r from-amber-600 to-orange-600 text-white py-4 rounded-xl text-lg font-bold hover:from-amber-700 hover:to-orange-700 transition shadow-lg hover:shadow-xl"
      >
        🎋 토정비결 확인하기 →
      </button>

      <p className="text-sm text-gray-500 text-center mt-4">
        * 토정비결은 음력 생일을 기준으로 합니다.
      </p>
    </form>
  );
}