@extends('layouts.admin')

@section('title', trans('admin.monitor_title'))
@section('header_title', trans('admin.monitor_header'))

@section('content')
<div class="space-y-8 text-xs">

    <!-- Gateway Health Ping -->
    <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800">
        <h3 class="text-sm font-bold text-white mb-4 flex items-center gap-2">
            <i class="fa-solid fa-satellite-dish text-emerald-400"></i>
            <span>{{ trans('admin.gateway_health') }}</span>
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="p-4 rounded-xl bg-navy-950 border border-slate-800 flex items-center justify-between">
                <div>
                    <span class="font-bold text-white block">{{ trans('admin.sandbox_api') }}</span>
                    <span class="text-[10px] text-slate-500 code-font">https://gw-fatoora.zatca.gov.sa/e-invoicing/developer-portal</span>
                </div>
                <div class="text-start">
                    @if($sandboxStatus === 'online')
                        <span class="px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 font-bold text-[10px]">{{ trans('admin.online') }}</span>
                        <span class="block text-[10px] text-slate-400 mt-1 code-font">{{ $sandboxLatency }} ms</span>
                    @else
                        <span class="px-2.5 py-1 rounded-full bg-rose-500/10 text-rose-400 font-bold text-[10px]">{{ trans('admin.slow_offline') }}</span>
                    @endif
                </div>
            </div>

            <div class="p-4 rounded-xl bg-navy-950 border border-slate-800 flex items-center justify-between">
                <div>
                    <span class="font-bold text-white block">{{ trans('admin.redis_queue') }}</span>
                    <span class="text-[10px] text-slate-500 code-font">{{ trans('admin.queue_label') }} {{ config('zatca.queue.name', 'zatca') }}</span>
                </div>
                <div>
                    <span class="px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 font-bold text-[10px]">{{ trans('admin.queue_full_capacity') }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Problem Invoices Table -->
    <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-bold text-white flex items-center gap-2">
                <i class="fa-solid fa-triangle-exclamation text-rose-400"></i>
                <span>{{ trans('admin.problem_invoices_title') }}</span>
            </h3>
            <span class="text-slate-500 text-[11px]">{{ trans('dashboard.total_amount') }}: {{ $problemInvoices->total() }}</span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-start">
                <thead class="text-slate-400 border-b border-slate-800">
                    <tr>
                        <th class="pb-3 text-start">{{ trans('dashboard.invoice_number') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.company') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.status') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.rejection_reason') }}</th>
                        <th class="pb-3 text-start">{{ trans('site.date') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 text-slate-300">
                    @forelse($problemInvoices as $inv)
                        <tr>
                            <td class="py-3 font-bold text-white code-font">{{ $inv->invoice_number }}</td>
                            <td class="py-3">{{ $inv->tenant->name ?? '-' }}</td>
                            <td class="py-3">
                                <span class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-400 font-bold text-[10px]">{{ $inv->status->label() }}</span>
                            </td>
                            <td class="py-3 text-rose-300 max-w-xs truncate" title="{{ json_encode($inv->errors) }}">
                                {{ $inv->errors ? json_encode($inv->errors, JSON_UNESCAPED_UNICODE) : trans('admin.unspecified_error') }}
                            </td>
                            <td class="py-3 text-[11px] text-slate-500">{{ $inv->updated_at->format('Y-m-d H:i') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-8 text-emerald-400 font-bold">
                                {{ trans('admin.no_problem_invoices') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($problemInvoices->hasPages())
            <div class="pt-4 border-t border-slate-800">
                {{ $problemInvoices->links() }}
            </div>
        @endif
    </div>

    <!-- Pending Onboarding Devices -->
    <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
        <h3 class="text-sm font-bold text-white mb-4 flex items-center gap-2">
            <i class="fa-solid fa-hourglass-half text-amber-400"></i>
            <span>{{ trans('admin.pending_devices_title') }}</span>
        </h3>

        <div class="overflow-x-auto">
            <table class="w-full text-start">
                <thead class="text-slate-400 border-b border-slate-800">
                    <tr>
                        <th class="pb-3 text-start">{{ trans('admin.company') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.device_name_label') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.serial_number_label') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.pending_stage') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.start_date') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 text-slate-300">
                    @forelse($pendingDevices as $d)
                        <tr>
                            <td class="py-3 font-bold text-white">{{ $d->tenant->name ?? '-' }}</td>
                            <td class="py-3">{{ $d->name }}</td>
                            <td class="py-3 code-font text-slate-400">{{ $d->serial_number }}</td>
                            <td class="py-3">
                                <span class="px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400 font-bold text-[10px]">{{ $d->onboarding_status }}</span>
                            </td>
                            <td class="py-3 text-[11px] text-slate-500">{{ $d->created_at->format('Y-m-d H:i') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-6 text-slate-500">{{ trans('admin.no_pending_devices') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection