// Update the table with job data
function updateTableData(jobs) {
  const jobsContainer = document.getElementById("jobs");
  jobsContainer.innerHTML = ""; // Clear existing jobs
  jobs.forEach((job) => {
    const jobElement = document.createElement("div");
    jobElement.classList.add("job");
    jobElement.innerHTML = `
        <h3><a href="${job.url}" target="_blank">${job.title}</a></h3>
        <p class="job-posted-time">${job.posted_time}</p>
        <span class="job-region region-${job.region
          .replace(" ", "")
          .toLowerCase()}">${job.region}</span>
        <span class="job-keyword keyword-${job.keyword
          .replace(" ", "")
          .toLowerCase()}">${job.keyword}</span>
      `;
    jobsContainer.appendChild(jobElement);
  });
}

// Fetch job data from the server
function fetchJobs() {
  fetch("/jobs")
    .then((response) => response.json())
    .then((data) => {
      updateTableData(data);
    })
    .catch((error) => console.error("Error fetching jobs:", error));
}

// scrape form submission
function updateScrapeInfo(message, color) {
  let scrapingInfo = document.getElementById("scrape-info");
  scrapingInfo.style.display = "inline-block"; // Show the scraping info
  scrapingInfo.innerText = message;
  scrapingInfo.style.color = color;
}

function scrape(event) {
  event.preventDefault(); // Prevent the default form submission
  updateScrapeInfo("Scraping in progress...", "blue");
  fetch("/scrape")
    .then((response) => response.json())
    .then((data) => {
      if (data.status) {
        updateScrapeInfo(data.status, "green");
      } else {
        updateScrapeInfo("Scraping failed. Please try again.", "red");
      }
    })
    .catch((error) => console.error("Error:", error));
}

function updateJobsFiltered() {
  const selectedRegion = document.getElementById("region").value;
  const selectedKeyword = document.getElementById("keyword").value;
  const filterForm = document.getElementById("filter-form");
  const queryString = new URLSearchParams({
    region: selectedRegion,
    keyword: selectedKeyword,
  }).toString();
  filterForm.action = `/?${queryString}`;
  filterForm.submit(); // Submit the form to apply filters
}

function regionClick(event) {
  const region = event.target.innerText;
  const regionInput = document.getElementById("region");
  regionInput.value = region;
  updateJobsFiltered();
}

function keywordClick(event) {
  const keyword = event.target.innerText;
  const keywordInput = document.getElementById("keyword");
  keywordInput.value = keyword;
  updateJobsFiltered();
}

document.querySelectorAll(".job-keyword").forEach((element) => {
  element.addEventListener("click", keywordClick);
});
document.querySelectorAll(".job-region").forEach((element) => {
  element.addEventListener("click", regionClick);
});

document.getElementById("scrape-form").addEventListener("submit", scrape);
document
  .getElementById("region")
  .addEventListener("change", updateJobsFiltered);
document
  .getElementById("keyword")
  .addEventListener("change", updateJobsFiltered);
document
  .getElementById("filter-form")
  .addEventListener("submit", updateJobsFiltered);
document.getElementById("reset-filters").addEventListener("click", () => {
  document.getElementById("region").value = "";
  document.getElementById("keyword").value = "";
  updateJobsFiltered();
});