/**
 * DatePicker 컴포넌트
 * 연/월/일 선택이 가능한 드롭다운 형태의 날짜 선택기
 */
import { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Calendar, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';

function DatePicker({ value, onChange, placeholder = '날짜 선택', showDayOfWeek = false }) {
  const [isOpen, setIsOpen] = useState(false);
  const [viewMode, setViewMode] = useState('days');
  const [viewDate, setViewDate] = useState(() => {
    if (value) return new Date(value);
    return new Date();
  });
  const ref = useRef(null);

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        setIsOpen(false);
        setViewMode('days');
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const year = viewDate.getFullYear();
  const month = viewDate.getMonth();

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const days = [];
  for (let i = 0; i < firstDay; i++) {
    days.push(null);
  }
  for (let i = 1; i <= daysInMonth; i++) {
    days.push(i);
  }

  const MIN_YEAR = 2025;
  const startYear = Math.max(MIN_YEAR, Math.floor(year / 12) * 12 - 1);
  const years = Array.from({ length: 12 }, (_, i) => startYear + i);
  const canGoPrevYearRange = startYear > MIN_YEAR;

  const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
  const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
  const prevYearRange = () =>
    canGoPrevYearRange && setViewDate(new Date(Math.max(MIN_YEAR, year - 12), month, 1));
  const nextYearRange = () => setViewDate(new Date(year + 12, month, 1));

  const selectDate = (day) => {
    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    onChange(dateStr);
    setIsOpen(false);
    setViewMode('days');
  };

  const selectYear = (y) => {
    setViewDate(new Date(y, month, 1));
  };

  const selectMonth = (m) => {
    setViewDate(new Date(year, m, 1));
    setViewMode('days');
  };

  // 날짜 표시 포맷 (요일 포함 옵션)
  const formatDisplayDate = (dateStr) => {
    if (!dateStr) return '';
    const [y, m, d] = dateStr.split('-');
    if (showDayOfWeek) {
      const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
      const date = new Date(parseInt(y), parseInt(m) - 1, parseInt(d));
      const dayOfWeek = dayNames[date.getDay()];
      return `${y}년 ${parseInt(m)}월 ${parseInt(d)}일 (${dayOfWeek})`;
    }
    return `${y}년 ${parseInt(m)}월 ${parseInt(d)}일`;
  };

  const isSelected = (day) => {
    if (!value || !day) return false;
    const [y, m, d] = value.split('-');
    return parseInt(y) === year && parseInt(m) === month + 1 && parseInt(d) === day;
  };

  const isToday = (day) => {
    if (!day) return false;
    const today = new Date();
    return today.getFullYear() === year && today.getMonth() === month && today.getDate() === day;
  };

  const isCurrentYear = (y) => new Date().getFullYear() === y;
  const isCurrentMonth = (m) => {
    const today = new Date();
    return today.getFullYear() === year && today.getMonth() === m;
  };

  const monthNames = [
    '1월',
    '2월',
    '3월',
    '4월',
    '5월',
    '6월',
    '7월',
    '8월',
    '9월',
    '10월',
    '11월',
    '12월',
  ];

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="w-full px-4 py-3 border border-gray-200 rounded-xl bg-white flex items-center justify-between hover:border-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
      >
        <span className={value ? 'text-gray-900' : 'text-gray-400'}>
          {value ? formatDisplayDate(value) : placeholder}
        </span>
        <Calendar size={18} className="text-gray-400" />
      </button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.15 }}
            className="absolute z-50 mt-2 bg-white border border-gray-200 rounded-xl shadow-lg p-4 w-80"
          >
            <div className="flex items-center justify-between mb-4">
              <button
                type="button"
                onClick={viewMode === 'years' ? prevYearRange : prevMonth}
                disabled={viewMode === 'years' && !canGoPrevYearRange}
                className={`p-1.5 rounded-lg transition-colors ${viewMode === 'years' && !canGoPrevYearRange ? 'opacity-30' : 'hover:bg-gray-100'}`}
              >
                <ChevronLeft size={20} className="text-gray-600" />
              </button>
              <button
                type="button"
                onClick={() => setViewMode(viewMode === 'days' ? 'years' : 'days')}
                className="font-medium text-gray-900 hover:text-primary transition-colors flex items-center gap-1"
              >
                {viewMode === 'years'
                  ? `${years[0]} - ${years[years.length - 1]}`
                  : `${year}년 ${month + 1}월`}
                <ChevronDown
                  size={16}
                  className={`transition-transform ${viewMode !== 'days' ? 'rotate-180' : ''}`}
                />
              </button>
              <button
                type="button"
                onClick={viewMode === 'years' ? nextYearRange : nextMonth}
                className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <ChevronRight size={20} className="text-gray-600" />
              </button>
            </div>

            <AnimatePresence mode="wait">
              {viewMode === 'years' && (
                <motion.div
                  key="years"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.15 }}
                >
                  <div className="text-center text-sm text-gray-500 mb-3">년도</div>
                  <div className="grid grid-cols-4 gap-2 mb-4">
                    {years.map((y) => (
                      <button
                        key={y}
                        type="button"
                        onClick={() => selectYear(y)}
                        className={`py-2 rounded-lg text-sm transition-colors ${year === y ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentYear(y) && year !== y ? 'text-primary font-medium' : ''}`}
                      >
                        {y}
                      </button>
                    ))}
                  </div>
                  <div className="text-center text-sm text-gray-500 mb-3">월</div>
                  <div className="grid grid-cols-4 gap-2">
                    {monthNames.map((m, i) => (
                      <button
                        key={m}
                        type="button"
                        onClick={() => selectMonth(i)}
                        className={`py-2 rounded-lg text-sm transition-colors ${month === i ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentMonth(i) && month !== i ? 'text-primary font-medium' : ''}`}
                      >
                        {m}
                      </button>
                    ))}
                  </div>
                </motion.div>
              )}

              {viewMode === 'months' && (
                <motion.div
                  key="months"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.15 }}
                >
                  <div className="text-center text-sm text-gray-500 mb-3">월 선택</div>
                  <div className="grid grid-cols-4 gap-2">
                    {monthNames.map((m, i) => (
                      <button
                        key={m}
                        type="button"
                        onClick={() => selectMonth(i)}
                        className={`py-2.5 rounded-lg text-sm transition-colors ${month === i ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentMonth(i) && month !== i ? 'text-primary font-medium' : ''}`}
                      >
                        {m}
                      </button>
                    ))}
                  </div>
                </motion.div>
              )}

              {viewMode === 'days' && (
                <motion.div
                  key="days"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.15 }}
                >
                  <div className="grid grid-cols-7 gap-1 mb-2">
                    {['일', '월', '화', '수', '목', '금', '토'].map((d, i) => (
                      <div
                        key={d}
                        className={`text-center text-xs font-medium py-1 ${i === 0 ? 'text-red-400' : i === 6 ? 'text-blue-400' : 'text-gray-400'}`}
                      >
                        {d}
                      </div>
                    ))}
                  </div>
                  <div className="grid grid-cols-7 gap-1">
                    {days.map((day, i) => {
                      const dayOfWeek = i % 7;
                      return (
                        <button
                          key={i}
                          type="button"
                          disabled={!day}
                          onClick={() => day && selectDate(day)}
                          className={`aspect-square rounded-full text-sm font-medium flex items-center justify-center transition-all
                            ${!day ? '' : 'hover:bg-gray-100'}
                            ${isSelected(day) ? 'bg-primary text-white hover:bg-primary' : ''}
                            ${isToday(day) && !isSelected(day) ? 'text-primary font-bold' : ''}
                            ${day && !isSelected(day) && !isToday(day) && dayOfWeek === 0 ? 'text-red-500' : ''}
                            ${day && !isSelected(day) && !isToday(day) && dayOfWeek === 6 ? 'text-blue-500' : ''}
                            ${day && !isSelected(day) && !isToday(day) && dayOfWeek > 0 && dayOfWeek < 6 ? 'text-gray-700' : ''}
                          `}
                        >
                          {day}
                        </button>
                      );
                    })}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default DatePicker;