import { renderProgressBar, renderStatusBadge } from './html-templates.js';
function renderSummaryCards(specs, metrics) {
    const done = specs.filter((s) => s.status === 'done').length;
    const inProgress = specs.filter((s) => s.status === 'implementing').length;
    const draft = specs.filter((s) => s.status === 'draft').length;
    return `<div class="summary-cards">
  <div class="card card-total"><h3>Total Specs</h3><p>${String(metrics.totalSpecs)}</p></div>
  <div class="card card-done"><h3>Done</h3><p>${String(done)}</p></div>
  <div class="card card-progress"><h3>In Progress</h3><p>${String(inProgress)}</p></div>
  <div class="card card-draft"><h3>Draft</h3><p>${String(draft)}</p></div>
  <div class="card card-tools"><h3>Total Tools</h3><p>${String(metrics.totalTools)}</p></div>
</div>`;
}
function renderSpecsTable(specs) {
    if (specs.length === 0) {
        return '<p class="empty">No specs found.</p>';
    }
    const rows = specs
        .map((spec) => {
        const searchable = `${spec.id} ${spec.title}`.toLowerCase();
        return `  <tr data-searchable="${searchable}">
    <td>${spec.id}</td>
    <td><a href="specs/${spec.slug}.html">${spec.title}</a></td>
    <td>${renderStatusBadge(spec.status)}</td>
    <td>${spec.category}</td>
    <td>${renderProgressBar(spec.criteriaDone, spec.criteriaTotal)}</td>
    <td>${spec.type}</td>
  </tr>`;
    })
        .join('\n');
    return `<table class="specs-table">
<thead>
  <tr>
    <th>ID</th><th>Title</th><th>Status</th><th>Category</th><th>Progress</th><th>Type</th>
  </tr>
</thead>
<tbody>
${rows}
</tbody>
</table>`;
}
function renderMetricsSection(metrics) {
    const locBars = Object.entries(metrics.locByLayer)
        .map(([layer, loc]) => {
        return `  <div class="bar-row">
    <span class="bar-label">${layer}</span>
    <div class="bar" style="width:${String(loc)}px"></div>
    <span class="bar-value">${String(loc)}</span>
  </div>`;
    })
        .join('\n');
    const specTypes = Object.entries(metrics.specsByStatus)
        .map(([status, count]) => `${status}: ${String(count)}`)
        .join(', ');
    return `<div class="metrics-section">
  <h2>Metrics</h2>
  <div class="loc-chart">
    <h3>Lines of Code by Layer</h3>
${locBars}
  </div>
  <div class="test-count">
    <h3>Tests</h3>
    <p>${String(metrics.testCount)}</p>
  </div>
  <div class="specs-by-type">
    <h3>Specs by Status</h3>
    <div class="mermaid">pie title Specs by Status
${Object.entries(metrics.specsByStatus)
        .map(([s, c]) => `  "${s}" : ${String(c)}`)
        .join('\n')}
    </div>
    <noscript><p>${specTypes}</p></noscript>
  </div>
</div>`;
}
export function renderDashboard(specs, metrics) {
    return `<div class="dashboard">
${renderSummaryCards(specs, metrics)}
<h2>Specifications</h2>
${renderSpecsTable(specs)}
${renderMetricsSection(metrics)}
</div>`;
}
//# sourceMappingURL=dashboard-renderer.js.map