{% extends "layout.html" %}

{% block content %}
  {% set current_sort = sort | default('name') %}
  {% set current_direction = direction | default('asc') %}

  {# Macro for sort link #}
  {% macro sort_link(label, col_name) %}
    {% set is_active = current_sort == col_name %}
    {% set next_dir = 'asc' if (is_active and current_direction == 'desc') else 'desc' %}
    <a href="?page=1&sort={{ col_name }}&direction={{ next_dir }}"
       class="hover:text-slate-700 dark:hover:text-slate-200 transition-colors {{ 'text-slate-700 dark:text-slate-200 font-medium' if is_active else '' }}">
      {{ label }}{% if is_active %} {{ '▲' if current_direction == 'asc' else '▼' }}{% endif %}
    </a>
  {% endmacro %}

  <section class="ui-shell">
    <p class="ui-eyebrow">Admin Only</p>
    <div class="mt-3 flex items-center justify-between">
      <h1 class="ui-page-title mt-0">Configurations</h1>
      <a
        href="/admin/configurations/new"
        class="ui-btn-primary transition-colors"
      >New Configuration</a>
    </div>
    <p class="ui-page-subtitle">Manage manifest configurations for BigQuery cost analysis.</p>

    {% if configurations %}
      {# Sort controls #}
      <div class="mt-6 flex items-center gap-3 ui-type-caption">
        <span>Sort by:</span>
        {{ sort_link('Name', 'name') }}
        <span class="text-slate-300 dark:text-slate-700">|</span>
        {{ sort_link('GCP Project', 'gcp_project') }}
        <span class="text-slate-300 dark:text-slate-700">|</span>
        {{ sort_link('Status', 'status') }}
        <span class="text-slate-300 dark:text-slate-700">|</span>
        {{ sort_link('Created', 'created_at') }}
      </div>

      <div class="mt-4 space-y-3">
        {% for config in configurations %}
          <a
            href="/admin/configurations/{{ config.id }}"
            class="block rounded-none border p-5 transition-colors
              {% if config.status == 'disabled' %}
                border-slate-200/50 dark:border-slate-800/50 bg-slate-100/50 dark:bg-slate-900/30 opacity-60 hover:border-slate-300 dark:hover:border-slate-700
              {% else %}
                border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 hover:border-brand-500/30
              {% endif %}
            "
          >
            <div class="flex items-center justify-between">
              <div>
                <h2 class="ui-type-title-sm">{{ config.name }}</h2>
                <p class="mt-1 ui-type-body-sm text-slate-500 dark:text-slate-400">{{ config.gcp_project_id }}</p>
                {% if config.bucket_name %}
                  <p class="mt-0.5 ui-type-mono text-slate-500 dark:text-slate-400">gs://{{ config.bucket_name }}/{{ config.path_prefix }}{{ '/' if config.path_prefix else '' }}{{ config.object_name or 'manifest.json' }}</p>
                {% endif %}
              </div>
              <div class="flex items-center gap-3">
                {% if config.github_repo %}
                  <span class="ui-pill ui-pill-neutral">GitHub</span>
                {% endif %}
                {% with status=config.status %}
                  {% include "components/config_status_badge.html" %}
                {% endwith %}
              </div>
            </div>
          </a>
        {% endfor %}
      </div>

      {# Pagination #}
      {% if pagination and pagination.total_items > 0 %}
      <div class="mt-6 flex items-center justify-between">
        <p class="ui-type-body-sm">
          Showing <span class="text-slate-900 dark:text-slate-100">{{ pagination.start_index }}</span>
          to <span class="text-slate-900 dark:text-slate-100">{{ pagination.end_index }}</span>
          of <span class="text-slate-900 dark:text-slate-100">{{ pagination.total_items }}</span> results
        </p>
        {% if pagination.total_pages > 1 %}
        <nav class="ui-pagination" aria-label="Configurations pagination">
          {% if pagination.has_prev %}
            <a href="?page={{ pagination.page - 1 }}&sort={{ current_sort }}&direction={{ current_direction }}"
              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 }}&sort={{ current_sort }}&direction={{ current_direction }}"
                class="ui-page-link">{{ p }}</a>
            {% endif %}
          {% endfor %}
          {% if pagination.has_next %}
            <a href="?page={{ pagination.page + 1 }}&sort={{ current_sort }}&direction={{ current_direction }}"
              class="ui-page-link">Next</a>
          {% else %}
            <span class="ui-page-link ui-page-link-disabled">Next</span>
          {% endif %}
        </nav>
        {% endif %}
      </div>
      {% endif %}
    {% else %}
      <div class="mt-8 rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-8 text-center">
        <p class="ui-type-body text-slate-500 dark:text-slate-400">No configurations yet.</p>
        <p class="mt-2 ui-type-caption text-slate-500 dark:text-slate-400">Create your first manifest configuration to get started.</p>
      </div>
    {% endif %}
  </section>
{% endblock %}