@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">Message Queue Dashboard</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 active" aria-current="page">Message Queue</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-3 text-end">
                    <i class="ti ti-mail-forward fs-6 text-primary"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4" id="stats-cards">
        <!-- Queue Status Cards -->
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card border-start border-4 border-warning h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1 fw-normal">Pending</h6>
                            <h3 class="mb-0 fw-bold" id="stat-pending">{{ number_format($stats['pending'] ?? 0) }}</h3>
                            <small class="text-muted">Menunggu diproses</small>
                        </div>
                        <div class="ms-3">
                            <div class="bg-warning bg-opacity-10 rounded-circle p-3">
                                <i class="ti ti-clock-hour-4 fs-4 text-warning"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card border-start border-4 border-info h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1 fw-normal">Queued</h6>
                            <h3 class="mb-0 fw-bold" id="stat-queued">{{ number_format($stats['queued'] ?? 0) }}</h3>
                            <small class="text-muted">Siap dikirim</small>
                        </div>
                        <div class="ms-3">
                            <div class="bg-info bg-opacity-10 rounded-circle p-3">
                                <i class="ti ti-list-queue fs-4 text-info"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card border-start border-4 border-secondary h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1 fw-normal">Delayed</h6>
                            <h3 class="mb-0 fw-bold" id="stat-delayed">{{ number_format($stats['delayed'] ?? 0) }}</h3>
                            <small class="text-muted">Ditunda (rate limit)</small>
                        </div>
                        <div class="ms-3">
                            <div class="bg-secondary bg-opacity-10 rounded-circle p-3">
                                <i class="ti ti-clock-pause fs-4 text-secondary"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card border-start border-4 border-primary h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1 fw-normal">Sending</h6>
                            <h3 class="mb-0 fw-bold" id="stat-sending">{{ number_format($stats['sending'] ?? 0) }}</h3>
                            <small class="text-muted">Sedang dikirim</small>
                        </div>
                        <div class="ms-3">
                            <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                                <i class="ti ti-send fs-4 text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card border-start border-4 border-success h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1 fw-normal">Sent Today</h6>
                            <h3 class="mb-0 fw-bold" id="stat-sent">{{ number_format($stats['sent'] ?? 0) }}</h3>
                            <small class="text-muted">Berhasil hari ini</small>
                        </div>
                        <div class="ms-3">
                            <div class="bg-success bg-opacity-10 rounded-circle p-3">
                                <i class="ti ti-check fs-4 text-success"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card border-start border-4 border-danger h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1 fw-normal">Failed Today</h6>
                            <h3 class="mb-0 fw-bold" id="stat-failed">{{ number_format($stats['failed'] ?? 0) }}</h3>
                            <small class="text-muted">Gagal hari ini</small>
                        </div>
                        <div class="ms-3">
                            <div class="bg-danger bg-opacity-10 rounded-circle p-3">
                                <i class="ti ti-x fs-4 text-danger"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card border-start border-4 border-dark h-100 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="flex-grow-1">
                            <h6 class="text-muted mb-1 fw-normal">Discarded</h6>
                            <h3 class="mb-0 fw-bold" id="stat-discarded">{{ number_format($stats['discarded'] ?? 0) }}</h3>
                            <small class="text-muted">Dibuang hari ini</small>
                        </div>
                        <div class="ms-3">
                            <div class="bg-dark bg-opacity-10 rounded-circle p-3">
                                <i class="ti ti-trash fs-4 text-dark"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Rate Limits Summary (Simple Queue: Per WABA) -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="ti ti-clock me-2"></i>Rate Limits (Per Menit)</h5>
                    <a href="{{ route('admin.message-queue.rate-limits') }}" class="btn btn-sm btn-outline-primary">Detail</a>
                </div>
                <div class="card-body" id="rate-limits-summary">
                    <div class="text-center text-muted py-3">
                        <div class="spinner-border spinner-border-sm" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quality Issues -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="ti ti-alert-triangle me-2"></i>Quality Issues (Hari Ini)</h5>
                    <a href="{{ route('admin.message-queue.quality-logs') }}" class="btn btn-sm btn-outline-primary">Detail</a>
                </div>
                <div class="card-body" id="quality-issues-summary">
                    <div class="text-center text-muted py-3">
                        <div class="spinner-border spinner-border-sm" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-settings me-2"></i>Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.message-queue.messages') }}?status=pending" class="btn btn-outline-warning">
                            <i class="ti ti-list me-2"></i>Lihat Pending Messages
                        </a>
                        <a href="{{ route('admin.message-queue.discarded') }}" class="btn btn-outline-secondary">
                            <i class="ti ti-trash me-2"></i>Lihat Discarded Messages
                        </a>
                        <button type="button" class="btn btn-outline-danger" id="btn-clear-rate-limits">
                            <i class="ti ti-eraser me-2"></i>Clear Old Rate Limits
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Retry Stuck Messages: semua status=queued (semua tipe), hari ini -->
    <div class="card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-1">
            <h5 class="mb-0"><i class="ti ti-refresh me-2"></i>Retry Stuck Messages</h5>
            <small class="text-muted">Semua message dengan status=queued (semua tipe). Hanya yang &quot;stuck&quot; (pending/delayed &gt; X jam atau sending &gt; X menit), created_at hari ini.</small>
        </div>
        <div class="card-body">
            <div class="row g-3 mb-4">
                <div class="col-md-3">
                    <label class="form-label">Client</label>
                    <select class="form-select" id="retry-stuck-client">
                        <option value="">Semua client</option>
                        @foreach($clients ?? [] as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Stuck pending/delayed (jam)</label>
                    <input type="number" class="form-control" id="retry-stuck-hours" value="1" min="1" max="24" step="1">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Stuck sending (menit)</label>
                    <input type="number" class="form-control" id="retry-stuck-sending-minutes" value="15" min="1" max="120" step="1">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Limit</label>
                    <input type="number" class="form-control" id="retry-stuck-limit" value="100" min="1" max="500" step="1">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="retry-stuck-dry-run" checked>
                        <label class="form-check-label" for="retry-stuck-dry-run">Dry run (preview)</label>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
                <button type="button" class="btn btn-outline-primary" id="btn-retry-stuck-preview">
                    <i class="ti ti-search me-1"></i>Preview
                </button>
                <button type="button" class="btn btn-warning" id="btn-retry-stuck-execute">
                    <i class="ti ti-refresh me-1"></i>Execute Retry
                </button>
                <span class="text-muted ms-2" id="retry-stuck-loading" style="display:none;">Memproses...</span>
            </div>
            <div id="retry-stuck-result" class="alert d-none" role="alert"></div>
        </div>
    </div>

    <!-- WABA Health Overview -->
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="ti ti-heartbeat me-2"></i>WABA Health Overview</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="waba-health-table">
                    <thead>
                        <tr>
                            <th>WABA</th>
                            <th>Phone Number</th>
                            <th>Health</th>
                            <th>Status</th>
                            <th>Cooldown</th>
                            <th class="text-center">Sent Today</th>
                            <th class="text-center">Failed</th>
                            <th class="text-center">Discarded</th>
                            <th class="text-center">Rate Limit</th>
                        </tr>
                    </thead>
                    <tbody id="waba-health-body">
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                Loading WABA data...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    loadStats();
    loadWabaHealth();

    setInterval(loadStats, 30000);
    setInterval(loadWabaHealth, 60000);

    // Clear rate limits
    $('#btn-clear-rate-limits').click(function() {
        if (!confirm('Apakah Anda yakin ingin menghapus data rate limit lama?')) return;
        const csrfToken = $('meta[name="csrf-token"]').attr('content') || '{{ csrf_token() }}';
        $.ajax({
            url: '{{ route("admin.message-queue.clear-rate-limits") }}',
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
            data: { _token: csrfToken },
            success: function(res) {
                alert(res.message);
                loadStats();
            },
            error: function(xhr) {
                alert('Error: ' + (xhr.responseJSON?.message || 'Unknown error'));
            }
        });
    });

    function getRetryStuckParams() {
        const clientId = $('#retry-stuck-client').val();
        return {
            client_id: clientId || undefined,
            hours: parseInt($('#retry-stuck-hours').val()) || 1,
            sending_minutes: parseInt($('#retry-stuck-sending-minutes').val()) || 15,
            limit: parseInt($('#retry-stuck-limit').val()) || 100,
            dry_run: $('#retry-stuck-dry-run').prop('checked')
        };
    }

    function showRetryStuckResult(alertClass, html) {
        const $result = $('#retry-stuck-result');
        $result.removeClass('alert-success alert-info alert-warning alert-danger').addClass(alertClass);
        $result.html(html).removeClass('d-none');
    }

    // Preview: hit stuck-count dengan filter
    $('#btn-retry-stuck-preview').click(function() {
        const params = getRetryStuckParams();
        $('#retry-stuck-loading').show();
        $.get('{{ route("admin.message-queue.stuck-count") }}', params)
            .done(function(res) {
                const total = res.total || 0;
                const pd = res.pending_delayed || 0;
                const s = res.sending || 0;
                let html = '<strong>Preview:</strong> Total <strong>' + total + '</strong> pesan stuck (status=queued, semua tipe) akan di-retry ';
                html += '(pending/delayed: ' + pd + ', sending: ' + s + '). ';
                html += 'Filter: created_at hari ini, stuck pending/delayed &gt; ' + params.hours + ' jam, sending &gt; ' + params.sending_minutes + ' menit, limit ' + params.limit + '.';
                showRetryStuckResult(total > 0 ? 'alert-info' : 'alert-success', html);
            })
            .fail(function(xhr) {
                showRetryStuckResult('alert-danger', 'Error: ' + (xhr.responseJSON?.message || 'Gagal memuat preview.'));
            })
            .always(function() {
                $('#retry-stuck-loading').hide();
            });
    });

    // Execute: POST retry-stuck dengan filter; dry_run dari checkbox
    $('#btn-retry-stuck-execute').click(function() {
        const params = getRetryStuckParams();
        if (!params.dry_run && !confirm('Jalankan retry stuck dengan filter saat ini? Pesan akan di-dispatch ulang ke queue.')) return;
        const $btn = $(this);
        $btn.prop('disabled', true);
        $('#retry-stuck-loading').show();
        $('#retry-stuck-result').addClass('d-none');
        const csrfToken = $('meta[name="csrf-token"]').attr('content') || '{{ csrf_token() }}';
        $.ajax({
            url: '{{ route("admin.message-queue.retry-stuck") }}',
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            data: Object.assign({ _token: csrfToken }, params),
            success: function(res) {
                let html = res.message;
                if (res.retried !== undefined && res.failed !== undefined) {
                    html += ' <strong>Retried: ' + res.retried + '</strong>';
                    if (res.failed > 0) html += ', Gagal: ' + res.failed;
                }
                if (res.dry_run && res.would_retry) {
                    html = res.message + ' (pending/delayed: ' + (res.pending_delayed || 0) + ', sending: ' + (res.sending || 0) + ')';
                }
                showRetryStuckResult('alert-success', html);
                loadStats();
            },
            error: function(xhr) {
                showRetryStuckResult('alert-danger', 'Error: ' + (xhr.responseJSON?.message || xhr.statusText || 'Request gagal'));
            },
            complete: function() {
                $btn.prop('disabled', false);
                $('#retry-stuck-loading').hide();
            }
        });
    });
});

function formatNumber(num) {
    return new Intl.NumberFormat('id-ID').format(num || 0);
}

function loadStats() {
    $.get('{{ route("admin.message-queue.stats") }}', function(res) {
        // Format numbers with thousand separator
        $('#stat-pending').text(formatNumber(res.stats.pending));
        $('#stat-queued').text(formatNumber(res.stats.queued));
        $('#stat-delayed').text(formatNumber(res.stats.delayed || 0));
        $('#stat-sending').text(formatNumber(res.stats.sending));
        $('#stat-sent').text(formatNumber(res.stats.sent_today));
        $('#stat-failed').text(formatNumber(res.stats.failed_today));
        $('#stat-discarded').text(formatNumber(res.stats.discarded_today));

        // Rate limits summary (Simple Queue: Per WABA)
        let rateLimitsHtml = '';
        if (Object.keys(res.rate_limits).length === 0) {
            rateLimitsHtml = '<p class="text-muted mb-0">Tidak ada aktivitas rate limit saat ini.</p>';
        } else {
            rateLimitsHtml = '<ul class="list-group list-group-flush">';
            for (let key in res.rate_limits) {
                const limit = res.rate_limits[key];
                const percentage = Math.round((limit.sent / limit.max) * 100);
                const badgeClass = limit.is_at_limit ? 'bg-danger' : (percentage > 80 ? 'bg-warning' : 'bg-success');
                rateLimitsHtml += `<li class="list-group-item">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="fw-semibold">${limit.name || 'WABA ' + key}</span>
                        <span class="badge ${badgeClass}">${limit.sent}/${limit.max}</span>
                    </div>
                    <div class="progress" style="height: 4px;">
                        <div class="progress-bar ${badgeClass.replace('bg-', 'bg-')}" 
                             style="width: ${percentage}%"></div>
                    </div>
                    <small class="text-muted">Remaining: ${limit.remaining}</small>
                </li>`;
            }
            rateLimitsHtml += '</ul>';
        }
        $('#rate-limits-summary').html(rateLimitsHtml);

        // Quality issues summary (Simple Queue: Simplified)
        let qualityHtml = '';
        const failed = res.quality_issues.failed || 0;
        const discarded = res.quality_issues.discarded || 0;
        
        if (failed === 0 && discarded === 0) {
            qualityHtml = '<p class="text-success mb-0"><i class="ti ti-check me-2"></i>Tidak ada masalah hari ini.</p>';
        } else {
            qualityHtml = '<ul class="list-group list-group-flush">';
            if (failed > 0) {
                qualityHtml += `<li class="list-group-item d-flex justify-content-between">
                    <span>Failed Messages</span>
                    <span class="badge bg-danger">${failed}</span>
                </li>`;
            }
            if (discarded > 0) {
                qualityHtml += `<li class="list-group-item d-flex justify-content-between">
                    <span>Discarded Messages</span>
                    <span class="badge bg-secondary">${discarded}</span>
                </li>`;
            }
            qualityHtml += '</ul>';
        }
        $('#quality-issues-summary').html(qualityHtml);
    });
}

function loadWabaHealth() {
    $.get('{{ route("admin.message-queue.waba-health") }}', function(res) {
        let html = '';
        if (res.wabas.length === 0) {
            html = '<tr><td colspan="9" class="text-center text-muted">Tidak ada WABA terdaftar.</td></tr>';
        } else {
            res.wabas.forEach(function(waba) {
                const statusBadge = waba.status === 'active' 
                    ? '<span class="badge bg-success">Active</span>' 
                    : `<span class="badge bg-secondary">${waba.status}</span>`;
                
                const healthClass = waba.health_score >= 80 ? 'success' : (waba.health_score >= 50 ? 'warning' : 'danger');
                const rateLimit = waba.rate_limit || {};
                const ratePercentage = rateLimit.max > 0 ? Math.round((rateLimit.current / rateLimit.max) * 100) : 0;
                const rateBadgeClass = rateLimit.is_at_limit ? 'bg-danger' : (ratePercentage > 80 ? 'bg-warning' : 'bg-success');
                
                html += `<tr>
                    <td>${waba.name || 'N/A'}</td>
                    <td><code>${waba.phone || 'N/A'}</code></td>
                    <td><span class="badge bg-${healthClass}">${waba.health_score}%</span></td>
                    <td>${statusBadge}</td>
                    <td>${waba.cooldown ? `<span class="badge bg-warning">${waba.cooldown}</span>` : '<span class="text-muted">-</span>'}</td>
                    <td class="text-center"><span class="text-success">${waba.sent_today}</span></td>
                    <td class="text-center"><span class="text-danger">${waba.failed_today}</span></td>
                    <td class="text-center"><span class="text-secondary">${waba.discarded_today}</span></td>
                    <td class="text-center">
                        <span class="badge ${rateBadgeClass}" title="Rate Limit: ${rateLimit.current || 0}/${rateLimit.max || 60}">
                            ${rateLimit.current || 0}/${rateLimit.max || 60}
                        </span>
                    </td>
                </tr>`;
            });
        }
        $('#waba-health-body').html(html);
    });
}
</script>
@endpush