@extends('layouts.app')

@section('content')
<x-page-header title="Queue & Job Monitor" subtitle="Real-time background processing and failure recovery">
    <x-slot name="actions">
        <form action="{{ route('queue.clear') }}" method="POST" onsubmit="return confirm('Clear all failed jobs?')">
            @csrf
            <button class="btn-modern bg-red-500/10 text-red-500 border border-red-500/30 hover:bg-red-500 hover:text-white">
                <i class="bi bi-trash mr-2"></i> Flush Failures
            </button>
        </form>
    </x-slot>
</x-page-header>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bento-card p-5">
        <div class="text-[10px] text-[var(--text-secondary)] uppercase font-bold tracking-widest mb-1">Pending Jobs</div>
        <div class="text-3xl font-black text-[var(--text-primary)]">{{ $pendingJobs }}</div>
    </div>
    <div class="bento-card p-5 border-l-4 border-red-500">
        <div class="text-[10px] text-[var(--text-secondary)] uppercase font-bold tracking-widest mb-1">Failed Jobs</div>
        <div class="text-3xl font-black text-red-500">{{ $failedJobs->count() }}</div>
    </div>
    <div class="bento-card p-5">
        <div class="text-[10px] text-[var(--text-secondary)] uppercase font-bold tracking-widest mb-1">Success Rate</div>
        <div class="text-3xl font-black text-[var(--accent-green)]">99.2%</div>
    </div>
</div>

<x-table-wrapper title="Failed Background Jobs" icon="bi-exclamation-octagon">
    <table class="w-full text-left table-modern">
        <thead>
            <tr>
                <th>Job ID</th>
                <th>Connection</th>
                <th>Failed At</th>
                <th>Exception</th>
                <th class="text-right">Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($failedJobs as $job)
            <tr class="group">
                <td class="text-xs font-mono">#{{ $job->id }}</td>
                <td><x-badge color="info" text="{{ $job->connection }}" /></td>
                <td class="text-xs text-[var(--text-secondary)]">{{ $job->failed_at }}</td>
                <td class="max-w-xs">
                    <div class="text-[10px] text-red-400 truncate font-mono" title="{{ $job->exception }}">
                        {{ $job->exception }}
                    </div>
                </td>
                <td class="text-right">
                    <form action="{{ route('queue.retry', $job->id) }}" method="POST">
                        @csrf
                        <button class="p-2 text-[var(--accent-green)] hover:bg-[var(--accent-green)]/10 rounded-lg">
                            <i class="bi bi-arrow-repeat text-xl"></i>
                        </button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="text-center py-12">
                    <x-empty-state title="System Healthy" subtitle="No failed background jobs detected" icon="bi-shield-check" />
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</x-table-wrapper>
@endsection