console.log('RUNNING ELEVATE CAREER JS');

document.addEventListener('DOMContentLoaded', () => {
  const API_URL =
    'https://recruiting.paylocity.com/recruiting/v2/api/feed/jobs/7bf6774a-9e89-4ac6-b58f-4b9243abd8e8';

  // --- 1. Select Elements & Prepare Templates ---

  // Select Loading Indicator
  const loadingElement = document.querySelector('[career=loading]');

  // Select the Job Item Template
  const jobItemElement = document.querySelector('[career=item]');
  if (!jobItemElement) {
    console.error('Job item template [career=item] not found.');
    // If template is missing, we should still hide loader to prevent infinite load state
    if (loadingElement) loadingElement.style.display = 'none';
    return;
  }
  const jobsContainer = jobItemElement.parentElement;
  // Clone the item to use as a template, then remove the original from DOM
  const jobTemplate = jobItemElement.cloneNode(true);
  jobItemElement.remove();

  // Select Department Dropdown Elements
  const deptWrapper = document.querySelector('[career=department] nav');
  const deptLinkElement = deptWrapper ? deptWrapper.querySelector('a') : null;
  let deptTemplate = null;
  if (deptLinkElement) {
    deptTemplate = deptLinkElement.cloneNode(true);
    deptLinkElement.remove(); // Remove placeholder
  }

  // Select Location Dropdown Elements
  const locWrapper = document.querySelector('[career=location] nav');
  const locLinkElement = locWrapper ? locWrapper.querySelector('a') : null;
  let locTemplate = null;
  if (locLinkElement) {
    locTemplate = locLinkElement.cloneNode(true);
    locLinkElement.remove(); // Remove placeholder
  }

  // State for filters
  let activeFilters = {
    department: null,
    location: null,
  };

  // --- 2. Fetch Data ---

  fetch(API_URL)
    .then(response => {
      if (!response.ok) throw new Error('Network response was not ok');
      return response.json();
    })
    .then(data => {
      const jobs = data.jobs || [];
      initializeBoard(jobs);
    })
    .catch(error => {
      console.error('Error fetching jobs:', error);
    })
    .finally(() => {
      // Hide the loading element whether the request succeeds or fails
      if (loadingElement) {
        loadingElement.style.display = 'none';
      }
    });

  // --- 3. Main Initialization Logic ---

  function initializeBoard(jobs) {
    // Extract unique values for filters
    const departments = [
      ...new Set(jobs.map(job => job.hiringDepartment).filter(Boolean)),
    ].sort();
    const locations = [
      ...new Set(
        jobs.map(job => job.jobLocation && job.jobLocation.name).filter(Boolean)
      ),
    ].sort();

    // Populate Dropdowns
    if (deptWrapper && deptTemplate) {
      populateDropdown(departments, deptWrapper, deptTemplate, 'department');
    }
    if (locWrapper && locTemplate) {
      populateDropdown(locations, locWrapper, locTemplate, 'location');
    }

    // Populate Job List
    renderJobs(jobs);
  }

  // --- 4. Render Functions ---

  function renderJobs(jobs) {
    jobs.forEach(job => {
      const item = jobTemplate.cloneNode(true);

      // Populate Text Content
      safeSetText(item, '[career=title]', job.title);
      safeSetText(item, '[career=department]', job.hiringDepartment);
      safeSetText(
        item,
        '[career=location]',
        job.jobLocation ? job.jobLocation.name : ''
      );
      safeSetText(item, '[career=date]', formatDate(job.publishedDate));

      // Populate Link
      const linkEl = item.querySelector('[career=link]');
      if (linkEl) {
        linkEl.href = job.displayUrl || job.applyUrl;
      }

      // Set data attributes for filtering
      item.dataset.dept = job.hiringDepartment;
      item.dataset.loc = job.jobLocation ? job.jobLocation.name : '';

      jobsContainer.appendChild(item);
    });
  }

  function populateDropdown(items, container, template, filterType) {
    items.forEach(text => {
      const link = template.cloneNode(true);
      link.textContent = text;
      link.href = '#'; // Prevent default navigation

      link.addEventListener('click', e => {
        e.preventDefault();
        handleFilterClick(link, text, filterType, container);
      });

      container.appendChild(link);
    });
  }

  // --- 5. Filter Logic ---

  function handleFilterClick(clickedLink, value, filterType, container) {
    const isAlreadyActive = clickedLink.classList.contains('is-active');

    // 1. Remove is-active from all siblings in this dropdown
    const allLinks = container.querySelectorAll('a');
    allLinks.forEach(a => a.classList.remove('is-active'));

    // 2. Update State
    if (isAlreadyActive) {
      // If clicking the active one, we turn it off (clear filter)
      activeFilters[filterType] = null;
    } else {
      // Activate the clicked one
      clickedLink.classList.add('is-active');
      activeFilters[filterType] = value;
    }

    // 3. Apply filters to the job list
    applyFilters();
  }

  function applyFilters() {
    const jobItems = jobsContainer.querySelectorAll('[career=item]');

    jobItems.forEach(item => {
      const itemDept = item.dataset.dept;
      const itemLoc = item.dataset.loc;

      // Check matches (if filter is null, it matches everything)
      const matchesDept =
        !activeFilters.department || itemDept === activeFilters.department;
      const matchesLoc =
        !activeFilters.location || itemLoc === activeFilters.location;

      if (matchesDept && matchesLoc) {
        item.style.display = ''; // Reset to default
      } else {
        item.style.display = 'none';
      }
    });
  }

  // --- 6. Helper Utilities ---

  function safeSetText(parent, selector, text) {
    const el = parent.querySelector(selector);
    if (el) el.textContent = text;
  }

  function formatDate(dateString) {
    if (!dateString) return '';
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  }
});