// Holiday lighting package selection functionality
let holidayLightingCheckbox = null;
let packageSelectionContainer = null;

// Calendar functionality
let currentDate = new Date();
let selectedDate = null;
let prevMonthBtn = null;
let nextMonthBtn = null;
let currentMonthDisplay = null;
let calendarDaysContainer = null;
let selectedDateInfo = null;
let selectedDateDisplay = null;
let hiddenDateInput = null;

const months = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
];

function handleHolidayLightingToggle() {
  const isChecked = holidayLightingCheckbox.checked;
  
  if (isChecked) {
    packageSelectionContainer.style.display = 'block';
    packageSelectionContainer.style.opacity = '0';
    setTimeout(() => {
      packageSelectionContainer.style.opacity = '1';
    }, 10);
  } else {
    packageSelectionContainer.style.opacity = '0';
    setTimeout(() => {
      packageSelectionContainer.style.display = 'none';
      // Clear any selected package when hiding
      const packageRadios = packageSelectionContainer.querySelectorAll('input[name="holidayPackage"]');
      packageRadios.forEach(radio => radio.checked = false);
    }, 300);
  }
}

function handlePackageSelection(event) {
  // Find all package options
  const allOptions = packageSelectionContainer.querySelectorAll('label');
  
  // Reset all styles
  allOptions.forEach(label => {
    const div = label.querySelector('div');
    const radio = label.querySelector('input');
    const radioIndicator = div.querySelector('.w-3.h-3');
    
    if (radio.checked) {
      // Style for selected option
      div.classList.add('border-green-500', 'bg-green-50');
      div.classList.remove('border-gray-200', 'border-blue-400', 'border-red-300', 'border-red-500', 'border-purple-400');
      radioIndicator.style.backgroundColor = '#10b981';
      radioIndicator.classList.add('border-green-500');
    } else {
      // Reset to default styling
      div.classList.remove('border-green-500', 'bg-green-50');
      radioIndicator.style.backgroundColor = 'transparent';
      radioIndicator.classList.remove('border-green-500');
    }
  });
}

function isWeekend(date) {
  return date.getDay() === 0 || date.getDay() === 6;
}

function isPastDate(date) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return date < today;
}

function formatDate(date) {
  const options = { 
    weekday: 'long', 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
  };
  return date.toLocaleDateString('en-US', options);
}

function createCalendarDay(date, isCurrentMonth) {
  const dayElement = document.createElement('button');
  dayElement.type = 'button';
  dayElement.className = 'p-2 h-10 w-10 text-sm rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500';
  dayElement.textContent = date.getDate();
  
  const isToday = date.toDateString() === new Date().toDateString();
  const isPast = isPastDate(date);
  const isSelected = selectedDate && date.toDateString() === selectedDate.toDateString();
  
  if (!isCurrentMonth) {
    dayElement.className += ' text-gray-300 cursor-not-allowed';
    dayElement.disabled = true;
  } else if (isPast) {
    dayElement.className += ' text-gray-400 cursor-not-allowed bg-gray-100';
    dayElement.disabled = true;
  } else if (isSelected) {
    dayElement.className += ' bg-green-500 text-white hover:bg-green-600';
  } else if (isToday) {
    dayElement.className += ' bg-blue-100 text-blue-800 hover:bg-blue-200';
  } else {
    dayElement.className += ' text-gray-700 hover:bg-blue-100 hover:text-blue-800';
  }
  
  if (!isPast && isCurrentMonth) {
    dayElement.addEventListener('click', () => handleDateSelection(date));
  }
  
  return dayElement;
}

function handleDateSelection(date) {
  selectedDate = new Date(date);
  
  // Update hidden input
  const dateString = selectedDate.toISOString().split('T')[0];
  hiddenDateInput.value = dateString;
  
  // Show selected date info
  selectedDateInfo.classList.remove('hidden');
  selectedDateDisplay.textContent = formatDate(selectedDate);
  
  // Re-render calendar to show selection
  renderCalendar();
}

function renderCalendar() {
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();
  
  // Update month display
  currentMonthDisplay.textContent = `${months[month]} ${year}`;
  
  // Clear calendar days
  calendarDaysContainer.innerHTML = '';
  
  // Get first day of month and number of days
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const daysInMonth = lastDay.getDate();
  const startingDayOfWeek = firstDay.getDay();
  
  // Add empty cells for days before month starts
  for (let i = 0; i < startingDayOfWeek; i++) {
    const prevDate = new Date(year, month, -startingDayOfWeek + i + 1);
    calendarDaysContainer.appendChild(createCalendarDay(prevDate, false));
  }
  
  // Add days of current month
  for (let day = 1; day <= daysInMonth; day++) {
    const date = new Date(year, month, day);
    calendarDaysContainer.appendChild(createCalendarDay(date, true));
  }
  
  // Fill remaining cells
  const totalCells = calendarDaysContainer.children.length;
  const remainingCells = 42 - totalCells; // 6 weeks * 7 days = 42 total cells
  
  for (let i = 1; i <= remainingCells; i++) {
    const nextDate = new Date(year, month + 1, i);
    calendarDaysContainer.appendChild(createCalendarDay(nextDate, false));
  }
}

function handlePrevMonth() {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar();
}

function handleNextMonth() {
  // Don't allow going more than 3 months ahead
  const maxDate = new Date();
  maxDate.setMonth(maxDate.getMonth() + 3);
  
  if (currentDate.getMonth() < maxDate.getMonth() || currentDate.getFullYear() < maxDate.getFullYear()) {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar();
  }
}

function init() {
  // Holiday lighting functionality
  holidayLightingCheckbox = document.querySelector('input[value="Holiday Lighting"]');
  packageSelectionContainer = document.getElementById('holiday-package-selection');
  
  if (holidayLightingCheckbox) {
    holidayLightingCheckbox.addEventListener('change', handleHolidayLightingToggle);
  }
  
  if (packageSelectionContainer) {
    const packageRadios = packageSelectionContainer.querySelectorAll('input[name="holidayPackage"]');
    packageRadios.forEach(radio => {
      radio.addEventListener('change', handlePackageSelection);
    });
  }
  
  // Calendar functionality
  prevMonthBtn = document.getElementById('prevMonth');
  nextMonthBtn = document.getElementById('nextMonth');
  currentMonthDisplay = document.getElementById('currentMonth');
  calendarDaysContainer = document.getElementById('calendarDays');
  selectedDateInfo = document.getElementById('selectedDateInfo');
  selectedDateDisplay = document.getElementById('selectedDateDisplay');
  hiddenDateInput = document.getElementById('selectedDate');
  
  if (calendarDaysContainer) {
    // Initialize calendar
    renderCalendar();
    
    // Add event listeners
    if (prevMonthBtn) {
      prevMonthBtn.addEventListener('click', handlePrevMonth);
    }
    
    if (nextMonthBtn) {
      nextMonthBtn.addEventListener('click', handleNextMonth);
    }
  }
}

function teardown() {
  // Holiday lighting cleanup
  if (holidayLightingCheckbox) {
    holidayLightingCheckbox.removeEventListener('change', handleHolidayLightingToggle);
  }
  
  if (packageSelectionContainer) {
    const packageRadios = packageSelectionContainer.querySelectorAll('input[name="holidayPackage"]');
    packageRadios.forEach(radio => {
      radio.removeEventListener('change', handlePackageSelection);
    });
  }
  
  // Calendar cleanup
  if (prevMonthBtn) {
    prevMonthBtn.removeEventListener('click', handlePrevMonth);
  }
  
  if (nextMonthBtn) {
    nextMonthBtn.removeEventListener('click', handleNextMonth);
  }
  
  // Reset variables
  holidayLightingCheckbox = null;
  packageSelectionContainer = null;
  currentDate = new Date();
  selectedDate = null;
  prevMonthBtn = null;
  nextMonthBtn = null;
  currentMonthDisplay = null;
  calendarDaysContainer = null;
  selectedDateInfo = null;
  selectedDateDisplay = null;
  hiddenDateInput = null;
}

export { init, teardown };