@extends('root')
@section('title', 'Riwayat Pesan')

@section('content')
<script>
    window.CLIENT_API_KEY = @json($client->api_key);
</script>
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Riwayat Pesan',
        'links' => [],
        'current' => 'Messages'
    ])

    <div class="card card-body">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h5 class="mb-1 d-flex align-items-center gap-2">
                    <i class="ti ti-history text-primary"></i>
                    Riwayat Pesan
                </h5>
                <p class="mb-0 text-muted small">Lihat semua pesan keluar beserta status dan biayanya.</p>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="form-label mb-1 small text-muted">Filter Tipe Pesan</label>
                <select id="filter-category" class="form-control">
                    <option value="">Semua Tipe</option>
                    <option value="marketing">Marketing</option>
                    <option value="utility">Utility</option>
                    <option value="otp">OTP</option>
                    <option value="service">Service Message</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label mb-1 small text-muted">Filter Status</label>
                <select id="filter-status" class="form-control">
                    <option value="">Semua Status</option>
                    <option value="sent">Sent</option>
                    <option value="failed">Failed</option>
                    <option value="queued">Queued</option>
                </select>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-client-messages">
                <thead>
                    <tr>
                        <th>Waktu</th>
                        <th>Tipe Pesan</th>
                        <th>Status</th>
                        <th>Biaya</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Detail Message -->
<div class="modal fade" id="modalDetailMessage" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title d-flex align-items-center">
                    <i class="ti ti-message-circle me-2"></i>Detail Pesan
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Basic Info Section -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-light py-2">
                        <h6 class="mb-0"><i class="ti ti-info-circle me-1"></i>Informasi Dasar</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="small text-muted">Message ID</label>
                                <div id="detail-message-id" class="font-monospace text-primary fw-semibold" style="word-break: break-all;"></div>
                            </div>
                            <div class="col-12">
                                <label class="small text-muted">WABA ID</label>
                                <div id="detail-waba-id" class="font-monospace small text-secondary" style="word-break: break-all;"></div>
                            </div>
                            <div class="col-6">
                                <label class="small text-muted"><i class="ti ti-phone-outgoing me-1"></i>From</label>
                                <div id="detail-from" class="fw-semibold"></div>
                            </div>
                            <div class="col-6">
                                <label class="small text-muted"><i class="ti ti-phone-incoming me-1"></i>To</label>
                                <div id="detail-to" class="fw-semibold"></div>
                            </div>
                            <div class="col-4">
                                <label class="small text-muted">Tipe</label>
                                <div id="detail-type"></div>
                            </div>
                            <div class="col-4">
                                <label class="small text-muted">Kategori</label>
                                <div id="detail-category"></div>
                            </div>
                            <div class="col-4">
                                <label class="small text-muted">Status</label>
                                <div id="detail-status"></div>
                            </div>
                            <div class="col-6">
                                <label class="small text-muted"><i class="ti ti-clock me-1"></i>Waktu</label>
                                <div id="detail-timestamp"></div>
                            </div>
                            <div class="col-6">
                                <label class="small text-muted"><i class="ti ti-coin me-1"></i>Biaya</label>
                                <div id="detail-cost" class="fw-semibold text-danger"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Template Info Section -->
                <div class="card border-0 shadow-sm mb-3" id="template-section" style="display: none;">
                    <div class="card-header bg-light py-2">
                        <h6 class="mb-0"><i class="ti ti-template me-1"></i>Informasi Template</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-6">
                                <label class="small text-muted">Template Name</label>
                                <div id="detail-template-name" class="fw-semibold text-primary"></div>
                            </div>
                            <div class="col-6">
                                <label class="small text-muted">Template ID</label>
                                <div id="detail-template-id" class="font-monospace"></div>
                            </div>
                            <div class="col-12" id="params-container" style="display: none;">
                                <label class="small text-muted">Template Parameters</label>
                                <div id="detail-template-params" class="mt-1"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Message Body Section -->
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-light py-2">
                        <h6 class="mb-0"><i class="ti ti-message me-1"></i>Isi Pesan</h6>
                    </div>
                    <div class="card-body">
                        <div id="detail-body" class="p-3 bg-light rounded border" style="max-height: 120px; overflow-y: auto; white-space: pre-wrap;"></div>
                    </div>
                </div>

                <!-- Raw Payload Section -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="ti ti-code me-1"></i>Raw Payload</h6>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-toggle-payload">
                            <i class="ti ti-chevron-down"></i> Tampilkan
                        </button>
                    </div>
                    <div class="card-body" id="payload-container" style="display: none;">
                        <pre id="detail-payload" class="bg-dark text-light p-3 rounded small" style="max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-all;"></pre>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="ti ti-x me-1"></i>Tutup
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function formatRupiah(num) {
    return 'Rp ' + parseFloat(num || 0).toLocaleString('id-ID');
}

$(document).ready(function () {
    var table = $('#datatable-client-messages').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ url('/api/client/messages') }}',
            dataSrc: 'data',
            data: function (d) {
                d.status = $('#filter-status').val();
                d.category = $('#filter-category').val();
            },
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', 'Bearer ' + (window.CLIENT_API_KEY || ''));
                xhr.setRequestHeader('Accept', 'application/json');
            }
        },
        columns: [
            {
                data: 'created_at',
                name: 'created_at',
                render: function (data) {
                    return data ? new Date(data).toLocaleString('id-ID') : '-';
                }
            },
            {
                data: 'category',
                name: 'category',
                render: function (data) {
                    var labels = {
                        marketing: 'Marketing',
                        utility: 'Utility',
                        otp: 'OTP',
                        service: 'Service Message',
                    };
                    return labels[data] || data || '-';
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function (data) {
                    var badge = 'secondary';
                    if (data === 'sent') badge = 'success';
                    else if (data === 'failed') badge = 'danger';
                    else if (data === 'queued') badge = 'warning';
                    return '<span class="badge bg-' + badge + '">' + data + '</span>';
                }
            },
            {
                data: 'cost',
                name: 'cost',
                render: function (data) {
                    return formatRupiah(data);
                }
            },
            {
                data: 'uuid',
                name: 'uuid',
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    return '<button class="btn btn-sm btn-info btn-detail" data-uuid="' + data + '"><i class="ti ti-eye"></i> Detail</button>';
                }
            }
        ]
    });

    $('#filter-category, #filter-status').on('change', function () {
        table.ajax.reload();
    });

    // Handle Detail Button Click
    $('#datatable-client-messages').on('click', '.btn-detail', function () {
        var uuid = $(this).data('uuid');
        var modal = $('#modalDetailMessage');
        
        // Reset modal content
        $('#detail-message-id').text('Loading...');
        $('#detail-waba-id').text('-');
        $('#detail-from').text('-');
        $('#detail-to').text('-');
        $('#detail-type').text('-');
        $('#detail-category').text('-');
        $('#detail-status').text('-');
        $('#detail-timestamp').text('-');
        $('#detail-cost').text('-');
        $('#detail-body').text('-');
        $('#detail-template-name').text('-');
        $('#detail-template-id').text('-');
        $('#detail-template-params').empty();
        $('#detail-payload').text('');
        $('#template-section').hide();
        $('#params-container').hide();
        $('#payload-container').hide();
        $('#btn-toggle-payload').html('<i class="ti ti-chevron-down"></i> Tampilkan');
        
        modal.modal('show');

        $.ajax({
            url: '{{ url('/api/client/messages') }}/' + uuid,
            method: 'GET',
            headers: {
                'Authorization': 'Bearer ' + (window.CLIENT_API_KEY || ''),
                'Accept': 'application/json'
            },
            success: function (response) {
                var data = response.data;
                var payload = data.payload || {};
                
                // Basic info
                $('#detail-message-id').text(data.message_id || '-');
                $('#detail-waba-id').text(data.waba_id || '-');
                $('#detail-from').text(data.from || '-');
                $('#detail-to').text(data.to || '-');
                $('#detail-type').html('<span class="badge bg-info">' + (data.type || '-') + '</span>');
                
                // Category
                var categoryLabels = {
                    marketing: 'Marketing',
                    utility: 'Utility',
                    otp: 'OTP',
                    service: 'Service Message'
                };
                var category = payload.category || data.category || '-';
                $('#detail-category').html('<span class="badge bg-secondary">' + (categoryLabels[category] || category) + '</span>');
                
                // Status
                var badge = 'secondary';
                if (data.status === 'sent' || data.status === 'delivered' || data.status === 'read') badge = 'success';
                else if (data.status === 'failed') badge = 'danger';
                else if (data.status === 'queued') badge = 'warning';
                $('#detail-status').html('<span class="badge bg-' + badge + '">' + data.status + '</span>');
                
                // Timestamp & Cost
                $('#detail-timestamp').text(data.timestamp || '-');
                $('#detail-cost').text(formatRupiah(data.cost || 0));
                
                // Body
                $('#detail-body').text(data.body || '-');
                
                // Template Info
                if (data.type === 'template' && payload) {
                    $('#template-section').show();
                    $('#detail-template-name').text(payload.template_name || '-');
                    $('#detail-template-id').text(payload.template_id || '-');
                    
                    // Template Parameters
                    if (payload.template_params && payload.template_params.length > 0) {
                        $('#params-container').show();
                        var paramsHtml = '<div class="d-flex flex-wrap gap-1">';
                        payload.template_params.forEach(function(param, index) {
                            paramsHtml += '<span class="badge bg-light text-dark border">' + 
                                '<small class="text-muted me-1">[' + index + ']</small>' + 
                                (param || '-') + '</span>';
                        });
                        paramsHtml += '</div>';
                        $('#detail-template-params').html(paramsHtml);
                    }
                }
                
                // Raw Payload - show full data object
                var fullData = {
                    data: {
                        from: data.from,
                        to: data.to,
                        body: data.body,
                        timestamp: data.timestamp,
                        message_id: data.message_id,
                        waba_id: data.waba_id,
                        type: data.type,
                        status: data.status,
                        payload: payload
                    }
                };
                $('#detail-payload').text(JSON.stringify(fullData, null, 2));
            },
            error: function (xhr) {
                $('#detail-message-id').text('Error');
                alert('Gagal mengambil detail pesan: ' + (xhr.responseJSON?.message || 'Unknown error'));
            }
        });
    });

    // Toggle raw payload visibility
    $('#btn-toggle-payload').on('click', function() {
        var container = $('#payload-container');
        var btn = $(this);
        if (container.is(':visible')) {
            container.slideUp();
            btn.html('<i class="ti ti-chevron-down"></i> Tampilkan');
        } else {
            container.slideDown();
            btn.html('<i class="ti ti-chevron-up"></i> Sembunyikan');
        }
    });
});
</script>
@endpush