{% extends "admin/base_admin.html" %}
{% set admin_page = "emails" %}
{% block title %}Email #{{ email.id }} - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="mb-6">
    <a href="{{ url_for('admin.emails') }}" class="text-sm text-slate">&larr; Sent Log</a>
    <h1 class="text-2xl mt-1">Email #{{ email.id }}</h1>
  </header>

  <div class="grid-2" style="gap:1.5rem">
    <!-- Metadata -->
    <div class="card" style="padding:1.5rem">
      <h2 class="text-lg mb-4">Details</h2>
      <dl style="display:grid;grid-template-columns:100px 1fr;gap:6px 12px;font-size:0.8125rem">
        <dt class="text-slate">To</dt>
        <dd class="flex items-center gap-2 flex-wrap">
          {{ email.to_addr }}
          {% if related_lead %}
          <a href="{{ url_for('admin.lead_detail', lead_id=related_lead.id) }}" class="badge" style="background:#DBEAFE;color:#1E40AF">Lead #{{ related_lead.id }}</a>
          {% endif %}
          {% if related_supplier %}
          <a href="{{ url_for('admin.supplier_detail', supplier_id=related_supplier.id) }}" class="badge" style="background:#D1FAE5;color:#065F46">{{ related_supplier.name }}</a>
          {% endif %}
        </dd>
        <dt class="text-slate">From</dt>
        <dd>{{ email.from_addr }}</dd>
        <dt class="text-slate">Subject</dt>
        <dd>{{ email.subject }}</dd>
        <dt class="text-slate">Type</dt>
        <dd><span class="badge">{{ email.email_type }}</span></dd>
        <dt class="text-slate">Status</dt>
        <dd>
          {% if email.last_event == 'delivered' %}
          <span class="badge" style="background:#DCFCE7;color:#166534">delivered</span>
          {% elif email.last_event == 'bounced' %}
          <span class="badge-danger">bounced</span>
          {% elif email.last_event == 'opened' %}
          <span class="badge" style="background:#DBEAFE;color:#1E40AF">opened</span>
          {% elif email.last_event == 'clicked' %}
          <span class="badge" style="background:#E0E7FF;color:#3730A3">clicked</span>
          {% elif email.last_event == 'complained' %}
          <span class="badge-warning">complained</span>
          {% else %}
          <span class="badge">{{ email.last_event }}</span>
          {% endif %}
        </dd>
        <dt class="text-slate">Resend ID</dt>
        <dd class="mono text-xs">{{ email.resend_id or '-' }}</dd>
        <dt class="text-slate">Sent at</dt>
        <dd class="mono">{{ email.created_at or '-' }}</dd>
        {% if email.delivered_at %}
        <dt class="text-slate">Delivered</dt>
        <dd class="mono">{{ email.delivered_at }}</dd>
        {% endif %}
        {% if email.opened_at %}
        <dt class="text-slate">Opened</dt>
        <dd class="mono">{{ email.opened_at }}</dd>
        {% endif %}
        {% if email.clicked_at %}
        <dt class="text-slate">Clicked</dt>
        <dd class="mono">{{ email.clicked_at }}</dd>
        {% endif %}
        {% if email.bounced_at %}
        <dt class="text-slate">Bounced</dt>
        <dd class="mono" style="color:#DC2626">{{ email.bounced_at }}</dd>
        {% endif %}
      </dl>
    </div>

    <!-- Preview -->
    <div class="card" style="padding:1.5rem">
      <h2 class="text-lg mb-4">Preview</h2>
      {% if enriched_html %}
      <iframe srcdoc="{{ enriched_html | e }}" sandbox style="width:100%;min-height:400px;border:1px solid #E2E8F0;border-radius:6px;background:#fff"></iframe>
      {% else %}
      <p class="text-slate text-sm">HTML preview not available. {% if not email.resend_id or email.resend_id == 'dev' %}Email was sent in dev mode.{% else %}Could not fetch from Resend API.{% endif %}</p>
      {% endif %}
    </div>
  </div>
{% endblock %}
