{% extends "admin/base_admin.html" %}
{% set admin_page = "marketplace" %}
{% block title %}Marketplace — Admin — {{ config.APP_NAME }}{% endblock %}

{% block admin_head %}
<style>
  .mkt-flag-toggle {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; border:1px solid #CBD5E1; border-radius:8px;
    font-size:0.8125rem; cursor:pointer; transition:all 0.15s;
  }
  .mkt-flag-toggle.enabled  { background:#D1FAE5; border-color:#6EE7B7; color:#065F46; }
  .mkt-flag-toggle.disabled { background:#F1F5F9; border-color:#CBD5E1; color:#64748B; }
  .mkt-flag-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .mkt-flag-toggle.enabled  .mkt-flag-dot { background:#10B981; }
  .mkt-flag-toggle.disabled .mkt-flag-dot { background:#94A3B8; }

  .activity-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px;
  }
  .activity-dot-lead   { background:#3B82F6; }
  .activity-dot-unlock { background:#10B981; }
  .activity-dot-credit { background:#F59E0B; }
</style>
{% endblock %}

{% block admin_content %}
<header class="flex justify-between items-center mb-8">
  <div>
    <h1 class="text-2xl">Marketplace</h1>
    <p class="text-slate text-sm mt-1">Lead funnel, credit economy, and supplier engagement</p>
  </div>
  <a href="{{ url_for('admin.leads') }}" class="btn-outline btn-sm">All Leads</a>
</header>

<!-- Lead Funnel -->
<h2 class="text-sm font-bold text-slate mb-3" style="text-transform:uppercase;letter-spacing:.06em">Lead Funnel</h2>
<div class="grid-4 mb-8">
  <div class="card text-center">
    <p class="card-header">Total Leads</p>
    <a href="{{ url_for('admin.leads') }}" class="text-3xl font-bold text-navy">{{ funnel.total }}</a>
  </div>
  <div class="card text-center">
    <p class="card-header">Verified New</p>
    <a href="{{ url_for('admin.leads', status='new') }}" class="text-3xl font-bold text-navy">{{ funnel.verified_new }}</a>
    <p class="text-xs text-slate mt-1">ready to unlock</p>
  </div>
  <div class="card text-center">
    <p class="card-header">Unlocked</p>
    <a href="{{ url_for('admin.leads', status='forwarded') }}" class="text-3xl font-bold text-navy">{{ funnel.unlocked }}</a>
    <p class="text-xs text-slate mt-1">by suppliers</p>
  </div>
  <div class="card text-center">
    <p class="card-header">Conversion</p>
    <p class="text-3xl font-bold {% if funnel.conversion_rate > 0 %}text-navy{% else %}text-slate{% endif %}">{{ funnel.conversion_rate }}%</p>
    <p class="text-xs text-slate mt-1"><a href="{{ url_for('admin.leads', status='closed_won') }}">{{ funnel.won }} won</a></p>
  </div>
</div>

<!-- Credit Economy + Supplier Engagement side-by-side -->
<div class="grid-2 mb-8" style="gap:1.5rem">
  <div class="card" style="padding:1.5rem">
    <h2 class="text-sm font-bold text-slate mb-4" style="text-transform:uppercase;letter-spacing:.06em">Credit Economy</h2>
    <dl style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div>
        <p class="text-xs text-slate">Issued (all time)</p>
        <p class="text-2xl font-bold text-navy">{{ "{:,}".format(credits.issued | int) }}</p>
      </div>
      <div>
        <p class="text-xs text-slate">Consumed (all time)</p>
        <p class="text-2xl font-bold text-navy">{{ "{:,}".format(credits.consumed | int) }}</p>
      </div>
      <div>
        <p class="text-xs text-slate">Outstanding balance</p>
        <p class="text-2xl font-bold text-navy">{{ "{:,}".format(credits.outstanding | int) }}</p>
      </div>
      <div>
        <p class="text-xs text-slate">Monthly burn (30d)</p>
        <p class="text-2xl font-bold {% if credits.monthly_burn > 0 %}text-navy{% else %}text-slate{% endif %}">{{ "{:,}".format(credits.monthly_burn | int) }}</p>
      </div>
    </dl>
  </div>

  <div class="card" style="padding:1.5rem">
    <h2 class="text-sm font-bold text-slate mb-4" style="text-transform:uppercase;letter-spacing:.06em">Supplier Engagement</h2>
    <dl style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div>
        <p class="text-xs text-slate">Active suppliers</p>
        <a href="{{ url_for('admin.suppliers') }}" class="text-2xl font-bold text-navy">{{ suppliers.active }}</a>
        <p class="text-xs text-slate mt-1">growth/pro w/ credits</p>
      </div>
      <div>
        <p class="text-xs text-slate">Avg unlocks / supplier</p>
        <p class="text-2xl font-bold text-navy">{{ suppliers.avg_unlocks }}</p>
      </div>
      <div>
        <p class="text-xs text-slate">Response rate</p>
        <p class="text-2xl font-bold {% if suppliers.response_rate > 0 %}text-navy{% else %}text-slate{% endif %}">{{ suppliers.response_rate }}%</p>
        <p class="text-xs text-slate mt-1">replied or updated status</p>
      </div>
      <div>
        <p class="text-xs text-slate">Leads pipeline</p>
        <p class="text-2xl font-bold text-navy">{{ funnel.verified_new }}</p>
        <p class="text-xs text-slate mt-1">available to unlock</p>
      </div>
    </dl>
  </div>
</div>

<!-- Feature Flag Toggles -->
<div class="card mb-8" style="padding:1.5rem">
  <h2 class="text-sm font-bold text-slate mb-4" style="text-transform:uppercase;letter-spacing:.06em">Feature Flags</h2>
  <div class="flex gap-4 flex-wrap">
    {% for flag_name, flag_label in [('lead_unlock', 'Lead Unlock (self-service)'), ('supplier_signup', 'Supplier Signup')] %}
    {% set is_on = flags.get(flag_name, false) %}
    <form method="post" action="{{ url_for('admin.flag_toggle') }}" class="m-0">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="name" value="{{ flag_name }}">
      <input type="hidden" name="next" value="{{ url_for('admin.marketplace_dashboard') }}">
      <button type="submit"
              class="mkt-flag-toggle {% if is_on %}enabled{% else %}disabled{% endif %}">
        <span class="mkt-flag-dot"></span>
        {{ flag_label }}
        <span class="text-xs">{{ 'ON' if is_on else 'OFF' }}</span>
      </button>
    </form>
    {% endfor %}
    <a href="{{ url_for('admin.flags') }}" class="text-xs text-slate" style="align-self:center;">All flags →</a>
  </div>
</div>

<!-- Activity Stream (HTMX lazy-loaded) -->
<div id="activity-panel"
     hx-get="{{ url_for('admin.marketplace_activity') }}"
     hx-trigger="load delay:300ms"
     hx-target="#activity-panel"
     hx-swap="outerHTML">
  <div class="card" style="padding:1.5rem">
    <p class="text-slate text-sm">Loading activity stream…</p>
  </div>
</div>
{% endblock %}
