{% extends "layout.html" %}

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

{# Macro for sortable group header column #}
{% macro sort_header(label, col_name, align='left', extra_class='') %}
  {% 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 }}{% if filters.destination_table %}&destination_table={{ filters.destination_table }}{% endif %}{% if filters.workload_kind %}&workload_kind={{ filters.workload_kind }}{% endif %}{% if filters.start_date %}&start_date={{ filters.start_date }}{% endif %}{% if filters.end_date %}&end_date={{ filters.end_date }}{% endif %}"
     class="inline-flex items-center gap-1 hover:text-slate-700 dark:hover:text-slate-200 transition-colors {{ 'text-slate-700 dark:text-slate-200' if is_active else '' }} {{ extra_class }}">
    {{ label }}
    {% if is_active %}
      <span class="text-brand-500 dark:text-brand-400">{{ '▲' if current_direction == 'asc' else '▼' }}</span>
    {% endif %}
  </a>
{% endmacro %}

<section class="ui-shell">
  <p class="ui-eyebrow">Admin Only</p>
  <div class="mt-3 flex items-center justify-between">
    <div>
      <h1 class="ui-page-title mt-0">BigQuery Jobs</h1>
      <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ config.name }} ({{ config.gcp_project_id }})</p>
    </div>
    <a href="/admin/configurations/{{ config.id }}" class="ui-btn-secondary transition-colors">Back to Configuration</a>
  </div>

  <!-- Filters -->
  <form method="get" class="mt-6 grid gap-4 md:grid-cols-5">
    <input type="hidden" name="sort" value="{{ current_sort }}">
    <input type="hidden" name="direction" value="{{ current_direction }}">
    <div>
      <label for="destination_table" class="block text-[13px] font-medium text-slate-500 dark:text-slate-400">Destination Table</label>
      <input type="text" name="destination_table" id="destination_table" value="{{ filters.destination_table }}"
        placeholder="Search by model name..."
        class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden">
    </div>
    <div>
      <label for="workload_kind" class="block text-[13px] font-medium text-slate-500 dark:text-slate-400">Workload</label>
      <select name="workload_kind" id="workload_kind"
        class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden">
        <option value="">All workloads</option>
        <option value="build" {% if filters.workload_kind == 'build' %}selected{% endif %}>Build</option>
        <option value="consumption" {% if filters.workload_kind == 'consumption' %}selected{% endif %}>Consumption</option>
      </select>
    </div>
    <div>
      <label for="start_date" class="block text-[13px] font-medium text-slate-500 dark:text-slate-400">From Date</label>
      <input type="date" name="start_date" id="start_date" value="{{ filters.start_date }}"
        class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden">
    </div>
    <div>
      <label for="end_date" class="block text-[13px] font-medium text-slate-500 dark:text-slate-400">To Date</label>
      <input type="date" name="end_date" id="end_date" value="{{ filters.end_date }}"
        class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden">
    </div>
    <div class="flex items-end">
      <button type="submit"
        class="w-full ui-btn-primary transition-colors">
        Filter
      </button>
    </div>
  </form>

  <!-- Summary + Sort Controls -->
  <div class="mt-6 flex items-center justify-between text-sm text-slate-500 dark:text-slate-400">
    <div class="flex items-center gap-4">
      <span>{{ total_groups }} table{{ 's' if total_groups != 1 else '' }}</span>
    </div>
    <div class="flex items-center gap-3 text-[13px]">
      <span class="text-slate-400 dark:text-slate-500">Sort by:</span>
      {{ sort_header('Table', 'table') }}
      <span class="text-slate-300 dark:text-slate-700">|</span>
      {{ sort_header('Runs', 'runs') }}
      <span class="text-slate-300 dark:text-slate-700">|</span>
      {{ sort_header('Cost', 'cost') }}
      <span class="text-slate-300 dark:text-slate-700">|</span>
      {{ sort_header('Data', 'data') }}
      <span class="text-slate-300 dark:text-slate-700">|</span>
      {{ sort_header('Latest', 'latest') }}
    </div>
  </div>

  <!-- Grouped Jobs -->
  {% if groups %}
  <div class="mt-4 space-y-2">
    {% for group in groups %}
    <details class="border border-slate-200 dark:border-slate-800 overflow-hidden bg-white dark:bg-slate-900/60">
      <summary class="cursor-pointer select-none flex items-center justify-between px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
        <div class="flex items-center gap-3 min-w-0">
          <svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0 transition-transform details-open-rotate" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
          <div class="min-w-0">
            {% if group.destination_table %}
              {% set table_parts = group.destination_table.split('.') %}
              {% if table_parts | length >= 3 %}
                <span class="text-sm font-medium text-brand-500 dark:text-brand-300">{{ table_parts[-1] }}</span>
                <span class="text-[13px] text-slate-400 dark:text-slate-500 ml-2">{{ table_parts[0] }}.{{ table_parts[1] }}</span>
              {% else %}
                <span class="text-sm font-medium text-brand-500 dark:text-brand-300">{{ group.destination_table }}</span>
              {% endif %}
            {% else %}
              <span class="text-sm font-medium text-slate-400 dark:text-slate-500">No destination</span>
            {% endif %}
          </div>
        </div>
        <div class="flex items-center gap-6 text-[13px] shrink-0 ml-4">
          <span class="text-slate-500 dark:text-slate-400">
            <span class="font-medium text-slate-700 dark:text-slate-200">{{ group.job_count }}</span> run{{ 's' if group.job_count != 1 else '' }}
          </span>
          <span class="{% if group.total_cost > 1 %}text-amber-600 dark:text-amber-400 font-medium{% elif group.total_cost > 0.1 %}text-slate-700 dark:text-slate-200{% else %}text-slate-500 dark:text-slate-400{% endif %}">
            {% if group.total_cost > 0 %}
              {{ group.total_cost | format_usd }}
            {% else %}
              -
            {% endif %}
          </span>
          <span class="text-slate-500 dark:text-slate-400">
            {% if group.total_bytes > 0 %}
              {{ (group.total_bytes / (1024 * 1024 * 1024)) | round(2) }} GB
            {% else %}
              -
            {% endif %}
          </span>
          <span class="text-slate-400 dark:text-slate-500 w-28 text-right">
            {{ group.latest_run.strftime('%Y-%m-%d %H:%M') if group.latest_run else '-' }}
          </span>
        </div>
      </summary>
      <div class="border-t border-slate-200 dark:border-slate-800">
        <table class="w-full text-left text-sm">
          <thead>
            <tr class="border-b border-slate-100 dark:border-slate-800 text-[13px] uppercase tracking-wider text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-900">
              <th class="py-2 px-4">User</th>
              <th class="py-2 px-4">Statement</th>
              <th class="py-2 px-4">Workload</th>
              <th class="py-2 px-4">Created</th>
              <th class="py-2 px-4">Duration</th>
              <th class="py-2 px-4 text-right">Cost</th>
              <th class="py-2 px-4 text-right">Bytes Billed</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
            {% for job in group.jobs %}
            <tr class="text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
              <td class="py-2 px-4 text-[13px] max-w-[150px] truncate" title="{{ job.user_email }}">
                {{ job.user_email.split('@')[0] if job.user_email else '-' }}
              </td>
              <td class="py-2 px-4 text-[13px]">
                <span class="rounded px-1.5 py-0.5 text-[12px]
                  {% if job.statement_type == 'SELECT' %}bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300
                  {% elif job.statement_type == 'CREATE_TABLE_AS_SELECT' %}bg-brand-50 dark:bg-brand-700/40 text-brand-700 dark:text-brand-200
                  {% elif job.statement_type == 'INSERT' %}bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300
                  {% elif job.statement_type == 'MERGE' %}bg-brand-50 dark:bg-brand-700/40 text-brand-700 dark:text-brand-200
                  {% else %}bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400{% endif %}
                ">{{ job.statement_type or '-' }}</span>
              </td>
              <td class="py-2 px-4 text-[13px]">
                {% if job.workload_kind == 'build' %}
                  <span class="rounded px-1.5 py-0.5 text-[12px] bg-brand-50 dark:bg-brand-700/40 text-brand-700 dark:text-brand-200">build</span>
                {% elif job.workload_kind == 'consumption' %}
                  <span class="rounded px-1.5 py-0.5 text-[12px] bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300">consumption</span>
                {% else %}
                  <span class="rounded px-1.5 py-0.5 text-[12px] bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400">unclassified</span>
                {% endif %}
              </td>
              <td class="py-2 px-4 text-[13px] text-slate-500 dark:text-slate-400">
                {{ job.creation_time.strftime('%Y-%m-%d %H:%M') if job.creation_time else '-' }}
              </td>
              <td class="py-2 px-4 text-[13px] text-slate-500 dark:text-slate-400">
                {% if job.duration_ms %}
                  {{ (job.duration_ms / 1000) | round(2) }}s
                {% else %}
                  -
                {% endif %}
              </td>
              <td class="py-2 px-4 text-right text-[13px]">
                {% if job.total_cost %}
                  <span class="{% if job.total_cost > 1 %}text-amber-600 dark:text-amber-400{% elif job.total_cost > 0.1 %}text-slate-700 dark:text-slate-200{% else %}text-slate-500 dark:text-slate-400{% endif %}">
                    {{ job.total_cost | format_usd }}
                  </span>
                {% else %}
                  <span class="text-slate-400 dark:text-slate-500">-</span>
                {% endif %}
              </td>
              <td class="py-2 px-4 text-right text-[13px] text-slate-500 dark:text-slate-400">
                {% if job.total_bytes_billed %}
                  {{ (job.total_bytes_billed / (1024 * 1024 * 1024)) | round(2) }} GB
                {% else %}
                  -
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </details>
    {% endfor %}
  </div>

  <!-- Pagination -->
  {% if total_groups > 0 %}
  {% set start_idx = (page - 1) * 10 + 1 %}
  {% set end_idx = [page * 10, total_groups] | min %}
  {% set filter_params %}{% if filters.destination_table %}&destination_table={{ filters.destination_table }}{% endif %}{% if filters.workload_kind %}&workload_kind={{ filters.workload_kind }}{% endif %}{% if filters.start_date %}&start_date={{ filters.start_date }}{% endif %}{% if filters.end_date %}&end_date={{ filters.end_date }}{% endif %}{% endset %}
  <div class="mt-4 flex items-center justify-between text-sm text-slate-600 dark:text-slate-300">
    <p>
      Showing <span class="font-medium text-slate-800 dark:text-slate-200">{{ start_idx }}</span>
      to <span class="font-medium text-slate-800 dark:text-slate-200">{{ end_idx }}</span>
      of <span class="font-medium text-slate-800 dark:text-slate-200">{{ total_groups }}</span> results
    </p>
    {% if total_pages > 1 %}
    <nav class="flex items-center gap-1">
      {% if page > 1 %}
        <a href="?page={{ page - 1 }}&sort={{ current_sort }}&direction={{ current_direction }}{{ filter_params }}"
          class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">Prev</a>
      {% else %}
        <span class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-400 dark:text-slate-600 cursor-not-allowed">Prev</span>
      {% endif %}
      {% for p in range([1, page - 2] | max, [total_pages, page + 2] | min + 1) %}
        {% if p == page %}
          <span class="px-3 py-1.5 text-sm border border-brand-500 bg-brand-50 dark:bg-brand-700/30 text-brand-700 dark:text-brand-200 font-medium">{{ p }}</span>
        {% else %}
          <a href="?page={{ p }}&sort={{ current_sort }}&direction={{ current_direction }}{{ filter_params }}"
            class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">{{ p }}</a>
        {% endif %}
      {% endfor %}
      {% if page < total_pages %}
        <a href="?page={{ page + 1 }}&sort={{ current_sort }}&direction={{ current_direction }}{{ filter_params }}"
          class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800">Next</a>
      {% else %}
        <span class="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-700 text-slate-400 dark:text-slate-600 cursor-not-allowed">Next</span>
      {% endif %}
    </nav>
    {% endif %}
  </div>
  {% endif %}

  {% else %}
  <div class="mt-6 rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-8 text-center">
    <p class="text-sm text-slate-500 dark:text-slate-400">No BigQuery jobs found for this configuration.</p>
    <p class="mt-2 text-[13px] text-slate-400 dark:text-slate-500">Run a sync operation to retrieve job data from BigQuery.</p>
  </div>
  {% endif %}
</section>

<style>
  details[open] > summary .details-open-rotate {
    transform: rotate(90deg);
  }
</style>
{% endblock %}