{% extends 'base.html' %}
{% load humanize %}

{% block title %}SMS Detail{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>📱 SMS Detail</h2>
    <a href="{% url 'payments:sms_logs' %}" class="btn btn-outline-secondary btn-sm">← Back to SMS Logs</a>
  </div>

  <div class="row">
    <div class="col-md-8">
      <div class="card shadow mb-4">
        <div class="card-header {% if log.status == 'sent' %}bg-success{% elif log.status == 'failed' %}bg-danger{% else %}bg-warning{% endif %} text-white">
          <strong>
            {% if log.status == 'sent' %}✓ Delivered{% elif log.status == 'failed' %}✗ Failed{% else %}⚠ Partial{% endif %}
          </strong>
          — {{ log.get_sms_type_display }}
        </div>
        <div class="card-body">
          <dl class="row mb-0">
            <dt class="col-sm-3">Sent at</dt>
            <dd class="col-sm-9">{{ log.created_at|date:"d/m/Y H:i:s" }}</dd>

            <dt class="col-sm-3">Type</dt>
            <dd class="col-sm-9">{{ log.get_sms_type_display }}</dd>

            <dt class="col-sm-3">Sender ID</dt>
            <dd class="col-sm-9"><code>{{ log.sender_id }}</code></dd>

            <dt class="col-sm-3">Recipients</dt>
            <dd class="col-sm-9">
              {% for phone in log.recipients.split %}
              <span class="badge badge-secondary mr-1">{{ phone|cut:"," }}</span>
              {% endfor %}
              <small class="text-muted">({{ log.recipient_count }} total)</small>
            </dd>

            {% if log.loan_number %}
            <dt class="col-sm-3">Loan</dt>
            <dd class="col-sm-9"><span class="badge badge-primary">{{ log.loan_number }}</span></dd>
            {% endif %}

            {% if log.borrower_name %}
            <dt class="col-sm-3">Borrower</dt>
            <dd class="col-sm-9">{{ log.borrower_name }}</dd>
            {% endif %}

            {% if log.amount %}
            <dt class="col-sm-3">Amount</dt>
            <dd class="col-sm-9"><strong class="text-success">KES {{ log.amount|floatformat:2|intcomma }}</strong></dd>
            {% endif %}

            {% if log.error_message %}
            <dt class="col-sm-3">Error</dt>
            <dd class="col-sm-9"><span class="text-danger">{{ log.error_message }}</span></dd>
            {% endif %}
          </dl>
        </div>
      </div>

      <!-- Message body -->
      <div class="card shadow mb-4">
        <div class="card-header"><strong>📝 Message Text</strong></div>
        <div class="card-body">
          <div class="p-3 bg-light rounded" style="font-family:monospace;white-space:pre-wrap;font-size:.9rem">{{ log.message }}</div>
          <small class="text-muted">{{ log.message|length }} characters</small>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <!-- AT API response -->
      <div class="card shadow mb-4">
        <div class="card-header"><strong>🔌 Africa's Talking Response</strong></div>
        <div class="card-body p-0">
          {% if log.at_response %}
          <div class="table-responsive">
            <table class="table table-sm mb-0">
              {% if log.at_response.SMSMessageData %}
              <tr><th>Message</th><td>{{ log.at_response.SMSMessageData.Message }}</td></tr>
              {% for r in log.at_response.SMSMessageData.Recipients %}
              <tr>
                <td><small>{{ r.number }}</small></td>
                <td>
                  {% if r.status == 'Success' %}
                  <span class="badge badge-success">✓ {{ r.status }}</span>
                  {% else %}
                  <span class="badge badge-danger">✗ {{ r.status }}</span>
                  {% endif %}
                  <small class="text-muted">{{ r.cost }}</small>
                </td>
              </tr>
              {% endfor %}
              {% else %}
              <tr><td colspan="2"><pre style="font-size:.75rem;margin:0">{{ log.at_response }}</pre></td></tr>
              {% endif %}
            </table>
          </div>
          {% else %}
          <p class="text-muted p-3 mb-0">No API response recorded.</p>
          {% endif %}
        </div>
      </div>

      <!-- Actions -->
      {% if log.status != 'sent' %}
      <div class="card shadow">
        <div class="card-body">
          <h6>Re-send this SMS</h6>
          <p class="text-muted small">This will send the exact same message to the same recipients again.</p>
          <form method="post" action="{% url 'payments:resend_sms' log.id %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-warning btn-block"
              onclick="return confirm('Re-send this SMS to {{ log.recipient_count }} recipient(s)?')">
              🔄 Re-send Now
            </button>
          </form>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}