const COLUMNS = [
    { key: 'draft', label: 'Draft' },
    { key: 'review', label: 'Review' },
    { key: 'approved', label: 'Approved' },
    { key: 'implementing', label: 'Implementing' },
    { key: 'done', label: 'Done' },
];
const DIFFICULTY_CLASSES = {
    trivial: 'planu-badge-muted',
    low: 'planu-badge-info',
    medium: 'planu-badge-warning',
    high: 'planu-badge-danger',
    critical: 'planu-badge-danger',
};
const RISK_CLASSES = {
    low: 'planu-badge-success',
    medium: 'planu-badge-warning',
    high: 'planu-badge-danger',
    critical: 'planu-badge-danger',
};
/**
 * Build an HTML fragment (not a full page) containing a kanban board.
 * Suitable for embedding inside the portal index.html.
 * Returns empty string when specs is empty.
 */
export function buildKanbanView(specs) {
    if (specs.length === 0) {
        return '';
    }
    const byStatus = new Map();
    for (const col of COLUMNS) {
        byStatus.set(col.key, []);
    }
    for (const spec of specs) {
        const col = byStatus.get(spec.status);
        if (col) {
            col.push(spec);
        }
        else {
            // Unknown status goes to draft column
            byStatus.get('draft')?.push(spec);
        }
    }
    const columns = COLUMNS.map(({ key, label }) => {
        const colSpecs = byStatus.get(key) ?? [];
        const cards = colSpecs.map((s) => buildCard(s)).join('\n');
        return `<div class="kanban-col">
  <div class="kanban-col-header">
    <span class="kanban-col-title">${escapeHtml(label)}</span>
    <span class="planu-badge planu-badge-muted">${colSpecs.length}</span>
  </div>
  <div class="kanban-cards">
    ${cards || '<p class="kanban-empty">No specs</p>'}
  </div>
</div>`;
    });
    return `<style>${KANBAN_CSS}</style>
<div class="kanban-board" role="region" aria-label="Kanban board">
  ${columns.join('\n  ')}
</div>`;
}
function buildCard(spec) {
    const diffClass = DIFFICULTY_CLASSES[spec.difficulty] ?? 'planu-badge-muted';
    const riskClass = RISK_CLASSES[spec.risk] ?? 'planu-badge-muted';
    const tags = spec.tags
        .slice(0, 3)
        .map((t) => `<span class="kanban-tag">${escapeHtml(t)}</span>`)
        .join(' ');
    const shortTitle = spec.title.length > 50 ? spec.title.slice(0, 49) + '…' : spec.title;
    return `<div class="kanban-card">
  <div class="kanban-card-id">${escapeHtml(spec.id)}</div>
  <div class="kanban-card-title">${escapeHtml(shortTitle)}</div>
  <div class="kanban-card-badges">
    <span class="planu-badge ${diffClass}">${escapeHtml(String(spec.difficulty))}</span>
    <span class="planu-badge ${riskClass}">${escapeHtml(spec.risk)}</span>
  </div>
  ${tags ? `<div class="kanban-card-tags">${tags}</div>` : ''}
</div>`;
}
function escapeHtml(str) {
    return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}
const KANBAN_CSS = `
  .kanban-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    overflow-x: auto;
  }
  @media (max-width: 900px) {
    .kanban-board { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 500px) {
    .kanban-board { grid-template-columns: 1fr; }
  }
  .kanban-col {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 12px;
    min-height: 120px;
  }
  .kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .kanban-col-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1a1a2e;
  }
  .kanban-cards { display: flex; flex-direction: column; gap: 8px; }
  .kanban-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .kanban-card-id { font-size: 0.7rem; color: #9ca3af; margin-bottom: 4px; }
  .kanban-card-title { font-size: 0.82rem; color: #2d3436; margin-bottom: 6px; line-height: 1.3; }
  .kanban-card-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
  .kanban-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
  .kanban-tag {
    font-size: 0.68rem;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 1px 6px;
    border-radius: 99px;
  }
  .kanban-empty { font-size: 0.78rem; color: #9ca3af; text-align: center; padding: 12px 0; }
  @media print { .kanban-board { display: none; } }
`;
//# sourceMappingURL=kanban-view-builder.js.map