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

<div class="d-flex align-items-center justify-content-between mb-4">
  <h4 class="mb-0"><i class="fas fa-file-import me-2 text-success"></i>Import Logs</h4>
  <a href="{{ url_for('recipe_hub.batch') }}" class="btn btn-success btn-sm">
    <i class="fas fa-plus me-1"></i>New Batch Import
  </a>
</div>

{# Summary cards #}
<div class="row g-3 mb-4">
  <div class="col-md-3"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Total Imports</div>
    <div class="fs-4 fw-bold">{{ summary.total }}</div>
  </div></div>
  <div class="col-md-3"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Overall Match Rate</div>
    <div class="fs-4 fw-bold {% if summary.overall_rate >= 90 %}text-success{% elif summary.overall_rate >= 70 %}text-warning{% else %}text-danger{% endif %}">
      {{ summary.overall_rate }}%
    </div>
  </div></div>
  <div class="col-md-3"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Total Ingredients Extracted</div>
    <div class="fs-4 fw-bold">{{ summary.total_extracted }}</div>
  </div></div>
  <div class="col-md-3"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Imports With Issues</div>
    <div class="fs-4 fw-bold {% if summary.flagged > 0 %}text-danger{% else %}text-success{% endif %}">
      {{ summary.flagged }}
    </div>
  </div></div>
</div>

{# Filter bar #}
<div class="card border-0 shadow-sm mb-3">
  <div class="card-body py-2">
    <form method="GET" class="d-flex gap-2 align-items-center">
      <label class="text-muted small mb-0">Filter:</label>
      <select name="status" class="form-select form-select-sm" style="width:160px" onchange="this.form.submit()">
        <option value="" {% if not status_filter %}selected{% endif %}>All statuses</option>
        <option value="success" {% if status_filter=='success' %}selected{% endif %}>✓ Success</option>
        <option value="partial" {% if status_filter=='partial' %}selected{% endif %}>⚠ Partial</option>
        <option value="failed" {% if status_filter=='failed' %}selected{% endif %}>✗ Failed</option>
      </select>
      {% if status_filter %}
        <a href="{{ url_for('data_hub.import_log') }}" class="btn btn-outline-secondary btn-sm">Clear</a>
      {% endif %}
      <span class="text-muted small ms-auto">{{ total }} records</span>
    </form>
  </div>
</div>

{# Log table #}
<div class="card border-0 shadow-sm">
  <div class="table-responsive">
    <table class="table table-hover table-sm mb-0">
      <thead class="table-light">
        <tr>
          <th class="px-3">ID</th>
          <th>Recipe</th>
          <th>File</th>
          <th>Status</th>
          <th>Match Rate</th>
          <th>Extracted</th>
          <th>Unmatched</th>
          <th>Duration</th>
          <th>Date</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      {% for item in logs %}
        {% set log = item.log %}
        <tr class="{% if log.has_issues %}table-warning{% endif %}">
          <td class="px-3 text-muted small">{{ log.id }}</td>
          <td class="small">
            {% if log.recipe %}
              <a href="{{ url_for('view_recipe', recipe_id=log.recipe_id) }}" class="text-decoration-none">
                {{ log.recipe_title or log.recipe.title or '—' }}
              </a>
            {% else %}
              <span class="text-muted">{{ log.recipe_title or '—' }}</span>
            {% endif %}
          </td>
          <td class="small text-muted">{{ log.filename or '—' }}</td>
          <td>
            {% if log.status == 'success' %}
              <span class="badge bg-success">✓ Success</span>
            {% elif log.status == 'partial' %}
              <span class="badge bg-warning text-dark">⚠ Partial</span>
            {% elif log.status == 'failed' %}
              <span class="badge bg-danger">✗ Failed</span>
            {% else %}
              <span class="badge bg-secondary">{{ log.status or '?' }}</span>
            {% endif %}
          </td>
          <td>
            {% if item.match_pct is not none %}
              <span class="badge bg-{{ item.rate_class }}">{{ item.match_pct }}%</span>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td class="small">{{ log.total_extracted or 0 }}</td>
          <td class="small {% if log.unmatched_count %}text-danger fw-semibold{% endif %}">
            {{ log.unmatched_count or 0 }}
          </td>
          <td class="small text-muted">
            {% if log.duration_ms %}{{ (log.duration_ms / 1000)|round(1) }}s{% else %}—{% endif %}
          </td>
          <td class="small text-muted">
            {{ log.created_at.strftime('%m/%d %H:%M') if log.created_at else '—' }}
          </td>
          <td>
            <a href="{{ url_for('data_hub.import_detail', log_id=log.id) }}"
               class="btn btn-outline-secondary btn-sm py-0 px-2">Detail</a>
          </td>
        </tr>
      {% else %}
        <tr><td colspan="10" class="text-center text-muted py-4">No import logs yet.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{# Pagination #}
{% if pages > 1 %}
<nav class="mt-3">
  <ul class="pagination pagination-sm justify-content-center">
    {% for p in range(1, pages + 1) %}
      <li class="page-item {% if p == page %}active{% endif %}">
        <a class="page-link" href="?page={{ p }}&status={{ status_filter }}">{{ p }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>
{% endif %}

{% endblock %}