document.addEventListener('DOMContentLoaded', () => {
  // Create stars for background effect
  createStars();
  
  // Set up button event listeners
  document.getElementById('apodBtn').addEventListener('click', loadAPOD);
  document.getElementById('marsBtn').addEventListener('click', loadMarsPhotos);
  
  // Load default content (APOD)
  loadAPOD();
});

function createStars() {
  const starsContainer = document.createElement('div');
  starsContainer.className = 'stars';
  
  for (let i = 0; i < 150; i++) {
    const star = document.createElement('div');
    star.className = 'star';
    star.style.left = `${Math.random() * 100}%`;
    star.style.top = `${Math.random() * 100}%`;
    star.style.width = `${Math.random() * 3}px`;
    star.style.height = star.style.width;
    star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);
    star.style.animationDelay = `${Math.random() * 5}s`;
    starsContainer.appendChild(star);
  }
  
  document.body.appendChild(starsContainer);
}

async function loadAPOD() {
  showLoading();
  const contentSection = document.getElementById('content-section');
  
  try {
    const response = await fetch('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&count=6');
    const data = await response.json();
    
    contentSection.innerHTML = '';
    
    data.forEach(item => {
      const card = createCard(
        item.title,
        item.explanation,
        item.url,
        item.date,
        'Astronomy',
        item.media_type === 'video' ? 'Video' : 'Image'
      );
      contentSection.appendChild(card);
    });
  } catch (error) {
    console.error('Error fetching APOD:', error);
    contentSection.innerHTML = '<p class="text-center text-red-400 col-span-full">Failed to load cosmic images. Please try again later.</p>';
  } finally {
    hideLoading();
  }
}

async function loadMarsPhotos() {
  showLoading();
  const contentSection = document.getElementById('content-section');
  
  try {
    const response = await fetch('https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY');
    const data = await response.json();
    
    contentSection.innerHTML = '';
    
    data.photos.slice(0, 6).forEach(photo => {
      const card = createCard(
        photo.camera.full_name,
        `Taken by ${photo.rover.name} rover on Martian sol ${photo.sol}`,
        photo.img_src,
        new Date(photo.earth_date).toLocaleDateString(),
        'Mars',
        'Photo'
      );
      contentSection.appendChild(card);
    });
  } catch (error) {
    console.error('Error fetching Mars photos:', error);
    contentSection.innerHTML = '<p class="text-center text-red-400 col-span-full">Failed to load Mars photos. Please try again later.</p>';
  } finally {
    hideLoading();
  }
}

function createCard(title, description, imageUrl, date, category, type) {
  const card = document.createElement('div');
  card.className = 'card';
  
  card.innerHTML = `
    <div class="relative">
      <img src="${imageUrl}" alt="${title}" class="card-img" loading="lazy">
      <div class="absolute top-2 right-2">
        <span class="pill-badge bg-purple-600">${type}</span>
      </div>
    </div>
    <div class="p-5">
      <div class="flex justify-between items-start mb-3">
        <h3 class="text-xl font-bold">${title}</h3>
        <span class="pill-badge bg-pink-600">${category}</span>
      </div>
      <p class="text-gray-300 text-sm mb-4 line-clamp-3">${description}</p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-400">${date}</span>
        <button class="text-sm text-purple-400 hover:text-purple-300 flex items-center">
          View Details <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
        </button>
      </div>
    </div>
  `;
  
  return card;
}

function showLoading() {
  document.getElementById('loading').classList.remove('hidden');
}

function hideLoading() {
  document.getElementById('loading').classList.add('hidden');
  feather.replace();
}