{% extends "admin/base_admin.html" %}
{% set admin_page = "pseo" %}

{% block title %}pSEO Engine - {{ config.APP_NAME }}{% endblock %}

{% block admin_head %}
<style>
  .pseo-status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.6875rem; font-weight: 600; padding: 2px 8px;
    border-radius: 9999px;
  }
  .pseo-status-fresh  { background: #D1FAE5; color: #065F46; }
  .pseo-status-stale  { background: #FEF3C7; color: #92400E; }
  .pseo-status-no_data    { background: #F1F5F9; color: #64748B; }
  .pseo-status-no_articles { background: #EDE9FE; color: #5B21B6; }

  .pseo-gaps-panel { border-top: 1px solid #E2E8F0; margin-top: 8px; padding-top: 8px; }

  .progress-bar-wrap { height: 6px; background: #E2E8F0; border-radius: 9999px; overflow: hidden; min-width: 80px; }
  .progress-bar-fill { height: 100%; background: #1D4ED8; border-radius: 9999px; transition: width 0.3s; }
</style>
{% endblock %}

{% block admin_content %}
<header class="flex justify-between items-center mb-8">
  <div>
    <h1 class="text-2xl">pSEO Engine</h1>
    <p class="text-slate text-sm mt-1">Operational dashboard for programmatic SEO</p>
  </div>
  <a href="{{ url_for('pseo.pseo_jobs') }}" class="btn-outline btn-sm">All Jobs</a>
</header>

<!-- Summary Cards -->
<div class="grid-4 mb-8">
  <div class="card text-center">
    <p class="card-header">Total Articles</p>
    <p class="text-3xl font-bold text-navy">{{ total_articles }}</p>
    <p class="text-xs text-slate mt-1">{{ total_published }} published</p>
  </div>
  <div class="card text-center">
    <p class="card-header">Templates</p>
    <p class="text-3xl font-bold text-navy">{{ total_templates }}</p>
  </div>
  <div class="card text-center">
    <p class="card-header">Stale Templates</p>
    <p class="text-3xl font-bold {% if stale_count > 0 %}text-amber-600{% else %}text-navy{% endif %}">
      {{ stale_count }}
    </p>
    <p class="text-xs text-slate mt-1">data newer than articles</p>
  </div>
  <div class="card text-center">
    <p class="card-header">Noindex</p>
    <p class="text-3xl font-bold {% if noindex_count > 0 %}text-amber-600{% else %}text-navy{% endif %}">{{ noindex_count }}</p>
    <p class="text-xs text-slate mt-1">thin-data articles</p>
  </div>
</div>

<!-- Per-Template Table -->
<div class="card mb-8">
  <div class="card-header mb-4 flex justify-between items-center">
    <span>Templates</span>
    <span class="text-xs text-slate">Click "Gaps" to load missing articles per template</span>
  </div>
  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>Template</th>
          <th>Data rows</th>
          <th>Articles EN</th>
          <th>Articles DE</th>
          <th>Freshness</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for r in template_rows %}
        {% set t = r.template %}
        {% set stats = r.stats %}
        {% set fr = r.freshness %}
        <tr>
          <td>
            <strong>{{ t.name }}</strong><br>
            <span class="text-xs text-slate">{{ t.slug }}</span>
          </td>
          <td>{{ fr.row_count if fr.row_count is not none else '—' }}</td>
          <td>{{ stats.by_language.get('en', {}).get('total', 0) }}</td>
          <td>{{ stats.by_language.get('de', {}).get('total', 0) }}</td>
          <td>
            {% set status = fr.status | default('no_data') %}
            <span class="pseo-status-badge pseo-status-{{ status }}">
              {% if status == 'fresh' %}&#x1F7E2; Fresh
              {% elif status == 'stale' %}&#x1F7E1; Stale
              {% elif status == 'no_articles' %}&#x1F7E3; No articles
              {% else %}&#x26AA; No data
              {% endif %}
            </span>
          </td>
          <td class="flex gap-2 items-center">
            <button class="btn-outline btn-sm"
                    hx-get="{{ url_for('pseo.pseo_gaps_template', slug=t.slug) }}"
                    hx-target="#gaps-panel-{{ t.slug }}"
                    hx-swap="innerHTML"
                    hx-indicator="#gaps-panel-{{ t.slug }}">
              Gaps
            </button>
            <form method="post" action="{{ url_for('pseo.pseo_generate_gaps', slug=t.slug) }}" class="m-0">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn btn-sm">Generate gaps</button>
            </form>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="p-0">
            <div id="gaps-panel-{{ t.slug }}" class="pseo-gaps-panel" style="padding: 0 1rem 0.5rem;">
              <!-- Loaded via HTMX on "Gaps" click -->
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Recent Jobs -->
{% if jobs %}
<div class="card mb-8">
  <div class="card-header mb-4 flex justify-between items-center">
    <span>Recent Generation Jobs</span>
    <a href="{{ url_for('pseo.pseo_jobs') }}" class="text-xs text-blue">View all →</a>
  </div>
  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>Job</th>
          <th>Status</th>
          <th>Progress</th>
          <th>Started</th>
        </tr>
      </thead>
      <tbody>
        {% for job in jobs %}
        <tr>
          <td>
            <a href="{{ url_for('pseo.pseo_jobs') }}#job-{{ job.id }}" class="text-blue">#{{ job.id }}</a>
            {% if job.payload %}
              — {{ (job.payload | fromjson).get('template_slug', '') }}
            {% endif %}
          </td>
          <td>
            {% if job.status == 'complete' %}
              <span class="badge-success">Complete</span>
            {% elif job.status == 'failed' %}
              <span class="badge-danger">Failed</span>
            {% elif job.status == 'pending' %}
              <span class="badge-warning">Running</span>
            {% else %}
              <span class="badge">{{ job.status }}</span>
            {% endif %}
          </td>
          <td>
            {% if job.progress_total and job.progress_total > 0 %}
            <div class="flex items-center gap-2">
              <div class="progress-bar-wrap">
                <div class="progress-bar-fill" style="width: {{ [((job.progress_current / job.progress_total) * 100) | int, 100] | min }}%"></div>
              </div>
              <span class="text-xs text-slate">{{ job.progress_current }}/{{ job.progress_total }}</span>
            </div>
            {% else %}
              —
            {% endif %}
          </td>
          <td class="text-xs text-slate">{{ job.created_at | default('') | truncate(16, True, '') }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

<!-- Health Issues (HTMX-loaded) -->
<div id="health-panel"
     hx-get="{{ url_for('pseo.pseo_health') }}"
     hx-trigger="load delay:500ms"
     hx-target="#health-panel"
     hx-swap="outerHTML">
  <div class="card">
    <p class="text-slate text-sm">Loading health checks…</p>
  </div>
</div>
{% endblock %}
