import { renderProgressBar, renderStatusBadge } from './html-templates.js';
import { renderMarkdown } from './markdown-renderer.js';
export function renderSpecPage(spec, specContent, technicalContent) {
    const tagsHtml = spec.tags.length > 0
        ? spec.tags.map((t) => `<span class="tag">${t}</span>`).join(' ')
        : '<span class="tag">none</span>';
    return `<div class="spec-page">
  <header class="spec-header">
    <h1>${spec.id}: ${spec.title}</h1>
    ${renderStatusBadge(spec.status)}
    ${renderProgressBar(spec.criteriaDone, spec.criteriaTotal)}
  </header>
  <div class="spec-layout">
    <div class="spec-content">
      <div class="tabs">
        <div class="tab active" id="tab-story">
          <h2>User Story</h2>
          ${renderMarkdown(specContent)}
        </div>
        <div class="tab" id="tab-technical">
          <h2>Technical Sheet</h2>
          ${renderMarkdown(technicalContent)}
        </div>
      </div>
    </div>
    <aside class="spec-sidebar">
      <h3>Metadata</h3>
      <dl>
        <dt>Type</dt><dd>${spec.type}</dd>
        <dt>Category</dt><dd>${spec.category}</dd>
        <dt>Tags</dt><dd>${tagsHtml}</dd>
        <dt>Criteria</dt><dd>${String(spec.criteriaDone)} / ${String(spec.criteriaTotal)}</dd>
      </dl>
    </aside>
  </div>
</div>`;
}
function groupByCategory(specs) {
    const groups = {};
    for (const spec of specs) {
        const cat = spec.category || '_general';
        const list = groups[cat];
        if (list) {
            list.push(spec);
        }
        else {
            groups[cat] = [spec];
        }
    }
    return groups;
}
export function renderSpecIndex(specs) {
    if (specs.length === 0) {
        return '<div class="spec-index"><p class="empty">No specs found.</p></div>';
    }
    const grouped = groupByCategory(specs);
    const sections = Object.entries(grouped)
        .map(([category, categorySpecs]) => {
        const cards = categorySpecs
            .map((spec) => {
            const searchable = `${spec.id} ${spec.title}`.toLowerCase();
            return `    <div class="spec-card" data-searchable="${searchable}">
      <a href="${spec.slug}.html">
        <strong>${spec.id}</strong>: ${spec.title}
        ${renderStatusBadge(spec.status)}
        ${renderProgressBar(spec.criteriaDone, spec.criteriaTotal)}
      </a>
    </div>`;
        })
            .join('\n');
        return `  <section class="spec-category">
    <h2>${category}</h2>
${cards}
  </section>`;
    })
        .join('\n');
    return `<div class="spec-index">
${sections}
</div>`;
}
//# sourceMappingURL=spec-renderer.js.map