import { buildNavbar } from './portal-navbar.js';
import { getPortalThemeCSS } from './portal-theme.js';
import { buildDecisionTimeline, DECISION_TIMELINE_CSS } from './decision-timeline-builder.js';
function escapeHtml(s) {
    return s
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}
const CATEGORY_COLORS = {
    architecture: '#7c3aed',
    stack: '#2563eb',
    ux: '#16a34a',
    business: '#ea580c',
    process: '#6b7280',
};
function buildPieSlicesSvg(data) {
    const total = data.reduce((s, d) => s + d.value, 0);
    if (total === 0) {
        return '';
    }
    const CX = 80;
    const CY = 80;
    const R = 70;
    const W = 220;
    const H = 160;
    let startAngle = -Math.PI / 2;
    const slices = [];
    const legends = [];
    data.forEach((item, idx) => {
        const sweep = (item.value / total) * 2 * Math.PI;
        const endAngle = startAngle + sweep;
        const x1 = CX + R * Math.cos(startAngle);
        const y1 = CY + R * Math.sin(startAngle);
        const x2 = CX + R * Math.cos(endAngle);
        const y2 = CY + R * Math.sin(endAngle);
        const largeArc = sweep > Math.PI ? 1 : 0;
        const path = `M${CX},${CY} L${x1.toFixed(1)},${y1.toFixed(1)} A${R},${R} 0 ${largeArc},1 ${x2.toFixed(1)},${y2.toFixed(1)} Z`;
        slices.push(`<path d="${path}" fill="${item.color}" stroke="white" stroke-width="2"><title>${escapeHtml(item.label)}: ${item.value}</title></path>`);
        const legendY = 20 + idx * 18;
        legends.push(`<rect x="${W - 100}" y="${legendY - 8}" width="10" height="10" fill="${item.color}"/>` +
            `<text x="${W - 86}" y="${legendY}" font-size="10" fill="#374151">${escapeHtml(item.label)} (${item.value})</text>`);
        startAngle = endAngle;
    });
    return `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="max-width:220px;height:auto">
  ${slices.join('\n  ')}
  ${legends.join('\n  ')}
</svg>`;
}
function buildStatsSection(decisions) {
    const byCategory = new Map();
    const byDecidedBy = { human: 0, ai: 0, both: 0 };
    for (const d of decisions) {
        byCategory.set(d.category, (byCategory.get(d.category) ?? 0) + 1);
        if (d.decidedBy in byDecidedBy) {
            byDecidedBy[d.decidedBy]++;
        }
    }
    const pieData = [...byCategory.entries()].map(([cat, val]) => ({
        label: cat,
        value: val,
        color: CATEGORY_COLORS[cat],
    }));
    const pieSvg = buildPieSlicesSvg(pieData);
    return `<section class="planu-card section-card">
    <h2>Decision Statistics</h2>
    <div class="stats-layout">
      <div class="stats-pie">
        <h3 class="stats-subtitle">By Category</h3>
        ${pieSvg}
      </div>
      <div class="stats-counts">
        <h3 class="stats-subtitle">Total: ${decisions.length}</h3>
        <div class="decidedby-grid">
          <div class="stat-box">
            <span class="stat-num">${byDecidedBy.human}</span>
            <span class="stat-lbl">Human</span>
          </div>
          <div class="stat-box">
            <span class="stat-num">${byDecidedBy.ai}</span>
            <span class="stat-lbl">AI</span>
          </div>
          <div class="stat-box">
            <span class="stat-num">${byDecidedBy.both}</span>
            <span class="stat-lbl">Both</span>
          </div>
        </div>
      </div>
    </div>
  </section>`;
}
function buildSupersededSection(decisions) {
    const superseded = decisions.filter((d) => d.status === 'superseded');
    if (superseded.length === 0) {
        return '';
    }
    const rows = superseded
        .map((d) => `<tr>
      <td>${escapeHtml(d.id)}</td>
      <td class="text-strike">${escapeHtml(d.what)}</td>
      <td>${escapeHtml(d.why)}</td>
      <td>${escapeHtml(d.date)}</td>
    </tr>`)
        .join('\n');
    return `<section class="planu-card section-card">
    <h2>Superseded Decisions</h2>
    <table class="simple-table">
      <thead><tr><th>ID</th><th>Decision</th><th>Reason</th><th>Date</th></tr></thead>
      <tbody>${rows}</tbody>
    </table>
  </section>`;
}
function buildPageCSS() {
    return `
  body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px 48px; background: var(--planu-bg); color: var(--planu-text); }
  .page-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
  .page-subtitle { color: #6b7280; margin: 0 0 24px; font-size: 0.95rem; }
  .section-card { margin-bottom: 24px; }
  h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 16px; color: var(--planu-primary); }
  h3.stats-subtitle { font-size: 0.95rem; font-weight: 600; color: #374151; margin: 0 0 12px; }
  .stats-layout { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
  .stats-pie { flex: 1; min-width: 200px; }
  .stats-counts { flex: 1; min-width: 150px; }
  .decidedby-grid { display: flex; gap: 12px; }
  .stat-box { text-align: center; padding: 10px 16px; background: #f3f4f6; border-radius: 8px; }
  .stat-num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--planu-primary); }
  .stat-lbl { font-size: 0.78rem; color: #6b7280; }
  .simple-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
  .simple-table th { background: #f3f4f6; padding: 8px 10px; text-align: left; border-bottom: 2px solid var(--planu-border); }
  .simple-table td { padding: 8px 10px; border-bottom: 1px solid var(--planu-border); }
  .text-strike { text-decoration: line-through; color: #9ca3af; }
  .empty-state { text-align: center; padding: 64px 24px; color: #6b7280; }
  .empty-state h3 { font-size: 1.2rem; }`;
}
/**
 * Generate the decisions.html portal page.
 */
export function generateDecisionPage(decisions) {
    const navbar = buildNavbar('decisions', '');
    const themeCSS = getPortalThemeCSS();
    const pageCSS = buildPageCSS();
    const bodyContent = decisions.length === 0
        ? `<div class="empty-state"><h3>No decisions recorded yet.</h3><p>Use <code>log_decision</code> to capture architectural decisions.</p></div>`
        : `${buildStatsSection(decisions)}
  <section class="planu-card section-card">
    <h2>Decision Timeline</h2>
    ${buildDecisionTimeline(decisions)}
  </section>
  ${buildSupersededSection(decisions)}`;
    return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Decisions — Planu Portal</title>
  <style>${themeCSS}${pageCSS}${DECISION_TIMELINE_CSS}</style>
</head>
<body>
  ${navbar}
  <main>
    <h1 class="page-title">🏛️ Decision Log</h1>
    <p class="page-subtitle">Architectural and strategic decisions timeline.</p>
    ${bodyContent}
  </main>
</body>
</html>`;
}
//# sourceMappingURL=decision-page.js.map