const container = document.getElementById('backup-container');

fetch('http://localhost:3000/api/backups')
  .then((response) => response.json())
  .then((data) => {
    let currentCompany = '';
    let currentProduct = '';

    data.forEach((item) => {
      // Group by company
      if (item.company_name !== currentCompany) {
        currentCompany = item.company_name;
        const companySection = document.createElement('div');
        companySection.className = 'company-section';
        const header = document.createElement('h2');
        header.className = 'company-header';
        header.textContent = currentCompany;
        companySection.appendChild(header);
        container.appendChild(companySection);
      }

      // Group by backup product
      if (item.backup_product !== currentProduct) {
        currentProduct = item.backup_product;
        const productSection = document.createElement('div');
        productSection.className = 'backup-product';
        const productHeader = document.createElement('h3');
        productHeader.textContent = currentProduct;
        productSection.appendChild(productHeader);
        container.appendChild(productSection);
      }

      const jobItem = document.createElement('div');
      jobItem.className = 'job-item';
      jobItem.innerHTML = `
        <span class="job-name">${item.job_name}</span>
        <span class="last-backup">Last Backup: ${new Date(item.last_backup_time).toLocaleString()}</span>
        <span class="status-pill status-${item.status}" data-detail="${item.error_details}">${item.status}</span>
      `;

      // Click to show error details
      const statusPill = jobItem.querySelector('.status-pill');
      statusPill.addEventListener('click', () => {
        const detailModal = document.createElement('div');
        detailModal.className = 'detail-modal';
        detailModal.innerHTML = `
          <span class="modal-close">&times;</span>
          <h4>Error Details</h4>
          <p>${item.error_details}</p>
        `;
        document.body.appendChild(detailModal);

        const closeModal = detailModal.querySelector('.modal-close');
        closeModal.addEventListener('click', () => {
          document.body.removeChild(detailModal);
        });
      });

      const productSection = container.lastElementChild;
      productSection.appendChild(jobItem);
    });
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
    container.innerHTML = '<p>Error loading backup data. Check backend logs.</p>';
  });