// Global variables
let currentFact = null;
let imageHistory = [];

// DOM elements
const imageContainer = document.getElementById("imageContainer");
const spaceImage = document.getElementById("spaceImage");
const factOverlay = document.getElementById("factOverlay");
const factTitle = document.getElementById("factTitle");
const factDescription = document.getElementById("factDescription");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");

// Fetch random image from API
async function fetchRandomImage() {
  try {
    const response = await fetch("/api/random-image");
    const imageData = await response.json();

    if (imageData && !response.error) {
      currentFact = imageData;
      loadFact(currentFact);
      // Add to history
      imageHistory.push(currentFact);

      // Limit history to 50 items
      if (imageHistory.length > 50) {
        imageHistory.shift();
      }
    } else {
      console.error("Failed to fetch random image");
    }
  } catch (error) {
    console.error("Error fetching random image:", error);
  }
}

// Load a specific fact
function loadFact(fact) {
  if (!fact) return;

  spaceImage.src = `/api/image/${fact.id}`;
  factTitle.textContent = fact.title;
  factDescription.textContent = fact.description;

  // Make sure overlay is visible when loading new image
  factOverlay.classList.remove("hidden");
}

// Toggle fact overlay visibility
function toggleFactOverlay() {
  if (factOverlay) {
    factOverlay.classList.toggle("hidden");
  }
}

// Load next image
async function loadNextImage() {
  try {
    const response = await fetch("/api/next-image");
    const imageData = await response.json();

    if (imageData && !response.error) {
      currentFact = imageData;
      loadFact(currentFact);

      // Add to history
      imageHistory.push(currentFact);

      // Limit history to 50 items
      if (imageHistory.length > 50) {
        imageHistory.shift();
      }
    } else {
      console.error("Failed to fetch next image");
    }
  } catch (error) {
    console.error("Error fetching next image:", error);
  }
}

// Load previous image from history
async function loadPreviousImage() {
  if (imageHistory.length < 2) {
    // If we're at the beginning, go back to random image
    await fetchRandomImage();
    return;
  }

  // Remove current item from history and get previous one
  imageHistory.pop(); // Remove current
  const prevFact = imageHistory[imageHistory.length - 1];

  if (prevFact) {
    currentFact = prevFact;
    loadFact(currentFact);
  }
}

// Event listeners
imageContainer.addEventListener("click", toggleFactOverlay);

prevBtn.addEventListener("click", () => {
  loadPreviousImage();
});

nextBtn.addEventListener("click", () => {
  loadNextImage();
});

// Initialize the app
document.addEventListener("DOMContentLoaded", () => {
  fetchRandomImage();
});