{% extends "admin/base_admin.html" %}
{% set admin_page = "pipeline" %}
{% block title %}Data Pipeline - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_head %}
<style>
  .pipeline-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  @media (min-width: 768px) {
    .pipeline-stat-grid { grid-template-columns: repeat(4, 1fr); }
  }

  .pipeline-tabs {
    display: flex; gap: 0; border-bottom: 2px solid #E2E8F0; margin-bottom: 1.5rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pipeline-tabs::-webkit-scrollbar { display: none; }
  .pipeline-tabs button {
    padding: 0.625rem 1.25rem; font-size: 0.8125rem; font-weight: 600;
    color: #64748B; background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s;
  }
  .pipeline-tabs button:hover { color: #1D4ED8; }
  .pipeline-tabs button.active { color: #1D4ED8; border-bottom-color: #1D4ED8; }

  /* Status dot */
  .status-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .status-dot.ok      { background: #16A34A; }
  .status-dot.failed  { background: #EF4444; }
  .status-dot.stale   { background: #D97706; }
  .status-dot.running { background: #3B82F6; }

  @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .status-dot.running { animation: pulse-dot 1.5s ease-in-out infinite; }
  .status-dot.pending { background: #CBD5E1; }

  .pipeline-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 640px) {
    .pipeline-two-col { grid-template-columns: 1fr 1fr; }
  }
</style>
{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <div>
      <h1 class="text-2xl">Data Pipeline</h1>
      <p class="text-sm text-slate mt-1">Extraction status, data catalog, and ad-hoc query editor</p>
    </div>
    <div class="flex gap-2">
      <form method="post" action="{{ url_for('pipeline.pipeline_trigger_transform') }}" class="m-0" hx-boost="true">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="step" value="pipeline">
        <button type="submit" class="btn btn-sm"
                hx-confirm="Run full ELT pipeline (extract → transform → export)? This runs in the background.">
          Run Pipeline
        </button>
      </form>
      <a href="{{ url_for('admin.tasks') }}" class="btn-outline btn-sm">Task Queue</a>
    </div>
  </header>

  <!-- Health stat cards -->
  <div class="pipeline-stat-grid mb-6">
    <div class="card text-center" style="padding:0.875rem">
      <p class="text-xs text-slate">Total Runs</p>
      <p class="text-2xl font-bold text-navy metric">{{ summary.total | default(0) }}</p>
    </div>
    <div class="card text-center" style="padding:0.875rem">
      <p class="text-xs text-slate">Success Rate</p>
      <p class="text-2xl font-bold {% if success_rate >= 90 %}text-accent{% elif success_rate >= 70 %}text-warning{% else %}text-danger{% endif %} metric">
        {{ success_rate }}%
      </p>
    </div>
    <div class="card text-center" style="padding:0.875rem">
      <p class="text-xs text-slate">Serving Tables</p>
      <p class="text-2xl font-bold text-navy metric">{{ total_serving_tables }}</p>
    </div>
    <div class="card text-center" style="padding:0.875rem">
      <p class="text-xs text-slate">Last Export</p>
      <p class="text-sm font-semibold text-navy mono mt-1">{{ last_export }}</p>
    </div>
  </div>

  {% if summary.stale > 0 %}
  <div class="flash-warning mb-4">
    <strong>{{ summary.stale }} stale run{{ 's' if summary.stale != 1 }}.</strong>
    An extraction appears to have crashed without updating its status.
    Go to the Extractions tab to mark it failed.
  </div>
  {% endif %}

  <!-- Tabs -->
  <div class="pipeline-tabs" id="pipeline-tabs">
    <button class="active" data-tab="overview"
            hx-get="{{ url_for('pipeline.pipeline_overview') }}"
            hx-target="#pipeline-tab-content" hx-swap="innerHTML"
            hx-trigger="click">Overview</button>
    <button data-tab="extractions"
            hx-get="{{ url_for('pipeline.pipeline_extractions') }}"
            hx-target="#pipeline-tab-content" hx-swap="innerHTML"
            hx-trigger="click">Extractions</button>
    <button data-tab="catalog"
            hx-get="{{ url_for('pipeline.pipeline_catalog') }}"
            hx-target="#pipeline-tab-content" hx-swap="innerHTML"
            hx-trigger="click">Catalog</button>
    <button data-tab="query"
            hx-get="{{ url_for('pipeline.pipeline_query_editor') }}"
            hx-target="#pipeline-tab-content" hx-swap="innerHTML"
            hx-trigger="click">Query</button>
    <button data-tab="lineage"
            hx-get="{{ url_for('pipeline.pipeline_lineage') }}"
            hx-target="#pipeline-tab-content" hx-swap="innerHTML"
            hx-trigger="click">Lineage</button>
    <button data-tab="transform"
            hx-get="{{ url_for('pipeline.pipeline_transform') }}"
            hx-target="#pipeline-tab-content" hx-swap="innerHTML"
            hx-trigger="click">Transform</button>
  </div>

  <!-- Tab content (Overview loads on page load) -->
  <div id="pipeline-tab-content"
       hx-get="{{ url_for('pipeline.pipeline_overview') }}"
       hx-trigger="load"
       hx-swap="innerHTML">
    <div class="card text-center" style="padding:2rem">
      <p class="text-slate">Loading overview…</p>
    </div>
  </div>

  <script>
    document.getElementById('pipeline-tabs').addEventListener('click', function(e) {
      if (e.target.tagName === 'BUTTON') {
        this.querySelectorAll('button').forEach(b => b.classList.remove('active'));
        e.target.classList.add('active');
      }
    });
  </script>
{% endblock %}
