{% extends "admin/base_admin.html" %}
{% set admin_page = "outreach" %}
{% block title %}Outreach Pipeline - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_head %}
<style>
  .pipeline-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  @media (min-width: 640px) {
    .pipeline-status-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 1024px) {
    .pipeline-status-grid { grid-template-columns: repeat(6, 1fr); }
  }
</style>
{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <div>
      <h1 class="text-2xl">Outreach</h1>
      <p class="text-sm text-slate mt-1">
        {{ pipeline.total }} supplier{{ 's' if pipeline.total != 1 else '' }} in pipeline
        &middot; Sending from: <span class="mono text-xs">{{ outreach_email }}</span>
      </p>
    </div>
    <div class="flex gap-2">
      <a href="{{ url_for('admin.outreach_import') }}" class="btn-outline btn-sm">Import CSV</a>
      <a href="{{ url_for('admin.suppliers') }}" class="btn-outline btn-sm">+ Add from Suppliers</a>
    </div>
  </header>

  <!-- Pipeline cards -->
  <div class="pipeline-status-grid">
    {% set status_colors = {
      'prospect':       '#E2E8F0',
      'contacted':      '#DBEAFE',
      'replied':        '#D1FAE5',
      'signed_up':      '#A7F3D0',
      'declined':       '#FEE2E2',
      'not_interested': '#F1F5F9',
    } %}
    {% for s in statuses %}
    <a href="{{ url_for('admin.outreach') }}?status={{ s }}"
       class="card text-center"
       style="padding:1rem;cursor:pointer;background:{{ status_colors.get(s,'#F8FAFC') }};{{ 'outline:2px solid #1D4ED8;' if current_status == s else '' }}">
      <div class="text-2xl font-bold">{{ pipeline.counts.get(s, 0) }}</div>
      <div class="text-xs text-slate mt-1">{{ s | replace('_', ' ') | title }}</div>
    </a>
    {% endfor %}
  </div>

  <!-- Follow-up banner -->
  {% if follow_up_due > 0 %}
  <div style="background:#FEF3C7;border:1px solid #F59E0B;border-radius:6px;padding:0.75rem 1rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between">
    <span style="color:#92400E;font-size:0.875rem">
      &#x23F0; <strong>{{ follow_up_due }}</strong> follow-up{{ 's' if follow_up_due != 1 else '' }} due today
    </span>
    <a href="{{ url_for('admin.outreach') }}?follow_up=due"
       class="btn-outline btn-sm" style="font-size:0.75rem;padding:3px 10px">Show them</a>
  </div>
  {% endif %}

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

      <div>
        <label class="text-xs font-semibold text-slate block mb-1">Status</label>
        <select name="status" class="form-input" style="min-width:140px">
          <option value="">All statuses</option>
          {% for s in statuses %}
          <option value="{{ s }}" {% if s == current_status %}selected{% endif %}>{{ s | replace('_', ' ') | title }}</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:100px">
          <option value="">All</option>
          {% for c in countries %}
          <option value="{{ c }}" {% if c == current_country %}selected{% endif %}>{{ c }}</option>
          {% endfor %}
        </select>
      </div>

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

      <svg id="outreach-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>

  <!-- Results -->
  <div id="outreach-results">
    {% include "admin/partials/outreach_results.html" %}
  </div>
{% endblock %}
