{% extends 'base.html' %}

{% block title %}Keyword Extractor Tool — Free Online Tool{% endblock %}

{% block content %}
<div class="container py-5">

  <!-- Breadcrumb -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">Home</a></li>
      <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}#seo">SEO Tools</a></li>
      <li class="breadcrumb-item active" aria-current="page">Keyword Extractor</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-magnifying-glass-plus me-2 text-primary"></i>Keyword Extractor Tool</h1>
      <p class="text-muted">Extract keywords and their frequency from any article or webpage. Analyze keyword density for SEO optimization.</p>
    </div>
  </div>

  <div class="row g-4">
    <!-- Form -->
    <div class="col-lg-5">
      <div class="card shadow-sm border-0">
        <div class="card-body p-4">
          <h5 class="fw-semibold mb-4"><i class="fa-solid fa-file-lines me-2 text-primary"></i>Input Source</h5>

          <!-- Tabs: Text vs URL -->
          <ul class="nav nav-pills mb-3" id="inputTabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="textTab" data-bs-toggle="pill" data-bs-target="#textPane" type="button" role="tab">
                <i class="fa-solid fa-file-alt me-1"></i>Paste Text
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="urlTab" data-bs-toggle="pill" data-bs-target="#urlPane" type="button" role="tab">
                <i class="fa-solid fa-globe me-1"></i>From URL
              </button>
            </li>
          </ul>

          <div class="tab-content mb-3">
            <div class="tab-pane fade show active" id="textPane" role="tabpanel">
              <textarea id="articleText" class="form-control" rows="10"
                        placeholder="Paste your article or text here (minimum 50 words recommended)…"></textarea>
              <div class="form-text" id="wordCount">0 words</div>
            </div>
            <div class="tab-pane fade" id="urlPane" role="tabpanel">
              <input type="text" id="articleUrl" class="form-control"
                     placeholder="https://example.com/article-page">
              <div class="form-text">The tool will fetch and extract text from this URL.</div>
            </div>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-sm-6">
              <label for="minFrequency" class="form-label fw-semibold">Min. Frequency</label>
              <select id="minFrequency" class="form-select">
                <option value="1" selected>1 (all)</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5+</option>
              </select>
            </div>
            <div class="col-sm-6 d-flex align-items-end">
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="excludeCommon" checked>
                <label class="form-check-label" for="excludeCommon">
                  Exclude common words
                </label>
              </div>
            </div>
          </div>

          <!-- Error Alert -->
          <div id="errorAlert" class="alert alert-danger d-none" role="alert">
            <i class="fa-solid fa-circle-xmark me-2"></i>
            <span id="errorMsg"></span>
          </div>

          <div class="d-grid">
            <button id="submitBtn" type="button" class="btn btn-primary btn-lg">
              <i class="fa-solid fa-magnifying-glass-plus me-2"></i>Extract Keywords
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Results -->
    <div class="col-lg-7">
      <!-- Loading -->
      <div id="loadingCard" class="card shadow-sm border-0 d-none">
        <div class="card-body p-5 text-center">
          <div class="spinner-border text-primary mb-3" style="width:3rem;height:3rem;" role="status">
            <span class="visually-hidden">Extracting...</span>
          </div>
          <p class="fw-semibold mb-0">Extracting keywords…</p>
        </div>
      </div>

      <!-- Results Table -->
      <div id="resultsSection" class="d-none">
        <div class="card shadow-sm border-0">
          <div class="card-header bg-primary text-white fw-semibold d-flex justify-content-between align-items-center">
            <span><i class="fa-solid fa-table me-2"></i>Keyword Frequency</span>
            <button id="exportCsvBtn" class="btn btn-sm btn-light">
              <i class="fa-solid fa-download me-1"></i>Export CSV
            </button>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive" style="max-height:500px;overflow-y:auto;">
              <table class="table table-hover table-striped mb-0 align-middle small">
                <thead class="table-dark sticky-top">
                  <tr>
                    <th>#</th>
                    <th>Keyword</th>
                    <th class="text-end">Count</th>
                    <th class="text-end">Density %</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody id="kwTableBody"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- Placeholder -->
      <div id="placeholderCard" class="card border-0 bg-light">
        <div class="card-body p-5 text-center text-muted">
          <i class="fa-solid fa-magnifying-glass-plus fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Keyword frequency table will appear here after extraction.</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  'use strict';

  const submitBtn      = document.getElementById('submitBtn');
  const errorAlert     = document.getElementById('errorAlert');
  const errorMsg       = document.getElementById('errorMsg');
  const loadingCard    = document.getElementById('loadingCard');
  const resultsSection = document.getElementById('resultsSection');
  const placeholder    = document.getElementById('placeholderCard');
  const articleText    = document.getElementById('articleText');
  const wordCountEl    = document.getElementById('wordCount');
  const exportCsvBtn   = document.getElementById('exportCsvBtn');

  let extractedKeywords = [];

  articleText.addEventListener('input', () => {
    const words = articleText.value.trim().split(/\s+/).filter(Boolean).length;
    wordCountEl.textContent = words + ' word' + (words !== 1 ? 's' : '');
  });

  function showError(msg) {
    errorMsg.textContent = msg;
    errorAlert.classList.remove('d-none');
    loadingCard.classList.add('d-none');
    placeholder.classList.remove('d-none');
    resultsSection.classList.add('d-none');
  }

  function escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function densityBar(density) {
    const d = parseFloat(density) || 0;
    let cls = 'bg-success';
    if (d > 3) cls = 'bg-warning';
    if (d > 5) cls = 'bg-danger';
    return `<div class="progress" style="height:6px;min-width:60px;">
      <div class="progress-bar ${cls}" style="width:${Math.min(d * 10, 100)}%"></div>
    </div>`;
  }

  submitBtn.addEventListener('click', async () => {
    const activePane = document.querySelector('.tab-pane.active').id;
    const text       = articleText.value.trim();
    const url        = document.getElementById('articleUrl').value.trim();
    const minFreq    = document.getElementById('minFrequency').value;
    const excludeCommon = document.getElementById('excludeCommon').checked;

    if (activePane === 'textPane' && !text) {
      showError('Please paste some text to extract keywords from.');
      return;
    }
    if (activePane === 'urlPane' && !url) {
      showError('Please enter a URL.');
      return;
    }

    errorAlert.classList.add('d-none');
    loadingCard.classList.remove('d-none');
    resultsSection.classList.add('d-none');
    placeholder.classList.add('d-none');
    submitBtn.disabled = true;

    const payload = { min_frequency: parseInt(minFreq), exclude_common: excludeCommon };
    if (activePane === 'textPane') payload.text = text;
    else payload.url = url;

    try {
      const resp = await fetch('/tools/seo/keyword-extractor/extract', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || 'Server error ' + resp.status);

      extractedKeywords = data.keywords || [];
      const tbody = document.getElementById('kwTableBody');
      tbody.innerHTML = '';

      if (extractedKeywords.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">No keywords found matching criteria.</td></tr>';
      } else {
        extractedKeywords.forEach((kw, i) => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td class="text-muted">${i + 1}</td>
            <td class="fw-semibold">${escHtml(kw.keyword)}</td>
            <td class="text-end">${kw.count}</td>
            <td class="text-end">
              <div class="d-flex align-items-center justify-content-end gap-2">
                <span>${parseFloat(kw.density).toFixed(2)}%</span>
                ${densityBar(kw.density)}
              </div>
            </td>
            <td>
              <button class="btn btn-sm btn-outline-secondary copy-kw" data-kw="${escHtml(kw.keyword)}">
                <i class="fa-solid fa-copy"></i>
              </button>
            </td>`;
          tbody.appendChild(tr);
        });
      }

      loadingCard.classList.add('d-none');
      resultsSection.classList.remove('d-none');
    } catch (err) {
      showError(err.message);
    } finally {
      submitBtn.disabled = false;
    }
  });

  document.addEventListener('click', e => {
    if (e.target.closest('.copy-kw')) {
      const btn = e.target.closest('.copy-kw');
      navigator.clipboard.writeText(btn.dataset.kw).then(() => {
        btn.innerHTML = '<i class="fa-solid fa-check text-success"></i>';
        setTimeout(() => { btn.innerHTML = '<i class="fa-solid fa-copy"></i>'; }, 1500);
      });
    }
  });

  exportCsvBtn.addEventListener('click', () => {
    if (!extractedKeywords.length) return;
    const rows = [['Keyword','Count','Density %']];
    extractedKeywords.forEach(kw => rows.push([kw.keyword, kw.count, parseFloat(kw.density).toFixed(2)]));
    const csv = rows.map(r => r.map(c => `"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n');
    const blob = new Blob([csv], { type: 'text/csv' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href = url; a.download = 'keywords.csv'; a.click();
    URL.revokeObjectURL(url);
  });
})();
</script>
{% endblock %}