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

{% block title %}Transaction Details - {{ transaction.trans_id }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">Transaction Details</h1>
                <div>
                    <a href="{% url 'payments:transactions' %}" class="btn btn-outline-secondary">
                        <span>←</span> Back to Transactions
                    </a>
                    {% if transaction.status != 'processed' and transaction.status != 'confirmed' %}
                        <a href="{% url 'payments:reprocess_transaction' transaction.id %}" 
                           class="btn btn-warning">
                            <span>↷</span> Reprocess
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Transaction Info -->
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Transaction Information</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th width="40%">Transaction ID:</th>
                            <td>
                                <strong>{{ transaction.trans_id|default:"N/A" }}</strong>
                                {% if transaction.mpesa_transaction_id %}
                                    <br><small class="text-muted">{{ transaction.mpesa_transaction_id }}</small>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                {% if transaction.status == 'confirmed' or transaction.status == 'processed' %}
                                    <span class="badge badge-success">{{ transaction.get_status_display }}</span>
                                {% elif transaction.status == 'pending' or transaction.status == 'validated' %}
                                    <span class="badge badge-warning">{{ transaction.get_status_display }}</span>
                                {% else %}
                                    <span class="badge badge-danger">{{ transaction.get_status_display }}</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Amount:</th>
                            <td>
                                <strong class="text-success">KES {{ transaction.amount|floatformat:2|intcomma }}</strong>
                            </td>
                        </tr>
                        <tr>
                            <th>Transaction Type:</th>
                            <td>{{ transaction.transaction_type|default:"N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Transaction Time:</th>
                            <td>{{ transaction.trans_time|default:"N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Created:</th>
                            <td>{{ transaction.created_at|date:"Y-m-d H:i:s" }}</td>
                        </tr>
                        <tr>
                            <th>Business Short Code:</th>
                            <td>{{ transaction.business_short_code|default:"N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Bill Reference:</th>
                            <td>{{ transaction.bill_ref_number|default:"N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Invoice Number:</th>
                            <td>{{ transaction.invoice_number|default:"N/A" }}</td>
                        </tr>
                        {% if transaction.third_party_trans_id %}
                        <tr>
                            <th>Third Party Trans ID:</th>
                            <td>{{ transaction.third_party_trans_id }}</td>
                        </tr>
                        {% endif %}
                        {% if transaction.org_account_balance %}
                        <tr>
                            <th>Org Account Balance:</th>
                            <td>KES {{ transaction.org_account_balance|floatformat:2|intcomma }}</td>
                        </tr>
                        {% endif %}
                    </table>
                </div>
            </div>
        </div>

        <!-- Customer & Loan Info -->
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Customer & Loan Information</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th width="40%">Phone Number:</th>
                            <td>
                                {{ transaction.phone_number|default:transaction.msisdn|default:"N/A" }}
                            </td>
                        </tr>
                        <tr>
                            <th>Customer Name:</th>
                            <td>
                                {% if transaction.first_name %}
                                    {{ transaction.first_name }} 
                                    {{ transaction.middle_name|default:"" }} 
                                    {{ transaction.last_name|default:"" }}
                                {% else %}
                                    N/A
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Borrower:</th>
                            <td>
                                {% if transaction.borrower %}
                                    <a href="{% url 'users:client_detail' transaction.borrower.id %}">
                                        {{ transaction.borrower.get_full_name }}
                                    </a>
                                    <br>
                                    <small class="text-muted">
                                        ID: {{ transaction.borrower.id_number|default:"N/A" }}
                                        | Phone: {{ transaction.borrower.phone_number|default:"N/A" }}
                                    </small>
                                {% else %}
                                    <span class="text-warning">
                                        <span>⚠️</span> Not matched
                                    </span>
                                    {% if transaction.bill_ref_number %}
                                        <br>
                                        <small class="text-muted">
                                            Bill Ref: {{ transaction.bill_ref_number }}
                                        </small>
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Loan:</th>
                            <td>
                                {% if transaction.loan %}
                                    <a href="{% url 'loans:loan_detail' transaction.loan.id %}">
                                        {{ transaction.loan.loan_number }}
                                    </a>
                                    <br>
                                    <small class="text-muted">
                                        Outstanding: KES {{ transaction.loan.outstanding_amount|floatformat:2|intcomma }}
                                    </small>
                                {% else %}
                                    <span class="text-muted">Not matched</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Repayment:</th>
                            <td>
                                {% if transaction.repayment %}
                                    <span class="badge badge-success">
                                        <span>🧾</span> {{ transaction.repayment.receipt_number }}
                                    </span>
                                    <br>
                                    <small class="text-muted">
                                        Amount: KES {{ transaction.repayment.amount|floatformat:2|intcomma }}
                                        | Date: {{ transaction.repayment.payment_date|date:"Y-m-d H:i:s" }}
                                    </small>
                                    <br>
                                    <a href="{% url 'loans:loan_detail' transaction.repayment.loan.id %}" class="btn btn-sm btn-primary mt-1">
                                        <i class="fas fa-eye"></i> View Loan
                                    </a>
                                    <a href="{% url 'loans:repayments' %}" class="btn btn-sm btn-secondary mt-1">
                                        <span>📋</span> All Repayments
                                    </a>
                                {% else %}
                                    <span class="text-danger">
                                        <span>✕</span> No repayment created
                                    </span>
                                    {% if transaction.processing_notes %}
                                        <br>
                                        <small class="text-muted">{{ transaction.processing_notes }}</small>
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        {% if transaction.payment_source %}
                        <tr>
                            <th>Payment Source:</th>
                            <td>
                                <span class="badge badge-info">{{ transaction.payment_source }}</span>
                            </td>
                        </tr>
                        {% endif %}
                        <tr>
                            <th>Automatic:</th>
                            <td>
                                {% if transaction.is_automatic %}
                                    <span class="badge badge-success">
                                        <span>✓</span> Yes
                                    </span>
                                {% else %}
                                    <span class="badge badge-secondary">
                                        <span>✕</span> No
                                    </span>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Processing Notes -->
    {% if transaction.processing_notes %}
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-warning">Processing Notes</h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-warning">
                        {{ transaction.processing_notes }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Related Callbacks -->
    {% if callbacks %}
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        Related Callbacks
                        <span class="badge badge-info">{{ callbacks.count }}</span>
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>Type</th>
                                    <th>IP Address</th>
                                    <th>Processed</th>
                                    <th>Response</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for callback in callbacks %}
                                    <tr>
                                        <td>{{ callback.created_at|date:"Y-m-d H:i:s" }}</td>
                                        <td>
                                            {% if callback.callback_type == 'validation' %}
                                                <span class="badge badge-info">Validation</span>
                                            {% else %}
                                                <span class="badge badge-success">Confirmation</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ callback.ip_address|default:"N/A" }}</td>
                                        <td>
                                            {% if callback.processed %}
                                                <span class="badge badge-success">Yes</span>
                                            {% else %}
                                                <span class="badge badge-warning">Pending</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if callback.response_sent %}
                                                Code: {{ callback.response_sent.ResultCode|default:"N/A" }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info" 
                                                    data-toggle="modal" 
                                                    data-target="#callbackModal{{ callback.id }}">
                                                <i class="fas fa-eye"></i> View
                                            </button>
                                        </td>
                                    </tr>

                                    <!-- Modal for callback details -->
                                    <div class="modal fade" id="callbackModal{{ callback.id }}" tabindex="-1" role="dialog">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Callback Details</h5>
                                                    <button type="button" class="close" data-dismiss="modal">
                                                        <span>&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <h6>Raw Data:</h6>
                                                    <pre class="bg-light p-3" style="max-height: 300px; overflow-y: auto;">{{ callback.raw_data|pprint }}</pre>
                                                    
                                                    {% if callback.response_sent %}
                                                        <h6 class="mt-3">Response Sent:</h6>
                                                        <pre class="bg-light p-3">{{ callback.response_sent|pprint }}</pre>
                                                    {% endif %}
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Raw Data -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Raw Data</h6>
                </div>
                <div class="card-body">
                    {% if transaction.raw_validation_data %}
                        <h6>Validation Data:</h6>
                        <pre class="bg-light p-3" style="max-height: 300px; overflow-y: auto;">{{ transaction.raw_validation_data|pprint }}</pre>
                    {% endif %}

                    {% if transaction.raw_confirmation_data %}
                        <h6 class="mt-3">Confirmation Data:</h6>
                        <pre class="bg-light p-3" style="max-height: 300px; overflow-y: auto;">{{ transaction.raw_confirmation_data|pprint }}</pre>
                    {% endif %}

                    {% if not transaction.raw_validation_data and not transaction.raw_confirmation_data %}
                        <p class="text-muted">No raw data available</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}