@section('title', __('Jobs Monitor'))
<div>

    <x-baseview title="{{ __('Jobs Monitor') }}">
        <div class="space-y-6">
            <div class="p-4 bg-white border rounded-lg shadow-sm">
                <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900">{{ __('Dispatch & Queue Health') }}</h2>
                        <p class="text-sm text-gray-600">
                            {{ __('Use this page to detect blocked order dispatch quickly and take action immediately.') }}
                        </p>
                    </div>
                    <button wire:click="$refresh"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors rounded-md bg-primary-500 hover:bg-primary-600">
                        <x-tabler-refresh class="w-4 h-4 mr-2" />
                        {{ __('Refresh Monitor') }}
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
                <div class="p-4 bg-white border rounded-lg shadow-sm">
                    <p class="text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('CRON') }}</p>
                    @if ($metrics['cron_healthy'])
                        <p class="mt-2 text-sm font-semibold text-green-700">{{ __('Running') }}</p>
                    @else
                        <p class="mt-2 text-sm font-semibold text-red-700">{{ __('Delayed') }}</p>
                    @endif
                    <p class="mt-1 text-xs text-gray-500">
                        @if (!empty($metrics['cron_last_run_at']))
                            {{ __('Last run: :time', ['time' => $metrics['cron_last_run_at']->translatedFormat('d M, H:i:s')]) }}
                        @else
                            {{ __('Last run: Never') }}
                        @endif
                    </p>
                </div>
                <div class="p-4 bg-white border rounded-lg shadow-sm">
                    <p class="text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Pending Jobs') }}</p>
                    <p class="mt-2 text-2xl font-bold text-gray-900">{{ $metrics['pending_jobs_count'] }}</p>
                    <p class="mt-1 text-xs text-gray-500">
                        {{ __('Oldest waiting: :minutes min', ['minutes' => $metrics['oldest_pending_job_minutes']]) }}
                    </p>
                </div>
                <div class="p-4 bg-white border rounded-lg shadow-sm">
                    <p class="text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Failed Jobs') }}</p>
                    <p class="mt-2 text-2xl font-bold text-gray-900">{{ $metrics['failed_jobs_count'] }}</p>
                    <p class="mt-1 text-xs text-gray-500">{{ __('Retry from tab below when needed') }}</p>
                </div>
                <div class="p-4 bg-white border rounded-lg shadow-sm">
                    <p class="text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Critical Orders') }}</p>
                    <p class="mt-2 text-2xl font-bold text-gray-900">{{ $metrics['critical_orders_count'] }}</p>
                    <p class="mt-1 text-xs text-gray-500">
                        {{ __('Older than :minutes min without driver', ['minutes' => $this->criticalOrderWindowMinutes]) }}
                    </p>
                </div>
                <div class="p-4 bg-white border rounded-lg shadow-sm">
                    <p class="text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Online Drivers') }}</p>
                    <p class="mt-2 text-2xl font-bold text-gray-900">{{ $metrics['online_regular_drivers_count'] }}</p>
                    <p class="mt-1 text-xs text-gray-500">{{ __('Regular drivers currently online') }}</p>
                </div>
            </div>

            <div class="p-4 bg-white border rounded-lg shadow-sm">
                <h3 class="text-sm font-semibold text-gray-900">{{ __('Operational Guidance') }}</h3>
                <div class="mt-3 space-y-2">
                    @foreach ($actionItems as $item)
                        @php
                            $levelClasses = [
                                'danger' => 'border-red-200 bg-red-50 text-red-800',
                                'warning' => 'border-amber-200 bg-amber-50 text-amber-800',
                                'success' => 'border-green-200 bg-green-50 text-green-800',
                            ];
                            $classes = $levelClasses[$item['level']] ?? $levelClasses['warning'];
                        @endphp
                        <div class="p-3 border rounded-md {{ $classes }}">
                            <p class="text-sm font-semibold">{{ $item['title'] }}</p>
                            <p class="mt-1 text-xs">{{ $item['message'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="p-4 bg-white border rounded-lg shadow-sm">
                <div class="flex flex-col gap-2 mb-4 md:flex-row md:items-center md:justify-between">
                    <div>
                        <h3 class="text-sm font-semibold text-gray-900">{{ __('Orders Waiting For Driver') }}</h3>
                        <p class="text-xs text-gray-500">
                            {{ __('Priority list for active orders that are still open and waiting for auto-assignment.') }}
                        </p>
                    </div>
                </div>

                @if ($criticalOrders->isEmpty())
                    <div class="p-6 text-center border border-dashed rounded-md">
                        <p class="text-sm font-semibold text-gray-700">{{ __('No critical waiting orders now') }}</p>
                        <p class="mt-1 text-xs text-gray-500">{{ __('Newly accepted orders should still be monitored during peak hours.') }}</p>
                    </div>
                @else
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-3 py-2 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Order') }}</th>
                                    <th class="px-3 py-2 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Vendor') }}</th>
                                    <th class="px-3 py-2 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Status') }}</th>
                                    <th class="px-3 py-2 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Waiting') }}</th>
                                    <th class="px-3 py-2 text-left text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Attempts') }}</th>
                                    <th class="px-3 py-2 text-right text-xs font-semibold tracking-wide text-gray-500 uppercase">{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @foreach ($criticalOrders as $order)
                                    <tr>
                                        <td class="px-3 py-3">
                                            <a href="{{ route('orders.details', ['code' => $order->code]) }}"
                                                class="font-semibold text-primary-600 hover:underline">
                                                #{{ $order->code }}
                                            </a>
                                        </td>
                                        <td class="px-3 py-3 text-gray-700">{{ $order->vendor->name ?? '--' }}</td>
                                        <td class="px-3 py-3">
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold text-amber-800 bg-amber-100 rounded-full">
                                                {{ ucfirst(__($order->status ?? 'pending')) }}
                                            </span>
                                        </td>
                                        <td class="px-3 py-3 text-gray-700">
                                            {{ $order->dispatch_wait_minutes }} {{ __('min') }}
                                        </td>
                                        <td class="px-3 py-3 text-gray-700">
                                            <p>{{ __('Pending alerts: :count', ['count' => $order->pending_auto_assignments_count]) }}</p>
                                            <p class="text-xs text-gray-500">{{ __('Rejected: :count', ['count' => $order->rejected_auto_assignments_count]) }}</p>
                                        </td>
                                        <td class="px-3 py-3">
                                            <div class="flex justify-end gap-2">
                                                <button wire:click="retryOrderDispatch({{ $order->id }})"
                                                    class="inline-flex items-center px-3 py-2 text-xs font-semibold text-white transition-colors bg-amber-500 rounded-md hover:bg-amber-600">
                                                    <x-tabler-refresh class="w-4 h-4 mr-1" />
                                                    {{ __('Retry Search') }}
                                                </button>
                                                @if ((int) $order->pending_auto_assignments_count > 0)
                                                    <button wire:click="releaseAndRetryOrderDispatch({{ $order->id }})"
                                                        class="inline-flex items-center px-3 py-2 text-xs font-semibold text-white transition-colors bg-orange-500 rounded-md hover:bg-orange-600">
                                                        <x-tabler-arrow-forward-up class="w-4 h-4 mr-1" />
                                                        {{ __('Release & Retry') }}
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            <x-tab.tabview class="shadow pb-10">
                <x-slot name="header">
                    <x-tab.header tab="1" title="{{ __('Jobs') }}">
                        <x-tabler-align-justified class="w-4 h-4 mx-2" />
                    </x-tab.header>
                    <x-tab.header tab="2" title="{{ __('Failed Jobs') }}">
                        <x-tabler-file-x class="w-4 h-4 mx-2" />
                    </x-tab.header>
                </x-slot>

                <x-slot name="body">
                    <x-tab.body tab="1">
                        @livewire('components.queue-jobs-table', [
                            'showBorder' => false,
                        ])
                    </x-tab.body>
                    <x-tab.body tab="2">
                        @livewire('components.failed-jobs-table', [
                            'showBorder' => false,
                        ])
                    </x-tab.body>
                </x-slot>
            </x-tab.tabview>
        </div>

    </x-baseview>


</div>