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

<div class="d-flex align-items-center justify-content-between mb-4">
  <div>
    <a href="{{ url_for('data_hub.import_log') }}" class="text-muted text-decoration-none small">
      <i class="fas fa-arrow-left me-1"></i>Import Logs
    </a>
    <h4 class="mb-0 mt-1">Import #{{ log.id }} — {{ log.recipe_title or 'Unknown Recipe' }}</h4>
  </div>
  {% if log.recipe_id %}
    <a href="{{ url_for('view_recipe', recipe_id=log.recipe_id) }}" class="btn btn-outline-success btn-sm">
      <i class="fas fa-eye me-1"></i>View Recipe
    </a>
  {% endif %}
</div>

{# Meta row #}
<div class="row g-3 mb-4">
  <div class="col-md-2"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Status</div>
    <div class="mt-1">
      {% if log.status == 'success' %}<span class="badge bg-success fs-6">✓ Success</span>
      {% elif log.status == 'partial' %}<span class="badge bg-warning text-dark fs-6">⚠ Partial</span>
      {% else %}<span class="badge bg-danger fs-6">✗ Failed</span>{% endif %}
    </div>
  </div></div>
  <div class="col-md-2"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Match Rate</div>
    <div class="fs-4 fw-bold text-{{ rate_class }}">{{ match_pct or '—' }}{% if match_pct %}%{% endif %}</div>
  </div></div>
  <div class="col-md-2"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Extracted</div>
    <div class="fs-4 fw-bold">{{ log.total_extracted or 0 }}</div>
  </div></div>
  <div class="col-md-2"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Matched</div>
    <div class="fs-4 fw-bold text-success">{{ log.matched_count or 0 }}</div>
  </div></div>
  <div class="col-md-2"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Unmatched</div>
    <div class="fs-4 fw-bold {% if log.unmatched_count %}text-danger{% endif %}">{{ log.unmatched_count or 0 }}</div>
  </div></div>
  <div class="col-md-2"><div class="card border-0 shadow-sm text-center py-3">
    <div class="text-muted small">Duration</div>
    <div class="fs-5 fw-bold">{{ (log.duration_ms / 1000)|round(1) if log.duration_ms else '—' }}{% if log.duration_ms %}s{% endif %}</div>
  </div></div>
</div>

{# Resolution tiers #}
{% if tiers %}
<div class="card border-0 shadow-sm mb-3">
  <div class="card-header bg-white fw-semibold border-0">Resolution Tiers</div>
  <div class="card-body">
    <div class="d-flex gap-3 flex-wrap">
      {% for tier, count in tiers.items() %}
        <div class="text-center px-3 py-2 bg-light rounded">
          <div class="small text-muted">{{ tier|replace('_',' ')|title }}</div>
          <div class="fw-bold">{{ count }}</div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

{# Unmatched items — most important #}
{% if unmatched %}
<div class="card border-0 shadow-sm border-danger mb-3" style="border-left:4px solid #dc3545 !important">
  <div class="card-header bg-white fw-semibold border-0 text-danger">
    <i class="fas fa-exclamation-circle me-2"></i>Unmatched Items ({{ unmatched|length }})
  </div>
  <div class="table-responsive">
    <table class="table table-sm mb-0">
      <thead class="table-light"><tr><th class="px-3">Raw String</th><th>Reason</th></tr></thead>
      <tbody>
      {% for item in unmatched %}
        <tr>
          <td class="px-3 small fw-medium">{{ item.name if item is mapping else item }}</td>
          <td class="small text-muted">{{ item.reason if item is mapping and item.reason else '—' }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

{# Matched items #}
{% if matched %}
<div class="card border-0 shadow-sm mb-3">
  <div class="card-header bg-white fw-semibold border-0 text-success">
    <i class="fas fa-check-circle me-2"></i>Matched Ingredients ({{ matched|length }})
  </div>
  <div class="table-responsive" style="max-height:300px;overflow-y:auto">
    <table class="table table-sm mb-0">
      <thead class="table-light"><tr><th class="px-3">Raw</th><th>Resolved To</th><th>Tier</th></tr></thead>
      <tbody>
      {% for item in matched %}
        <tr>
          <td class="px-3 small">{{ item.raw if item is mapping else item }}</td>
          <td class="small fw-medium">{{ item.canonical if item is mapping else '—' }}</td>
          <td class="small text-muted">{{ item.tier if item is mapping else '—' }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

{# Error message #}
{% if log.error_message %}
<div class="card border-0 shadow-sm border-danger mb-3">
  <div class="card-header bg-white fw-semibold border-0 text-danger">Error Details</div>
  <div class="card-body p-0">
    <pre class="p-3 mb-0 small" style="max-height:200px;overflow-y:auto;background:#fff5f5">{{ log.error_message }}</pre>
  </div>
</div>
{% endif %}

{% endblock %}