const STATUS_COLORS = {
    draft: { bg: '#e5e7eb', fg: '#374151' },
    review: { bg: '#dbeafe', fg: '#1d4ed8' },
    approved: { bg: '#d1fae5', fg: '#065f46' },
    implementing: { bg: '#fef3c7', fg: '#92400e' },
    done: { bg: '#d1fae5', fg: '#065f46' },
};
export function buildSpecHeaderSection(data) {
    const defaultColors = { bg: '#e5e7eb', fg: '#374151' };
    const colors = STATUS_COLORS[data.status] ?? defaultColors;
    const date = new Date(data.generatedAt).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    });
    return `<div class="header">
  <h1>Planu — Spec Report</h1>
  <h2>${escapeHtml(data.specId)}: ${escapeHtml(data.title)}</h2>
  <div class="meta">
    <span class="badge" style="background:${colors.bg};color:${colors.fg}">${escapeHtml(data.status)}</span>
    &nbsp;&middot;&nbsp; Generated ${date}
  </div>
</div>`;
}
export function buildSpecMetricsSection(data) {
    return `<div class="section">
  <h2>Metrics</h2>
  <div class="metric-grid">
    ${metricCard(String(data.devHours), 'Dev Hours')}
    ${metricCard(String(data.reviewHours), 'Review Hours')}
    ${metricCard(`$${String(data.totalCostUsd)}`, 'Total Cost')}
    ${metricCard(data.risk, 'Risk Level')}
    ${metricCard(data.difficulty, 'Difficulty')}
  </div>
</div>`;
}
export function buildSpecDependenciesSection(data) {
    if (data.dependencies.length === 0 && data.blockedBy.length === 0) {
        return '';
    }
    const deps = data.dependencies.length > 0
        ? `<p><strong>Depends on:</strong> ${data.dependencies.map(escapeHtml).join(', ')}</p>`
        : '';
    const blocked = data.blockedBy.length > 0
        ? `<p><strong>Blocked by:</strong> ${data.blockedBy.map(escapeHtml).join(', ')}</p>`
        : '';
    return `<div class="section">
  <h2>Dependencies</h2>
  ${deps}${blocked}
</div>`;
}
export function buildSpecTagsSection(data) {
    if (data.tags.length === 0) {
        return '';
    }
    const badges = data.tags
        .map((t) => `<span class="badge badge-draft">${escapeHtml(t)}</span>`)
        .join(' ');
    return `<div class="section">
  <h2>Tags</h2>
  <p>${badges}</p>
</div>`;
}
export function buildEffortDistributionSvg(devHours, reviewHours) {
    const total = devHours + reviewHours;
    if (total === 0) {
        return '';
    }
    const devPct = Math.round((devHours / total) * 100);
    const reviewPct = 100 - devPct;
    const devWidth = Math.round((devHours / total) * 300);
    const reviewWidth = 300 - devWidth;
    return `<div class="section">
  <h2>Effort Distribution</h2>
  <svg width="320" height="50" viewBox="0 0 320 50">
    <rect x="10" y="10" width="${String(devWidth)}" height="30" rx="4" fill="#4F46E5"/>
    <rect x="${String(10 + devWidth)}" y="10" width="${String(reviewWidth)}" height="30" rx="4" fill="#818cf8"/>
    <text x="${String(10 + devWidth / 2)}" y="30" text-anchor="middle" fill="white" font-size="11" font-weight="600">Dev ${String(devPct)}%</text>
    <text x="${String(10 + devWidth + reviewWidth / 2)}" y="30" text-anchor="middle" fill="white" font-size="11" font-weight="600">Review ${String(reviewPct)}%</text>
  </svg>
</div>`;
}
export function buildAffectedFilesSection(files) {
    if (files.length === 0) {
        return '';
    }
    const rows = files.map((f) => `<li><code>${escapeHtml(f)}</code></li>`).join('\n    ');
    return `<div class="section">
  <h2>Affected Files</h2>
  <ul>${rows}</ul>
</div>`;
}
export function buildArchDecisionsSection(decisions) {
    if (decisions.length === 0) {
        return '';
    }
    const items = decisions.map((d) => `<li>${escapeHtml(d)}</li>`).join('\n    ');
    return `<div class="section">
  <h2>Architectural Decisions</h2>
  <ul>${items}</ul>
</div>`;
}
export function buildSpecFooterSection() {
    return `<div class="footer">
  Generated by <strong>Planu</strong> &mdash; Spec Driven Development
</div>`;
}
// ── SPEC-139: Rich data section builders ──────────────────────────────────────
const AC_STATUS_CONFIG = {
    met: { icon: '●', color: '#059669', label: 'Met' },
    pending: { icon: '○', color: '#d97706', label: 'Pending' },
    drift: { icon: '▲', color: '#dc2626', label: 'Drift' },
};
export function buildAcceptanceCriteriaSection(criteria) {
    if (criteria.length === 0) {
        return '';
    }
    const rows = criteria
        .map((c) => {
        const defaultAcConfig = { icon: '○', color: '#d97706', label: 'Pending' };
        const cfg = AC_STATUS_CONFIG[c.status] ?? defaultAcConfig;
        return `<tr>
      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;">${escapeHtml(c.criterion)}</td>
      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;white-space:nowrap;">
        <span style="color:${cfg.color};font-weight:600;">${cfg.icon} ${escapeHtml(cfg.label)}</span>
      </td>
    </tr>`;
    })
        .join('\n');
    return `<div class="section">
  <h2>Acceptance Criteria</h2>
  <table style="width:100%;border-collapse:collapse;font-size:14px;">
    <thead>
      <tr style="background:#f9fafb;">
        <th style="padding:10px 12px;text-align:left;border-bottom:2px solid #e5e7eb;font-weight:600;">Criterion</th>
        <th style="padding:10px 12px;text-align:left;border-bottom:2px solid #e5e7eb;font-weight:600;">Status</th>
      </tr>
    </thead>
    <tbody>${rows}</tbody>
  </table>
</div>`;
}
export function buildActualsComparisonSection(actuals, devHours, reviewHours, totalCostUsd) {
    const devVariance = actuals.devHours - devHours;
    const costVariance = actuals.totalCostUsd - totalCostUsd;
    const devVariancePct = devHours > 0 ? Math.round((Math.abs(devVariance) / devHours) * 100) : 0;
    const costVariancePct = totalCostUsd > 0 ? Math.round((Math.abs(costVariance) / totalCostUsd) * 100) : 0;
    const devSign = devVariance >= 0 ? '+' : '-';
    const costSign = costVariance >= 0 ? '+' : '-';
    const devColor = devVariance > 0 ? '#dc2626' : '#059669';
    const costColor = costVariance > 0 ? '#dc2626' : '#059669';
    const completedDate = actuals.completedAt
        ? new Date(actuals.completedAt).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
        })
        : '—';
    const notesRow = actuals.notes
        ? `<p style="margin-top:12px;font-size:13px;color:#6b7280;"><strong>Notes:</strong> ${escapeHtml(actuals.notes)}</p>`
        : '';
    return `<div class="section">
  <h2>Estimated vs Actual</h2>
  <p style="font-size:13px;color:#6b7280;margin-bottom:12px;">Completed: ${escapeHtml(completedDate)}</p>
  <table style="width:100%;border-collapse:collapse;font-size:14px;">
    <thead>
      <tr style="background:#f9fafb;">
        <th style="padding:10px 12px;text-align:left;border-bottom:2px solid #e5e7eb;font-weight:600;">Metric</th>
        <th style="padding:10px 12px;text-align:right;border-bottom:2px solid #e5e7eb;font-weight:600;">Estimated</th>
        <th style="padding:10px 12px;text-align:right;border-bottom:2px solid #e5e7eb;font-weight:600;">Actual</th>
        <th style="padding:10px 12px;text-align:right;border-bottom:2px solid #e5e7eb;font-weight:600;">Variance</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;">Dev Hours</td>
        <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;text-align:right;">${String(devHours)}h</td>
        <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;text-align:right;">${String(actuals.devHours)}h</td>
        <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;text-align:right;color:${devColor};font-weight:600;">${devSign}${String(devVariancePct)}%</td>
      </tr>
      <tr>
        <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;">Review Hours</td>
        <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;text-align:right;">${String(reviewHours)}h</td>
        <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;text-align:right;">${String(actuals.reviewHours)}h</td>
        <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;text-align:right;color:#6b7280;">—</td>
      </tr>
      <tr>
        <td style="padding:8px 12px;">Total Cost</td>
        <td style="padding:8px 12px;text-align:right;">$${String(totalCostUsd)}</td>
        <td style="padding:8px 12px;text-align:right;">$${String(actuals.totalCostUsd)}</td>
        <td style="padding:8px 12px;text-align:right;color:${costColor};font-weight:600;">${costSign}${String(costVariancePct)}%</td>
      </tr>
    </tbody>
  </table>
  ${notesRow}
</div>`;
}
export function buildImpactAnalysisSection(impact) {
    const breakingBadge = impact.breakingChanges
        ? `<span style="background:#fee2e2;color:#dc2626;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;">BREAKING CHANGES</span>`
        : `<span style="background:#d1fae5;color:#059669;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;">No Breaking Changes</span>`;
    const modulesHtml = impact.affectedModules.length > 0
        ? `<p><strong>Affected Modules:</strong> ${impact.affectedModules.map(escapeHtml).join(', ')}</p>`
        : '';
    const filesHtml = impact.affectedFiles.length > 0
        ? `<p><strong>Affected Files (${String(impact.affectedFiles.length)}):</strong></p>
  <ul style="font-size:13px;margin:4px 0 8px 0;">
    ${impact.affectedFiles.map((f) => `<li><code>${escapeHtml(f)}</code></li>`).join('\n    ')}
  </ul>`
        : '';
    const rollbackHtml = impact.rollbackPlan
        ? `<p><strong>Rollback Plan:</strong> ${escapeHtml(impact.rollbackPlan)}</p>`
        : '';
    return `<div class="section">
  <h2>Impact Analysis</h2>
  <p>${breakingBadge}</p>
  ${modulesHtml}
  ${filesHtml}
  ${rollbackHtml}
</div>`;
}
const RISK_LEVEL_COLORS = {
    low: { bg: '#d1fae5', fg: '#065f46' },
    medium: { bg: '#fef3c7', fg: '#92400e' },
    high: { bg: '#fee2e2', fg: '#991b1b' },
    critical: { bg: '#fce7f3', fg: '#9d174d' },
};
export function buildRiskScorecard(risks) {
    if (risks.length === 0) {
        return '';
    }
    const rows = risks
        .map((r) => {
        const defaultColors = { bg: '#e5e7eb', fg: '#374151' };
        const colors = RISK_LEVEL_COLORS[r.level.toLowerCase()] ?? defaultColors;
        return `<tr>
      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;font-weight:500;">${escapeHtml(r.dimension)}</td>
      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;">
        <span style="background:${colors.bg};color:${colors.fg};padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;">${escapeHtml(r.level)}</span>
      </td>
      <td style="padding:8px 12px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#6b7280;">${escapeHtml(r.detail)}</td>
    </tr>`;
    })
        .join('\n');
    return `<div class="section">
  <h2>Risk Scorecard</h2>
  <table style="width:100%;border-collapse:collapse;font-size:14px;">
    <thead>
      <tr style="background:#f9fafb;">
        <th style="padding:10px 12px;text-align:left;border-bottom:2px solid #e5e7eb;font-weight:600;">Dimension</th>
        <th style="padding:10px 12px;text-align:left;border-bottom:2px solid #e5e7eb;font-weight:600;">Level</th>
        <th style="padding:10px 12px;text-align:left;border-bottom:2px solid #e5e7eb;font-weight:600;">Detail</th>
      </tr>
    </thead>
    <tbody>${rows}</tbody>
  </table>
</div>`;
}
export function buildLivingSpecSection(living) {
    const pct = Math.min(100, Math.max(0, living.completionPercent));
    const barColor = pct >= 80 ? '#059669' : pct >= 50 ? '#d97706' : '#dc2626';
    const driftBadge = living.driftDetected
        ? `<span style="background:#fee2e2;color:#dc2626;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;margin-left:8px;">DRIFT DETECTED</span>`
        : `<span style="background:#d1fae5;color:#059669;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;margin-left:8px;">In Sync</span>`;
    return `<div class="section">
  <h2>Living Spec Status</h2>
  <p><strong>Completion:</strong> ${String(pct)}%${driftBadge}</p>
  <div style="background:#e5e7eb;border-radius:8px;height:12px;width:100%;margin:8px 0;">
    <div style="background:${barColor};border-radius:8px;height:12px;width:${String(pct)}%;transition:width 0.3s;"></div>
  </div>
  <p style="font-size:13px;color:#6b7280;">Changed files tracked: ${String(living.changedFileCount)}</p>
</div>`;
}
export function buildEstimationReasoningSection(reasoning) {
    if (!reasoning) {
        return '';
    }
    return `<div class="section">
  <h2>Estimation Reasoning</h2>
  <p style="font-size:14px;color:#374151;line-height:1.6;">${escapeHtml(reasoning)}</p>
</div>`;
}
export function buildSimilarSpecsSection(similarSpecs) {
    if (similarSpecs.length === 0) {
        return '';
    }
    const badges = similarSpecs
        .map((s) => `<span class="badge badge-draft" style="margin-right:4px;">${escapeHtml(s)}</span>`)
        .join('');
    return `<div class="section">
  <h2>Similar Specs</h2>
  <p>${badges}</p>
</div>`;
}
// ── Internal helpers ──────────────────────────────────────────────────────────
function metricCard(value, label) {
    return `<div class="metric-card">
      <div class="metric-value">${escapeHtml(value)}</div>
      <div class="metric-label">${escapeHtml(label)}</div>
    </div>`;
}
function escapeHtml(str) {
    return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}
//# sourceMappingURL=spec-section-builders.js.map