import { getPortalThemeCSS } from './portal-theme.js';
import { buildNavbar } from './portal-navbar.js';
import { buildGanttChart } from '../proposal/proposal-gantt-builder.js';
/**
 * Generate the full roadmap.html page for the Planu portal.
 * Returns an HTML string ready to write to disk.
 */
export function generateRoadmapPage(specs, ganttStartDate) {
    const navbar = buildNavbar('roadmap', '', ['roadmap', 'dashboard']);
    const ganttHtml = buildGanttSection(specs, ganttStartDate);
    const phaseSummary = buildPhaseSummary(specs);
    const milestonesHtml = buildMilestonesSection(specs);
    return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Roadmap — Planu</title>
<style>
${getPortalThemeCSS()}
${ROADMAP_CSS}
</style>
</head>
<body>
${navbar}
<main class="roadmap-main">
  <h1 class="roadmap-title">🗺️ Roadmap</h1>
  <section class="planu-card roadmap-section">
    <h2>Gantt Chart</h2>
    ${ganttHtml}
  </section>
  <section class="planu-card roadmap-section">
    <h2>Phase Summary</h2>
    ${phaseSummary}
  </section>
  <section class="planu-card roadmap-section">
    <h2>Milestones</h2>
    ${milestonesHtml}
  </section>
</main>
</body>
</html>`;
}
// --- Gantt section ---
function buildGanttSection(specs, startDate) {
    if (specs.length === 0) {
        return '<p class="roadmap-empty">No specs to display.</p>';
    }
    const gantt = buildGanttChart(specs, undefined, startDate);
    if (!gantt) {
        return '<p class="roadmap-empty">Could not generate Gantt chart.</p>';
    }
    return gantt;
}
// --- Phase summary section ---
function buildPhaseSummary(specs) {
    if (specs.length === 0) {
        return '<p class="roadmap-empty">No specs available.</p>';
    }
    const tagMap = new Map();
    for (const spec of specs) {
        const tags = spec.tags.length > 0 ? spec.tags : ['untagged'];
        const primaryTag = tags[0] ?? 'untagged';
        if (!tagMap.has(primaryTag)) {
            tagMap.set(primaryTag, []);
        }
        const tagSpecs = tagMap.get(primaryTag);
        if (tagSpecs) {
            tagSpecs.push(spec);
        }
    }
    const cards = Array.from(tagMap.entries()).map(([tag, tagSpecs]) => {
        const doneCount = tagSpecs.filter((s) => s.status === 'done').length;
        const total = tagSpecs.length;
        const pct = total > 0 ? Math.round((doneCount / total) * 100) : 0;
        return `<div class="phase-card planu-card">
  <div class="phase-tag">${escapeHtml(tag)}</div>
  <div class="phase-progress-bar">
    <div class="phase-progress-fill" style="width:${pct}%"></div>
  </div>
  <div class="phase-stats">${doneCount} / ${total} done (${pct}%)</div>
</div>`;
    });
    return `<div class="phase-grid">${cards.join('\n')}</div>`;
}
// --- Milestones section ---
function buildMilestonesSection(specs) {
    if (specs.length === 0) {
        return '<p class="roadmap-empty">No milestones found.</p>';
    }
    const sorted = [...specs].sort((a, b) => {
        const da = a.actuals?.completedAt ?? a.updatedAt;
        const db = b.actuals?.completedAt ?? b.updatedAt;
        return da.localeCompare(db);
    });
    const items = sorted.map((spec) => {
        const isDone = spec.status === 'done';
        const date = spec.actuals?.completedAt ?? spec.updatedAt;
        const dateLabel = date ? date.slice(0, 10) : '—';
        const dotClass = isDone ? 'milestone-dot-done' : 'milestone-dot-pending';
        const depLabels = spec.dependencies.length > 0
            ? `<div class="milestone-deps">⤵ ${spec.dependencies.map(escapeHtml).join(', ')}</div>`
            : '';
        return `<div class="milestone-item">
  <div class="milestone-dot ${dotClass}"></div>
  <div class="milestone-body">
    <div class="milestone-header">
      <span class="milestone-id">${escapeHtml(spec.id)}</span>
      <span class="milestone-title">${escapeHtml(spec.title)}</span>
      <span class="milestone-date">${dateLabel}</span>
    </div>
    ${depLabels}
  </div>
</div>`;
    });
    return `<div class="milestone-timeline">${items.join('\n')}</div>`;
}
// --- Helpers ---
function escapeHtml(str) {
    return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}
const ROADMAP_CSS = `
  .roadmap-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 40px;
  }
  .roadmap-title { font-size: 1.5rem; color: var(--planu-primary); margin-bottom: 20px; }
  .roadmap-empty { color: #9ca3af; font-style: italic; padding: 12px 0; }
  .roadmap-section { margin-bottom: 24px; }
  .roadmap-section h2 {
    font-size: 1.05rem;
    color: var(--planu-secondary);
    margin-bottom: 14px;
    border-bottom: 1px solid var(--planu-border);
    padding-bottom: 6px;
  }
  /* Gantt reuse */
  .gantt-container { overflow-x: auto; }
  .gantt-header { display: flex; margin-bottom: 4px; }
  .gantt-header-label { width: 160px; flex-shrink: 0; font-size: 0.75rem; color: #9ca3af; }
  .gantt-header-weeks { display: flex; flex: 1; gap: 2px; }
  .gantt-week { flex: 1; font-size: 0.7rem; color: #9ca3af; text-align: center; }
  .gantt-grid { display: flex; flex-direction: column; gap: 4px; }
  .gantt-row { display: flex; align-items: center; height: 28px; }
  .gantt-label { width: 160px; flex-shrink: 0; font-size: 0.78rem; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gantt-track { position: relative; flex: 1; height: 20px; background: #f3f4f6; border-radius: 4px; }
  .gantt-bar {
    position: absolute;
    height: 100%;
    border-radius: 4px;
    color: white;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
  }
  /* Phase cards */
  .phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }
  .phase-card { padding: 12px 14px; }
  .phase-tag { font-weight: 600; font-size: 0.85rem; color: var(--planu-primary); margin-bottom: 8px; }
  .phase-progress-bar {
    background: #e9ecef;
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 6px;
  }
  .phase-progress-fill { background: var(--planu-accent); height: 100%; border-radius: 99px; }
  .phase-stats { font-size: 0.75rem; color: #6b7280; }
  /* Milestones */
  .milestone-timeline { display: flex; flex-direction: column; gap: 0; }
  .milestone-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
  .milestone-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
  }
  .milestone-dot-done { background: var(--planu-success); }
  .milestone-dot-pending { background: #e9ecef; border: 2px solid #9ca3af; }
  .milestone-body { flex: 1; }
  .milestone-header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .milestone-id { font-size: 0.72rem; color: #9ca3af; flex-shrink: 0; }
  .milestone-title { font-size: 0.85rem; color: #2d3436; flex: 1; }
  .milestone-date { font-size: 0.72rem; color: #6b7280; flex-shrink: 0; }
  .milestone-deps { font-size: 0.72rem; color: #9ca3af; margin-top: 2px; }
  @media print {
    .roadmap-main { max-width: 100%; }
    .gantt-container { overflow-x: visible; }
  }
`;
//# sourceMappingURL=roadmap-page.js.map