{% extends "admin/base_admin.html" %}
{% set admin_page = "leads" %}
{% block title %}Lead #{{ lead.id }} - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_head %}
<style>
  .lead-heat-hot   { background:#FEE2E2; color:#991B1B; font-weight:600; font-size:0.75rem; padding:3px 10px; border-radius:9999px; display:inline-flex; align-items:center; gap:3px; }
  .lead-heat-warm  { background:#FEF3C7; color:#92400E; font-weight:600; font-size:0.75rem; padding:3px 10px; border-radius:9999px; display:inline-flex; align-items:center; gap:3px; }
  .lead-heat-cool  { background:#DBEAFE; color:#1E40AF; font-weight:600; font-size:0.75rem; padding:3px 10px; border-radius:9999px; display:inline-flex; align-items:center; gap:3px; }

  .lead-status-new                 { background:#DBEAFE; color:#1E40AF; }
  .lead-status-pending_verification { background:#FEF3C7; color:#92400E; }
  .lead-status-contacted           { background:#EDE9FE; color:#5B21B6; }
  .lead-status-forwarded           { background:#D1FAE5; color:#065F46; }
  .lead-status-closed_won          { background:#D1FAE5; color:#14532D; }
  .lead-status-closed_lost         { background:#F1F5F9; color:#475569; }
  .lead-status-badge {
    font-size:0.75rem; font-weight:600; padding:3px 10px; border-radius:9999px;
    display:inline-block; white-space:nowrap;
  }
</style>
{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <div>
      <a href="{{ url_for('admin.leads') }}" class="text-sm text-slate">&larr; All Leads</a>
      <div class="flex items-center gap-3 mt-1">
        <h1 class="text-2xl">Lead #{{ lead.id }}</h1>
        <span class="lead-heat-{{ lead.heat_score or 'cool' }}">{{ (lead.heat_score or 'cool') | upper }}</span>
      </div>
    </div>
    <!-- Inline HTMX status update -->
    <div id="lead-status-section">
      <div class="flex items-center gap-3 mb-3">
        <span class="lead-status-badge lead-status-{{ lead.status | replace(' ', '_') }}" style="font-size:0.875rem;padding:4px 12px;">
          {{ lead.status | replace('_', ' ') }}
        </span>
      </div>
      <form hx-post="{{ url_for('admin.lead_status_htmx', lead_id=lead.id) }}"
            hx-target="#lead-status-section"
            hx-swap="outerHTML"
            class="flex items-center gap-2">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <select name="status" class="form-input" style="min-width:160px">
          {% for s in statuses %}
          <option value="{{ s }}" {% if s == lead.status %}selected{% endif %}>{{ s | replace('_', ' ') }}</option>
          {% endfor %}
        </select>
        <button type="submit" class="btn-outline btn-sm">Update</button>
      </form>
    </div>
  </header>

  <div class="grid-2" style="gap:1.5rem">
    <!-- Project brief -->
    <div class="card" style="padding:1.5rem">
      <h2 class="text-lg mb-4">Project Brief</h2>
      <dl style="display:grid;grid-template-columns:160px 1fr;gap:6px 12px;font-size:0.8125rem">
        <dt class="text-slate">Facility</dt>       <dd>{{ lead.facility_type or '-' }}</dd>
        <dt class="text-slate">Build Context</dt>  <dd>{{ lead.build_context or '-' }}</dd>
        <dt class="text-slate">Courts</dt>         <dd>{{ lead.court_count or '-' }}</dd>
        <dt class="text-slate">Glass</dt>          <dd>{{ lead.glass_type or '-' }}</dd>
        <dt class="text-slate">Lighting</dt>       <dd>{{ lead.lighting_type or '-' }}</dd>
        <dt class="text-slate">Location</dt>
        <dd>{{ lead.location or '-' }}{% if lead.country %},
          <a href="{{ url_for('admin.leads', country=lead.country) }}" class="text-sm">{{ lead.country }}</a>
        {% else %}-{% endif %}</dd>
        <dt class="text-slate">Phase</dt>          <dd>{{ lead.location_status or '-' }}</dd>
        <dt class="text-slate">Timeline</dt>       <dd>{{ lead.timeline or '-' }}</dd>
        <dt class="text-slate">Budget</dt>         <dd>{% if lead.budget_estimate %}€{{ "{:,}".format(lead.budget_estimate | int) }}{% else %}-{% endif %}</dd>
        <dt class="text-slate">Financing</dt>      <dd>{{ lead.financing_status or '-' }}</dd>
        <dt class="text-slate">Services</dt>       <dd>{{ lead.services_needed or '-' }}</dd>
        <dt class="text-slate">Additional Info</dt><dd>{{ lead.additional_info or '-' }}</dd>
        <dt class="text-slate">Credit Cost</dt>    <dd>{{ lead.credit_cost or '-' }} credits</dd>
      </dl>
    </div>

    <!-- Contact + forward -->
    <div>
      <div class="card mb-4" style="padding:1.5rem">
        <h2 class="text-lg mb-4">Contact</h2>
        <dl style="display:grid;grid-template-columns:100px 1fr;gap:6px 12px;font-size:0.8125rem">
          <dt class="text-slate">Name</dt>       <dd>{{ lead.contact_name or '-' }}</dd>
          <dt class="text-slate">Email</dt>
          <dd class="flex items-center gap-2 flex-wrap">
            {{ lead.contact_email or '-' }}
            {% if lead.contact_email %}
            <a href="{{ url_for('admin.emails', search=lead.contact_email) }}" class="text-xs text-slate" title="Email log">📧</a>
            <a href="mailto:{{ lead.contact_email }}" class="text-xs text-slate" title="mailto">✉</a>
            <a href="{{ url_for('admin.email_compose') }}?to={{ lead.contact_email }}" class="btn-outline btn-sm" style="padding:1px 8px;font-size:0.7rem">Send email</a>
            {% endif %}
          </dd>
          <dt class="text-slate">Phone</dt>      <dd>{{ lead.contact_phone or '-' }}</dd>
          <dt class="text-slate">Company</dt>    <dd>{{ lead.contact_company or '-' }}</dd>
          <dt class="text-slate">Role</dt>       <dd>{{ lead.stakeholder_type or '-' }}</dd>
          <dt class="text-slate">Created</dt>    <dd class="mono">{{ lead.created_at or '-' }}</dd>
          <dt class="text-slate">Verified</dt>   <dd class="mono">{{ lead.verified_at or 'Not verified' }}</dd>
        </dl>
      </div>

      <!-- Forward to supplier (HTMX) -->
      <div class="card" style="padding:1.5rem">
        <h2 class="text-lg mb-4">Forward to Supplier</h2>
        <form hx-post="{{ url_for('admin.lead_forward_htmx', lead_id=lead.id) }}"
              hx-target="#forward-history"
              hx-swap="innerHTML">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <select name="supplier_id" class="form-input mb-3" style="width:100%">
            <option value="">Select supplier…</option>
            {# Lead's country first, then alphabetical #}
            {% set lead_country = lead.country or '' %}
            {% for s in suppliers | sort(attribute='name') | sort(attribute='country_code', reverse=(lead_country == '')) %}
            <option value="{{ s.id }}"
                    {% if s.country_code == lead_country %}style="font-weight:600"{% endif %}>
              {% if s.country_code == lead_country %}★ {% endif %}{{ s.name }} ({{ s.country_code }}, {{ s.category }})
            </option>
            {% endfor %}
          </select>
          <button type="submit" class="btn" style="width:100%"
                  hx-disabled-elt="this">Forward Lead</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Forward history -->
  <section class="mt-6">
    <h2 class="text-lg mb-3">Forward History
      <span class="text-sm text-slate font-normal">({{ lead.forwards | length }} total)</span>
    </h2>
    <div class="card" style="padding:1rem">
      <div id="forward-history">
        {% include "admin/partials/lead_forward_history.html" with context %}
      </div>
    </div>
  </section>
{% endblock %}
