@extends('root')

@section('content')
<div class="container-fluid">
    <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
            <div class="row align-items-center">
                <div class="col-9">
                    <h4 class="fw-semibold mb-8">Discarded Messages</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a class="text-muted" href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a class="text-muted" href="{{ route('admin.message-queue.index') }}">Message Queue</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Discarded</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3 text-end">
                    <i class="ti ti-trash fs-6 text-danger"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="alert alert-warning">
        <i class="ti ti-alert-triangle me-2"></i>
        <strong>Perhatian:</strong> Pesan yang di-discard tidak akan di-retry otomatis karena dapat mempengaruhi kualitas WABA. 
        Hanya lakukan force retry jika Anda yakin masalah telah diperbaiki.
    </div>

    <!-- Messages Table -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Client</th>
                            <th>WABA</th>
                            <th>Recipient</th>
                            <th>Type</th>
                            <th>Discard Reason</th>
                            <th>Discarded At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($messages as $message)
                        <tr>
                            <td><code>{{ $message->id }}</code></td>
                            <td>
                                @if($message->client)
                                    {{ $message->client->company_name ?? $message->client->name }}
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>
                                @if($message->wabaPool)
                                    <small>{{ $message->wabaPool->account_name }}</small><br>
                                    <code class="small">{{ $message->wabaPool->phone_number }}</code>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td><code>{{ $message->getRecipientPhone() ?? 'N/A' }}</code></td>
                            <td>
                                <span class="badge bg-secondary">{{ $message->message_type ?? 'template' }}</span>
                            </td>
                            <td>
                                <span class="text-danger" title="{{ $message->discard_reason }}">
                                    {{ Str::limit($message->discard_reason ?? 'Unknown', 40) }}
                                </span>
                            </td>
                            <td>
                                <small>{{ $message->updated_at->format('d M Y H:i') }}</small>
                            </td>
                            <td>
                                <button type="button" class="btn btn-sm btn-outline-warning btn-force-retry" 
                                        data-id="{{ $message->id }}"
                                        title="Force Retry">
                                    <i class="ti ti-refresh"></i>
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                <i class="ti ti-check fs-4 d-block mb-2"></i>
                                Tidak ada pesan yang di-discard.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($messages->hasPages())
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3 pt-3 border-top">
                <small class="text-muted">
                    Menampilkan {{ $messages->firstItem() ?? 0 }}–{{ $messages->lastItem() ?? 0 }} dari {{ $messages->total() }}
                </small>
                <nav aria-label="Navigasi halaman">
                    {{ $messages->withQueryString()->links('pagination::bootstrap-5') }}
                </nav>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('.btn-force-retry').click(function() {
        const messageId = $(this).data('id');
        const btn = $(this);
        
        if (!confirm('Apakah Anda yakin ingin melakukan force retry untuk pesan ini?')) return;
        
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin"></i>');
        
        $.ajax({
            url: '{{ url("admin/message-queue") }}/' + messageId + '/force-retry',
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                if (res.success) {
                    btn.closest('tr').fadeOut(300, function() { $(this).remove(); });
                    alert(res.message);
                } else {
                    alert('Error: ' + res.message);
                    btn.prop('disabled', false).html('<i class="ti ti-refresh"></i>');
                }
            },
            error: function(xhr) {
                alert('Error: ' + (xhr.responseJSON?.message || 'Unknown error'));
                btn.prop('disabled', false).html('<i class="ti ti-refresh"></i>');
            }
        });
    });
});
</script>
@endpush