{% extends 'base.html' %}

{% block title %}YouTube Trend Finder — 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">YouTube Trend Finder</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-brands fa-youtube me-2 text-danger"></i>YouTube Trend Finder</h1>
      <p class="text-muted">Discover trending YouTube videos by category and region to identify content opportunities.</p>
    </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 Filters</h5>

          <div class="mb-3">
            <label for="category" class="form-label fw-semibold">Category</label>
            <select id="category" class="form-select">
              <option value="0" selected>All Categories</option>
              <option value="10">Music</option>
              <option value="20">Gaming</option>
              <option value="25">News &amp; Politics</option>
              <option value="17">Sports</option>
              <option value="27">Education</option>
              <option value="28">Science &amp; Technology</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="region" class="form-label fw-semibold">Region</label>
            <select id="region" class="form-select">
              <option value="US" selected>United States</option>
              <option value="GB">United Kingdom</option>
              <option value="CA">Canada</option>
              <option value="AU">Australia</option>
              <option value="IN">India</option>
              <option value="">Global</option>
            </select>
          </div>

          <div class="mb-4">
            <label for="maxResults" class="form-label fw-semibold">Max Results</label>
            <select id="maxResults" class="form-select">
              <option value="10" selected>10 videos</option>
              <option value="25">25 videos</option>
              <option value="50">50 videos</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-danger btn-lg">
              <i class="fa-solid fa-fire me-2"></i>Find 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-danger mb-3" style="width:3rem;height:3rem;" role="status">
            <span class="visually-hidden">Loading trends...</span>
          </div>
          <p class="fw-semibold mb-0">Fetching trending videos…</p>
          <p class="text-muted small">Contacting YouTube API.</p>
        </div>
      </div>

      <!-- Video Cards -->
      <div id="resultsSection" class="d-none">
        <h5 class="fw-semibold mb-3"><i class="fa-solid fa-fire text-danger me-2"></i>Trending Videos <span id="resultCount" class="badge bg-danger ms-1"></span></h5>
        <div id="videoCardsGrid" class="row g-3"></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-brands fa-youtube fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Trending video cards will appear here.</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 videoCardsGrid = document.getElementById('videoCardsGrid');

  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 formatNum(n) {
    if (!n && n !== 0) return '—';
    return Number(n).toLocaleString();
  }

  function buildVideoCard(video, index) {
    const col = document.createElement('div');
    col.className = 'col-12 col-md-6';

    const thumb = video.thumbnail_url
      ? `<img src="${escHtml(video.thumbnail_url)}" alt="Thumbnail" class="img-fluid rounded-start" style="width:140px;height:90px;object-fit:cover;">`
      : `<div class="bg-secondary d-flex align-items-center justify-content-center rounded-start text-white" style="width:140px;height:90px;"><i class="fa-brands fa-youtube fa-2x"></i></div>`;

    const videoUrl = video.video_id ? `https://www.youtube.com/watch?v=${escHtml(video.video_id)}` : '#';

    col.innerHTML = `
      <div class="card border-0 shadow-sm h-100">
        <div class="d-flex">
          <a href="${videoUrl}" target="_blank" rel="noopener" class="flex-shrink-0">
            ${thumb}
          </a>
          <div class="card-body p-2 d-flex flex-column">
            <a href="${videoUrl}" target="_blank" rel="noopener" class="text-decoration-none text-dark">
              <h6 class="card-title small fw-semibold mb-1 lh-sm" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${escHtml(video.title || '—')}</h6>
            </a>
            <p class="mb-1 text-muted" style="font-size:0.75rem;">${escHtml(video.channel || '—')}</p>
            <div class="mt-auto d-flex flex-wrap gap-1" style="font-size:0.7rem;">
              <span class="badge bg-light text-dark border"><i class="fa-solid fa-eye me-1"></i>${formatNum(video.views)}</span>
              <span class="badge bg-light text-dark border"><i class="fa-solid fa-calendar me-1"></i>${escHtml(video.publish_date || '—')}</span>
            </div>
          </div>
        </div>
      </div>`;
    return col;
  }

  submitBtn.addEventListener('click', async () => {
    const category   = document.getElementById('category').value;
    const region     = document.getElementById('region').value;
    const maxResults = document.getElementById('maxResults').value;

    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/youtube-trends/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ category_id: parseInt(category), region, max_results: parseInt(maxResults) })
      });

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

      const videos = data.videos || [];
      document.getElementById('resultCount').textContent = videos.length;
      videoCardsGrid.innerHTML = '';

      if (videos.length === 0) {
        videoCardsGrid.innerHTML = '<div class="col"><div class="alert alert-info">No trending videos found for this filter combination.</div></div>';
      } else {
        videos.forEach((v, i) => videoCardsGrid.appendChild(buildVideoCard(v, i)));
      }

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