@php
    $toneClasses = [
        'slate' => 'bg-slate-50 text-slate-800 ring-slate-200',
        'teal' => 'bg-teal-50 text-teal-800 ring-teal-200',
        'rose' => 'bg-rose-50 text-rose-800 ring-rose-200',
        'amber' => 'bg-amber-50 text-amber-900 ring-amber-200',
        'sky' => 'bg-sky-50 text-sky-800 ring-sky-200',
    ];
@endphp

<x-filament-panels::page>
    <div class="grid gap-4 md:grid-cols-5">
        @foreach ($summary as $item)
            <div class="rounded-3xl p-5 ring-1 {{ $toneClasses[$item['tone']] ?? $toneClasses['slate'] }}">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] opacity-70">{{ $item['label'] }}</p>
                <p class="mt-3 text-3xl font-semibold">{{ number_format($item['value']) }}</p>
            </div>
        @endforeach
    </div>

    <section class="mt-6 rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="border-b border-slate-200 p-5">
            <h2 class="text-lg font-semibold text-slate-950">Source health</h2>
            <p class="mt-1 text-sm text-slate-600">Latest sync state, active job count, and failure reason per source.</p>
        </div>

        <div class="divide-y divide-slate-100">
            @forelse ($sources as $source)
                @php
                    $failed = $source->last_failed_at && (! $source->last_synced_at || $source->last_failed_at->gt($source->last_synced_at));
                    $stale = $source->is_active && $source->isAutomaticallySyncable() && (! $source->last_synced_at || $source->last_synced_at->lt(now()->subDay()));
                @endphp
                <article class="grid gap-4 p-5 lg:grid-cols-[1.4fr_.8fr_.8fr_1.2fr] lg:items-center">
                    <div>
                        <div class="flex flex-wrap items-center gap-2">
                            <h3 class="font-semibold text-slate-950">{{ $source->name }}</h3>
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">{{ strtoupper($source->type) }}</span>
                            @if ($source->is_active)
                                <span class="rounded-full bg-teal-50 px-2.5 py-1 text-xs font-semibold text-teal-700">Active</span>
                            @else
                                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-500">Inactive</span>
                            @endif
                            @if ($failed)
                                <span class="rounded-full bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-700">Failing</span>
                            @elseif ($stale)
                                <span class="rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-800">Needs sync</span>
                            @else
                                <span class="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">Healthy</span>
                            @endif
                        </div>
                        <p class="mt-2 break-all text-sm text-slate-500">{{ $source->feed_url ?: $source->base_url ?: 'Manual source' }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">Jobs</p>
                        <p class="mt-1 text-sm font-semibold text-slate-900">{{ number_format($source->active_jobs_count) }} active / {{ number_format($source->imported_jobs_count) }} total</p>
                    </div>

                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">Last sync</p>
                        <p class="mt-1 text-sm font-semibold text-slate-900">{{ $source->last_synced_at?->diffForHumans() ?: 'Never' }}</p>
                    </div>

                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">Last failure</p>
                        <p class="mt-1 text-sm text-slate-600">{{ $source->last_failure_reason ?: 'No recent failure' }}</p>
                    </div>
                </article>
            @empty
                <div class="p-8 text-center text-sm text-slate-500">No job sources configured yet.</div>
            @endforelse
        </div>
    </section>

    <section class="mt-6 rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="border-b border-slate-200 p-5">
            <h2 class="text-lg font-semibold text-slate-950">Recent sync logs</h2>
            <p class="mt-1 text-sm text-slate-600">Imported/expired counts and timing from the source sync job.</p>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100 text-sm">
                <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">
                    <tr>
                        <th class="px-5 py-3">Source</th>
                        <th class="px-5 py-3">Status</th>
                        <th class="px-5 py-3">Imported</th>
                        <th class="px-5 py-3">Expired</th>
                        <th class="px-5 py-3">Duration</th>
                        <th class="px-5 py-3">Finished</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($recentSyncLogs as $log)
                        <tr>
                            <td class="px-5 py-3 font-medium text-slate-900">{{ $log->source?->name ?: 'Deleted source' }}</td>
                            <td class="px-5 py-3">
                                <span class="rounded-full px-2.5 py-1 text-xs font-semibold {{ $log->status === 'success' ? 'bg-teal-50 text-teal-700' : 'bg-rose-50 text-rose-700' }}">{{ str($log->status)->headline() }}</span>
                            </td>
                            <td class="px-5 py-3 text-slate-600">{{ number_format($log->jobs_imported) }}</td>
                            <td class="px-5 py-3 text-slate-600">{{ number_format($log->jobs_expired) }}</td>
                            <td class="px-5 py-3 text-slate-600">{{ $log->duration_ms ? number_format($log->duration_ms).' ms' : '-' }}</td>
                            <td class="px-5 py-3 text-slate-600">{{ $log->finished_at?->diffForHumans() ?: '-' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-5 py-8 text-center text-slate-500">No source sync logs yet. Run a source sync first.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</x-filament-panels::page>