@extends('ops.layout')
@section('title', 'Jobs & Queue')

@section('content')

{{-- Stats Bar --}}
<div class="flex gap-3 mb-5 flex-wrap">
    <div class="card px-5 py-3 text-center">
        <div class="text-2xl font-bold" style="color:#58a6ff;">{{ $pendingJobs->count() }}</div>
        <div class="text-xs mt-1" style="color:#8b949e;">{{ trans('ops.pending') }}</div>
    </div>
    <div class="card px-5 py-3 text-center">
        <div class="text-2xl font-bold" style="color:#56d364;">{{ $jobBatches->count() }}</div>
        <div class="text-xs mt-1" style="color:#8b949e;">{{ trans('ops.batches') }}</div>
    </div>
    <div class="card px-5 py-3 text-center">
        <div class="text-2xl font-bold" style="color:#f85149;">{{ $failedJobs->count() }}</div>
        <div class="text-xs mt-1" style="color:#8b949e;">{{ trans('ops.failed') }}</div>
    </div>
</div>

{{-- Pending Jobs --}}
<div class="card p-4 mb-5">
    <h2 class="text-sm font-bold mb-3" style="color:#e6edf3;">{{ trans('ops.pending_jobs_title') }}</h2>
    @if($pendingJobs->isEmpty())
        <p class="text-sm" style="color:#8b949e;">{{ trans('ops.no_pending_jobs') }}</p>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr style="color:#8b949e; border-bottom:1px solid #30363d;">
                        <th class="text-start py-2 pr-2">{{ trans('ops.th_id') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_class') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_queue') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_attempts') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_created') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_available_at') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_status') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pendingJobs as $job)
                        <tr style="border-bottom:1px solid #21262d;">
                            <td class="py-2 pr-2" style="color:#8b949e;">{{ $job->id }}</td>
                            <td class="py-2 font-mono" style="color:#79c0ff;">{{ $job->class_name }}</td>
                            <td class="py-2" style="color:#c9d1d9;">{{ $job->queue }}</td>
                            <td class="py-2 text-center">{{ $job->attempts }}</td>
                            <td class="py-2" style="color:#8b949e;">{{ $job->queued_at->diffForHumans() }}</td>
                            <td class="py-2" style="color:#8b949e;">{{ $job->available_at->diffForHumans() }}</td>
                            <td class="py-2">
                                @if($job->reserved_at)
                                    <span class="badge-reserved text-white px-2 py-0.5 rounded text-xs">{{ trans('ops.processing') }}</span>
                                @else
                                    <span class="badge-pending text-white px-2 py-0.5 rounded text-xs">{{ trans('ops.waiting') }}</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

{{-- Job Batches --}}
@if($jobBatches->isNotEmpty())
<div class="card p-4 mb-5">
    <h2 class="text-sm font-bold mb-3" style="color:#e6edf3;">{{ trans('ops.job_batches_title') }}</h2>
    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead>
                <tr style="color:#8b949e; border-bottom:1px solid #30363d;">
                    <th class="text-start py-2 pr-2">{{ trans('ops.th_name') }}</th>
                    <th class="text-start py-2">{{ trans('ops.th_total') }}</th>
                    <th class="text-start py-2">{{ trans('ops.th_pending') }}</th>
                    <th class="text-start py-2">{{ trans('ops.th_failed') }}</th>
                    <th class="text-start py-2">{{ trans('ops.th_created') }}</th>
                    <th class="text-start py-2">{{ trans('ops.th_completed') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($jobBatches as $batch)
                    <tr style="border-bottom:1px solid #21262d;">
                        <td class="py-2 pr-2 font-mono" style="color:#79c0ff;">{{ $batch->name }}</td>
                        <td class="py-2 text-center">{{ $batch->total_jobs }}</td>
                        <td class="py-2 text-center" style="color:#d29922;">{{ $batch->pending_jobs }}</td>
                        <td class="py-2 text-center" style="color:#f85149;">{{ $batch->failed_jobs }}</td>
                        <td class="py-2" style="color:#8b949e;">{{ $batch->created_at->diffForHumans() }}</td>
                        <td class="py-2">
                            @if($batch->finished_at)
                                <span class="badge-ok text-white px-2 py-0.5 rounded text-xs">{{ $batch->finished_at->diffForHumans() }}</span>
                            @else
                                <span class="badge-pending text-white px-2 py-0.5 rounded text-xs">{{ trans('ops.running_status') }}</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- Failed Jobs --}}
<div class="card p-4">
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-sm font-bold" style="color:#e6edf3;">{{ trans('ops.failed_jobs_title') }}</h2>
        @if($failedJobs->isNotEmpty())
            <button onclick="retryAll()" class="btn-warning px-3 py-1 rounded text-xs">↺ {{ trans('ops.retry_all') }}</button>
        @endif
    </div>

    @if($failedJobs->isEmpty())
        <p class="text-sm" style="color:#56d364;">{{ trans('ops.no_failed_jobs') }}</p>
    @else
        <div id="msg" class="text-xs mb-2" style="min-height:14px;"></div>
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr style="color:#8b949e; border-bottom:1px solid #30363d;">
                        <th class="text-start py-2 pr-2">UUID</th>
                        <th class="text-start py-2">{{ trans('ops.th_class') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_queue') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_failed_at') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_error') }}</th>
                        <th class="text-start py-2">{{ trans('ops.th_action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($failedJobs as $job)
                        <tr id="row-{{ $loop->index }}" style="border-bottom:1px solid #21262d;">
                            <td class="py-2 pr-2 font-mono" style="color:#8b949e; font-size:.65rem;">{{ Str::limit($job->uuid, 14) }}</td>
                            <td class="py-2 font-mono" style="color:#79c0ff;">{{ $job->class_name }}</td>
                            <td class="py-2" style="color:#c9d1d9;">{{ $job->queue }}</td>
                            <td class="py-2" style="color:#f85149;">{{ $job->failed_at->diffForHumans() }}</td>
                            <td class="py-2" style="color:#d29922; white-space:pre-wrap; max-width:260px; overflow:hidden;">{{ $job->exception_summary }}</td>
                            <td class="py-2 flex gap-2">
                                <button onclick="retryJob('{{ $job->uuid }}', {{ $loop->index }})" class="btn-warning px-2 py-0.5 rounded text-xs">↺</button>
                                <button onclick="deleteJob('{{ $job->uuid }}', {{ $loop->index }})" class="btn-danger px-2 py-0.5 rounded text-xs">✕</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

@endsection

@push('scripts')
<script>
    const csrf = document.querySelector('meta[name=csrf-token]').content;

    async function retryJob(uuid, idx) {
        const res = await fetch('{{ route("ops.jobs.retry") }}', {
            method: 'POST',
            headers: {'Content-Type':'application/json','X-CSRF-TOKEN':csrf},
            body: JSON.stringify({ uuid })
        });
        const data = await res.json();
        setMsg(res.ok ? `✔ ${data.output}` : `✖ ${data.error}`, res.ok);
        if (res.ok) document.getElementById('row-'+idx)?.remove();
    }

    async function deleteJob(uuid, idx) {
        if (!confirm({!! json_encode(trans('ops.confirm_delete_failed_job')) !!})) return;
        const res = await fetch('{{ route("ops.jobs.delete") }}', {
            method: 'DELETE',
            headers: {'Content-Type':'application/json','X-CSRF-TOKEN':csrf},
            body: JSON.stringify({ uuid })
        });
        const data = await res.json();
        setMsg(res.ok ? `✔ ${data.output}` : `✖ ${data.error}`, res.ok);
        if (res.ok) document.getElementById('row-'+idx)?.remove();
    }

    async function retryAll() {
        if (!confirm({!! json_encode(trans('ops.confirm_retry_all_failed_jobs')) !!})) return;
        const res = await fetch('{{ route("ops.commands.run") }}', {
            method: 'POST',
            headers: {'Content-Type':'application/json','X-CSRF-TOKEN':csrf},
            body: JSON.stringify({ command: 'queue:retry', args: 'all' })
        });
        const data = await res.json();
        setMsg(res.ok ? `✔ ${data.output}` : `✖ ${data.error}`, res.ok);
    }

    function setMsg(text, ok) {
        const el = document.getElementById('msg');
        if (!el) return;
        el.textContent = text;
        el.style.color = ok ? '#56d364' : '#f85149';
    }
</script>
@endpush