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

export function buildViewerMeta(item) {
  var parts = [];
  if (item.category_name) parts.push(item.category_name);
  if (item.subject) parts.push(item.subject);
  if (item.author_name) parts.push('by ' + item.author_name);
  if (item.created_at) parts.push(new Date(item.created_at).toLocaleDateString());
  return parts.join(' | ');
}

export function renderPresentationCard(item) {
  var slideCount = (item.body || '').split(/\n---\n/).length;
  var slideButtonStyle = 'padding:11px 28px;font-size:14px;border-radius:10px;border:none;' +
    'cursor:pointer;background:var(--blue);color:white;font-weight:600;';

  return '<div class="card" style="text-align:center;padding:32px 24px;">' +
    '<div style="font-size:42px;margin-bottom:12px;">📊</div>' +
    '<h3 style="margin:0 0 4px;color:var(--g800);">' + esc(item.title) + '</h3>' +
    '<p style="font-size:13px;color:var(--g500);margin:0 0 20px;">' +
      slideCount + ' slides' + (item.subject ? ' · ' + esc(item.subject) : '') +
    '</p>' +
    '<button id="btn-lh-view-slides" class="btn-primary" style="' + slideButtonStyle + '">' +
      '<i class="fas fa-play-circle"></i> View Slides' +
    '</button>' +
  '</div>';
}

export function renderProgressList(progress) {
  return (progress || []).map(function(p) {
    var pct = p.total > 0 ? Math.round((p.score / p.total) * 100) : 0;
    var date = new Date(p.completed_at).toLocaleDateString();
    var color = pct >= 70 ? 'var(--green)' : 'var(--amber)';

    return '<div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--g100);">' +
      '<span>' + date + '</span>' +
      '<span style="font-weight:600;color:' + color + ';">' +
        p.score + '/' + p.total + ' (' + pct + '%)' +
      '</span>' +
    '</div>';
  }).join('');
}