// popup.js

function sortJobsById(jobs) {
  return jobs.slice().sort(function (a, b) {
    return (parseInt(b.id, 10) || 0) - (parseInt(a.id, 10) || 0);
  });
}

function updateUI(data) {
  var lastAndelaJobs = data.lastAndelaJobs || [];
  var lastAndelaUpdated = data.lastAndelaUpdated;
  var totalAndelaMatching = data.totalAndelaMatching || 0;

  document.getElementById('jobCount').textContent =
    totalAndelaMatching + ' open opportunities';

  var jobList = document.getElementById('jobList');
  jobList.innerHTML = '';

  if (lastAndelaJobs.length === 0) {
    jobList.innerHTML =
      '<div class="no-jobs">No jobs found yet. Click "Check Now" to scan for jobs.</div>';
  } else {
    var opportunities = sortJobsById(
      lastAndelaJobs.filter(function (j) {
        return j.kind === 'opportunity';
      }),
    );
    var applied = sortJobsById(
      lastAndelaJobs.filter(function (j) {
        return j.kind !== 'opportunity';
      }),
    );

    function renderJob(job) {
      var jobElement = document.createElement('div');
      jobElement.className = 'job-item';

      var startInfo = job.posted_date || '';
      var postedAgo = job.posted_ago || '';
      var companyName =
        typeof job.company === 'object'
          ? (job.company && job.company.name) || 'Company'
          : job.company || 'Company';

      jobElement.innerHTML =
        '<div class="job-title">' +
        job.title +
        '</div>' +
        '<div class="job-company">' +
        companyName +
        '</div>' +
        '<div class="job-location">' +
        (job.location || 'Remote') +
        '</div>' +
        '<div class="job-posted">' +
        startInfo +
        (postedAgo ? ' · ' + postedAgo : '') +
        '</div>';

      jobElement.addEventListener('click', function () {
        var url = job.url || 'https://app.andela.com/job-postings/' + job.id;
        chrome.tabs.create({ url: url });
      });

      jobList.appendChild(jobElement);
    }

    if (opportunities.length) {
      var oppHeading = document.createElement('div');
      oppHeading.className = 'section-heading section-heading-opportunities';
      oppHeading.textContent = 'Open Opportunities';
      jobList.appendChild(oppHeading);
      opportunities.slice(0, 10).forEach(renderJob);
    }

    if (applied.length) {
      var appliedHeading = document.createElement('div');
      appliedHeading.className = 'section-heading section-heading-applied';
      appliedHeading.textContent = 'Applied';
      jobList.appendChild(appliedHeading);
      applied.slice(0, 10).forEach(renderJob);
    }
  }

  var status = document.getElementById('status');
  status.textContent = lastAndelaUpdated
    ? 'Last checked: ' + new Date(lastAndelaUpdated).toLocaleString()
    : 'Not checked yet';
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('checkNow').addEventListener('click', function () {
    console.log('Manual check triggered');
    chrome.runtime.sendMessage({ action: 'checkNow' }, function (response) {
      console.log('Check initiated');
    });
  });

  document
    .getElementById('openSettings')
    .addEventListener('click', function () {
      chrome.tabs.create({ url: 'settings.html' });
    });

  chrome.storage.local.get(
    ['lastAndelaJobs', 'lastAndelaUpdated', 'totalAndelaMatching'],
    function (result) {
      updateUI(result);
    },
  );

  chrome.storage.onChanged.addListener(function (changes, areaName) {
    if (
      areaName === 'local' &&
      (changes.lastAndelaJobs ||
        changes.lastAndelaUpdated ||
        changes.totalAndelaMatching)
    ) {
      console.log('Storage updated, refreshing UI...');
      chrome.storage.local.get(
        ['lastAndelaJobs', 'lastAndelaUpdated', 'totalAndelaMatching'],
        function (result) {
          updateUI(result);
        },
      );
    }
  });
});