// engine/dashboard/templates-kanban.ts — Kanban board + metrics HTML templates (SPEC-122)
import { VALID_STATUSES } from './kanban-logic.js';
import { escapeHtml } from './templates-layout.js';
/** Map status to a human-readable label */
function statusLabel(status) {
    const labels = {
        draft: 'Draft',
        review: 'Review',
        approved: 'Approved',
        implementing: 'Implementing',
        done: 'Done',
    };
    return labels[status] ?? status;
}
/** Render a single spec card inside a kanban column */
function renderKanbanCard(spec) {
    return `<div class="kanban-card" draggable="true" data-spec-id="${escapeHtml(spec.id)}" data-status="${escapeHtml(spec.status)}">
    <div class="kanban-card-id">${escapeHtml(spec.id)}</div>
    <div class="kanban-card-title">${escapeHtml(spec.title)}</div>
    <div class="kanban-card-progress">${spec.progressPercent}%</div>
  </div>`;
}
/** Render the 5-column kanban board with HTML5 Drag API attributes */
export function renderKanbanBoard(specsByStatus, wipLimits) {
    const columns = VALID_STATUSES.map((status) => {
        const specs = specsByStatus[status] ?? [];
        const limit = wipLimits?.[status];
        const isOver = limit !== undefined && specs.length > limit;
        const limitLabel = limit !== undefined ? ` (${specs.length}/${limit})` : ` (${specs.length})`;
        const overClass = isOver ? ' kanban-column-over' : '';
        const cards = specs.map(renderKanbanCard).join('\n');
        const emptyState = specs.length === 0 ? '<div class="kanban-empty">No specs in this column</div>' : '';
        return `<div class="kanban-column${overClass}" data-column="${escapeHtml(status)}" ondragover="event.preventDefault()" ondrop="handleDrop(event, '${escapeHtml(status)}')">
      <div class="kanban-column-header">
        <span class="kanban-column-title">${statusLabel(status)}${escapeHtml(limitLabel)}</span>
      </div>
      <div class="kanban-column-body">${cards}${emptyState}</div>
    </div>`;
    });
    return `<div class="kanban-board">${columns.join('\n')}</div>`;
}
/** Get the health score color based on value ranges */
function healthColor(score) {
    if (score <= 40) {
        return '#ef4444';
    }
    if (score <= 70) {
        return '#f59e0b';
    }
    return '#22c55e';
}
/** Render the metrics panel with health score */
export function renderMetricsPanel(metrics, healthScore) {
    const color = healthColor(healthScore.overall);
    return `<div class="metrics-panel">
    <div class="health-score" style="color:${color}">
      <div class="health-score-value">${healthScore.overall}</div>
      <div class="health-score-label">Health Score</div>
      <div class="health-tooltip">
        <div class="health-tooltip-row"><span>Completion</span><span>${healthScore.components.completion} <span class="health-tooltip-weight">(30%)</span></span></div>
        <div class="health-tooltip-row"><span>Coverage</span><span>${healthScore.components.coverage} <span class="health-tooltip-weight">(30%)</span></span></div>
        <div class="health-tooltip-row"><span>Drift</span><span>${healthScore.components.drift} <span class="health-tooltip-weight">(20%)</span></span></div>
        <div class="health-tooltip-row"><span>Velocity</span><span>${healthScore.components.velocity} <span class="health-tooltip-weight">(20%)</span></span></div>
      </div>
    </div>
    <div class="metrics-grid">
      <div class="metric-item">
        <div class="metric-item-value">${metrics.completionRate}%</div>
        <div class="metric-item-label">Completion</div>
      </div>
      <div class="metric-item">
        <div class="metric-item-value">${metrics.criteriaCoverage}%</div>
        <div class="metric-item-label">Coverage</div>
      </div>
      <div class="metric-item">
        <div class="metric-item-value">${metrics.velocity}</div>
        <div class="metric-item-label">Velocity (30d)</div>
      </div>
      <div class="metric-item">
        <div class="metric-item-value">${metrics.driftScore}</div>
        <div class="metric-item-label">Drift</div>
      </div>
    </div>
    <div class="health-components">
      <div class="health-component">
        <span>Completion</span><span>${healthScore.components.completion}</span>
      </div>
      <div class="health-component">
        <span>Coverage</span><span>${healthScore.components.coverage}</span>
      </div>
      <div class="health-component">
        <span>Drift</span><span>${healthScore.components.drift}</span>
      </div>
      <div class="health-component">
        <span>Velocity</span><span>${healthScore.components.velocity}</span>
      </div>
    </div>
  </div>`;
}
//# sourceMappingURL=templates-kanban.js.map