console.log('RUNNING ELEVATE BOOKING');

document.addEventListener('DOMContentLoaded', () => {
  // --- 1. CONFIGURATION ---
  const airportApiUrl =
    'https://tgdemo.pjsgroup.com/airports/opensearch/?format=json&limit=10&term=KTEB';

  // --- 2. ELEMENT SELECTORS ---
  let fromDropdown = document.querySelector('[booking="from"]');
  console.log(fromDropdown);
  let toDropdown = document.querySelector('[booking="to"]');
  console.log(toDropdown);
  const departureDateInput = document.querySelector('[booking="departure"]');
  const returnDateInput = document.querySelector('[booking="return"]');
  const errorElement = document.querySelector('[booking="error"]');

  // This is a critical check. If even one of these core elements is missing, we shouldn't proceed.
  if (!fromDropdown || !toDropdown || !departureDateInput) {
    console.error(
      'Core booking elements (from, to, departure) are missing from the page. Script cannot initialize.'
    );
    return; // Stop execution if essential elements are not found
  }

  // Verify that dropdowns are actually select elements
  if (fromDropdown.tagName !== 'SELECT' || toDropdown.tagName !== 'SELECT') {
    console.error(
      'Elements with [booking="from"] and [booking="to"] must be <select> elements.'
    );
    return;
  }

  // --- 3. HELPER FUNCTIONS ---

  /**
   * Formats a Date object into 'YYYY-MM-DD' string format.
   */
  const formatDate = date => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  /**
   * Formats a Date object into a display format like 'Jan 09, 2026'.
   */
  const formatDisplayDate = date => {
    const months = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    const month = months[date.getMonth()];
    const day = String(date.getDate()).padStart(2, '0');
    const year = date.getFullYear();
    return `${month} ${day}, ${year}`;
  };

  /**
   * Displays a message in the error element.
   * @param {string} message The error message to display.
   */
  const showError = message => {
    if (errorElement) {
      errorElement.textContent = message;
      errorElement.style.display = 'block';
    } else {
      console.error(
        "Error element `[booking='error']` not found. Validation message:",
        message
      );
    }
  };

  /**
   * Updates the select dropdowns to hide the selected option from the other dropdown.
   */
  const updateDropdownFilters = () => {
    // Guard clause: ensure dropdowns have options before iterating
    if (!fromDropdown.options || !toDropdown.options) {
      console.warn('Dropdowns not yet initialized with options.');
      return;
    }

    const fromValue = fromDropdown.value;
    const toValue = toDropdown.value;

    // Show all options first, then hide the conflicting one
    for (let i = 0; i < toDropdown.options.length; i++) {
      const option = toDropdown.options[i];
      option.style.display =
        option.value === fromValue && option.value !== '' ? 'none' : '';
    }

    for (let i = 0; i < fromDropdown.options.length; i++) {
      const option = fromDropdown.options[i];
      option.style.display =
        option.value === toValue && option.value !== '' ? 'none' : '';
    }
  };

  // --- 4. SETUP AND INITIALIZATION FUNCTIONS ---

  /**
   * Sets up the date input to switch between text display and date picker on interaction.
   */
  const setupInteractiveDateInput = (inputEl, defaultDate) => {
    if (!inputEl) return;

    const dateValue = formatDate(defaultDate);
    const displayValue = formatDisplayDate(defaultDate);

    // Store the actual date value as a data attribute
    inputEl.dataset.dateValue = dateValue;
    inputEl.type = 'text';
    inputEl.value = displayValue;
    inputEl.readOnly = true;
    inputEl.style.cursor = 'pointer';

    const convertToDatePicker = () => {
      inputEl.type = 'date';
      inputEl.value = inputEl.dataset.dateValue;
      inputEl.readOnly = false;

      // Set min/max constraints
      const today = new Date();
      const todayStr = formatDate(today);
      const oneYearFromNow = new Date();
      oneYearFromNow.setFullYear(today.getFullYear() + 1);
      const oneYearFromNowStr = formatDate(oneYearFromNow);

      inputEl.min = todayStr;
      inputEl.max = oneYearFromNowStr;

      // For return date, ensure it's not before departure
      if (inputEl === returnDateInput && departureDateInput) {
        inputEl.min = departureDateInput.dataset.dateValue || todayStr;
      }

      // Automatically open the date picker
      try {
        inputEl.showPicker();
      } catch (e) {
        // showPicker() may not be supported in all browsers or may fail
        console.log('showPicker not supported or failed:', e);
      }
    };

    const convertToTextDisplay = () => {
      if (inputEl.value) {
        const selectedDate = new Date(inputEl.value + 'T00:00:00');
        inputEl.dataset.dateValue = inputEl.value;
        inputEl.type = 'text';
        inputEl.value = formatDisplayDate(selectedDate);
        inputEl.readOnly = true;
      }
    };

    // Show date picker on click only (removed focus to prevent double-triggering)
    inputEl.addEventListener('click', convertToDatePicker);

    // Convert back to text display on blur
    inputEl.addEventListener('blur', convertToTextDisplay);

    // Handle date change
    inputEl.addEventListener('change', () => {
      if (inputEl.value) {
        inputEl.dataset.dateValue = inputEl.value;

        // If departure date changed, update return date min
        if (inputEl === departureDateInput && returnDateInput) {
          const departureDate = new Date(inputEl.value);
          const returnDate = new Date(returnDateInput.dataset.dateValue);
          if (returnDate < departureDate) {
            returnDateInput.dataset.dateValue = inputEl.value;
            if (returnDateInput.type === 'text') {
              returnDateInput.value = formatDisplayDate(departureDate);
            }
          }
        }
      }
    });
  };

  /**
   * Sets up default values for date inputs.
   */
  const setupDateInputs = () => {
    const today = new Date();
    const sevenDaysFromNow = new Date();
    sevenDaysFromNow.setDate(today.getDate() + 7);

    setupInteractiveDateInput(departureDateInput, today);
    setupInteractiveDateInput(returnDateInput, sevenDaysFromNow);
  };

  /**
   * Populates a select dropdown with airport data.
   */
  const populateDropdown = (selectEl, data, placeholder) => {
    if (!selectEl) return;
    console.log('POPULATING DROPDOWN');
    // Clear existing options
    selectEl.innerHTML = '';

    // Add placeholder option
    const placeholderOption = document.createElement('option');
    placeholderOption.value = '';
    placeholderOption.textContent = placeholder;
    placeholderOption.disabled = true;
    placeholderOption.selected = true;
    selectEl.appendChild(placeholderOption);

    // Add airport options - filter out airports without a value
    data.forEach(airport => {
      if (!airport.value) return;
      const option = document.createElement('option');
      option.value = airport.value;
      option.textContent = airport.short_label;
      selectEl.appendChild(option);
    });
  };

  /**
   * Sets up change listeners for dropdowns after they're populated.
   */
  const setupDropdownListeners = () => {
    fromDropdown.addEventListener('change', () => {
      // Clear the other dropdown if same value selected
      if (toDropdown.value === fromDropdown.value) {
        toDropdown.value = '';
      }
      updateDropdownFilters();
    });

    toDropdown.addEventListener('change', () => {
      // Clear the other dropdown if same value selected
      if (fromDropdown.value === toDropdown.value) {
        fromDropdown.value = '';
      }
      updateDropdownFilters();
    });
  };

  // --- 5. EXECUTION ---

  // Initialize date inputs
  if (departureDateInput) {
    setupDateInputs();
  } else {
    console.error(
      'Element with [booking="departure"] not found. Date inputs not initialized.'
    );
  }

  // Set up dropdown listeners once (not inside populateDropdown to avoid duplicates)
  setupDropdownListeners();

  // Fetch airport data and populate dropdowns
  fetch(airportApiUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.statusText}`);
      }
      return response.json();
    })
    .then(airportData => {
      console.log('Airport data received:', airportData);

      // Populate both dropdowns first
      populateDropdown(fromDropdown, airportData, 'Select Origin');
      populateDropdown(toDropdown, airportData, 'Select Destination');

      // Set default "From" airport to KTEB
      const defaultFromAirport = airportData.find(a => a.value === 'KTEB');
      if (defaultFromAirport) {
        fromDropdown.value = defaultFromAirport.value;
      }

      // Now update filters after both dropdowns are populated
      // updateDropdownFilters();
    })
    .catch(error => {
      console.error('Error fetching or processing airport data:', error);
      showError('Failed to load airport information. Please try again later.');
    });
});