<% layout='layouts/main' %>
  <% title='Dashboard' %>

    <div class="hero">
      <h1>AI QA Pipeline </h1>
      <p>User Story → Test Plan → Test Generation → Execution → Self-Healing → Report</p>
      <% if (project) { %>
        <p class="hero-project">
          Project: <strong>
            <%= project.name %>
          </strong>
          <% if (stats.lastRunStatus==='passed' ) { %><span class="badge badge-pass" style="margin-left:0.5rem;">Last
              Run ✅</span>
            <% } %>
              <% if (stats.lastRunStatus==='failed' ) { %><span class="badge badge-fail"
                  style="margin-left:0.5rem;">Last Run ❌</span>
                <% } %>
        </p>
        <% } %>
    </div>

    <% if (!project) { %>
      <!-- ─── No project state ─── -->
      <div class="empty-state">
        <div style="font-size:3rem;margin-bottom:1rem;">🚀</div>
        <h3>Dashboard prêt — aucun projet configuré</h3>
        <p>Ce dashboard est une template. Pointez-le vers votre dossier de test pour voir vos données.</p>
        <a href="/projects/add" class="btn btn-primary" style="margin-top:0.5rem;">Configurer un projet</a>
      </div>

      <% } else { %>

        <!-- ─── Real stats from project folder ─── -->
        <div class="stats-row">
          <div class="stat-card">
            <div class="stat-number">
              <%= stats.stories %>
            </div>
            <div class="stat-label">User Stories</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">
              <%= stats.plans %>
            </div>
            <div class="stat-label">Test Plans</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">
              <%= stats.specs %>
            </div>
            <div class="stat-label">Test Specs</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">
              <%= stats.runs %>
            </div>
            <div class="stat-label">Executions</div>
          </div>
          <div class="stat-card">
            <div
              class="stat-number <%= stats.passRate >= 80 ? 'text-success' : stats.passRate >= 50 ? 'text-warning' : stats.runs > 0 ? 'text-danger' : '' %>">
              <%= stats.runs> 0 ? stats.passRate + '%' : '—' %>
            </div>
            <div class="stat-label">Pass Rate</div>
          </div>
        </div>

        <!-- ─── Pipeline flow ─── -->
        <div class="pipeline-flow">
          <h2>Pipeline</h2>
          <div class="flow-steps">
            <div class="flow-step <%= stats.stories > 0 ? 'step-active' : '' %>">
              <div class="step-icon">📝</div>
              <div class="step-name">User Story</div>
              <div class="step-desc">
                <%= stats.stories %> story<%= stats.stories !==1 ? 's' : '' %>
              </div>
            </div>
            <div class="flow-arrow">→</div>
            <div class="flow-step <%= stats.plans > 0 ? 'step-active' : '' %>">
              <div class="step-icon">📋</div>
              <div class="step-name">Plan</div>
              <div class="step-desc">
                <%= stats.plans %> plan<%= stats.plans !==1 ? 's' : '' %>
              </div>
            </div>
            <div class="flow-arrow">→</div>
            <div class="flow-step <%= stats.specs > 0 ? 'step-active' : '' %>">
              <div class="step-icon">🧪</div>
              <div class="step-name">Generate</div>
              <div class="step-desc">
                <%= stats.specs %> spec<%= stats.specs !==1 ? 's' : '' %>
              </div>
            </div>
            <div class="flow-arrow">→</div>
            <div class="flow-step <%= stats.runs > 0 ? 'step-active' : '' %>">
              <div class="step-icon">⚡</div>
              <div class="step-name">Execute</div>
              <div class="step-desc">
                <%= stats.runs %> run<%= stats.runs !==1 ? 's' : '' %>
              </div>
            </div>
            <div class="flow-arrow">→</div>
            <div class="flow-step">
              <div class="step-icon">🛠️</div>
              <div class="step-name">Heal</div>
              <div class="step-desc">Auto-fix failures</div>
            </div>
            <div class="flow-arrow">→</div>
            <div class="flow-step">
              <div class="step-icon">📊</div>
              <div class="step-name">Report</div>
              <div class="step-desc">Comprehensive results</div>
            </div>
          </div>
        </div>

        <!-- ─── Quick links ─── -->
        <div class="quick-links-row">
          <a href="/stories?project=<%= project.id %>" class="quick-link-card">
            <div class="ql-icon">📝</div>
            <div class="ql-label">Stories <span class="badge badge-project">
                <%= stats.stories %>
              </span></div>
          </a>
          <a href="/runs?project=<%= project.id %>" class="quick-link-card">
            <div class="ql-icon">⚡</div>
            <div class="ql-label">Runs <span class="badge badge-project">
                <%= stats.runs %>
              </span></div>
          </a>
          <a href="/analytics?project=<%= project.id %>" class="quick-link-card">
            <div class="ql-icon">📊</div>
            <div class="ql-label">Analytics</div>
          </a>
          <a href="/projects/<%= project.id %>" class="quick-link-card">
            <div class="ql-icon">⚙️</div>
            <div class="ql-label">Pipeline</div>
          </a>
        </div>

        <% if (stats.stories===0) { %>
          <div class="alert alert-info" style="margin-top:1.5rem;">
            💡 <strong>Aucune user story trouvée</strong> dans <code><%= project.path %>/user-story/</code>.
            Ajoutez un fichier <code>.md</code> pour commencer.
          </div>
          <% } %>

            <% } %>

              <style>
                .hero-project {
                  color: var(--text-muted);
                  font-size: 0.95rem;
                  margin-top: 0.5rem;
                }

                /* Active pipeline step */
                .step-active {
                  border-color: var(--primary);
                  background: rgba(99, 102, 241, 0.08);
                }

                .step-active .step-name {
                  color: var(--primary);
                }

                /* Quick links row */
                .quick-links-row {
                  display: flex;
                  gap: 1rem;
                  flex-wrap: wrap;
                  margin: 2rem 0;
                }

                .quick-link-card {
                  flex: 1;
                  min-width: 140px;
                  background: var(--surface);
                  border: 1px solid var(--border);
                  border-radius: var(--radius);
                  padding: 1.25rem 1rem;
                  text-align: center;
                  text-decoration: none;
                  color: var(--text);
                  transition: border-color 0.2s, transform 0.15s;
                }

                .quick-link-card:hover {
                  border-color: var(--primary);
                  transform: translateY(-2px);
                }

                .ql-icon {
                  font-size: 1.75rem;
                  margin-bottom: 0.4rem;
                }

                .ql-label {
                  font-size: 0.9rem;
                  font-weight: 600;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 0.4rem;
                }

                /* Info alert */
                .alert-info {
                  background: #1e1b4b;
                  border: 1px solid #3730a3;
                  color: #a5b4fc;
                }

                @media (max-width: 768px) {
                  .stats-row {
                    flex-wrap: wrap;
                  }

                  .stat-card {
                    flex: 1 1 calc(50% - 0.5rem);
                    min-width: unset;
                  }

                  .quick-links-row {
                    gap: 0.75rem;
                  }

                  .quick-link-card {
                    min-width: calc(50% - 0.375rem);
                  }

                  .flow-steps {
                    flex-direction: column;
                    align-items: flex-start;
                  }

                  .flow-arrow {
                    transform: rotate(90deg);
                  }
                }
              </style>