async function extractContent() {
  const url = document.getElementById('url').value.trim();
  const tag = document.getElementById('tag').value.trim() || 'all';
  const output = document.getElementById('output');
  const analysisBox = document.getElementById('analysis-box');
  const lang = document.getElementById('lang');
  const wordCount = document.getElementById('wordCount');
  const sentCount = document.getElementById('sentCount');
  const uniqueCount = document.getElementById('uniqueCount');
  const topWords = document.getElementById('topWords');

  output.innerHTML = '<p>⏳ Extracting content...</p>';
  analysisBox.classList.add('hidden');

  try {
    const res = await fetch('/extract', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ url, tag })
    });

    const data = await res.json();

    if (!res.ok || data.error) {
      output.innerHTML = `<p class="error">❌ ${data.error || 'Failed to fetch data'}</p>`;
      return;
    }

    // Display extracted tag results
    if (data.results) {
      output.innerHTML = data.results.map(item => `<p>${item}</p>`).join('');
    } else if (data.text) {
      output.innerHTML = `<p>${data.text.slice(0, 1000)}...</p>`;
    } else {
      output.innerHTML = '<p>No results found.</p>';
    }

    // Display analysis
    if (data.analysis) {
      analysisBox.classList.remove('hidden');
      lang.textContent = data.language || 'unknown';
      wordCount.textContent = data.analysis.word_count || 0;
      sentCount.textContent = data.analysis.sentence_count || 0;
      uniqueCount.textContent = data.analysis.unique_words || 0;

      topWords.innerHTML = '';
      data.analysis.top_words.forEach(([word, freq]) => {
        const li = document.createElement('li');
        li.textContent = `${word} (${freq})`;
        topWords.appendChild(li);
      });
    }

  } catch (err) {
    output.innerHTML = `<p class="error">⚠️ Error: ${err.message}</p>`;
  }
}