popup.js

const toggle = document.getElementById('toggle');
const oldSiteInput = document.getElementById('oldSite');
const newSiteInput = document.getElementById('newSite');
const sitemapStatus = document.getElementById('sitemap-status');
const sitemapInputDiv = document.getElementById('sitemap-input');
const sitemapUrlInput = document.getElementById('sitemapUrl');
const pageNav = document.getElementById('page-nav');
const currentIndexEl = document.getElementById('current-index');
const totalPagesEl = document.getElementById('total-pages');
const currentPageUrl = document.getElementById('current-page-url');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

// Link checker elements
const linkCheckerToggle = document.getElementById('link-checker-toggle');
const linkResultsContainer = document.getElementById('link-results-container');
const oldSiteStatus = document.getElementById('old-site-status');
const newSiteStatus = document.getElementById('new-site-status');
const rescanBtn = document.getElementById('rescan-btn');

let pages = [];
let currentIndex = 0;

// Load saved state
chrome.storage.local.get(['syncEnabled', 'oldSite', 'newSite', 'pages', 'currentIndex', 'sitemapUrl', 'linkCheckerEnabled', 'linkCheckResults'], (result) => {
  updateToggleUI(result.syncEnabled || false);
  oldSiteInput.value = result.oldSite || '';
  newSiteInput.value = result.newSite || '';
  sitemapUrlInput.value = result.sitemapUrl || '';

  // Link checker state
  updateLinkCheckerToggleUI(result.linkCheckerEnabled || false);

  // Load link check results
  if (result.linkCheckResults) {
    updateLinkResults(result.linkCheckResults);
  }

  if (result.pages && result.pages.length > 0) {
    pages = result.pages;
    currentIndex = result.currentIndex || 0;
    sitemapStatus.style.display = 'block';
    sitemapStatus.className = 'sitemap-status success';
    sitemapStatus.textContent = `Found ${pages.length} pages`;
    showPageNav();
  }
});

// Handle site input changes with debounce
let debounceTimer;
oldSiteInput.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const oldSite = oldSiteInput.value.trim();
    chrome.storage.local.set({ oldSite });
    if (oldSite) {
      fetchSitemap(oldSite);
    }
  }, 500);
});

newSiteInput.addEventListener('input', () => {
  const newSite = newSiteInput.value.trim();
  chrome.storage.local.set({ newSite });
});

// Handle manual sitemap input
let sitemapDebounce;
sitemapUrlInput.addEventListener('input', () => {
  clearTimeout(sitemapDebounce);
  sitemapDebounce = setTimeout(() => {
    const sitemapUrl = sitemapUrlInput.value.trim();
    chrome.storage.local.set({ sitemapUrl });
    if (sitemapUrl) {
      fetchManualSitemap(sitemapUrl);
    }
  }, 500);
});

// Toggle sync
toggle.addEventListener('click', () => {
  chrome.storage.local.get(['syncEnabled'], (result) => {
    const newState = !(result.syncEnabled || false);
    chrome.storage.local.set({ syncEnabled: newState });
    updateToggleUI(newState);
  });
});

// Navigation buttons
prevBtn.addEventListener('click', () => navigateTo(currentIndex - 1));
nextBtn.addEventListener('click', () => navigateTo(currentIndex + 1));

function updateToggleUI(enabled) {
  if (enabled) {
    toggle.classList.add('active');
  } else {
    toggle.classList.remove('active');
  }
}

async function fetchSitemap(baseUrl) {
  sitemapStatus.style.display = 'block';
  sitemapStatus.className = 'sitemap-status loading';
  sitemapStatus.textContent = 'Looking for sitemap...';
  sitemapInputDiv.classList.remove('visible');

  const origin = baseUrl.replace(/\/$/, '');

  const sitemapPaths = [
    '/sitemap.xml',
    '/sitemap_index.xml',
    '/sitemap-index.xml',
    '/sitemaps/sitemap.xml',
    '/sitemap/sitemap.xml'
  ];

  for (const path of sitemapPaths) {
    try {
      const response = await fetch(origin + path);
      if (response.ok) {
        const text = await response.text();
        const urls = parseSitemap(text, origin);

        if (urls.length > 0) {
          pages = urls;
          currentIndex = 0;
          chrome.storage.local.set({ pages, currentIndex });

          sitemapStatus.className = 'sitemap-status success';
          sitemapStatus.textContent = `Found ${urls.length} pages`;
          showPageNav();
          return;
        }
      }
    } catch (e) {
      // Continue to next path
    }
  }

  // No sitemap found - show manual input
  pages = [];
  chrome.storage.local.set({ pages: [], currentIndex: 0 });
  sitemapStatus.className = 'sitemap-status error';
  sitemapStatus.textContent = 'No sitemap found';
  sitemapInputDiv.classList.add('visible');
  pageNav.classList.remove('visible');
}

async function fetchManualSitemap(sitemapUrl) {
  sitemapStatus.style.display = 'block';
  sitemapStatus.className = 'sitemap-status loading';
  sitemapStatus.textContent = 'Fetching sitemap...';

  const oldSite = oldSiteInput.value.trim().replace(/\/$/, '');

  try {
    const response = await fetch(sitemapUrl);
    if (response.ok) {
      const text = await response.text();
      const urls = parseSitemap(text, oldSite);

      if (urls.length > 0) {
        pages = urls;
        currentIndex = 0;
        chrome.storage.local.set({ pages, currentIndex });

        sitemapStatus.className = 'sitemap-status success';
        sitemapStatus.textContent = `Found ${urls.length} pages`;
        showPageNav();
        return;
      }
    }

    sitemapStatus.className = 'sitemap-status error';
    sitemapStatus.textContent = 'Could not parse sitemap';
  } catch (e) {
    sitemapStatus.className = 'sitemap-status error';
    sitemapStatus.textContent = 'Failed to fetch sitemap';
  }
}

function parseSitemap(xml, origin) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(xml, 'text/xml');

  const locs = doc.querySelectorAll('url > loc');
  const urls = Array.from(locs)
    .map(loc => loc.textContent.trim())
    .map(url => {
      try {
        const u = new URL(url);
        return u.pathname + u.search + u.hash;
      } catch {
        return url.replace(origin, '');
      }
    })
    .sort();

  return urls;
}

function showPageNav() {
  if (pages.length === 0) return;
  pageNav.classList.add('visible');
  updatePageDisplay();
}

function updatePageDisplay() {
  currentIndexEl.textContent = currentIndex + 1;
  totalPagesEl.textContent = pages.length;
  currentPageUrl.textContent = pages[currentIndex];

  prevBtn.disabled = currentIndex === 0;
  nextBtn.disabled = currentIndex === pages.length - 1;
}

function navigateTo(index) {
  if (index < 0 || index >= pages.length) return;

  currentIndex = index;
  chrome.storage.local.set({ currentIndex });
  updatePageDisplay();

  const oldSite = oldSiteInput.value.trim();
  const newSite = newSiteInput.value.trim();
  const path = pages[currentIndex];

  chrome.runtime.sendMessage({
    type: 'NAVIGATE_TO',
    oldUrl: oldSite + path,
    newUrl: newSite + path
  });
}

// Link checker functionality
linkCheckerToggle.addEventListener('click', () => {
  chrome.storage.local.get(['linkCheckerEnabled'], (result) => {
    const newState = !(result.linkCheckerEnabled || false);
    chrome.storage.local.set({ linkCheckerEnabled: newState });
    updateLinkCheckerToggleUI(newState);

    // Trigger initial scan when enabled
    if (newState) {
      chrome.runtime.sendMessage({ type: 'SCAN_CURRENT_TABS' });
    }
  });
});

function updateLinkCheckerToggleUI(enabled) {
  if (enabled) {
    linkCheckerToggle.classList.add('active');
    linkResultsContainer.classList.add('visible');
  } else {
    linkCheckerToggle.classList.remove('active');
    linkResultsContainer.classList.remove('visible');
  }
}

rescanBtn.addEventListener('click', () => {
  chrome.runtime.sendMessage({ type: 'SCAN_CURRENT_TABS' });
});

function updateLinkResults(results) {
  updateSiteStatus(oldSiteStatus, results.old);
  updateSiteStatus(newSiteStatus, results.new);
}

function updateSiteStatus(element, data) {
  if (!data) {
    element.innerHTML = '<span class="no-results">No scan yet</span>';
    return;
  }

  if (data.status === 'scanning' || data.status === 'checking') {
    const progress = data.total ? ` (${data.checked || 0}/${data.total})` : '';
    element.innerHTML = `
      <div class="scanning-status">
        <div class="spinner"></div>
        <span>Scanning${progress}...</span>
      </div>
    `;
    return;
  }

  if (data.status === 'error') {
    element.innerHTML = `<span class="no-results">Error: ${escapeHtml(data.error)}</span>`;
    return;
  }

  // Complete status
  let html = `
    <div class="link-stats">
      <span class="stat-item success">Valid: <span class="count">${data.valid}</span></span>
      <span class="stat-item error">Broken: <span class="count">${data.broken}</span></span>
      <span class="stat-item warning">Skipped: <span class="count">${data.skipped}</span></span>
    </div>
  `;

  if (data.brokenLinks && data.brokenLinks.length > 0) {
    html += '<div class="broken-links-list">';
    data.brokenLinks.forEach(link => {
      html += `
        <div class="broken-link-item">
          <div class="broken-link-url">${escapeHtml(link.url)}</div>
        </div>
      `;
    });
    html += '</div>';
  }

  element.innerHTML = html;
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text || '';
  return div.innerHTML;
}

// Listen for updates from background script
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'LINK_RESULTS_UPDATED') {
    updateLinkResults(message.results);
  }
});

// Also listen for storage changes
chrome.storage.onChanged.addListener((changes) => {
  if (changes.linkCheckResults) {
    updateLinkResults(changes.linkCheckResults.newValue);
  }
});