<% if (typeof run !== 'undefined') { %>
  <%# ——— SINGLE RUN REVIEW ——— %>
  <div class="page-header">
    <div class="page-header-left">
      <h1><%= project.name %> — Review</h1>
      <p class="subtitle">Run: <%= run.id %></p>
    </div>
    <div class="page-header-right">
      <a href="/review?project=<%= project.id %>" class="btn">&larr; Back to Overview</a>
    </div>
  </div>

  <%# Run Summary %>
  <div class="card">
    <h3>Run Summary</h3>
    <table class="table">
      <tr><td>Status</td><td>
        <% if (run.result.success === true) { %><span class="badge badge-success">Passed</span>
        <% } else if (run.result.success === false) { %><span class="badge badge-danger">Failed</span>
        <% } else { %><span class="badge badge-warning">In Progress</span><% } %>
      </td></tr>
      <tr><td>Duration</td><td><%= run.result.duration || '—' %></td></tr>
      <tr><td>Test Suite</td><td><%= run.result.test || '—' %></td></tr>
      <tr><td>Timestamp</td><td><%= run.result.timestamp ? new Date(run.result.timestamp).toLocaleString() : '—' %></td></tr>
      <tr><td>Failures</td><td><%= Array.isArray(run.result.failedTests) ? run.result.failedTests.length : 0 %></td></tr>
    </table>
  </div>

  <%# Test Results %>
  <div class="card">
    <h3>Test Results</h3>
    <% if (Array.isArray(run.result.passedTests) && run.result.passedTests.length > 0) { %>
      <h4>Passed (<%= run.result.passedTests.length %>)</h4>
      <ul>
        <% run.result.passedTests.forEach(function(t) { %>
          <li style="color: var(--success)"><%= typeof t === 'string' ? t : (t.name || t.test || JSON.stringify(t)) %></li>
        <% }); %>
      </ul>
    <% } %>
    <% if (Array.isArray(run.result.failedTests) && run.result.failedTests.length > 0) { %>
      <h4>Failed (<%= run.result.failedTests.length %>)</h4>
      <% run.result.failedTests.forEach(function(ft) { %>
        <div class="alert alert-error" style="margin-bottom: 8px;">
          <strong><%= typeof ft === 'string' ? ft : (ft.name || ft.test || 'Unknown') %></strong>
          <% if (typeof ft === 'object' && ft.error) { %>
            <pre style="margin: 4px 0 0; font-size: 13px;"><%= ft.error %></pre>
          <% } %>
        </div>
      <% }); %>
    <% } %>
    <% if ((!run.result.passedTests || run.result.passedTests.length === 0) && (!run.result.failedTests || run.result.failedTests.length === 0)) { %>
      <p>No test results available.</p>
    <% } %>
  </div>

  <%# Healing Report %>
  <% if (run.healing) { %>
  <div class="card">
    <h3>Self-Healing Report</h3>
    <table class="table">
      <tr><td>Total Healed</td><td><%= run.healing.totalHealed || 0 %></td></tr>
      <tr><td>Total Attempts</td><td><%= run.healing.totalAttempts || 0 %></td></tr>
      <tr><td>Remaining Failures</td><td><%= run.healing.remainingFailures || 0 %></td></tr>
    </table>
    <% if (Array.isArray(run.healing.healedTests) && run.healing.healedTests.length > 0) { %>
      <h4>Healed Tests</h4>
      <% run.healing.healedTests.forEach(function(ht) { %>
        <div class="card" style="margin-bottom: 8px; padding: 12px;">
          <strong><%= ht.test || ht.name || 'Unknown' %></strong>
          <% if (ht.originalSelector) { %><p>Original: <code><%= ht.originalSelector %></code></p><% } %>
          <% if (ht.newSelector) { %><p>Healed: <code><%= ht.newSelector %></code></p><% } %>
          <% if (ht.status) { %><span class="badge badge-success"><%= ht.status %></span><% } %>
        </div>
      <% }); %>
    <% } %>
  </div>
  <% } %>

  <%# Final Report %>
  <% if (run.report) { %>
  <div class="card">
    <h3>Final Test Report</h3>
    <div class="markdown-content"><%= run.report %></div>
  </div>
  <% } %>

  <%# Console Output %>
  <% if (run.result.output) { %>
  <div class="card">
    <h3>Console Output</h3>
    <pre class="output-terminal"><%= run.result.output %></pre>
  </div>
  <% } %>

<% } else { %>
  <%# ——— PROJECT REVIEW OVERVIEW ——— %>
  <div class="page-header">
    <div class="page-header-left">
      <h1><%= project.name %> — AI Review</h1>
      <p class="subtitle">Read-only overview of AI-generated artifacts</p>
    </div>
    <div class="page-header-right">
      <a href="/stories?project=<%= project.id %>" class="btn">View Stories</a>
      <a href="/runs?project=<%= project.id %>" class="btn">View Runs</a>
    </div>
  </div>

  <%# AI Activity Summary %>
  <div class="stats-row">
    <div class="stat-card"><span class="stat-number"><%= stats.stories %></span><span class="stat-label">Stories</span></div>
    <div class="stat-card"><span class="stat-number"><%= stats.plans %></span><span class="stat-label">Test Plans</span></div>
    <div class="stat-card"><span class="stat-number"><%= stats.specs %></span><span class="stat-label">Test Specs</span></div>
    <div class="stat-card"><span class="stat-number"><%= stats.runs %></span><span class="stat-label">Runs</span></div>
    <div class="stat-card"><span class="stat-number"><%= stats.passed %></span><span class="stat-label">Passed</span></div>
    <div class="stat-card"><span class="stat-number"><%= stats.failed %></span><span class="stat-label">Failed</span></div>
    <div class="stat-card"><span class="stat-number"><%= stats.healed %></span><span class="stat-label">Healed</span></div>
  </div>

  <%# Latest Run %>
  <% if (latestRun) { %>
  <div class="card">
    <h3>Latest Run</h3>
    <table class="table">
      <tr>
        <td>Status</td>
        <td>
          <% if (latestRun.success === true) { %><span class="badge badge-success">Passed</span>
          <% } else if (latestRun.success === false) { %><span class="badge badge-danger">Failed</span>
          <% } else { %><span class="badge badge-warning">Pending</span><% } %>
        </td>
      </tr>
      <tr><td>Test Suite</td><td><%= latestRun.testName %></td></tr>
      <tr><td>Duration</td><td><%= latestRun.duration || '—' %></td></tr>
      <tr><td>Passed / Failed / Healed</td><td><%= latestRun.passedCount %> / <%= latestRun.failedCount %> / <%= latestRun.healedCount %></td></tr>
      <tr><td>Timestamp</td><td><%= latestRun.timestamp %></td></tr>
      <tr><td><a href="/review/<%= latestRun.id %>?project=<%= project.id %>" class="btn">View Details</a></td></tr>
    </table>
  </div>
  <% } else { %>
  <div class="alert alert-info">No runs executed yet.</div>
  <% } %>

  <%# Defects Found %>
  <% if (defects.length > 0) { %>
  <div class="card">
    <h3>Defects Found (<%= defects.length %>)</h3>
    <table class="table">
      <thead><tr><th>Test</th><th>Run</th><th>Error</th></tr></thead>
      <tbody>
        <% defects.forEach(function(d) { %>
          <tr>
            <td><%= d.testName %></td>
            <td><a href="/review/<%= d.runId %>?project=<%= project.id %>"><%= d.runTimestamp %></a></td>
            <td><code><%= d.error ? d.error.slice(0, 120) : '—' %></code></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
  <% } else { %>
  <div class="card">
    <h3>Defects Found</h3>
    <div class="alert alert-info">No defects found.</div>
  </div>
  <% } %>

  <%# AI Timeline %>
  <% if (runs.length > 0) { %>
  <div class="card">
    <h3>AI Activity Timeline</h3>
    <table class="table">
      <thead><tr><th>Run</th><th>Timestamp</th><th>Suite</th><th>Status</th><th>Duration</th><th>Passed</th><th>Failed</th><th>Healed</th></tr></thead>
      <tbody>
        <% runs.forEach(function(r) { %>
          <tr>
            <td><a href="/review/<%= r.id %>?project=<%= project.id %>"><%= r.id.slice(0, 20) %>&hellip;</a></td>
            <td><%= r.timestamp %></td>
            <td><%= r.testName %></td>
            <td>
              <% if (r.success === true) { %><span class="badge badge-success">Passed</span>
              <% } else if (r.success === false) { %><span class="badge badge-danger">Failed</span>
              <% } else { %><span class="badge badge-warning">Pending</span><% } %>
            </td>
            <td><%= r.duration || '—' %></td>
            <td><%= r.passedCount %></td>
            <td><%= r.failedCount %></td>
            <td><%= r.healedCount %></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
  <% } %>

<% } %>

<style>
.stat-card { cursor: default; }
.table a { color: var(--brand); text-decoration: none; }
.table a:hover { text-decoration: underline; }
</style>
