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

{% block admin_content %}
  <header class="flex justify-between items-center mb-6">
    <div>
      <a href="{{ url_for('admin.suppliers') }}" class="text-sm text-slate">&larr; All Suppliers</a>
      <h1 class="text-2xl mt-1">{{ supplier.name }}
        {% if supplier.tier == 'pro' %}<span class="badge-danger">PRO</span>
        {% elif supplier.tier == 'growth' %}<span class="badge-warning">GROWTH</span>
        {% else %}<span class="badge">FREE</span>{% endif %}
      </h1>
      <p class="text-sm text-slate mt-1">{{ supplier.slug }} &middot; {{ supplier.country_code or '-' }}
        {% if supplier.tier == 'basic' %}<span class="badge" style="background:#E0F2FE;color:#0369A1">BASIC</span>{% endif %}
      </p>
    </div>
    <div class="flex gap-2">
      {% if supplier.claimed_by %}
      <form method="post" action="{{ url_for('admin.impersonate', user_id=supplier.claimed_by) }}" class="m-0">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn-outline">Impersonate Owner</button>
      </form>
      {% endif %}
      <a href="{{ url_for('directory.supplier_detail', slug=supplier.slug) }}" class="btn-outline" target="_blank">View Profile</a>
    </div>
  </header>

  <div class="grid-2" style="gap:1.5rem">
    <!-- Profile info -->
    <div class="card" style="padding:1.5rem">
      <h2 class="text-lg mb-4">Company Info</h2>
      <dl style="display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:0.8125rem">
        <dt class="text-slate">Name</dt>
        <dd>{{ supplier.name }}</dd>
        <dt class="text-slate">Slug</dt>
        <dd class="mono">{{ supplier.slug }}</dd>
        <dt class="text-slate">Category</dt>
        <dd>{{ supplier.category or '-' }}</dd>
        <dt class="text-slate">Country</dt>
        <dd>{{ supplier.country_code or '-' }}</dd>
        <dt class="text-slate">City</dt>
        <dd>{{ supplier.city or '-' }}</dd>
        <dt class="text-slate">Website</dt>
        <dd>{% if supplier.website %}<a href="{{ supplier.website }}" target="_blank" class="text-sm">{{ supplier.website }}</a>{% else %}-{% endif %}</dd>
        <dt class="text-slate">Contact</dt>
        <dd>{{ supplier.contact_name or '-' }}<br>
            <span class="text-xs text-slate flex items-center gap-2 flex-wrap mt-1">
              {{ supplier.contact_email or '-' }}
              {% if supplier.contact_email %}
              <a href="{{ url_for('admin.emails', search=supplier.contact_email) }}" title="Email log">📧</a>
              <a href="mailto:{{ supplier.contact_email }}" title="mailto">✉</a>
              <a href="{{ url_for('admin.email_compose') }}?to={{ supplier.contact_email }}" class="btn-outline btn-sm" style="padding:1px 8px;font-size:0.7rem">Send email</a>
              {% endif %}
            </span></dd>
        <dt class="text-slate">Tagline</dt>
        <dd>{{ supplier.tagline or '-' }}</dd>
        <dt class="text-slate">Description</dt>
        <dd>{{ supplier.short_description or '-' }}</dd>
        <dt class="text-slate">Years</dt>
        <dd>{{ supplier.years_in_business or '-' }}</dd>
        <dt class="text-slate">Projects</dt>
        <dd>{{ supplier.project_count or '-' }}</dd>
        {% if supplier.contact_role %}
        <dt class="text-slate">Contact Role</dt>
        <dd>{{ supplier.contact_role }}</dd>
        {% endif %}
        {% if supplier.services_offered %}
        <dt class="text-slate">Services</dt>
        <dd class="text-xs">{{ supplier.services_offered }}</dd>
        {% endif %}
        {% if supplier.linkedin_url or supplier.instagram_url or supplier.youtube_url %}
        <dt class="text-slate">Social</dt>
        <dd class="text-xs">
          {% if supplier.linkedin_url %}<a href="{{ supplier.linkedin_url }}" target="_blank" class="text-sm">LinkedIn</a> {% endif %}
          {% if supplier.instagram_url %}<a href="{{ supplier.instagram_url }}" target="_blank" class="text-sm">Instagram</a> {% endif %}
          {% if supplier.youtube_url %}<a href="{{ supplier.youtube_url }}" target="_blank" class="text-sm">YouTube</a> {% endif %}
        </dd>
        {% endif %}
        <dt class="text-slate">Enquiries</dt>
        <dd>{{ enquiry_count }}</dd>
        <dt class="text-slate">Claimed By</dt>
        <dd>{% if supplier.claimed_by %}<a href="{{ url_for('admin.user_detail', user_id=supplier.claimed_by) }}">User #{{ supplier.claimed_by }}</a>{% else %}Unclaimed{% endif %}</dd>
        <dt class="text-slate">Created</dt>
        <dd class="mono">{{ supplier.created_at or '-' }}</dd>
      </dl>
    </div>

    <div>
      <!-- Tier management -->
      <div class="card mb-4" style="padding:1.5rem">
        <h2 class="text-lg mb-4">Tier</h2>
        <form method="post" action="{{ url_for('admin.supplier_tier', supplier_id=supplier.id) }}" class="flex items-center gap-2">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <select name="tier" class="form-input" style="min-width:140px">
            {% for t in tiers %}
            <option value="{{ t }}" {% if t == supplier.tier %}selected{% endif %}>{{ t | capitalize }}</option>
            {% endfor %}
          </select>
          <button type="submit" class="btn-outline btn-sm">Update Tier</button>
        </form>
      </div>

      <!-- Credit management -->
      <div class="card mb-4" style="padding:1.5rem">
        <h2 class="text-lg mb-3">Credits</h2>
        <p class="text-2xl font-bold text-navy mb-3">{{ credit_balance }} <span class="text-sm font-normal text-slate">credits</span></p>
        <form method="post" action="{{ url_for('admin.supplier_credits', supplier_id=supplier.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="flex gap-2 mb-2">
            <input type="number" name="amount" placeholder="Amount" class="form-input" style="width:100px" required>
            <select name="action" class="form-input" style="min-width:100px">
              <option value="add">Add</option>
              <option value="subtract">Subtract</option>
            </select>
          </div>
          <input type="text" name="note" placeholder="Admin note (optional)" class="form-input mb-2" style="width:100%">
          <button type="submit" class="btn-outline btn-sm">Adjust Credits</button>
        </form>
      </div>

      <!-- Outreach pipeline (shown when in pipeline) -->
      {% if supplier.outreach_status %}
      <div class="card mb-4" style="padding:1.5rem;border-left:3px solid #1D4ED8">
        <h2 class="text-lg mb-3">Outreach Pipeline</h2>
        <dl style="display:grid;grid-template-columns:130px 1fr;gap:4px 12px;font-size:0.8125rem;margin-bottom:1rem">
          <dt class="text-slate">Status</dt>
          <dd><span class="badge">{{ supplier.outreach_status | replace('_', ' ') | title }}</span></dd>
          <dt class="text-slate">Step</dt>
          <dd>{{ supplier.outreach_sequence_step or 0 }}</dd>
          <dt class="text-slate">Last contacted</dt>
          <dd class="mono">{{ supplier.last_contacted_at[:10] if supplier.last_contacted_at else '—' }}</dd>
          {% if supplier.outreach_notes %}
          <dt class="text-slate">Notes</dt>
          <dd class="text-xs">{{ supplier.outreach_notes }}</dd>
          {% endif %}
        </dl>
        {% if supplier.contact_email %}
        {% set compose_url = url_for('admin.email_compose') ~ '?to=' ~ supplier.contact_email ~ '&from_key=outreach&email_type=outreach&supplier_id=' ~ supplier.id %}
        <a href="{{ compose_url }}" class="btn-outline btn-sm">Send Outreach Email</a>
        {% endif %}
        <a href="{{ url_for('admin.outreach') }}" class="btn-outline btn-sm" style="margin-left:0.5rem">View Pipeline</a>
      </div>
      {% endif %}

      <!-- Email activity timeline -->
      {% if supplier.contact_email %}
      <div class="card mb-4" style="padding:1.5rem">
        <h2 class="text-lg mb-3">Activity Timeline</h2>
        {% if timeline %}
        <div style="display:flex;flex-direction:column;gap:0.5rem">
          {% for entry in timeline %}
          <div style="display:flex;gap:0.75rem;align-items:baseline;font-size:0.8125rem">
            <span style="flex-shrink:0;width:1.5rem;text-align:center;color:{% if entry.direction == 'sent' %}#2563EB{% else %}#059669{% endif %}">
              {% if entry.direction == 'sent' %}&#x2190;{% else %}&#x2192;{% endif %}
            </span>
            <span class="mono text-xs text-slate" style="flex-shrink:0;width:6.5rem">
              {{ entry.created_at[:10] if entry.created_at else '—' }}
            </span>
            <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1"
                  title="{{ entry.subject or '' }}">
              {{ (entry.subject or '(no subject)')[:80] }}
            </span>
            <span class="text-xs text-slate" style="flex-shrink:0">{{ entry.direction }}</span>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <p class="text-sm text-slate">No email history yet.</p>
        {% endif %}
      </div>
      {% endif %}

      <!-- Active boosts -->
      <div class="card" style="padding:1.5rem">
        <h2 class="text-lg mb-3">Active Boosts</h2>
        {% if boosts %}
        <table class="table">
          <thead><tr><th>Boost</th><th>Status</th><th>Activated</th></tr></thead>
          <tbody>
            {% for b in boosts %}
            <tr>
              <td>{{ b.boost_type }}</td>
              <td><span class="badge">{{ b.status }}</span></td>
              <td class="mono text-sm">{{ b.created_at[:10] if b.created_at else '-' }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-sm text-slate">No active boosts.</p>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Credit ledger -->
  <section class="mt-6">
    <h2 class="text-lg mb-3">Credit Ledger (last 50)</h2>
    <div class="card">
      {% if ledger %}
      <table class="table">
        <thead>
          <tr><th>Type</th><th>Amount</th><th>Balance After</th><th>Note</th><th>Date</th></tr>
        </thead>
        <tbody>
          {% for entry in ledger %}
          <tr>
            <td>{{ entry.event_type }}</td>
            <td>
              {% if entry.delta > 0 %}
              <span style="color:#16A34A">+{{ entry.delta }}</span>
              {% else %}
              <span style="color:#DC2626">{{ entry.delta }}</span>
              {% endif %}
            </td>
            <td>{{ entry.balance_after }}</td>
            <td class="text-xs text-slate">{{ entry.note or '-' }}</td>
            <td class="mono text-sm">{{ entry.created_at[:16] if entry.created_at else '-' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p class="text-sm text-slate" style="padding:1rem">No credit history.</p>
      {% endif %}
    </div>
  </section>

  <!-- Lead forwards -->
  <section class="mt-6">
    <h2 class="text-lg mb-3">Lead Forward History</h2>
    <div class="card">
      {% if forwards %}
      <table class="table">
        <thead>
          <tr><th>Lead</th><th>Credits</th><th>Status</th><th>Date</th></tr>
        </thead>
        <tbody>
          {% for f in forwards %}
          <tr>
            <td><a href="{{ url_for('admin.lead_detail', lead_id=f.lead_id) }}">#{{ f.lead_id }}</a></td>
            <td>{{ f.credit_cost }}</td>
            <td><span class="badge">{{ f.status }}</span></td>
            <td class="mono text-sm">{{ f.created_at[:16] if f.created_at else '-' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p class="text-sm text-slate" style="padding:1rem">No leads forwarded yet.</p>
      {% endif %}
    </div>
  </section>
{% endblock %}
