{% extends "data_hub/base_data_hub.html" %}
{% block data_hub_content %}

<div class="d-flex align-items-center justify-content-between mb-4">
  <div>
    <h4 class="mb-1"><i class="fas fa-shield-alt me-2 text-success"></i>System QA & Import Readiness</h4>
    <div class="text-muted small">
      {{ stats.ingredients|default(0) }} ingredients &middot;
      {{ stats.aliases|default(0) }} aliases &middot;
      {{ stats.products|default(0) }} products
    </div>
  </div>
  <button class="btn btn-success" id="runBtn" onclick="startQA()">
    <i class="fas fa-play me-1"></i>Run Full Check
  </button>
</div>

{# Progress bar #}
<div id="progressSection" class="d-none mb-4">
  <div class="card border-0 shadow-sm">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="fw-semibold" id="progressLabel">Initializing...</span>
        <span class="text-muted small" id="progressCount"></span>
      </div>
      <div class="progress" style="height:8px">
        <div class="progress-bar bg-success progress-bar-striped progress-bar-animated"
             id="progressBar" style="width:5%"></div>
      </div>
    </div>
  </div>
</div>

{# Results #}
<div id="resultsSection">
{% if last_job and last_job.results %}
  {% set r = last_job.results %}

  {# Import Readiness #}
  <div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-white fw-semibold">
      <i class="fas fa-check-circle me-2 text-success"></i>Import Readiness
      <span class="badge {% if r.import_readiness.passed == r.import_readiness.total %}bg-success{% else %}bg-warning text-dark{% endif %} ms-2">
        {{ r.import_readiness.passed }}/{{ r.import_readiness.total }}
      </span>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        {% for chk in r.import_readiness.checks %}
        <tr>
          <td class="ps-3" style="width:24px">
            {% if chk.ok %}<i class="fas fa-check text-success"></i>
            {% else %}<i class="fas fa-times text-danger"></i>{% endif %}
          </td>
          <td class="fw-medium small">{{ chk.name }}</td>
          <td class="text-muted small">{{ chk.detail }}</td>
        </tr>
        {% endfor %}
      </table>
    </div>
  </div>

  {# Pipeline Accuracy #}
  <div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-white fw-semibold">
      <i class="fas fa-vial me-2 text-primary"></i>Pipeline Accuracy
      <span class="badge {% if r.pipeline.pct >= 95 %}bg-success{% elif r.pipeline.pct >= 85 %}bg-warning text-dark{% else %}bg-danger{% endif %} ms-2">
        {{ r.pipeline.pct }}%
      </span>
      <span class="text-muted small fw-normal ms-2">{{ r.pipeline.passed }}/{{ r.pipeline.total }} cases</span>
    </div>
    {% if r.pipeline.failures %}
    <div class="card-body p-0">
      <div class="table-responsive" style="max-height:300px;overflow-y:auto">
        <table class="table table-sm mb-0">
          <thead class="table-light sticky-top">
            <tr><th class="ps-3">Input</th><th>Expected</th><th>Got</th><th>Type</th></tr>
          </thead>
          <tbody>
          {% for f in r.pipeline.failures[:100] %}
          <tr class="table-danger">
            <td class="ps-3 small fw-medium">{{ f.input }}</td>
            <td class="small text-success">{{ f.expected }}</td>
            <td class="small text-danger">{{ f.got }}</td>
            <td class="small text-muted">{{ f.type }}</td>
          </tr>
          {% endfor %}
          {% if r.pipeline.failures|length > 100 %}
          <tr><td colspan="4" class="text-center text-muted small py-2">
            ... and {{ r.pipeline.failures|length - 100 }} more
          </td></tr>
          {% endif %}
          </tbody>
        </table>
      </div>
    </div>
    {% else %}
    <div class="card-body">
      <span class="text-success"><i class="fas fa-check-circle me-1"></i>All cases passed</span>
    </div>
    {% endif %}
  </div>

  {# Integrity Checks — 3 columns #}
  <div class="row g-3">
    <div class="col-md-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white fw-semibold">
          <i class="fas fa-clone me-2 text-warning"></i>Duplicate Canonicals
          <span class="badge {% if r.duplicates.total == 0 %}bg-success{% else %}bg-danger{% endif %} ms-2">{{ r.duplicates.total }}</span>
        </div>
        <div class="card-body p-0">
          {% if r.duplicates.duplicates %}
          <ul class="list-group list-group-flush">
            {% for d in r.duplicates.duplicates[:20] %}
            <li class="list-group-item py-1 small">
              <span class="badge bg-danger me-1">{{ d.count }}</span>
              {{ d.names|join(' / ') }}
            </li>
            {% endfor %}
          </ul>
          {% else %}
          <div class="p-3 text-success small"><i class="fas fa-check-circle me-1"></i>None found</div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white fw-semibold">
          <i class="fas fa-unlink me-2 text-warning"></i>Orphaned Aliases
          <span class="badge {% if r.orphans.total == 0 %}bg-success{% else %}bg-danger{% endif %} ms-2">{{ r.orphans.total }}</span>
        </div>
        <div class="card-body p-0">
          {% if r.orphans.orphans %}
          <ul class="list-group list-group-flush">
            {% for o in r.orphans.orphans[:20] %}
            <li class="list-group-item py-1 small">
              "{{ o.alias }}" → <span class="text-danger">id {{ o.ingredient_id }} missing</span>
            </li>
            {% endfor %}
          </ul>
          {% else %}
          <div class="p-3 text-success small"><i class="fas fa-check-circle me-1"></i>None found</div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white fw-semibold">
          <i class="fas fa-ghost me-2 text-warning"></i>Product Shadows
          <span class="badge {% if r.shadows.total == 0 %}bg-success{% else %}bg-warning text-dark{% endif %} ms-2">{{ r.shadows.total }}</span>
        </div>
        <div class="card-body p-0">
          {% if r.shadows.shadows %}
          <ul class="list-group list-group-flush">
            {% for s in r.shadows.shadows[:20] %}
            <li class="list-group-item py-1 small">
              <span class="text-danger">{{ s.product_name }}</span>
              <span class="text-muted mx-1">→</span>
              <span class="text-success">{{ s.ingredient_name }}</span>
            </li>
            {% endfor %}
          </ul>
          {% else %}
          <div class="p-3 text-success small"><i class="fas fa-check-circle me-1"></i>None found</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="text-muted small mt-3">
    <i class="fas fa-clock me-1"></i>Last run: {{ last_job.finished_at[:19].replace('T',' ') }} UTC
  </div>

{% else %}
  <div class="alert alert-info">
    <i class="fas fa-info-circle me-2"></i>
    No QA results yet. Click <strong>Run Full Check</strong> to begin.
    The pipeline test will check every canonical and alias in the database — expect 60-90 seconds.
  </div>
{% endif %}
</div>

<script>
let _pollInterval = null;

function startQA() {
  document.getElementById('runBtn').disabled = true;
  document.getElementById('runBtn').innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Running...';
  document.getElementById('progressSection').classList.remove('d-none');
  document.getElementById('resultsSection').innerHTML = '';

  fetch('{{ url_for("data_hub.qa_run") }}', {method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken': getCookie('csrf_token')}})
    .then(r => r.json())
    .then(data => {
      if (data.job_id) pollJob(data.job_id);
    })
    .catch(e => { showError(e); });
}

const STAGE_LABELS = {
  'queued': 'Queued...',
  'import_readiness': 'Checking import readiness...',
  'duplicates': 'Scanning for duplicate canonicals...',
  'orphans': 'Scanning for orphaned aliases...',
  'shadows': 'Scanning for product shadows...',
  'pipeline': 'Testing pipeline accuracy...',
  'done': 'Complete',
};

const STAGE_PCT = {
  'queued': 2, 'import_readiness': 15, 'duplicates': 30,
  'orphans': 45, 'shadows': 60, 'pipeline': 95, 'done': 100
};

function pollJob(jobId) {
  _pollInterval = setInterval(() => {
    fetch(`{{ url_for("data_hub.qa_index") | replace("/qa/", "/qa/status/") }}${jobId}`)
      .then(r => r.json())
      .then(job => {
        const stage = job.progress?.stage || 'queued';
        const label = STAGE_LABELS[stage] || stage;
        const basePct = STAGE_PCT[stage] || 5;

        // Refine pipeline progress
        let pct = basePct;
        if (stage === 'pipeline' && job.progress.total > 0) {
          pct = 60 + Math.round(job.progress.done / job.progress.total * 35);
        }

        document.getElementById('progressLabel').textContent = label;
        document.getElementById('progressBar').style.width = pct + '%';
        if (stage === 'pipeline' && job.progress.total > 0) {
          document.getElementById('progressCount').textContent =
            `${job.progress.done} / ${job.progress.total}`;
        }

        if (job.status === 'complete' || job.status === 'error') {
          clearInterval(_pollInterval);
          document.getElementById('progressSection').classList.add('d-none');
          document.getElementById('runBtn').disabled = false;
          document.getElementById('runBtn').innerHTML = '<i class="fas fa-play me-1"></i>Run Full Check';
          if (job.status === 'complete') {
            window.location.reload();
          } else {
            showError(job.error || 'Unknown error');
          }
        }
      });
  }, 2000);
}

function showError(msg) {
  document.getElementById('resultsSection').innerHTML =
    `<div class="alert alert-danger"><i class="fas fa-exclamation-triangle me-2"></i>${msg}</div>`;
}

function getCookie(name) {
  const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
  return v ? v[2] : '';
}
</script>
{% endblock %}