{% extends 'base.html' %}

{% block title %}Google Trends Keyword 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">Google Trends Keyword Tool</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-brands fa-google me-2 text-primary"></i>Google Trends Keyword Tool</h1>
      <p class="text-muted">Analyze keyword interest over time across different regions using Google Trends data.</p>
    </div>
  </div>

  <!-- Dependency Notice -->
  <div class="alert alert-warning d-flex align-items-start mb-4" role="alert">
    <i class="fa-solid fa-triangle-exclamation me-3 mt-1 fs-5"></i>
    <div>
      <strong>Note:</strong> This tool uses the <code>pytrends</code> Python library to fetch Google Trends data.
      Results depend on Google Trends availability and may be rate-limited. If data cannot be retrieved, an error message will be shown.
    </div>
  </div>

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

          <div class="mb-3">
            <label for="keyword" class="form-label fw-semibold">Keyword <span class="text-danger">*</span></label>
            <input type="text" id="keyword" class="form-control"
                   placeholder="e.g. electric vehicles, machine learning" required>
          </div>

          <div class="mb-3">
            <label for="timePeriod" class="form-label fw-semibold">Time Period</label>
            <select id="timePeriod" class="form-select">
              <option value="7d">Past 7 days</option>
              <option value="30d" selected>Past 30 days</option>
              <option value="90d">Past 90 days</option>
              <option value="12m">Past 12 months</option>
            </select>
          </div>

          <div class="mb-4">
            <label for="region" class="form-label fw-semibold">Region</label>
            <select id="region" class="form-select">
              <option value="" selected>Worldwide</option>
              <option value="US">United States</option>
              <option value="GB">United Kingdom</option>
              <option value="CA">Canada</option>
              <option value="AU">Australia</option>
              <option value="IN">India</option>
            </select>
          </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-brands fa-google me-2"></i>Get Trends
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Results -->
    <div class="col-lg-8">
      <!-- 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">Fetching trends...</span>
          </div>
          <p class="fw-semibold mb-0">Fetching trend data from Google…</p>
          <p class="text-muted small">This may take a few seconds.</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" class="d-none">
        <!-- Summary Card -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-header bg-primary text-white fw-semibold">
            <i class="fa-solid fa-chart-line me-2"></i>Trend Summary
          </div>
          <div class="card-body">
            <div class="row g-3 mb-3">
              <div class="col-sm-4 text-center">
                <div class="p-3 rounded bg-light">
                  <div class="h4 fw-bold text-primary mb-0" id="avgInterest">—</div>
                  <small class="text-muted">Avg. Interest (0–100)</small>
                </div>
              </div>
              <div class="col-sm-4 text-center">
                <div class="p-3 rounded bg-light">
                  <div class="h4 fw-bold text-success mb-0" id="peakInterest">—</div>
                  <small class="text-muted">Peak Interest</small>
                </div>
              </div>
              <div class="col-sm-4 text-center">
                <div class="p-3 rounded bg-light">
                  <div class="h4 fw-bold text-info mb-0" id="trendDirection">—</div>
                  <small class="text-muted">Trend Direction</small>
                </div>
              </div>
            </div>
            <p id="trendDescription" class="mb-0 text-muted small"></p>
          </div>
        </div>

        <!-- Data Table -->
        <div class="card shadow-sm border-0">
          <div class="card-header bg-dark text-white fw-semibold">
            <i class="fa-solid fa-table me-2"></i>Interest Over Time
          </div>
          <div class="card-body p-0">
            <div class="table-responsive" style="max-height:350px;overflow-y:auto;">
              <table class="table table-hover table-sm mb-0">
                <thead class="table-dark sticky-top">
                  <tr>
                    <th>Date / Period</th>
                    <th class="text-end">Interest Score</th>
                    <th>Trend Bar</th>
                  </tr>
                </thead>
                <tbody id="trendsTableBody"></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-chart-line fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Trend data will appear here after you click <strong>Get Trends</strong>.</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');

  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 interestBar(score) {
    const s = parseInt(score) || 0;
    let cls = 'bg-danger';
    if (s >= 60) cls = 'bg-success';
    else if (s >= 30) cls = 'bg-warning';
    return `<div class="progress" style="height:8px;min-width:80px;">
      <div class="progress-bar ${cls}" style="width:${s}%"></div>
    </div>`;
  }

  submitBtn.addEventListener('click', async () => {
    const keyword    = document.getElementById('keyword').value.trim();
    const timePeriod = document.getElementById('timePeriod').value;
    const region     = document.getElementById('region').value;

    if (!keyword) { showError('Please enter a keyword.'); return; }

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

    try {
      const resp = await fetch('/tools/seo/google-trends/analyze', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ keyword, time_period: timePeriod, region })
      });

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

      document.getElementById('avgInterest').textContent  = data.avg_interest  ?? '—';
      document.getElementById('peakInterest').textContent = data.peak_interest ?? '—';
      document.getElementById('trendDirection').textContent = data.trend_direction ?? '—';
      document.getElementById('trendDescription').textContent = data.description ?? '';

      const tbody = document.getElementById('trendsTableBody');
      tbody.innerHTML = '';
      const points = data.data_points || [];

      if (points.length === 0) {
        tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">No data points available.</td></tr>';
      } else {
        points.forEach(pt => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${escHtml(pt.date || pt.period || '—')}</td>
            <td class="text-end fw-semibold">${pt.interest ?? '—'}</td>
            <td style="min-width:120px;">${interestBar(pt.interest)}</td>`;
          tbody.appendChild(tr);
        });
      }

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

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