{% extends "base.html" %}

{% block title %}Webhook Receiver — ReliefSignal{% endblock %}
{% block meta_description %}Provider-neutral webhook receiver for testing external call-event payloads before adapting the integration to Ytel.{% endblock %}

{% block content %}
<section class="page-hero compact">
  <div class="container">
    <span class="eyebrow">Generic webhook inbox</span>
    <div class="row align-items-end g-4 mt-2">
      <div class="col-lg-8">
        <h1 class="display-title">Capture provider events before we commit to Ytel-specific logic.</h1>
        <p class="hero-copy mt-3">Use this receiver to collect real webhook payloads, inspect headers safely, and map the fields we need for call intake automation.</p>
      </div>
      <div class="col-lg-4 text-lg-end">
        <a class="btn btn-signal" href="{% url 'call_list' %}">Back to call history</a>
      </div>
    </div>
  </div>
</section>

<section class="section-pad">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-5">
        <div class="glass-card form-panel h-100">
          <div class="panel-heading">
            <span>01</span>
            <h2>Receiver endpoint</h2>
          </div>
          <p class="text-muted-custom">Point test providers here. Add <strong>?provider=ytel</strong> when you start sending Ytel samples.</p>
          <div class="endpoint-box mt-3">
            <span>POST endpoint</span>
            <code>{{ endpoint_url }}</code>
          </div>
          <pre class="endpoint-code mt-3"><code>curl -X POST "{{ endpoint_url }}?provider=test" \
  -H "Content-Type: application/json" \
  -d '{"event_type":"call.ended","external_id":"demo-call-001","status":"completed"}'</code></pre>
          <ul class="readiness-list mt-4">
            <li><span>JSON bodies</span><strong>Accepted</strong></li>
            <li><span>Form posts</span><strong>Accepted</strong></li>
            <li><span>Auth/signature headers</span><strong>Redacted</strong></li>
            <li><span>Max body size</span><strong>512 KB</strong></li>
          </ul>
        </div>
      </div>

      <div class="col-lg-7">
        <div class="glass-card history-shell h-100">
          <div class="d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-center mb-4">
            <div>
              <span class="eyebrow">{{ total_events }} total received</span>
              <h2 class="h3 fw-bold mb-0">Recent webhook events</h2>
            </div>
            <a class="btn btn-outline-signal btn-sm" href="/admin/core/webhookevent/">Open in admin</a>
          </div>

          {% if events %}
          <div class="table-responsive">
            <table class="table history-table align-middle">
              <thead>
                <tr>
                  <th>Received</th>
                  <th>Provider</th>
                  <th>Event</th>
                  <th>External ID</th>
                  <th>Preview</th>
                </tr>
              </thead>
              <tbody>
                {% for event in events %}
                <tr>
                  <td><strong>#{{ event.pk }}</strong><br><span>{{ event.received_at|date:"M j, Y g:i A" }}</span></td>
                  <td><span class="mini-flag">{{ event.provider }}</span></td>
                  <td>{{ event.display_event_type }}</td>
                  <td>{% if event.external_id %}<code>{{ event.external_id }}</code>{% else %}<span class="text-muted-custom">Not supplied</span>{% endif %}</td>
                  <td><code class="webhook-preview">{{ event.raw_body|default:"No body"|truncatechars:110 }}</code></td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="empty-state">
            <h2>No webhooks received yet</h2>
            <p>Send a test POST to the endpoint to verify connectivity, then we can map the real Ytel fields into pilot call records.</p>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}