{% extends 'base.html' %}

{% block title %}SEO Content Idea Generator — 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">Content Idea Generator</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-lightbulb me-2 text-warning"></i>SEO Content Idea Generator</h1>
      <p class="text-muted">Generate content ideas, long-tail keywords, and question-based titles for any topic or niche.</p>
    </div>
  </div>

  <div class="row g-4">
    <!-- Form Column -->
    <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-keyboard me-2 text-primary"></i>Enter Your Topic</h5>

          <div class="mb-3">
            <label for="keyword" class="form-label fw-semibold">Keyword / Topic <span class="text-danger">*</span></label>
            <input type="text" id="keyword" class="form-control form-control-lg"
                   placeholder="e.g. intermittent fasting, python programming" required>
            <div class="form-text">Enter the main topic you want content ideas for.</div>
          </div>

          <div class="mb-4">
            <label for="niche" class="form-label fw-semibold">Niche / Industry <span class="text-muted small">(optional)</span></label>
            <input type="text" id="niche" class="form-control"
                   placeholder="e.g. health & wellness, software development">
            <div class="form-text">Narrow down ideas to a specific industry or niche.</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">An error occurred.</span>
          </div>

          <div class="d-grid">
            <button id="submitBtn" type="button" class="btn btn-primary btn-lg">
              <i class="fa-solid fa-wand-magic-sparkles me-2"></i>Generate Ideas
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Results Column -->
    <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">Generating...</span>
          </div>
          <p class="fw-semibold mb-0">Generating content ideas…</p>
          <p class="text-muted small">This may take a few seconds.</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsSection" class="d-none">
        <!-- Title Ideas -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-header bg-primary text-white fw-semibold">
            <i class="fa-solid fa-heading me-2"></i>Content Title Ideas
          </div>
          <div class="card-body p-3">
            <div id="titleIdeasGrid" class="row g-2"></div>
          </div>
        </div>

        <!-- Long-tail Keywords -->
        <div class="card shadow-sm border-0 mb-4">
          <div class="card-header bg-success text-white fw-semibold">
            <i class="fa-solid fa-tags me-2"></i>Long-tail Keywords
          </div>
          <div class="card-body p-3">
            <div id="longtailGrid" class="row g-2"></div>
          </div>
        </div>

        <!-- Question-based Titles -->
        <div class="card shadow-sm border-0">
          <div class="card-header bg-info text-white fw-semibold">
            <i class="fa-solid fa-circle-question me-2"></i>Question-based Titles
          </div>
          <div class="card-body p-3">
            <div id="questionsGrid" class="row g-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-solid fa-lightbulb fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Content ideas will appear here after you click <strong>Generate Ideas</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 buildCards(containerId, items, colorClass) {
    const container = document.getElementById(containerId);
    container.innerHTML = '';
    if (!items || items.length === 0) {
      container.innerHTML = '<div class="col"><p class="text-muted mb-0">No results found.</p></div>';
      return;
    }
    items.forEach(item => {
      const col = document.createElement('div');
      col.className = 'col-12';
      col.innerHTML = `
        <div class="card border-0 bg-light mb-1">
          <div class="card-body py-2 px-3 d-flex justify-content-between align-items-center">
            <span class="small">${escHtml(item)}</span>
            <button class="btn btn-sm btn-outline-secondary ms-2 copy-btn" data-text="${escHtml(item)}" title="Copy">
              <i class="fa-solid fa-copy"></i>
            </button>
          </div>
        </div>`;
      container.appendChild(col);
    });
  }

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

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

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

    if (!keyword) {
      showError('Please enter a keyword or topic.');
      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/content-ideas/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ keyword, niche })
      });

      const data = await resp.json();

      if (!resp.ok) {
        throw new Error(data.error || 'Server error ' + resp.status);
      }

      buildCards('titleIdeasGrid', data.title_ideas, 'primary');
      buildCards('longtailGrid', data.longtail_keywords, 'success');
      buildCards('questionsGrid', data.question_titles, 'info');

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