{% extends "admin/base_admin.html" %}
{% set admin_page = "suppliers" %}
{% block title %}Supplier Management - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-8">
    <div>
      <h1 class="text-2xl">Supplier Management</h1>
      <p class="text-sm text-slate mt-1">
        {{ suppliers | length }} suppliers shown
        &middot; {{ supplier_stats.claimed }} claimed
        &middot; {{ supplier_stats.growth }} Growth
        &middot; {{ supplier_stats.pro }} Pro
      </p>
    </div>
    <div class="flex gap-2">
      <a href="{{ url_for('admin.supplier_new') }}" class="btn btn-sm">+ New Supplier</a>
      <a href="{{ url_for('admin.index') }}" class="btn-outline btn-sm">Back to Dashboard</a>
    </div>
  </header>

  <!-- Filters -->
  <div class="card mb-6" style="padding:1rem 1.25rem;">
    <form class="flex flex-wrap gap-3 items-end"
          hx-get="{{ url_for('admin.supplier_results') }}"
          hx-target="#supplier-results"
          hx-trigger="change, input delay:300ms"
          hx-indicator="#suppliers-loading">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Search</label>
        <input type="text" name="search" value="{{ current_search }}" placeholder="Company name..."
               class="form-input" style="min-width:180px">
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Tier</label>
        <select name="tier" class="form-input" style="min-width:120px">
          <option value="">All</option>
          {% for t in tiers %}
          <option value="{{ t }}" {% if t == current_tier %}selected{% endif %}>{{ t | capitalize }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Country</label>
        <select name="country" class="form-input" style="min-width:120px">
          <option value="">All</option>
          {% for c in countries %}
          <option value="{{ c }}" {% if c == current_country %}selected{% endif %}>{{ c }}</option>
          {% endfor %}
        </select>
      </div>

      <svg id="suppliers-loading" class="htmx-indicator search-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="10" stroke="#CBD5E1" stroke-width="3"/>
        <path d="M12 2a10 10 0 0 1 10 10" stroke="#0EA5E9" stroke-width="3" stroke-linecap="round"/>
      </svg>
    </form>
  </div>

  <!-- Bulk action bar -->
  <form id="bulk-outreach-form" method="post" action="{{ url_for('admin.outreach_add_prospects') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="supplier_ids" id="bulk-supplier-ids" value="">
    <div id="bulk-bar" class="card mb-4" style="padding:0.75rem 1.25rem;display:none;align-items:center;gap:1rem;background:#EFF6FF;border:1px solid #BFDBFE;">
      <span id="bulk-count" class="text-sm font-semibold text-navy">0 selected</span>
      <button type="submit" class="btn btn-sm">Add to Outreach Pipeline</button>
      <button type="button" class="btn-outline btn-sm" onclick="clearSelection()">Clear</button>
    </div>
  </form>

  <!-- Results -->
  <div id="supplier-results">
    {% include "admin/partials/supplier_results.html" %}
  </div>

<script>
  const selectedIds = new Set();

  function toggleSelect(id, checked) {
    if (checked) selectedIds.add(id);
    else selectedIds.delete(id);
    updateBulkBar();
  }

  function clearSelection() {
    selectedIds.clear();
    document.querySelectorAll('.supplier-checkbox').forEach(cb => cb.checked = false);
    updateBulkBar();
  }

  function updateBulkBar() {
    const bar = document.getElementById('bulk-bar');
    const count = document.getElementById('bulk-count');
    const ids = document.getElementById('bulk-supplier-ids');
    bar.style.display = selectedIds.size > 0 ? 'flex' : 'none';
    count.textContent = selectedIds.size + ' selected';
    ids.value = Array.from(selectedIds).join(',');
  }

  // Re-attach after HTMX swap
  document.body.addEventListener('htmx:afterSwap', () => {
    document.querySelectorAll('.supplier-checkbox').forEach(cb => {
      if (selectedIds.has(Number(cb.dataset.id))) cb.checked = true;
    });
  });
</script>
{% endblock %}
