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

<div class="d-flex align-items-center justify-content-between mb-3">
  <h4 class="mb-0"><i class="fas fa-link me-2 text-success"></i>Aliases
    <span class="text-muted fs-6 fw-normal ms-2">{{ total }} total</span>
  </h4>
  <div class="d-flex gap-2">
    {% if pending_count > 0 %}
      <a href="{{ url_for('data_hub.alias_from_failures') }}"
         class="btn btn-warning btn-sm">
        <i class="fas fa-exclamation-circle me-1"></i>{{ pending_count }} from failures
      </a>
    {% endif %}
    <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal">
      <i class="fas fa-plus me-1"></i>Add Alias
    </button>
  </div>
</div>

{% if filter_ing %}
<div class="alert alert-info py-2">
  Showing aliases for: <strong>{{ filter_ing.name }}</strong>
  <a href="{{ url_for('data_hub.alias_index') }}" class="ms-2 small">Clear filter</a>
</div>
{% endif %}

{# Filter bar #}
<div class="card border-0 shadow-sm mb-3">
  <div class="card-body py-2">
    <form method="GET" class="d-flex flex-wrap gap-2 align-items-center">
      <input name="search" class="form-control form-control-sm" style="width:200px"
             placeholder="Search alias..." value="{{ search }}">
      <select name="src" class="form-select form-select-sm" style="width:auto">
        <option value="">All Sources</option>
        {% for s in sources %}
          <option value="{{ s }}" {% if src_filter==s %}selected{% endif %}>{{ s }}</option>
        {% endfor %}
      </select>
      <button class="btn btn-sm btn-outline-success">Filter</button>
      {% if search or src_filter %}
        <a href="{{ url_for('data_hub.alias_index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
      {% endif %}
    </form>
  </div>
</div>

{# Alias table #}
<div class="card border-0 shadow-sm">
  <div class="table-responsive">
    <table class="table table-sm table-hover mb-0">
      <thead class="table-light">
        <tr>
          <th class="px-3">Alias</th>
          <th>Normalized</th>
          <th>→ Canonical Ingredient</th>
          <th>Source</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      {% for a in items %}
        <tr>
          <td class="px-3 small fw-medium">{{ a.alias }}</td>
          <td class="small text-muted">{{ a.alias_normalized }}</td>
          <td class="small">
            {% if a.ingredient %}
              <a href="{{ url_for('data_hub.taxonomy_edit', ing_id=a.ingredient_id) }}"
                 class="text-decoration-none">{{ a.ingredient.name }}</a>
              <span class="text-muted ms-1">({{ a.ingredient.category or '—' }})</span>
            {% else %}
              <span class="text-danger">⚠ orphaned</span>
            {% endif %}
          </td>
          <td>
            <span class="badge bg-light text-dark border" style="font-size:.65rem">
              {{ a.source or 'manual' }}
            </span>
          </td>
          <td>
            <form method="POST"
                  action="{{ url_for('data_hub.alias_delete', alias_id=a.id) }}"
                  onsubmit="return confirm('Delete alias {{ a.alias }}?')">
              <button class="btn btn-link btn-sm p-0 text-danger">
                <i class="fas fa-trash"></i>
              </button>
            </form>
          </td>
        </tr>
      {% else %}
        <tr><td colspan="5" class="text-center text-muted py-4">No aliases match your filters.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{# Pagination #}
{% if pages > 1 %}
<nav class="mt-3"><ul class="pagination pagination-sm justify-content-center mb-0">
  {% for p in range([1, page-2]|max, [pages+1, page+3]|min) %}
    <li class="page-item {% if p==page %}active{% endif %}">
      <a class="page-link" href="?page={{ p }}&search={{ search }}&src={{ src_filter }}">{{ p }}</a>
    </li>
  {% endfor %}
</ul></nav>
{% endif %}

{# Add alias modal #}
<div class="modal fade" id="addModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('data_hub.alias_add') }}">
        <div class="modal-header">
          <h5 class="modal-title">Add Alias</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label small fw-semibold">Alias Text</label>
            <input type="text" name="alias" class="form-control" required
                   placeholder="e.g. aubergine, evoo, scallions">
          </div>
          <div class="mb-3">
            <label class="form-label small fw-semibold">Maps To</label>
            <input type="text" id="addSearch" class="form-control"
                   placeholder="Search ingredient..." autocomplete="off">
            <input type="hidden" name="ingredient_id" id="addIngId">
            <div id="addResults" class="mt-1"></div>
          </div>
          <div class="mb-3">
            <label class="form-label small fw-semibold">Source</label>
            <select name="source" class="form-select">
              <option value="manual">manual</option>
              <option value="culinary">culinary</option>
              <option value="bulk_add">bulk_add</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success btn-sm" id="addSubmitBtn" disabled>Add Alias</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.getElementById('addSearch').addEventListener('input', function() {
  const q = this.value.trim();
  if (q.length < 2) return;
  fetch('/admin/data-hub/api/taxonomy/search?q=' + encodeURIComponent(q))
    .then(r => r.json())
    .then(results => {
      document.getElementById('addResults').innerHTML = results.map(r =>
        `<button type="button" class="btn btn-sm btn-outline-success me-1 mb-1"
           onclick="selectAdd(${r.id},'${r.name.replace(/'/g,"\\'")}')">
           ${r.name} <small class="text-muted">${r.category}</small>
         </button>`
      ).join('');
    });
});
function selectAdd(id, name) {
  document.getElementById('addIngId').value = id;
  document.getElementById('addSubmitBtn').disabled = false;
  document.getElementById('addResults').innerHTML =
    `<span class="badge bg-success">${name} selected</span>`;
  document.getElementById('addSearch').value = name;
}
</script>
{% endblock %}