// Replace with your real endpoint
const API_URL = "https://www.reprospace.com/NEWS";
// Securely store your API key (best in env variables on server side)
const API_KEY = "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";

let allArticles = [];
let currentPage = 1;
const articlesPerPage = 6;

// On page load, fetch the news
document.addEventListener("DOMContentLoaded", () => {
  fetchNews();
  setupPaginationControls();
});

function fetchNews() {
  fetch(API_URL, {
    method: "GET",
    headers: {
      // If your API uses Bearer token:
      Authorization: `Bearer ${API_KEY}`,
      // If your API requires a custom header, adapt accordingly
      "Content-Type": "application/json",
    },
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error(`API call failed with status ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      // Adjust according to your JSON structure
      allArticles = data.articles || [];
      renderArticles();
    })
    .catch((error) => {
      console.error("Error fetching news:", error);
    });
}

function setupPaginationControls() {
  const prevBtn = document.getElementById("prevBtn");
  const nextBtn = document.getElementById("nextBtn");

  prevBtn.addEventListener("click", () => {
    if (currentPage > 1) {
      currentPage--;
      renderArticles();
    }
  });

  nextBtn.addEventListener("click", () => {
    const totalPages = Math.ceil(allArticles.length / articlesPerPage);
    if (currentPage < totalPages) {
      currentPage++;
      renderArticles();
    }
  });
}

function renderArticles() {
  const newsContainer = document.getElementById("newsContainer");
  newsContainer.innerHTML = "";

  const pageInfo = document.getElementById("pageInfo");
  pageInfo.textContent = `Page ${currentPage}`;

  // Calculate which articles to show
  const startIndex = (currentPage - 1) * articlesPerPage;
  const endIndex = startIndex + articlesPerPage;
  const articlesToShow = allArticles.slice(startIndex, endIndex);

  articlesToShow.forEach((article) => {
    // Create elements for each article
    const columnDiv = document.createElement("div");
    columnDiv.className = "column";

    const articleDiv = document.createElement("div");
    articleDiv.className = "article";

    const titleEl = document.createElement("h2");
    titleEl.className = "article-title";
    titleEl.textContent = article.title;

    const subtitleEl = document.createElement("div");
    subtitleEl.className = "article-subtitle";
    subtitleEl.textContent = article.subtitle;

    const metaEl = document.createElement("div");
    metaEl.className = "article-meta";
    metaEl.textContent = `By ${article.author} | Published on ${new Date(article.publish_date).toLocaleDateString()}`;

    // Snippet logic
    const snippetEl = document.createElement("p");
    snippetEl.textContent = getSnippet(article.content, 100);

    // Link to full article (assuming you have a route like /article.html?id=123)
    const fullLink = document.createElement("a");
    fullLink.href = `/article.html?id=${article.id}`;
    fullLink.textContent = "Read more";

    // Assemble article structure
    articleDiv.appendChild(titleEl);
    articleDiv.appendChild(subtitleEl);
    articleDiv.appendChild(metaEl);
    articleDiv.appendChild(snippetEl);
    articleDiv.appendChild(fullLink);

    columnDiv.appendChild(articleDiv);
    newsContainer.appendChild(columnDiv);
  });
}

function getSnippet(fullText, length = 100) {
  if (!fullText) return "";
  return fullText.length > length 
    ? fullText.substring(0, length) + "..." 
    : fullText;
}