import { buildNavbar } from './portal-navbar.js';
import { getPortalThemeCSS } from './portal-theme.js';
function escapeHtml(s) {
    return s
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}
const TECH_ICONS = {
    typescript: '🔷',
    javascript: '🟡',
    python: '🐍',
    rust: '🦀',
    go: '🐹',
    java: '☕',
    ruby: '💎',
    php: '🐘',
    swift: '🍎',
    kotlin: '🟣',
    'c#': '🔵',
    elixir: '💧',
    next: '▲',
    nextjs: '▲',
    react: '⚛️',
    vue: '💚',
    angular: '🔴',
    svelte: '🔥',
    express: '🚂',
    fastapi: '⚡',
    django: '🟢',
    rails: '💎',
    laravel: '🔴',
    spring: '🌿',
    postgres: '🐘',
    postgresql: '🐘',
    mysql: '🐬',
    mongodb: '🍃',
    redis: '🔴',
    sqlite: '📦',
    prisma: '⬟',
    drizzle: '💧',
    pnpm: '📦',
    npm: '📦',
    yarn: '🧶',
    bun: '🐰',
    vite: '⚡',
    webpack: '📦',
    esbuild: '⚡',
    docker: '🐋',
    kubernetes: '☸️',
    node: '🟢',
};
function techIcon(name) {
    const key = name.toLowerCase();
    return TECH_ICONS[key] ?? '🔧';
}
function buildStackCards(knowledge) {
    const entries = [
        { key: 'language', label: 'Language', value: knowledge.language },
        { key: 'framework', label: 'Framework', value: knowledge.framework },
        { key: 'database', label: 'Database', value: knowledge.database },
        { key: 'orm', label: 'ORM', value: knowledge.orm },
        { key: 'packageManager', label: 'Package Manager', value: knowledge.packageManager },
    ];
    const buildToolName = knowledge.buildTool?.buildTool ?? null;
    if (buildToolName && buildToolName !== 'unknown') {
        entries.push({ key: 'buildTool', label: 'Build Tool', value: buildToolName });
    }
    const cards = entries
        .filter((e) => e.value !== null && e.value !== 'none' && e.value !== 'null')
        .map((e) => {
        const icon = techIcon(e.value);
        return `<div class="stack-card planu-card">
        <div class="stack-icon">${icon}</div>
        <div class="stack-info">
          <div class="stack-label">${escapeHtml(e.label)}</div>
          <div class="stack-value">${escapeHtml(e.value)}</div>
        </div>
      </div>`;
    })
        .join('\n');
    if (!cards) {
        return '<p class="empty-message">No stack information detected.</p>';
    }
    return `<div class="stack-grid">${cards}</div>`;
}
function buildLayersSection(knowledge) {
    const layers = knowledge.architecture.layers;
    if (layers.length === 0) {
        return '';
    }
    const boxes = layers
        .map((layer) => `<div class="layer-box">
        <div class="layer-name">${escapeHtml(layer.name)}</div>
        <div class="layer-resp">${escapeHtml(layer.responsibility)}</div>
        ${layer.directories.length > 0 ? `<div class="layer-dirs">${layer.directories.map((d) => `<code>${escapeHtml(d)}</code>`).join(' ')}</div>` : ''}
      </div>`)
        .join('\n    <div class="layer-arrow">↓</div>\n    ');
    return `<section class="planu-card section-card">
    <h2>Architecture Layers</h2>
    <div class="layers-stack">
      ${boxes}
    </div>
  </section>`;
}
function appTypeIcon(type) {
    const icons = {
        frontend: '🖥️',
        backend: '⚙️',
        mobile: '📱',
        ios: '🍎',
        android: '🤖',
        desktop: '💻',
        shared: '📦',
        worker: '⚡',
        docs: '📄',
    };
    return icons[type] ?? '📦';
}
function buildAppsSection(knowledge) {
    const { apps } = knowledge;
    if (apps.length === 0) {
        return '';
    }
    const cards = apps
        .map((app) => `<div class="app-card planu-card">
        <div class="app-header">
          <span class="app-icon">${appTypeIcon(app.type)}</span>
          <span class="app-name">${escapeHtml(app.name)}</span>
          <span class="app-type-badge">${escapeHtml(app.type)}</span>
        </div>
        <div class="app-details">
          <span>${escapeHtml(app.language)}</span>
          ${app.framework ? `<span class="sep">·</span><span>${escapeHtml(app.framework)}</span>` : ''}
          ${app.database ? `<span class="sep">·</span><span>DB: ${escapeHtml(app.database)}</span>` : ''}
        </div>
        ${app.path ? `<div class="app-path"><code>${escapeHtml(app.path)}</code></div>` : ''}
      </div>`)
        .join('\n');
    return `<section class="planu-card section-card">
    <h2>Applications</h2>
    <div class="apps-grid">${cards}</div>
  </section>`;
}
function buildConventionsSection(knowledge) {
    const entries = Object.entries(knowledge.conventions);
    if (entries.length === 0) {
        return '';
    }
    const rows = entries
        .map(([k, v]) => `<tr>
      <td class="conv-key">${escapeHtml(k)}</td>
      <td>${escapeHtml(v)}</td>
    </tr>`)
        .join('\n');
    return `<section class="planu-card section-card">
    <h2>Conventions</h2>
    <table class="simple-table">
      <thead><tr><th>Convention</th><th>Value</th></tr></thead>
      <tbody>${rows}</tbody>
    </table>
  </section>`;
}
function buildExternalServicesSection(knowledge) {
    const services = knowledge.externalServices;
    if (services.length === 0) {
        return '';
    }
    const items = services.map((s) => `<li class="service-item">🔌 ${escapeHtml(s)}</li>`).join('\n');
    return `<section class="planu-card section-card">
    <h2>External Services</h2>
    <ul class="services-list">${items}</ul>
  </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); }
  .stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .stack-card { display: flex; align-items: center; gap: 10px; padding: 12px; }
  .stack-icon { font-size: 1.8rem; }
  .stack-label { font-size: 0.75rem; color: #6b7280; }
  .stack-value { font-weight: 600; font-size: 0.9rem; }
  .layers-stack { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .layer-box { width: 100%; max-width: 560px; padding: 12px 16px; background: white; border: 1px solid var(--planu-border); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
  .layer-name { font-weight: 700; color: var(--planu-primary); margin-bottom: 2px; }
  .layer-resp { font-size: 0.84rem; color: #4b5563; }
  .layer-dirs { margin-top: 6px; font-size: 0.78rem; color: #6b7280; }
  .layer-dirs code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; margin-right: 4px; }
  .layer-arrow { font-size: 1.2rem; color: #9ca3af; }
  .apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .app-card { padding: 12px 14px; }
  .app-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .app-icon { font-size: 1.4rem; }
  .app-name { font-weight: 700; }
  .app-type-badge { font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; background: #f3f4f6; color: #374151; }
  .app-details { font-size: 0.82rem; color: #6b7280; }
  .sep { margin: 0 4px; color: #d1d5db; }
  .app-path { margin-top: 6px; font-size: 0.75rem; color: #9ca3af; }
  .app-path code { background: #f9fafb; padding: 1px 4px; border-radius: 3px; }
  .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); }
  .conv-key { font-weight: 600; color: var(--planu-primary); }
  .services-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
  .service-item { padding: 8px 12px; background: #f9fafb; border-radius: 6px; font-size: 0.86rem; }
  .empty-state { text-align: center; padding: 64px 24px; color: #6b7280; }
  .empty-message { color: #9ca3af; font-style: italic; }`;
}
/**
 * Generate the architecture.html portal page.
 */
export function generateArchitecturePage(knowledge) {
    const navbar = buildNavbar('architecture', '');
    const themeCSS = getPortalThemeCSS();
    const pageCSS = buildPageCSS();
    const hasContent = knowledge.language !== '' || knowledge.framework !== null || knowledge.apps.length > 0;
    const bodyContent = hasContent
        ? `<section class="planu-card section-card">
    <h2>Tech Stack</h2>
    ${buildStackCards(knowledge)}
  </section>
  ${buildLayersSection(knowledge)}
  ${buildAppsSection(knowledge)}
  ${buildConventionsSection(knowledge)}
  ${buildExternalServicesSection(knowledge)}`
        : `<div class="empty-state"><h3>No architecture data available</h3><p>Run <code>scan_project</code> to populate this page.</p></div>`;
    return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Architecture — Planu Portal</title>
  <style>${themeCSS}${pageCSS}</style>
</head>
<body>
  ${navbar}
  <main>
    <h1 class="page-title">🔧 Architecture</h1>
    <p class="page-subtitle">Tech stack, layers, apps, and conventions for this project.</p>
    ${bodyContent}
  </main>
</body>
</html>`;
}
//# sourceMappingURL=architecture-page.js.map