function escapeHtml(s) {
    return s
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}
const CATEGORY_COLORS = {
    architecture: '#7c3aed', // purple
    stack: '#2563eb', // blue
    ux: '#16a34a', // green
    business: '#ea580c', // orange
    process: '#6b7280', // grey
};
const DECIDED_BY_BADGE = {
    human: 'badge-human',
    ai: 'badge-ai',
    both: 'badge-both',
};
const STATUS_CLASS = {
    active: 'status-active',
    superseded: 'status-superseded',
    under_review: 'status-review',
};
function formatDate(dateStr) {
    try {
        const d = new Date(dateStr);
        return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
    }
    catch {
        /* v8 ignore next 1 */
        return escapeHtml(dateStr);
    }
}
function buildDecisionCard(decision, side) {
    const color = CATEGORY_COLORS[decision.category];
    const decidedBadgeClass = DECIDED_BY_BADGE[decision.decidedBy] ?? 'badge-human';
    const statusClass = STATUS_CLASS[decision.status];
    const alternativesHtml = decision.alternatives.length > 0
        ? `<div class="decision-alternatives">
          <span class="alt-label">Alternatives considered:</span>
          ${decision.alternatives.map((a) => `<span class="alt-chip">${escapeHtml(a)}</span>`).join('')}
        </div>`
        : '';
    const specBadge = decision.specId
        ? `<span class="spec-badge">${escapeHtml(decision.specId)}</span>`
        : '';
    return `<div class="timeline-item side-${side}" data-status="${decision.status}">
      <div class="timeline-dot" style="background:${color}"></div>
      <div class="decision-card ${statusClass}" style="border-left:4px solid ${color}">
        <div class="card-header">
          <span class="decision-id">${escapeHtml(decision.id)}</span>
          <span class="planu-badge ${decidedBadgeClass}">${escapeHtml(decision.decidedBy)}</span>
          <span class="category-badge" style="background:${color}20;color:${color}">${escapeHtml(decision.category)}</span>
          ${specBadge}
          <span class="decision-date">${formatDate(decision.date)}</span>
        </div>
        <div class="decision-what ${decision.status === 'superseded' ? 'text-strikethrough' : ''}">${escapeHtml(decision.what)}</div>
        <div class="decision-why">${escapeHtml(decision.why)}</div>
        ${alternativesHtml}
      </div>
    </div>`;
}
export const DECISION_TIMELINE_CSS = `
  .decision-timeline { position: relative; padding: 16px 0; }
  .timeline-line {
    position: absolute; left: 50%; top: 0; bottom: 0;
    width: 2px; background: #e5e7eb; transform: translateX(-50%);
  }
  .timeline-item {
    position: relative; width: 50%; padding: 0 40px 24px;
    box-sizing: border-box;
  }
  .timeline-item.side-left { left: 0; text-align: right; }
  .timeline-item.side-right { left: 50%; text-align: left; }
  .timeline-dot {
    position: absolute; top: 16px;
    width: 12px; height: 12px;
    border-radius: 50%; border: 2px solid white;
    box-shadow: 0 0 0 2px #e5e7eb;
  }
  .side-left .timeline-dot { right: -6px; }
  .side-right .timeline-dot { left: -6px; }
  .decision-card {
    background: white; border-radius: 8px;
    padding: 12px 14px; font-size: 0.86rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .card-header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
  .side-left .card-header { justify-content: flex-end; }
  .decision-id { font-weight: 700; color: #374151; }
  .decision-date { color: #9ca3af; font-size: 0.78rem; margin-left: auto; }
  .decision-what { font-weight: 600; color: #1f2937; margin-bottom: 4px; }
  .decision-why { color: #6b7280; font-size: 0.82rem; margin-bottom: 6px; }
  .decision-alternatives { margin-top: 6px; }
  .alt-label { font-size: 0.75rem; color: #9ca3af; margin-right: 4px; }
  .alt-chip {
    display: inline-block; padding: 2px 6px; border-radius: 4px;
    background: #f3f4f6; color: #374151; font-size: 0.75rem; margin: 2px;
  }
  .category-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
  .spec-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; background: #dbeafe; color: #1d4ed8; }
  .badge-human { background: #d1fae5; color: #065f46; }
  .badge-ai { background: #ede9fe; color: #5b21b6; }
  .badge-both { background: #fef3c7; color: #92400e; }
  .status-superseded .decision-card { opacity: 0.65; }
  .text-strikethrough { text-decoration: line-through; color: #9ca3af; }
  .status-review .decision-card { background: #fffbeb; }
  @media (max-width: 640px) {
    .timeline-line { display: none; }
    .timeline-item, .timeline-item.side-right { left: 0; width: 100%; text-align: left; padding: 0 0 16px 16px; }
    .side-left .card-header { justify-content: flex-start; }
    .timeline-dot { left: 0 !important; right: auto !important; }
  }`;
/**
 * Build an alternating vertical timeline of decisions.
 * Returns empty string when no decisions.
 */
export function buildDecisionTimeline(decisions) {
    if (decisions.length === 0) {
        return '';
    }
    const sorted = [...decisions].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
    const items = sorted
        .map((d, i) => buildDecisionCard(d, i % 2 === 0 ? 'left' : 'right'))
        .join('\n  ');
    return `<div class="decision-timeline">
  <div class="timeline-line"></div>
  ${items}
</div>`;
}
//# sourceMappingURL=decision-timeline-builder.js.map