import { esc } from './sanitize.js';

export function renderCategoryPills(categories) {
  var html = '<button class="lh-cat-pill active" data-slug="all">All</button>';
  (categories || []).forEach(function(c) {
    html += '<button class="lh-cat-pill" data-slug="' + esc(c.slug) + '">' + esc(c.name) + '</button>';
  });
  return html;
}

export function renderFeed(items, feedEl) {
  if (!feedEl) return;
  if (!items || items.length === 0) {
    feedEl.innerHTML = '<div style="text-align:center;padding:40px;color:var(--g400);">' +
      '<i class="fas fa-book-open" style="font-size:32px;margin-bottom:12px;display:block;"></i>' +
      'No content yet. Check back soon!' +
    '</div>';
    return;
  }

  feedEl.innerHTML = items.map(renderFeedItem).join('');
}

export function renderSearchHeader(count, query) {
  return '<div style="padding:8px 0 12px;display:flex;align-items:center;justify-content:space-between;">' +
    '<span style="font-size:13px;color:var(--g600);">' +
      (count > 0
        ? '<strong>' + count + '</strong> result' + (count !== 1 ? 's' : '') + ' for <strong>"' + esc(query) + '"</strong>'
        : 'No results for <strong>"' + esc(query) + '"</strong>') +
    '</span>' +
    '<button id="lh-search-clear" style="background:none;border:none;font-size:12px;color:var(--blue);cursor:pointer;padding:0;">Clear search</button>' +
  '</div>';
}

export function renderEmptySearchMessage() {
  return '<div style="text-align:center;padding:40px;color:var(--g400);">' +
    '<i class="fas fa-search" style="font-size:32px;margin-bottom:12px;display:block;opacity:0.4;"></i>' +
    'Try different keywords or browse by category' +
  '</div>';
}

function renderFeedItem(item) {
  var typeIcon = item.content_type === 'quiz' ? 'fa-clipboard-question'
    : item.content_type === 'pearl' ? 'fa-gem'
    : item.content_type === 'presentation' ? 'fa-presentation-screen'
    : 'fa-file-alt';
  var typeColor = item.content_type === 'quiz' ? 'var(--amber)'
    : item.content_type === 'pearl' ? 'var(--purple, #8b5cf6)'
    : item.content_type === 'presentation' ? '#065f46'
    : 'var(--blue)';
  var quizBadge = item.question_count > 0 ? '<span class="lh-badge lh-badge-quiz"><i class="fas fa-clipboard-question"></i> ' + item.question_count + ' Q</span>' : '';
  var catBadge = item.category_name ? '<span class="lh-badge">' + esc(item.category_name) + '</span>' : '<span class="lh-badge" style="opacity:0.5;">Uncategorized</span>';
  var date = item.created_at ? new Date(item.created_at).toLocaleDateString() : '';

  return '<div class="lh-feed-item card" data-slug="' + esc(item.slug) + '">' +
    '<div class="lh-feed-item-header">' +
      '<i class="fas ' + typeIcon + '" style="color:' + typeColor + ';font-size:16px;"></i>' +
      '<div style="flex:1;min-width:0;">' +
        '<div class="lh-feed-title">' + esc(item.title) + '</div>' +
        '<div class="lh-feed-meta">' +
          (item.subject ? '<span>' + esc(item.subject) + '</span>' : '') +
          (item.author_name ? '<span>by ' + esc(item.author_name) + '</span>' : '') +
          '<span>' + date + '</span>' +
        '</div>' +
      '</div>' +
      '<div class="lh-feed-badges">' + catBadge + quizBadge + '</div>' +
    '</div>' +
  '</div>';
}
