{% extends "layout.html" %}
{% block content %}

<section class="ui-shell">
<div class="space-y-5">
  <div>
    <h1 class="ui-page-title mt-0">Pull Requests</h1>
    <p class="ui-page-subtitle">Open and merged GitHub PRs tracked by Governor.</p>
  </div>

  {# Filters row: project filter + sort dropdown #}
  <div class="flex flex-wrap items-center justify-between gap-3">
    {# Project filter #}
    <div class="relative">
      <label for="project-filter" class="sr-only">Filter by project</label>
      <select id="project-filter"
              onchange="window.location = this.value"
              class="appearance-none border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-950 text-slate-700 dark:text-slate-300 text-[13px] pl-3 pr-8 py-1.5 cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand-500/30">
        {% set filter_qs %}?sort={{ sort_by }}&dir={{ sort_dir }}{% endset %}
        <option value="/prs{{ filter_qs }}"
                {% if not project_filter %}selected{% endif %}>
          All projects
        </option>
        {% for proj in projects %}
        <option value="/prs{{ filter_qs }}&project={{ proj.id }}"
                {% if project_filter == proj.id %}selected{% endif %}>
          {{ proj.name }}
        </option>
        {% endfor %}
      </select>
      <svg class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
      </svg>
    </div>

    {# Sort dropdown #}
    <div class="relative">
      <label for="sort-select" class="sr-only">Sort by</label>
      <select id="sort-select"
              onchange="window.location = this.value"
              class="appearance-none border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-950 text-slate-700 dark:text-slate-300 text-[13px] pl-3 pr-8 py-1.5 cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand-500/30">
        {% for opt_label, opt_sort, opt_dir in [
          ('Newest opened', 'created_at', 'desc'),
          ('Oldest opened', 'created_at', 'asc'),
          ('Recently updated', 'updated_at', 'desc'),
          ('PR number (high)', 'pr_number', 'desc'),
          ('PR number (low)', 'pr_number', 'asc'),
          ('Repository', 'repository', 'asc'),
        ] %}
        {% set sort_qs %}?sort={{ opt_sort }}&dir={{ opt_dir }}{% if project_filter %}&project={{ project_filter }}{% endif %}{% endset %}
        <option value="/prs{{ sort_qs }}"
                {% if sort_by == opt_sort and sort_dir == opt_dir %}selected{% endif %}>
          {{ opt_label }}
        </option>
        {% endfor %}
      </select>
      <svg class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
      </svg>
    </div>
  </div>

  {# PR table #}
  {% if prs and prs | length > 0 %}
  <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-slate-200 dark:border-slate-800 text-left text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider">
          <th class="py-2.5 px-4">PR</th>
          <th class="py-2.5 px-4">Repository</th>
          <th class="py-2.5 px-4">Status</th>
          <th class="py-2.5 px-4">Opened</th>
          <th class="py-2.5 px-4">Merged</th>
        </tr>
      </thead>
      <tbody class="text-slate-700 dark:text-slate-300">
        {% for pr in prs %}
        <tr class="{% if not loop.last %}border-b border-slate-100 dark:border-slate-800/50{% endif %} hover:bg-white dark:hover:bg-slate-950/40 transition-colors cursor-pointer"
            onclick="window.location='/prs/{{ pr.id }}'"
            tabindex="0"
            role="link"
            aria-label="View PR #{{ pr.pr_number }} details"
            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/prs/{{ pr.id }}'; }">
          <td class="py-3 px-4">
            <span class="font-medium text-brand-500 dark:text-brand-300">
              #{{ pr.pr_number }}
            </span>
          </td>
          <td class="py-3 px-4">
            <code class="text-xs">{{ pr.repository }}</code>
          </td>
          <td class="py-3 px-4">
            <span class="ui-pill {% if pr.status == 'merged' %}ui-pill-success{% else %}ui-pill-blue{% endif %}">
              {{ pr.status }}
            </span>
          </td>
          <td class="py-3 px-4 text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
            {{ pr.created_at.strftime('%d %b %Y %H:%M') if pr.created_at else '-' }}
          </td>
          <td class="py-3 px-4 text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
            {{ pr.merged_at.strftime('%d %b %Y %H:%M') if pr.merged_at else '-' }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# Pagination #}
  {% if pagination and pagination.total_pages > 1 %}
  <div class="flex items-center justify-between">
    <p class="text-sm text-slate-500 dark:text-slate-400">
      Showing {{ pagination.start_index }}&ndash;{{ pagination.end_index }} of {{ pagination.total_items }}
    </p>
    <nav class="ui-pagination" aria-label="PR pagination">
      {% set page_qs_parts = [] %}
      {% if sort_by != 'created_at' %}{% set _ = page_qs_parts.append('sort=' ~ sort_by) %}{% endif %}
      {% if sort_dir != 'desc' %}{% set _ = page_qs_parts.append('dir=' ~ sort_dir) %}{% endif %}
      {% if project_filter %}{% set _ = page_qs_parts.append('project=' ~ project_filter) %}{% endif %}
      {% set page_base = '&'.join(page_qs_parts) %}

      {% if pagination.has_prev %}
        <a href="?page={{ pagination.page - 1 }}{% if page_base %}&{{ page_base }}{% endif %}"
          class="ui-page-link">Prev</a>
      {% else %}
        <span class="ui-page-link ui-page-link-disabled">Prev</span>
      {% endif %}
      {% for p in pagination.page_range(2) %}
        {% if p == pagination.page %}
          <span class="ui-page-link ui-page-link-active" aria-current="page">{{ p }}</span>
        {% else %}
          <a href="?page={{ p }}{% if page_base %}&{{ page_base }}{% endif %}"
            class="ui-page-link">{{ p }}</a>
        {% endif %}
      {% endfor %}
      {% if pagination.has_next %}
        <a href="?page={{ pagination.page + 1 }}{% if page_base %}&{{ page_base }}{% endif %}"
          class="ui-page-link">Next</a>
      {% else %}
        <span class="ui-page-link ui-page-link-disabled">Next</span>
      {% endif %}
    </nav>
  </div>
  {% endif %}

  {% else %}
  <div class="ui-pane p-6 text-center">
    <p class="text-sm text-slate-500 dark:text-slate-400">No merged pull requests found.</p>
  </div>
  {% endif %}

</div>
</section>
{% endblock %}