// engine/dashboard/templates-project.ts — Project and spec HTML renderers.
import { renderLayout, escapeHtml, markdownToHtml } from './templates-layout.js';
/** Render a single spec card HTML fragment */
function renderSpecCard(spec) {
    const hasProgress = spec.criteriaTotal > 0;
    const progressBar = hasProgress
        ? `<div class="progress-bar-wrap">
        <div class="progress-bar-fill" style="width:${spec.progressPercent}%"></div>
       </div>
       <div class="progress-text">
         <span class="criteria-text">${spec.criteriaImplemented}/${spec.criteriaTotal} criterios</span>
         <span class="progress-pct">${spec.progressPercent}%</span>
       </div>`
        : `<div style="font-size:0.75rem;color:var(--text-muted)">Sin datos de progreso</div>`;
    return `<a href="/spec/${encodeURIComponent(spec.id.split('-')[0] ?? spec.id)}/${encodeURIComponent(spec.id)}"
     class="spec-card status-${escapeHtml(spec.status)}" data-spec-id="${escapeHtml(spec.id)}">
    <div class="spec-id" style="color:var(--status-${escapeHtml(spec.status)})">${escapeHtml(spec.id)}</div>
    <div class="spec-title">${escapeHtml(spec.title)}</div>
    <span class="status-badge">${escapeHtml(spec.status)}</span>
    ${progressBar}
  </a>`;
}
/** Render the usage stats panel */
function renderUsagePanel(usage) {
    if (!usage.isAvailable) {
        return `<div class="usage-panel">
      <h3>Uso</h3>
      <div style="color:var(--text-muted);font-size:0.85rem">Sin datos de uso disponibles</div>
    </div>`;
    }
    const tierLabel = usage.tier.charAt(0).toUpperCase() + usage.tier.slice(1);
    const limitLabel = usage.dailyLimit !== null ? String(usage.dailyLimit) : '∞';
    const callsLabel = `${usage.callsToday} / ${limitLabel}`;
    let trialHtml = '';
    if (usage.trialDaysLeft !== null) {
        const isCritical = usage.trialDaysLeft <= 3;
        trialHtml = `<div class="trial-warning ${isCritical ? 'trial-critical' : ''}">
      Trial: ${usage.trialDaysLeft} día${usage.trialDaysLeft !== 1 ? 's' : ''} restante${usage.trialDaysLeft !== 1 ? 's' : ''}
    </div>`;
    }
    return `<div class="usage-panel">
    <h3>Uso</h3>
    <div class="usage-tier">${escapeHtml(tierLabel)}</div>
    <div style="font-size:0.82rem;color:var(--text-muted);margin-top:0.35rem">Llamadas hoy: ${escapeHtml(callsLabel)}</div>
    ${trialHtml}
  </div>`;
}
/** Render the health metrics panel */
function renderHealthPanel(metrics) {
    const estimLabel = metrics.totalEstimation !== null ? `${metrics.totalEstimation}h` : 'Sin estimación';
    return `<div>
    <h2 style="margin-bottom:1rem;font-size:1rem;color:var(--text-muted)">Project Health</h2>
    <div class="grid grid-2" style="gap:0.75rem">
      <div class="metric-card">
        <div class="metric-value">${metrics.totalSpecs}</div>
        <div class="metric-label">Total specs</div>
      </div>
      <div class="metric-card">
        <div class="metric-value">${metrics.donePercent}%</div>
        <div class="metric-label">Completado</div>
      </div>
      <div class="metric-card">
        <div class="metric-value">${metrics.pendingApproval}</div>
        <div class="metric-label">Pendientes aprobación</div>
      </div>
      <div class="metric-card">
        <div class="metric-value">${metrics.activeImplementation}</div>
        <div class="metric-label">En implementación</div>
      </div>
    </div>
    <div style="margin-top:0.75rem;font-size:0.82rem;color:var(--text-muted)">
      Estimación total: <strong>${escapeHtml(estimLabel)}</strong>
    </div>
  </div>`;
}
/** Render the home page — list of all projects */
export function renderHomePage(projects, usage) {
    const projectContent = projects.length === 0
        ? `<div class="empty-state">
          <h2>No hay proyectos registrados</h2>
          <p>Usa el tool <code>init_project</code> desde tu cliente MCP para crear tu primer proyecto.</p>
        </div>`
        : `<h2 style="margin-bottom:1rem">Proyectos</h2>
         <div class="project-list">
           ${projects
            .map((p) => `<a href="/project/${encodeURIComponent(p.id)}" class="project-card">
               <div class="project-info">
                 <h2>${escapeHtml(p.name)}</h2>
                 <div class="meta">${escapeHtml(p.stack)} &bull; ${escapeHtml(p.path)} &bull; Última actividad: ${escapeHtml(p.lastActivity)}</div>
               </div>
               <div class="project-stats">
                 <div>${p.specCount} specs</div>
                 <div class="done">${p.doneCount} done</div>
               </div>
             </a>`)
            .join('\n')}
         </div>`;
    const body = `${projectContent}${renderUsagePanel(usage)}`;
    return renderLayout('Inicio', body);
}
/** Render the project detail page — spec cards + health panel */
export function renderProjectPage(project, metrics, usage) {
    const specCards = project.specs.length === 0
        ? `<div class="empty-state"><p>Este proyecto no tiene specs aún.</p></div>`
        : project.specs.map(renderSpecCard).join('\n');
    const body = `
    <div class="breadcrumb">
      <a href="/">Inicio</a> &rsaquo; ${escapeHtml(project.name)}
    </div>
    <div style="display:grid;grid-template-columns:1fr 280px;gap:2rem;align-items:start">
      <div>
        <h2 style="margin-bottom:1.25rem">${escapeHtml(project.name)}</h2>
        <div id="spec-grid" class="spec-grid">${specCards}</div>
      </div>
      <div>
        ${renderHealthPanel(metrics)}
        ${renderUsagePanel(usage)}
      </div>
    </div>
  `;
    return renderLayout(project.name, body);
}
/** Render the spec detail page — HU, FICHA, PROGRESS tabs */
export function renderSpecPage(projectId, projectName, specId, hu, ficha, progress) {
    const huHtml = hu !== null ? markdownToHtml(hu) : '<p style="color:var(--text-muted)">HU.md no encontrado</p>';
    const fichaHtml = ficha !== null
        ? markdownToHtml(ficha)
        : '<p style="color:var(--text-muted)">FICHA-TECNICA.md no encontrado</p>';
    const progressHtml = progress !== null
        ? markdownToHtml(progress)
        : '<p style="color:var(--text-muted)">PROGRESS.md no encontrado</p>';
    const body = `
    <div class="breadcrumb">
      <a href="/">Inicio</a> &rsaquo;
      <a href="/project/${encodeURIComponent(projectId)}">${escapeHtml(projectName)}</a> &rsaquo;
      ${escapeHtml(specId)}
    </div>
    <div class="tabs">
      <button class="tab-btn active" data-tab="hu">Historia de Usuario</button>
      <button class="tab-btn" data-tab="ficha">Ficha Técnica</button>
      <button class="tab-btn" data-tab="progress">Progreso</button>
    </div>
    <div id="tab-hu" class="tab-content active">
      <div class="md-content card">${huHtml}</div>
    </div>
    <div id="tab-ficha" class="tab-content">
      <div class="md-content card">${fichaHtml}</div>
    </div>
    <div id="tab-progress" class="tab-content">
      <div class="md-content card">${progressHtml}</div>
    </div>
  `;
    return renderLayout(specId, body);
}
/** Render a 404 not found page */
export function render404Page(path) {
    return renderLayout('404', `<div class="empty-state">
      <h2>404 — Página no encontrada</h2>
      <p>La ruta <code>${escapeHtml(path)}</code> no existe.</p>
      <p style="margin-top:1rem"><a href="/">Volver al inicio</a></p>
    </div>`);
}
//# sourceMappingURL=templates-project.js.map