// Ghost Travel Frontend Application

// Popular destinations for demo
const popularDestinations = [
  { name: 'Bali, Indonesia', image: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=400', search: 'Bali' },
  { name: 'Tokyo, Japan', image: 'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?w=400', search: 'Tokyo' },
  { name: 'Paris, France', image: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=400', search: 'Paris' },
  { name: 'New York, USA', image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=400', search: 'New York' },
  { name: 'Dubai, UAE', image: 'https://images.unsplash.com/photo-1512453979798-5ea904ac6605?w=400', search: 'Dubai' },
  { name: 'Singapore', image: 'https://images.unsplash.com/photo-1525625293386-3f8f99389edd?w=400', search: 'Singapore' }
];

// Initialize destination cards
function initDestinations() {
  const grid = document.getElementById('destinationGrid');
  if (!grid) return;
  
  grid.innerHTML = popularDestinations.map(dest => `
    <div class="destination-card" onclick="searchDestination('${dest.search}')">
      <img src="${dest.image}" alt="${dest.name}" onerror="this.src='https://via.placeholder.com/400x200?text=No+Image'">
      <div class="destination-card-content">
        <h3>${dest.name}</h3>
        <p>Click to search hotels</p>
      </div>
    </div>
  `).join('');
}

// Search hotels by destination
function searchHotels(event) {
  event.preventDefault();
  
  const destination = document.getElementById('destination').value;
  const checkin = document.getElementById('checkin').value;
  const checkout = document.getElementById('checkout').value;
  const guests = document.getElementById('guests').value;
  
  if (!destination || !checkin || !checkout) {
    alert('Please fill in all fields');
    return;
  }
  
  // Redirect to results page with query params
  window.location.href = `/results?destination=${encodeURIComponent(destination)}&checkin=${checkin}&checkout=${checkout}&guests=${guests}`;
}

// Search by clicking destination card
function searchDestination(destination) {
  const checkin = document.getElementById('checkin')?.value || getDefaultCheckin();
  const checkout = document.getElementById('checkout')?.value || getDefaultCheckout();
  const guests = document.getElementById('guests')?.value || '2';
  
  window.location.href = `/results?destination=${encodeURIComponent(destination)}&checkin=${checkin}&checkout=${checkout}&guests=${guests}`;
}

// Get default check-in date (tomorrow)
function getDefaultCheckin() {
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  return tomorrow.toISOString().split('T')[0];
}

// Get default check-out date (3 days from now)
function getDefaultCheckout() {
  const threeDays = new Date();
  threeDays.setDate(threeDays.getDate() + 3);
  return threeDays.toISOString().split('T')[0];
}

// Set minimum dates for date inputs
function setMinDates() {
  const today = new Date().toISOString().split('T')[0];
  const tomorrow = getDefaultCheckin();
  
  const checkinInput = document.getElementById('checkin');
  const checkoutInput = document.getElementById('checkout');
  
  if (checkinInput) checkinInput.min = today;
  if (checkoutInput) checkoutInput.min = tomorrow;
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
  initDestinations();
  setMinDates();
});
