{% 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-exclamation-triangle me-2 text-warning"></i>Flag Queue
    {% set total = (flag_count or 0) + (pending_products|length if pending_products else 0) %}
    {% if total > 0 %}
      <span class="badge bg-danger ms-2">{{ total }}</span>
    {% endif %}
  </h4>
  <div class="d-flex gap-2">
    <a href="?view=grouped" class="btn btn-sm {% if view=='grouped' %}btn-success{% else %}btn-outline-secondary{% endif %}">
      <i class="fas fa-layer-group me-1"></i>By String
    </a>
    <a href="?view=by_recipe" class="btn btn-sm {% if view=='by_recipe' %}btn-success{% else %}btn-outline-secondary{% endif %}">
      <i class="fas fa-list me-1"></i>By Recipe
    </a>
    <a href="?view=products" class="btn btn-sm {% if view=='products' %}btn-warning{% else %}btn-outline-secondary{% endif %}">
      <i class="fas fa-box me-1"></i>Products
      {% if pending_products and pending_products|length > 0 %}
        <span class="badge bg-danger ms-1">{{ pending_products|length }}</span>
      {% endif %}
    </a>
  </div>
</div>

{# ── PRODUCTS PENDING REVIEW ── #}
{% if view == 'products' %}
  {% if not pending_products or pending_products|length == 0 %}
    <div class="alert alert-success">
      <i class="fas fa-check-circle me-2"></i>No products pending review.
    </div>
  {% else %}
    <p class="text-muted small mb-3">
      These products were auto-created by the USDA CSV fallback during import.
      Review each one — approve if it's a legitimate branded product, merge into
      ingredients if it belongs there, or delete if it's a duplicate or error.
    </p>
    {% for p in pending_products %}
    <div class="card border-0 shadow-sm mb-3 border-start border-4 border-warning">
      <div class="card-body">
        <div class="row align-items-center g-3">
          <div class="col-md-4">
            <div class="fw-bold">{{ p.name }}</div>
            <div class="text-muted small">{{ p.category or '—' }}</div>
            {% if p.usda_match_score %}
              <div class="mt-1">
                <span class="badge {% if p.usda_match_score >= 0.6 %}bg-success{% else %}bg-warning text-dark{% endif %}">
                  USDA score: {{ (p.usda_match_score * 100)|int }}%
                </span>
              </div>
            {% endif %}
            {% if p.review_reason %}
              <div class="mt-1">
                {% for reason in p.review_reason.split(', ') %}
                  <span class="badge bg-light text-dark border me-1" style="font-size:.65rem">{{ reason }}</span>
                {% endfor %}
              </div>
            {% endif %}
          </div>
          <div class="col-md-8">
            <div class="d-flex gap-2 flex-wrap">
              {# Approve #}
              <form method="POST" action="{{ url_for('data_hub.product_review_approve', product_id=p.id) }}">
                <button class="btn btn-success btn-sm">
                  <i class="fas fa-check me-1"></i>Approve as Product
                </button>
              </form>
              {# Merge into ingredient #}
              <form method="POST" action="{{ url_for('data_hub.product_review_merge', product_id=p.id) }}"
                    onsubmit="return confirm('Merge {{ p.name }} into ingredients?')">
                <input type="hidden" name="category" value="Miscellaneous">
                <button class="btn btn-info btn-sm text-white">
                  <i class="fas fa-compress-arrows-alt me-1"></i>Merge → Ingredient
                </button>
              </form>
              {# Delete #}
              <form method="POST" action="{{ url_for('data_hub.product_review_delete', product_id=p.id) }}"
                    onsubmit="return confirm('Delete {{ p.name }}?')">
                <button class="btn btn-danger btn-sm">
                  <i class="fas fa-trash me-1"></i>Delete
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  {% endif %}

{# ── GROUPED INGREDIENT FLAGS ── #}
{% elif view == 'grouped' %}
  {% if flag_count == 0 %}
    <div class="alert alert-success">
      <i class="fas fa-check-circle me-2"></i>No flagged recipes. Import some recipes to populate this queue.
    </div>
  {% else %}
    <p class="text-muted small mb-3">
      {{ groups|length }} unique unmatched strings across {{ flag_count }} flagged recipe(s).
      Resolve each string once — the alias applies to all affected recipes.
    </p>
    {% for group in groups %}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-body">
        <div class="row align-items-start g-3">
          <div class="col-md-4">
            <div class="fw-bold">{{ group.string }}</div>
            <div class="text-muted small">normalized: {{ group.normalized }}</div>
            <div class="mt-1">
              {% for r in group.recipes %}
                <a href="{{ url_for('view_recipe', recipe_id=r.id) }}"
                   class="badge bg-light text-dark border me-1 text-decoration-none">
                  {{ r.title }}
                </a>
              {% endfor %}
            </div>
            <div class="text-muted small mt-1">
              {{ group.count }} occurrence(s) across {{ group.recipes|length }} recipe(s)
            </div>
          </div>
          <div class="col-md-4">
            <div class="small text-muted mb-1">Top suggestions:</div>
            {% for s in group.suggestions %}
              <form method="POST" action="{{ url_for('data_hub.flag_resolve') }}" class="d-inline">
                <input type="hidden" name="raw_string" value="{{ group.string }}">
                <input type="hidden" name="ingredient_id" value="{{ s.id }}">
                <input type="hidden" name="apply_to_all" value="1">
                <button type="submit" class="btn btn-sm btn-outline-success mb-1">
                  {{ s.name }} <span class="badge bg-success ms-1">{{ s.score }}%</span>
                </button>
              </form>
            {% else %}
              <span class="text-muted small">No suggestions.</span>
            {% endfor %}
          </div>
          <div class="col-md-4">
            <form method="POST" action="{{ url_for('data_hub.flag_resolve') }}">
              <input type="hidden" name="raw_string" value="{{ group.string }}">
              <input type="hidden" name="apply_to_all" value="1">
              <div class="input-group input-group-sm mb-2">
                <input type="text" class="form-control" placeholder="Search ingredients..."
                       oninput="searchIngredients(this, '{{ loop.index }}')" autocomplete="off">
              </div>
              <div id="search-results-{{ loop.index }}" class="mb-2"></div>
              <input type="hidden" name="ingredient_id" id="ing-id-{{ loop.index }}">
              <div class="d-flex gap-2">
                <button type="submit" class="btn btn-success btn-sm"
                        id="resolve-btn-{{ loop.index }}" disabled>
                  <i class="fas fa-check me-1"></i>Resolve All
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm"
                        data-bs-toggle="modal" data-bs-target="#createModal"
                        data-raw="{{ group.string }}">+ New</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  {% endif %}

{# ── BY RECIPE VIEW ── #}
{% else %}
  {% if flag_count == 0 %}
    <div class="alert alert-success">No flagged recipes.</div>
  {% else %}
    {% for item in recipes %}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white d-flex align-items-center justify-content-between">
        <span class="fw-semibold">{{ item.recipe.title }}</span>
        <div class="d-flex gap-2">
          <a href="{{ url_for('view_recipe', recipe_id=item.recipe.id) }}"
             class="btn btn-sm btn-outline-secondary">View</a>
          <a href="{{ url_for('admin.resolve_flagged', recipe_id=item.recipe.id) }}"
             class="btn btn-sm btn-warning">Resolve</a>
        </div>
      </div>
      <div class="card-body py-2">
        <div class="small text-muted mb-1">Unmatched ({{ item.count }}):</div>
        {% for u in item.unmatched %}
          <span class="badge bg-danger me-1 mb-1">{{ u }}</span>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  {% endif %}
{% endif %}

{# Create New Ingredient Modal #}
<div class="modal fade" id="createModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{{ url_for('data_hub.flag_create_resolve') }}">
        <div class="modal-header">
          <h5 class="modal-title">Create New Ingredient</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="raw_string" id="modalRawString">
          <div class="mb-3">
            <label class="form-label small fw-semibold">Original String</label>
            <div id="modalRawDisplay" class="text-muted small"></div>
          </div>
          <div class="mb-3">
            <label class="form-label small fw-semibold">Canonical Name</label>
            <input type="text" name="new_name" id="modalNewName" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label small fw-semibold">Category</label>
            <input type="text" name="category" class="form-control" value="Miscellaneous">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Create & Resolve</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function searchIngredients(input, idx) {
  const q = input.value.trim();
  const container = document.getElementById('search-results-' + idx);
  if (q.length < 2) { container.innerHTML = ''; return; }
  fetch('/admin/data-hub/api/flags/suggestions?q=' + encodeURIComponent(q))
    .then(r => r.json())
    .then(results => {
      container.innerHTML = results.map(s =>
        `<button type="button" class="btn btn-sm btn-outline-success me-1 mb-1"
           onclick="selectIngredient(${s.id},'${s.name.replace(/'/g,"\\'")}',${idx})">
           ${s.name} <span class="badge bg-success">${s.score}%</span>
         </button>`
      ).join('');
    });
}
function selectIngredient(id, name, idx) {
  document.getElementById('ing-id-' + idx).value = id;
  const btn = document.getElementById('resolve-btn-' + idx);
  btn.disabled = false;
  btn.textContent = '✓ Resolve All → ' + name;
  document.getElementById('search-results-' + idx).innerHTML =
    `<span class="badge bg-success">${name} selected</span>`;
}
document.querySelectorAll('[data-bs-target="#createModal"]').forEach(btn => {
  btn.addEventListener('click', () => {
    const raw = btn.dataset.raw;
    document.getElementById('modalRawString').value = raw;
    document.getElementById('modalRawDisplay').textContent = raw;
    document.getElementById('modalNewName').value =
      raw.charAt(0).toUpperCase() + raw.slice(1);
  });
});
</script>
{% endblock %}