{% extends "base.html" %}
{% block title %}Dashboard - craft-dashboard{% endblock %}
{% macro kpi_delta(delta, testid) %}
{% if delta %}
<span class="{{ delta.css_class }}"
      data-testid="{{ testid }}"
      title="{{ delta.tooltip }}"
      data-tooltip="{{ delta.tooltip }}"
      tabindex="0">{{ delta.text }}</span>
{% endif %}
{% endmacro %}
{% block content %}
<div class="row" style="margin-bottom: 1.5rem;">
  <div class="col-12">
    <h2>Dashboard</h2>
  </div>
</div>

<!-- TOP KPI CARDS -->
<div class="kpi-deck" style="margin-bottom: 2rem;">
  <!-- PR Velocity & Response -->
  <div class="col-3">
    <div class="p-card kpi-card" id="kpi-velocity">
      <div class="kpi-card__header">
        <h3 class="p-card__title u-no-margin--bottom">Open PR age &amp; response</h3>
        <a href="/issues?state=open&issue_type=pull_request&sort=age_desc" class="p-link--soft kpi-card__nav-link">View more &rarr;</a>
      </div>
      <div class="kpi-card__subtitle">
        Average age of open pull requests and wait time for initial maintainer response
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">Age of PRs from contributors:</span>
        <div class="kpi-metric-values">
          <span class="kpi-main-val" data-testid="velocity-contributor-age">{{ view.velocity.contributor.display_age }}</span>
          {{ kpi_delta(view.velocity.contributor.delta, "velocity-contributor-delta") }}
          <a href="/issues?state=open&issue_type=pull_request&author_role=contributor&sort=age_desc"
             class="p-chip is-dense kpi-chip" title="View open contributor PRs">
            {{ view.velocity.contributor.count_label }}
          </a>
        </div>
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">Time to 1st response for contributors:</span>
        <div class="kpi-metric-values">
          <span class="kpi-main-val" data-testid="velocity-first-response">{{ view.velocity.first_response.display_age }}</span>
          {{ kpi_delta(view.velocity.first_response.delta, "velocity-first-response-delta") }}
          <a href="/issues?state=open&issue_type=pull_request&author_role=contributor&action=needs_review"
             class="p-chip is-dense kpi-chip" title="Contributor PRs awaiting first maintainer review">
            {{ view.velocity.first_response.count_label }}
          </a>
        </div>
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">Age of all PRs:</span>
        <div class="kpi-metric-values">
          <span class="kpi-main-val" data-testid="velocity-overall-age">{{ view.velocity.overall.display_age }}</span>
          {{ kpi_delta(view.velocity.overall.delta, "velocity-overall-delta") }}
          <a href="/issues?state=open&issue_type=pull_request&sort=age_desc"
             class="p-chip is-dense kpi-chip" title="View all open PRs">
            {{ view.velocity.overall.count_label }}
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Resolution Throughput -->
  <div class="col-3">
    <div class="p-card kpi-card" id="kpi-throughput">
      <div class="kpi-card__header">
        <h3 class="p-card__title u-no-margin--bottom">Resolution throughput</h3>
        <a href="/stats/trends" class="p-link--soft kpi-card__nav-link">View more &rarr;</a>
      </div>
      <div class="kpi-card__subtitle">
        Issues and pull requests resolved in the past 30 days and past year
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">Last 30 days:</span>
        <div class="kpi-metric-values">
          <span class="kpi-main-val" data-testid="throughput-total-30d">{{ view.throughput.total_30d }}</span>
          {{ kpi_delta(view.throughput.delta, "throughput-delta") }}
          <span class="kpi-sub-text">({{ view.throughput.issues_30d }} issues, {{ view.throughput.prs_30d }} PRs)</span>
        </div>
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">Last year:</span>
        <div class="kpi-metric-values">
          <span class="kpi-main-val" data-testid="throughput-total-365d">{{ view.throughput.total_365d }}</span>
          <span class="kpi-sub-text">({{ view.throughput.issues_365d }} issues, {{ view.throughput.prs_365d }} PRs)</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Untriaged Backlog -->
  <div class="col-3">
    <div class="p-card kpi-card" id="kpi-untriaged">
      <div class="kpi-card__header">
        <h3 class="p-card__title u-no-margin--bottom">Untriaged backlog</h3>
        <a href="/issues?state=open&action=needs_triage" class="p-link--soft kpi-card__nav-link">View more &rarr;</a>
      </div>
      <div class="kpi-card__subtitle">
        Open items needing maintainer triage
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">Issues:</span>
        <div class="kpi-metric-values">
          <a href="/issues?state=open&issue_type=issue&action=needs_triage"
             class="kpi-main-val" data-testid="untriaged-issues-count" title="Open untriaged issues">
            {{ view.untriaged.issues.count }}
          </a>
          <span class="kpi-sub-text">(<span class="{{ view.untriaged.issues.new_30d_css_class }}" data-testid="untriaged-issues-new">{{ view.untriaged.issues.new_30d_text }}</span> in 30d)</span>
        </div>
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">PRs:</span>
        <div class="kpi-metric-values">
          <a href="/issues?state=open&issue_type=pull_request&action=needs_review"
             class="kpi-main-val" data-testid="untriaged-prs-count" title="Open untriaged PRs">
            {{ view.untriaged.prs.count }}
          </a>
          <span class="kpi-sub-text">(<span class="{{ view.untriaged.prs.new_30d_css_class }}" data-testid="untriaged-prs-new">{{ view.untriaged.prs.new_30d_text }}</span> in 30d)</span>
        </div>
      </div>
    </div>
  </div>

  <!-- All-Time Volume -->
  <div class="col-3">
    <div class="p-card kpi-card" id="kpi-volume">
      <div class="kpi-card__header">
        <h3 class="p-card__title u-no-margin--bottom">All-time volume</h3>
        <a href="/stats/trends" class="p-link--soft kpi-card__nav-link">View more &rarr;</a>
      </div>
      <div class="kpi-card__subtitle">
        Cumulative open and closed work across all repositories
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">Issues:</span>
        <div class="kpi-metric-values">
          <span class="kpi-main-val" data-testid="volume-issues-open">{{ view.volume.issues.total }}</span>
          <span class="kpi-sub-text">(<span class="{{ view.volume.issues.net.css_class }}"
                                            data-testid="volume-issues-net"
                                            title="{{ view.volume.issues.net.tooltip }}"
                                            data-tooltip="{{ view.volume.issues.net.tooltip }}"
                                            tabindex="0">{{ view.volume.issues.net.text }}</span>) / {{ view.volume.issues.closed }} closed</span>
        </div>
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">PRs:</span>
        <div class="kpi-metric-values">
          <span class="kpi-main-val" data-testid="volume-prs-open">{{ view.volume.prs.total }}</span>
          <span class="kpi-sub-text">(<span class="{{ view.volume.prs.net.css_class }}"
                                            data-testid="volume-prs-net"
                                            title="{{ view.volume.prs.net.tooltip }}"
                                            data-tooltip="{{ view.volume.prs.net.tooltip }}"
                                            tabindex="0">{{ view.volume.prs.net.text }}</span>) / {{ view.volume.prs.closed }} closed</span>
        </div>
      </div>
      <div class="kpi-metric-row">
        <span class="kpi-metric-label">Combined Total:</span>
        <div class="kpi-metric-values">
          <span class="kpi-main-val" data-testid="volume-total">{{ view.volume.combined.total }}</span>
          <span class="kpi-sub-text">(<span class="{{ view.volume.combined.net.css_class }}"
                                            data-testid="volume-total-net"
                                            title="{{ view.volume.combined.net.tooltip }}"
                                            data-tooltip="{{ view.volume.combined.net.tooltip }}"
                                            tabindex="0">{{ view.volume.combined.net.text }}</span>) / {{ view.volume.combined.closed }} closed</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 2x2 OPERATIONAL SPOTLIGHTS -->
<div class="row" style="margin-bottom: 2rem;">
  <!-- ROW 1 LEFT: Apps with Least-Recent Releases -->
  <div class="col-6">
    <div class="p-card spotlight-card" id="spotlight-least-recent-releases">
      <div class="spotlight-header">
        <h3 class="p-card__title u-no-margin--bottom">Apps with least-recent releases</h3>
        <a href="/stats/releases" class="p-link--soft spotlight-nav-link">View all in Releases &rarr;</a>
      </div>
      <table class="p-table--default table-fixed u-no-margin--bottom">
        <colgroup>
          <col style="width: 34%;">
          <col style="width: 22%;">
          <col style="width: 22%;">
          <col style="width: 22%;">
        </colgroup>
        <thead>
          <tr>
            <th>Application</th>
            <th>Tag</th>
            <th>Released</th>
            <th>Cadence</th>
          </tr>
        </thead>
        <tbody>
          {% for app in view.least_recent_apps %}
          <tr data-testid="least-recent-release-row">
            <td class="text-truncate" title="{{ app.project_name }}">
              <a href="/issues?project={{ app.project_name }}&state=open"><strong>{{ app.project_name }}</strong></a>
            </td>
            <td class="text-truncate">
              {% if app.is_fallback %}
              <span class="dash-pill dash-pill--neutral"><em>{{ app.version }}</em></span>
              {% else %}
              <code>{{ app.version }}</code>
              {% endif %}
            </td>
            <td>{{ app.released_display }}</td>
            <td>
              {% if app.age_label %}
              <span class="{{ app.badge_css_class }}" data-testid="release-cadence-pill" title="{{ app.age_tooltip }}">
                {{ app.age_label }}
              </span>
              {% else %}
              <span class="p-text--muted">—</span>
              {% endif %}
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="4">No application releases tracked yet.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- ROW 1 RIGHT: Aging Contributor PRs (Attention Needed) -->
  <div class="col-6">
    <div class="p-card spotlight-card" id="spotlight-aging-prs">
      <div class="spotlight-header">
        <h3 class="p-card__title u-no-margin--bottom">Aging contributor PRs</h3>
        <a href="/issues?state=open&issue_type=pull_request&author_role=contributor&sort=age_desc"
           class="p-link--soft spotlight-nav-link">View all contributor PRs &rarr;</a>
      </div>
      <table class="p-table--default table-fixed u-no-margin--bottom">
        <colgroup>
          <col style="width: 32%;">
          <col style="width: 20%;">
          <col style="width: 34%;">
          <col style="width: 14%;">
        </colgroup>
        <thead>
          <tr>
            <th>PR</th>
            <th>Author</th>
            <th>Title</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {% for pr in view.aging_prs %}
          <tr data-testid="aging-pr-row">
            <td class="text-truncate" title="{{ pr.reference_label }}">
              <a href="/issues/{{ pr.project_name | urlencode_path }}/{{ pr.external_id }}">
                <strong>{{ pr.project_name }}</strong> #{{ pr.external_id }}
              </a>
            </td>
            <td class="text-truncate" title="{{ pr.author_display }}">{{ pr.author_display }}</td>
            <td class="text-truncate" title="{{ pr.title }}">{{ pr.title }}</td>
            <td>
              <span class="{{ pr.badge_css_class }}" data-testid="aging-pr-age" title="{{ pr.age_tooltip }}">
                {{ pr.display_age }}
              </span>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="4">No open contributor PRs found.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="row" style="margin-bottom: 2rem;">
  <!-- ROW 2 LEFT: Needs Triage (Top 5 Oldest Untriaged Issues) -->
  <div class="col-6">
    <div class="p-card spotlight-card" id="spotlight-needs-triage">
      <div class="spotlight-header">
        <h3 class="p-card__title u-no-margin--bottom">Need triage (oldest)</h3>
        <a href="/issues?state=open&issue_type=issue&action=needs_triage"
           class="p-link--soft spotlight-nav-link">View all untriaged issues &rarr;</a>
      </div>
      <table class="p-table--default table-fixed u-no-margin--bottom">
        <colgroup>
          <col style="width: 32%;">
          <col style="width: 20%;">
          <col style="width: 34%;">
          <col style="width: 14%;">
        </colgroup>
        <thead>
          <tr>
            <th>Issue</th>
            <th>Author</th>
            <th>Title</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {% for issue in view.needs_triage_issues %}
          <tr data-testid="needs-triage-row">
            <td class="text-truncate" title="{{ issue.reference_label }}">
              <a href="/issues/{{ issue.project_name | urlencode_path }}/{{ issue.external_id }}">
                <strong>{{ issue.project_name }}</strong> #{{ issue.external_id }}
              </a>
            </td>
            <td class="text-truncate" title="{{ issue.author_display }}">{{ issue.author_display }}</td>
            <td class="text-truncate" title="{{ issue.title }}">{{ issue.title }}</td>
            <td>
              <span class="{{ issue.badge_css_class }}" data-testid="needs-triage-age" title="{{ issue.age_tooltip }}">
                {{ issue.display_age }}
              </span>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="4">All open issues are triaged!</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- ROW 2 RIGHT: Quick-Wins Radar (Top 5 High Impact / Low Complexity) -->
  <div class="col-6">
    <div class="p-card spotlight-card" id="spotlight-quick-wins">
      <div class="spotlight-header">
        <h3 class="p-card__title u-no-margin--bottom">Quick wins</h3>
        <a href="/issues?state=open&quick_win_min=50&sort=quick_win_desc"
           class="p-link--soft spotlight-nav-link">View all quick wins &rarr;</a>
      </div>
      <table class="p-table--default table-fixed u-no-margin--bottom">
        <colgroup>
          <col style="width: 32%;">
          <col style="width: 48%;">
          <col style="width: 20%;">
        </colgroup>
        <thead>
          <tr>
            <th>Issue</th>
            <th>Title</th>
            <th>Quick-Win Score</th>
          </tr>
        </thead>
        <tbody>
          {% for qw in view.quick_wins %}
          <tr data-testid="quick-win-row">
            <td class="text-truncate" title="{{ qw.reference_label }}">
              <a href="/issues/{{ qw.project_name | urlencode_path }}/{{ qw.external_id }}">
                <strong>{{ qw.project_name }}</strong> #{{ qw.external_id }}
              </a>
            </td>
            <td class="text-truncate" title="{{ qw.title }}">{{ qw.title }}</td>
            <td>
              <span class="{{ qw.badge_css_class }}" data-testid="quick-win-score">
                {{ qw.score_label }}
              </span>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="3">No quick-win candidates currently scored &ge; 50.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- LOWER SECTION: PROJECT HEALTH -->
<div class="row">
  <div class="col-12">
    <h3>Project health</h3>
  </div>
</div>

{% macro render_health_table(project_list, testid) %}
<table class="p-table--default table-fixed project-health-table u-no-margin--bottom" data-testid="{{ testid }}">
  <colgroup>
    <col style="width: 26%;">
    <col style="width: 17%;">
    <col style="width: 17%;">
    <col style="width: 21%;">
    <col style="width: 19%;">
  </colgroup>
  <thead>
    <tr>
      <th>Project</th>
      <th>Open Issues</th>
      <th>Open PRs</th>
      <th>Untriaged Backlog</th>
      <th>Latest Release</th>
    </tr>
  </thead>
  <tbody>
    {% for p in project_list %}
    <tr data-testid="project-health-row" data-project="{{ p.name }}">
      <td class="text-truncate" title="{{ p.name }}">
        <a href="/issues?project={{ p.name }}&state=open" class="project-name-link">
          <strong>{{ p.name }}</strong>
        </a>
        <a href="{{ p.github_url }}"
           target="_blank" rel="noopener noreferrer" class="p-link--soft"
           title="View {{ p.name }} on GitHub">
          <i class="p-icon--external-link is-light" style="font-size: 0.8rem; margin-left: 0.25rem;"></i>
        </a>
      </td>
      <td>
        <a href="/issues?project={{ p.name }}&issue_type=issue&state=open"
           class="p-chip is-dense nav-chip" title="Filter open issues">
          {{ p.open_issues_label }}
        </a>
      </td>
      <td>
        {% if p.show_prs %}
        <a href="/issues?project={{ p.name }}&issue_type=pull_request&state=open"
           class="p-chip is-dense nav-chip" title="Filter open PRs">
          {{ p.open_prs_label }}
        </a>
        {% else %}
        <span class="p-text--muted">—</span>
        {% endif %}
      </td>
      <td>
        <a href="/issues?project={{ p.name }}&action=needs_triage"
           class="{{ p.triage_badge_css_class }}"
           data-testid="project-triage-pill"
           title="Filter untriaged backlog">
          {{ p.untriaged_label }}
        </a>
      </td>
      <td>
        {% if p.show_release %}
        <a href="/stats/releases" class="{{ p.release_badge_css_class }}"
           data-testid="project-release-pill"
           title="View releases">
          {% if p.release_version %}
          <code>{{ p.release_version }}</code>
          {% if p.release_age_label %}
          <span title="{{ p.release_age_tooltip }}">{{ p.release_age_label }}</span>
          {% endif %}
          {% else %}
          <span><em>(none)</em></span>
          {% endif %}
        </a>
        {% else %}
        <span class="p-text--muted">—</span>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endmacro %}

<div class="row--25-75" style="margin-bottom: 1.5rem;">
  <div class="col">
    <h4>Applications</h4>
  </div>
  <div class="col">
    {{ render_health_table(view.application_projects, "project-health-applications") }}
  </div>
</div>

<hr class="p-rule" />

<div class="row--25-75" style="margin-bottom: 1.5rem;">
  <div class="col">
    <h4>Libraries</h4>
  </div>
  <div class="col">
    {{ render_health_table(view.library_projects, "project-health-libraries") }}
  </div>
</div>

<hr class="p-rule" />

<div class="row--25-75" style="margin-bottom: 1.5rem;">
  <div class="col">
    <h4>Other</h4>
  </div>
  <div class="col">
    {{ render_health_table(view.other_projects, "project-health-other") }}
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/table-sort.js"></script>
{% endblock %}