{% extends 'base.html' %}

{% block title %}Pinterest Keyword Suggestion — 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">Pinterest Keyword Suggestion</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-brands fa-pinterest me-2 text-danger"></i>Pinterest Keyword Suggestion</h1>
      <p class="text-muted">Discover high-performing Pinterest keywords with search volume indicators for your pins and boards.</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-keyboard me-2 text-primary"></i>Enter Keyword</h5>

          <div class="mb-4">
            <label for="keyword" class="form-label fw-semibold">Main Keyword <span class="text-danger">*</span></label>
            <input type="text" id="keyword" class="form-control form-control-lg"
                   placeholder="e.g. home decor, healthy recipes" required>
            <div class="form-text">Enter a keyword to get Pinterest-optimized suggestions.</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-danger btn-lg">
              <i class="fa-brands fa-pinterest me-2"></i>Get Suggestions
            </button>
          </div>
        </div>
      </div>

      <!-- Copy All -->
      <div id="copyAllSection" class="mt-3 d-none">
        <button id="copyAllBtn" class="btn btn-outline-secondary w-100">
          <i class="fa-solid fa-copy me-2"></i>Copy All Keywords
        </button>
      </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">Fetching suggestions...</span>
          </div>
          <p class="fw-semibold mb-0">Fetching Pinterest keyword suggestions…</p>
        </div>
      </div>

      <!-- Results Chips -->
      <div id="resultsSection" class="d-none">
        <div class="card shadow-sm border-0">
          <div class="card-header bg-danger text-white fw-semibold d-flex justify-content-between align-items-center">
            <span><i class="fa-solid fa-tags me-2"></i>Keyword Suggestions</span>
            <span id="kwCount" class="badge bg-light text-dark"></span>
          </div>
          <div class="card-body p-4">
            <p class="small text-muted mb-3">Volume indicators: <span class="badge bg-success me-1">High</span><span class="badge bg-warning text-dark me-1">Medium</span><span class="badge bg-secondary">Low</span></p>
            <div id="chipsContainer" class="d-flex flex-wrap gap-2"></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-brands fa-pinterest fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Pinterest keyword chips will appear here after the search.</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 copyAllSection = document.getElementById('copyAllSection');
  const copyAllBtn     = document.getElementById('copyAllBtn');
  const chipsContainer = document.getElementById('chipsContainer');

  let allKeywords = [];

  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');
    copyAllSection.classList.add('d-none');
  }

  function volumeClass(volume) {
    if (!volume) return 'bg-secondary';
    const v = String(volume).toLowerCase();
    if (v === 'high')   return 'bg-success';
    if (v === 'medium') return 'bg-warning text-dark';
    return 'bg-secondary';
  }

  function buildChips(keywords) {
    chipsContainer.innerHTML = '';
    allKeywords = [];
    keywords.forEach(kw => {
      const text   = typeof kw === 'string' ? kw : kw.keyword;
      const vol    = typeof kw === 'string' ? '' : kw.volume;
      allKeywords.push(text);

      const chip = document.createElement('span');
      chip.className = `badge ${volumeClass(vol)} fs-6 fw-normal px-3 py-2 user-select-all`;
      chip.style.cursor = 'pointer';
      chip.title = 'Click to copy';
      chip.textContent = text;
      chip.addEventListener('click', () => {
        navigator.clipboard.writeText(text).then(() => {
          const orig = chip.className;
          chip.className = chip.className.replace(/bg-\S+/, 'bg-primary');
          setTimeout(() => { chip.className = orig; }, 1000);
        });
      });
      chipsContainer.appendChild(chip);
    });
  }

  copyAllBtn.addEventListener('click', () => {
    navigator.clipboard.writeText(allKeywords.join(', ')).then(() => {
      copyAllBtn.innerHTML = '<i class="fa-solid fa-check text-success me-2"></i>Copied!';
      setTimeout(() => {
        copyAllBtn.innerHTML = '<i class="fa-solid fa-copy me-2"></i>Copy All Keywords';
      }, 2000);
    });
  });

  submitBtn.addEventListener('click', async () => {
    const keyword = document.getElementById('keyword').value.trim();
    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');
    copyAllSection.classList.add('d-none');
    submitBtn.disabled = true;

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

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

      const keywords = data.keywords || [];
      document.getElementById('kwCount').textContent = keywords.length + ' keywords';
      buildChips(keywords);

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