{% extends "admin/base_admin.html" %}
{% set admin_page = "compose" %}
{% block title %}Compose Email - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_head %}
<style>
  .compose-layout { display: grid; grid-template-columns: 480px 1fr; gap: 1.5rem; align-items: start; }
  @media (max-width: 1100px) { .compose-layout { grid-template-columns: 1fr; } }
  .preview-panel { position: sticky; top: 1rem; }
  .preview-label { font-size: 0.75rem; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
  #preview-pane { min-height: 400px; background: #F1F5F9; border-radius: 8px; }
  #preview-pane.loading { opacity: 0.5; }
</style>
{% 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">Compose Email</h1>
  </header>

  <div class="compose-layout">
    {# ── Left: form ────────────────────────────────────── #}
    <div>
      <div class="card" style="padding:1.5rem;">
        <form id="compose-form" method="post" action="{{ url_for('admin.email_compose') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="email_type" value="{{ data.get('email_type', 'admin_compose') }}">
          {% if data.get('supplier_id') %}
          <input type="hidden" name="supplier_id" value="{{ data.get('supplier_id') }}">
          {% endif %}

          {% if data.get('email_type') == 'outreach' %}
          <div class="mb-3" style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:6px;padding:0.5rem 0.875rem;font-size:0.8125rem;color:#1E40AF">
            Outreach email — sending via <strong>hello.padelnomics.io</strong> (separate domain).
            {% if data.get('supplier_id') %} Supplier #{{ data.get('supplier_id') }} pipeline will update on send.{% endif %}
          </div>
          {% endif %}

          <div class="mb-4">
            <label class="text-xs font-semibold text-slate block mb-1">From</label>
            <select name="from_addr" class="form-input">
              {% for key, addr in email_addresses.items() %}
              <option value="{{ addr }}" {% if data.get('from_addr') == addr %}selected{% endif %}>{{ key | title }} — {{ addr }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="mb-4">
            <label class="text-xs font-semibold text-slate block mb-1">To</label>
            <input type="email" name="to" value="{{ data.get('to', '') }}" class="form-input" placeholder="recipient@example.com" required>
          </div>

          <div class="mb-4">
            <label class="text-xs font-semibold text-slate block mb-1">Subject</label>
            <input type="text" name="subject" value="{{ data.get('subject', '') }}" class="form-input" placeholder="Subject line" required>
          </div>

          <div class="mb-4">
            <label class="text-xs font-semibold text-slate block mb-1">Body</label>
            <textarea
              name="body" rows="14" class="form-input"
              placeholder="Plain text (line breaks become &lt;br&gt;)"
              required
              hx-post="{{ url_for('admin.compose_preview') }}"
              hx-trigger="input delay:500ms, change"
              hx-target="#preview-pane"
              hx-include="#compose-form [name='wrap']"
              hx-indicator="#preview-pane"
            >{{ data.get('body', '') }}</textarea>
          </div>

          <div class="mb-6">
            <label class="flex items-center gap-2 text-sm">
              <input
                type="checkbox" name="wrap" value="1"
                {% if data.get('wrap') is not defined %}checked{% elif data.get('wrap') %}checked{% endif %}
                hx-post="{{ url_for('admin.compose_preview') }}"
                hx-trigger="change"
                hx-target="#preview-pane"
                hx-include="#compose-form textarea[name='body']"
              >
              Wrap in branded email template
            </label>
          </div>

          <div class="flex gap-2">
            <button type="submit" class="btn">Send Email</button>
            <a href="{{ url_for('admin.emails') }}" class="btn-outline">Cancel</a>
          </div>
        </form>
      </div>
    </div>

    {# ── Right: live preview panel ─────────────────────── #}
    <div class="preview-panel">
      <div class="preview-label">Live preview</div>
      <div id="preview-pane">
        <p style="padding:2rem;font-size:0.875rem;color:#94A3B8;text-align:center;">Start typing to see a preview…</p>
      </div>
    </div>
  </div>
{% endblock %}
