{% extends 'shipping/base.html' %}

{% block title %}Webhook Listener & Simulator — SFX API Hub{% endblock %}

{% block content %}
<div class="page-header">
  <h1 class="page-title">⚡ Webhook Listener & Callback Event Simulator</h1>
  <p class="page-desc">Monitor real-time push notifications sent by Shadowfax when shipments transition state. Use the simulator to test your integration without waiting for physical delivery riders.</p>
</div>

<!-- Webhook URL Info & Simulator Card -->
<div class="grid-2" style="margin-bottom: 1.5rem;">
  <div class="card">
    <div class="card-title">
      <span>📡 Live Webhook Listener Endpoint</span>
      <span class="badge badge-success">Active</span>
    </div>
    <div class="form-group">
      <label class="form-label">Client Callback Endpoint URL</label>
      <input type="text" class="form-control" value="http://localhost:8000/api/webhook/" readonly style="font-family: 'Fira Code', monospace; color: var(--accent-cyan);">
    </div>
    <p style="font-size: 0.85rem; color: var(--text-muted);">Configure this endpoint in your Shadowfax Merchant Portal to receive HTTP POST JSON notifications for shipment status updates and doorstep Quality Check results.</p>
  </div>

  <div class="card">
    <div class="card-title">
      <span>🧪 Trigger Mock Webhook Callback</span>
      <span class="badge badge-webhook">Simulator Tool</span>
    </div>
    <form method="POST" action="{% url 'webhooks_ui_view' %}">
      {% csrf_token %}
      <div class="grid-2" style="gap: 0.75rem;">
        <div class="form-group">
          <label class="form-label">Service Type</label>
          <select name="service_type" class="form-select">
            <option value="FORWARD" selected>Forward Order Callback</option>
            <option value="REVERSE">Reverse Pickup Callback</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Event / State Transition</label>
          <select name="event_type" class="form-select">
            <option value="pickup_assigned">pickup_assigned</option>
            <option value="picked_up">picked_up (QC Passed)</option>
            <option value="qc_failed">qc_failed (QC Rejected)</option>
            <option value="in_transit">in_transit</option>
            <option value="out_for_delivery" selected>out_for_delivery</option>
            <option value="delivered">delivered</option>
            <option value="delivery_rescheduled">delivery_rescheduled</option>
            <option value="rts_initiated">rts_initiated</option>
            <option value="rto_delivered">rto_delivered_to_warehouse</option>
          </select>
        </div>
      </div>

      <div class="grid-2" style="gap: 0.75rem;">
        <div class="form-group">
          <label class="form-label">Client Order / Request ID</label>
          <input type="text" name="order_id" class="form-control" value="ORD-MKT-2026-101">
        </div>
        <div class="form-group">
          <label class="form-label">AWB Number</label>
          <input type="text" name="awb_number" class="form-control" value="SFX9928374102">
        </div>
      </div>

      <button type="submit" class="btn btn-primary" style="width: 100%;">Trigger Simulated Callback Event</button>
    </form>
  </div>
</div>

<!-- Webhook Logs Table -->
<div class="card">
  <div class="card-title">
    <span>Received Webhook Events History ({{ webhook_logs|length }} Events)</span>
  </div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Timestamp</th>
        <th>Event Name</th>
        <th>Endpoint</th>
        <th>HTTP Status</th>
        <th>Received Payload Preview</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      {% for log in webhook_logs %}
      <tr>
        <td style="font-family: 'Fira Code', monospace; font-size: 0.8rem; color: var(--text-muted);">
          {{ log.timestamp|date:"Y-m-d H:i:s" }}
        </td>
        <td>
          <span class="badge badge-webhook">{{ log.action_name }}</span>
        </td>
        <td style="font-family: 'Fira Code', monospace; font-size: 0.8rem;">
          {{ log.endpoint_url }}
        </td>
        <td>
          <span class="badge badge-success">{{ log.response_status_code }} OK</span>
        </td>
        <td style="font-family: 'Fira Code', monospace; font-size: 0.8rem; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
          {{ log.request_body }}
        </td>
        <td>
          <button class="btn btn-secondary" style="padding: 0.35rem 0.75rem; font-size: 0.8rem;" onclick="openInspectorModal({{ log.id }})">
            View Payload
          </button>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 2rem;">
          No webhook callback events received yet. Use the Simulator Tool above or send a POST request to <code>http://localhost:8000/api/webhook/</code>.
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Modal for Viewing Payload -->
<div id="inspector_modal" class="modal">
  <div class="modal-content">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem;">
      <h3 style="font-size: 1.1rem; font-weight: 600;" id="modal_title">Inspect Webhook Callback</h3>
      <button onclick="closeInspectorModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">&times;</button>
    </div>
    
    <div style="margin-bottom: 1rem;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem;">Webhook HTTP Headers</div>
      <pre id="modal_req_headers" class="json-viewer" style="max-height: 150px;">-</pre>
    </div>

    <div style="margin-bottom: 1rem;">
      <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem;">Callback Payload (JSON)</div>
      <pre id="modal_req_body" class="json-viewer" style="max-height: 250px;">-</pre>
    </div>

    <div style="text-align: right;">
      <button class="btn btn-secondary" onclick="closeInspectorModal()">Close</button>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function openInspectorModal(logId) {
  fetch(`/logs/${logId}/`)
    .then(resp => resp.json())
    .then(data => {
      document.getElementById('modal_title').textContent = `Inspect Webhook #${data.id} — ${data.action_name}`;
      
      try {
        document.getElementById('modal_req_headers').textContent = JSON.stringify(JSON.parse(data.request_headers), null, 2);
      } catch(e) {
        document.getElementById('modal_req_headers').textContent = data.request_headers || 'No headers';
      }

      try {
        document.getElementById('modal_req_body').textContent = JSON.stringify(JSON.parse(data.request_body), null, 2);
      } catch(e) {
        document.getElementById('modal_req_body').textContent = data.request_body || 'No payload';
      }

      document.getElementById('inspector_modal').classList.add('active');
    });
}

function closeInspectorModal() {
  document.getElementById('inspector_modal').classList.remove('active');
}
</script>
{% endblock %}