@php
    $platformMeta = \App\Services\UserDashboardMetrics::PLATFORM_META;
    $chip = function (string $key) use ($platformMeta) {
        [$label, $color, $short] = $platformMeta[$key] ?? [ucfirst($key), '#64748b', strtoupper(substr($key, 0, 2))];
        return compact('label', 'color', 'short');
    };
    $statusChip = [
        'waiting' => 'bg-slate-500/15 text-slate-400',
        'publishing' => 'bg-blue-500/15 text-blue-400',
        'published' => 'bg-green-500/15 text-green-400',
        'failed' => 'bg-red-500/15 text-red-400',
    ];
    $pending = $counts['waiting'] + $counts['publishing'] + $counts['failed'];
    $dayTotal = max(1, $publishedToday + $pending);
    $seg = fn (int $n) => round($n / $dayTotal * 100, 1);
@endphp

<div class="space-y-5">

    {{-- Title row --}}
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Queue</h1>
            <p class="mt-1 text-sm text-slate-400">Publishing jobs synced from your desktop app.</p>
        </div>
        @if ($counts['failed'] > 0)
            <button wire:click="retryAllFailed"
                    class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">
                <x-lucide-refresh-ccw class="h-4 w-4" /> Retry all failed ({{ $counts['failed'] }})
            </button>
        @endif
    </div>

    {{-- Desktop-report banner when the mirror is empty but the app reports jobs --}}
    @if ($counts['all'] === 0 && ($usage->queue ?? 0) > 0)
        <div class="flex items-center gap-2.5 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm text-blue-300">
            <x-lucide-monitor-smartphone class="h-4 w-4 shrink-0" />
            <span>Your desktop app reports <strong>{{ number_format($usage->queue) }}</strong> {{ \Illuminate\Support\Str::plural('job', $usage->queue) }} in queue — the detailed list appears once it syncs job data.</span>
        </div>
    @endif

    {{-- KPI strip + progress --}}
    <div class="admin-card">
        <div class="grid grid-cols-2 divide-y divide-edge lg:grid-cols-4 lg:divide-x lg:divide-y-0">
            <div class="flex items-center gap-3 p-4">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-blue-500/10 text-blue-400"><x-lucide-loader class="h-4 w-4" /></span>
                <div><div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($counts['publishing']) }}</div><div class="text-[11.5px] text-slate-500">Publishing now</div></div>
            </div>
            <div class="flex items-center gap-3 p-4">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-raised text-slate-400"><x-lucide-clock class="h-4 w-4" /></span>
                <div><div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($counts['waiting']) }}</div><div class="text-[11.5px] text-slate-500">Waiting</div></div>
            </div>
            <div class="flex items-center gap-3 p-4">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-green-500/10 text-green-400"><x-lucide-check-circle-2 class="h-4 w-4" /></span>
                <div><div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($publishedToday) }}</div><div class="text-[11.5px] text-slate-500">Published today</div></div>
            </div>
            <div class="flex items-center gap-3 p-4">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-red-500/10 text-red-400"><x-lucide-alert-triangle class="h-4 w-4" /></span>
                <div><div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($counts['failed']) }}</div><div class="text-[11.5px] text-slate-500">Failed</div></div>
            </div>
        </div>
        @if ($counts['all'] > 0)
            <div class="border-t border-edge px-4 pb-4 pt-3">
                <div class="mb-1.5 flex justify-between text-[11px] text-slate-500">
                    <span>Today's progress</span>
                    <span class="tabular-nums">{{ number_format($publishedToday) }} of {{ number_format($publishedToday + $pending) }} done</span>
                </div>
                <div class="flex h-2 gap-0.5 overflow-hidden rounded-full">
                    @if ($publishedToday)<div style="width: {{ $seg($publishedToday) }}%" class="bg-green-500"></div>@endif
                    @if ($counts['publishing'])<div style="width: {{ $seg($counts['publishing']) }}%" class="animate-pulse bg-blue-500"></div>@endif
                    @if ($counts['waiting'])<div style="width: {{ $seg($counts['waiting']) }}%" class="bg-raised"></div>@endif
                    @if ($counts['failed'])<div style="width: {{ $seg($counts['failed']) }}%" class="bg-red-500"></div>@endif
                </div>
            </div>
        @endif
    </div>

    {{-- List --}}
    <section class="admin-card">
        {{-- Toolbar --}}
        <div class="flex flex-wrap items-center gap-3 border-b border-edge p-4">
            <div class="flex rounded-lg border border-edge bg-ink p-0.5 text-xs">
                @foreach (['all' => 'All', 'waiting' => 'Waiting', 'publishing' => 'Publishing', 'failed' => 'Failed', 'published' => 'Published'] as $key => $label)
                    <button wire:click="setStatus('{{ $key }}')"
                            class="rounded-md px-3 py-1.5 font-medium transition {{ $status === $key ? 'bg-raised text-white shadow' : 'text-slate-500 hover:text-slate-300' }}">
                        {{ $label }} <span class="tabular-nums {{ $status === $key ? 'text-slate-400' : 'text-slate-600' }}">{{ $counts[$key] }}</span>
                    </button>
                @endforeach
            </div>
            <label class="ml-auto flex h-9 w-full max-w-[260px] items-center gap-2 rounded-lg border border-edge bg-ink px-3">
                <x-lucide-search class="h-3.5 w-3.5 text-slate-500" />
                <input wire:model.live.debounce.300ms="search" type="text" placeholder="Search jobs..."
                       class="w-full border-0 bg-transparent p-0 text-sm text-slate-200 placeholder:text-slate-500 focus:ring-0">
            </label>
        </div>

        @if ($rows->count())
            <div class="divide-y divide-edge">
                @foreach ($rows as $item)
                    @php($p = $chip($item->platform))
                    <div class="flex flex-wrap items-center gap-3 px-5 py-3.5 transition hover:bg-raised/40 lg:flex-nowrap lg:gap-4">
                        {{-- Platform chip --}}
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-[10px] font-bold text-white" style="background: {{ $p['color'] }}">{{ $p['short'] }}</span>

                        {{-- Title + meta --}}
                        <div class="min-w-0 flex-1">
                            <div class="truncate text-sm font-semibold text-white">{{ $item->title }}</div>
                            <div class="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-slate-500">
                                <span>{{ $p['label'] }}</span>
                                @if ($item->automation)
                                    <span class="text-slate-700">·</span><span class="inline-flex items-center gap-1"><x-lucide-workflow class="h-3 w-3" />{{ $item->automation->name }}</span>
                                @endif
                                @if ($item->status === 'published' && $item->published_at)
                                    <span class="text-slate-700">·</span><span>published {{ $item->published_at->diffForHumans() }}</span>
                                @elseif ($item->scheduled_for)
                                    <span class="text-slate-700">·</span><span>scheduled {{ $item->scheduled_for->format('M j, g:i A') }}</span>
                                @endif
                                @if ($item->attempts > 1)
                                    <span class="text-slate-700">·</span><span class="tabular-nums">attempt {{ $item->attempts }}</span>
                                @endif
                            </div>
                            @if ($item->status === 'failed' && $item->error)
                                <div class="mt-1 truncate text-xs text-red-400/80">{{ $item->error }}</div>
                            @endif
                        </div>

                        {{-- Status --}}
                        <span class="admin-chip shrink-0 {{ $statusChip[$item->status] ?? 'bg-slate-500/15 text-slate-400' }}">
                            @if ($item->status === 'publishing')<span class="h-1.5 w-1.5 animate-pulse rounded-full bg-blue-400"></span>@endif
                            {{ ucfirst($item->status) }}
                        </span>

                        {{-- Actions --}}
                        <div class="flex shrink-0 items-center gap-1.5">
                            @if ($item->status === 'failed')
                                <button wire:click="retry({{ $item->id }})"
                                        class="grid h-8 w-8 place-items-center rounded-lg border border-edge text-slate-400 hover:bg-raised hover:text-white" title="Retry">
                                    <x-lucide-refresh-ccw class="h-3.5 w-3.5" />
                                </button>
                            @endif
                            @if (in_array($item->status, ['waiting', 'failed']))
                                <button wire:click="cancel({{ $item->id }})" wire:confirm="Remove '{{ $item->title }}' from the queue?"
                                        class="grid h-8 w-8 place-items-center rounded-lg border border-edge text-slate-400 hover:border-red-500/40 hover:bg-red-500/10 hover:text-red-400" title="Remove">
                                    <x-lucide-x class="h-3.5 w-3.5" />
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            @if ($rows->hasPages())
                <div class="border-t border-edge px-5 py-3">{{ $rows->links('pagination.dark') }}</div>
            @endif
        @else
            <div class="px-6 py-14 text-center">
                <span class="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-brand/15 text-brand-500"><x-lucide-list-checks class="h-7 w-7" /></span>
                @if ($counts['all'] === 0)
                    <h2 class="mt-4 text-lg font-bold text-white">Queue is empty</h2>
                    <p class="mx-auto mt-1 max-w-sm text-sm text-slate-400">Jobs appear here as your automations queue posts in the desktop app.</p>
                    <a href="{{ route('user.automation') }}" wire:navigate class="mt-5 inline-flex items-center gap-2 rounded-xl bg-brand px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">
                        <x-lucide-workflow class="h-4 w-4" /> View automations
                    </a>
                @else
                    <h2 class="mt-4 text-lg font-bold text-white">Nothing matches</h2>
                    <p class="mt-1 text-sm text-slate-400">No jobs match your search or filter.</p>
                @endif
            </div>
        @endif
    </section>

    <p class="text-xs text-slate-600">The queue mirrors your desktop app and refreshes on each sync. Retries and removals here apply on the app's next sync.</p>
</div>