@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 = [
        'running' => 'bg-green-500/15 text-green-400',
        'paused' => 'bg-amber-500/15 text-amber-400',
        'draft' => 'bg-slate-500/15 text-slate-400',
    ];
    $capText = $cap === null ? '∞' : number_format($cap);
@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">Automation</h1>
            <p class="mt-1 text-sm text-slate-400">Publishing workflows that repost content from one platform to another.</p>
        </div>
        <button wire:click="openCreate"
                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-plus class="h-4 w-4" /> New Automation
        </button>
    </div>

    {{-- KPI strip --}}
    <div class="admin-card 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-green-500/10 text-green-400"><x-lucide-zap class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ $counts['running'] }}</div><div class="text-[11.5px] text-slate-500">Active automations</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-brand/15 text-brand-500"><x-lucide-workflow class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ $counts['all'] }} <span class="text-xs font-medium text-slate-500">/ {{ $capText }}</span></div><div class="text-[11.5px] text-slate-500">Workflow slots used</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-blue-500/10 text-blue-400"><x-lucide-calendar-clock class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($usage->scheduled ?? 0) }}</div><div class="text-[11.5px] text-slate-500">Scheduled posts</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-amber-500/10 text-amber-400"><x-lucide-list-checks class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($usage->queue ?? 0) }}</div><div class="text-[11.5px] text-slate-500">Jobs in queue</div></div>
        </div>
    </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', 'running' => 'Active', 'paused' => 'Paused', 'draft' => 'Drafts'] 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 automations..."
                       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())
            {{-- Header (desktop) --}}
            <div class="hidden grid-cols-[1fr_130px_110px_90px_100px_100px] items-center gap-4 border-b border-edge px-5 py-2.5 text-[10.5px] font-semibold uppercase tracking-wider text-slate-600 lg:grid">
                <span>Automation</span><span>Frequency</span><span class="text-right">Posts</span><span class="text-right">Success</span><span>Status</span><span class="text-right">Actions</span>
            </div>

            <div class="divide-y divide-edge">
                @foreach ($rows as $a)
                    @php($src = $chip($a->source_platform))
                    @php($dst = $chip($a->target_platform))
                    <div class="grid grid-cols-1 items-center gap-3 px-5 py-3.5 transition hover:bg-raised/40 lg:grid-cols-[1fr_130px_110px_90px_100px_100px] lg:gap-4">
                        {{-- Name + route --}}
                        <div class="min-w-0">
                            <div class="truncate text-sm font-semibold text-white">{{ $a->name }}</div>
                            <div class="mt-1 flex items-center gap-1.5 text-xs text-slate-500">
                                <span class="grid h-5 w-5 place-items-center rounded-md text-[8px] font-bold text-white" style="background: {{ $src['color'] }}">{{ $src['short'] }}</span>
                                <span>{{ $src['label'] }}</span>
                                <x-lucide-arrow-right class="h-3 w-3 text-slate-600" />
                                <span class="grid h-5 w-5 place-items-center rounded-md text-[8px] font-bold text-white" style="background: {{ $dst['color'] }}">{{ $dst['short'] }}</span>
                                <span>{{ $dst['label'] }}</span>
                            </div>
                        </div>
                        {{-- Frequency --}}
                        <div class="text-xs text-slate-400">{{ $a->frequencyLabel() }}</div>
                        {{-- Posts --}}
                        <div class="text-sm font-semibold text-white tabular-nums lg:text-right">{{ number_format($a->posts_published) }}</div>
                        {{-- Success --}}
                        <div class="text-sm tabular-nums lg:text-right {{ $a->success_rate === null ? 'text-slate-600' : ($a->success_rate < 90 ? 'text-amber-400' : 'text-green-400') }}">
                            {{ $a->success_rate === null ? '—' : rtrim(rtrim(number_format($a->success_rate, 2), '0'), '.').'%' }}
                        </div>
                        {{-- Status --}}
                        <div>
                            <span class="admin-chip {{ $statusChip[$a->status] ?? 'bg-slate-500/15 text-slate-400' }}">
                                @if ($a->isRunning())<span class="h-1.5 w-1.5 rounded-full bg-green-400"></span>@endif
                                {{ ucfirst($a->status) }}
                            </span>
                            <div class="mt-1 text-[10.5px] text-slate-600">{{ $a->last_run_at ? 'Ran '.$a->last_run_at->diffForHumans() : 'Not run yet' }}</div>
                        </div>
                        {{-- Actions --}}
                        <div class="flex items-center gap-1.5 lg:justify-end">
                            <button wire:click="toggle({{ $a->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="{{ $a->isRunning() ? 'Pause' : 'Resume' }}">
                                @if ($a->isRunning())<x-lucide-pause class="h-3.5 w-3.5" />@else<x-lucide-play class="h-3.5 w-3.5" />@endif
                            </button>
                            <button wire:click="delete({{ $a->id }})" wire:confirm="Delete '{{ $a->name }}'? This cannot be undone."
                                    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="Delete">
                                <x-lucide-trash-2 class="h-3.5 w-3.5" />
                            </button>
                        </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-workflow class="h-7 w-7" /></span>
                @if ($counts['all'] === 0)
                    <h2 class="mt-4 text-lg font-bold text-white">No automations yet</h2>
                    <p class="mx-auto mt-1 max-w-sm text-sm text-slate-400">Create your first workflow to repost content from one platform to another automatically.</p>
                    <button wire:click="openCreate" 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-plus class="h-4 w-4" /> Create your first automation
                    </button>
                @else
                    <h2 class="mt-4 text-lg font-bold text-white">Nothing matches</h2>
                    <p class="mt-1 text-sm text-slate-400">No automations match your search or filter.</p>
                @endif
            </div>
        @endif
    </section>

    <p class="text-xs text-slate-600">Automations run through the CC Publisher desktop app — changes here apply on its next sync, and run stats appear once it reports back.</p>

    {{-- Create modal --}}
    @if ($showCreate)
        <div class="fixed inset-0 z-50 overflow-y-auto bg-black/60 p-4 backdrop-blur-sm" x-data @keydown.escape.window="$wire.set('showCreate', false)">
            <div class="mx-auto my-8 w-full max-w-lg rounded-2xl border border-edge bg-card shadow-card">
                <div class="flex items-center justify-between border-b border-edge px-6 py-4">
                    <h3 class="text-base font-semibold text-white">New automation</h3>
                    <button wire:click="$set('showCreate', false)" class="rounded-lg p-1.5 text-slate-400 hover:bg-raised hover:text-white"><x-lucide-x class="h-5 w-5" /></button>
                </div>
                <form wire:submit="create" class="space-y-4 px-6 py-5">
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400" for="auto-name">Name</label>
                        <input id="auto-name" wire:model="name" type="text" placeholder="e.g. Viral clips repost"
                               class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 placeholder:text-slate-500 focus:border-brand focus:ring-brand">
                        @error('name') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-xs font-medium text-slate-400" for="auto-source">Source platform</label>
                            <select id="auto-source" wire:model.live="sourcePlatform" class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 focus:border-brand focus:ring-brand">
                                @foreach ($platformMeta as $key => [$label, $color, $short])
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('sourcePlatform') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="mb-1.5 block text-xs font-medium text-slate-400" for="auto-target">Target platform</label>
                            <select id="auto-target" wire:model.live="targetPlatform" class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 focus:border-brand focus:ring-brand">
                                @foreach ($platformMeta as $key => [$label, $color, $short])
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            @error('targetPlatform') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    {{-- Route preview --}}
                    @php($src = $chip($sourcePlatform))
                    @php($dst = $chip($targetPlatform))
                    <div class="flex items-center justify-center gap-2.5 rounded-xl border border-edge bg-ink px-4 py-3 text-sm text-slate-300">
                        <span class="grid h-7 w-7 place-items-center rounded-lg text-[9px] font-bold text-white" style="background: {{ $src['color'] }}">{{ $src['short'] }}</span>
                        {{ $src['label'] }}
                        <x-lucide-arrow-right class="h-4 w-4 text-slate-500" />
                        <span class="grid h-7 w-7 place-items-center rounded-lg text-[9px] font-bold text-white" style="background: {{ $dst['color'] }}">{{ $dst['short'] }}</span>
                        {{ $dst['label'] }}
                    </div>

                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400" for="auto-frequency">Frequency</label>
                        <select id="auto-frequency" wire:model="frequency" class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 focus:border-brand focus:ring-brand">
                            @foreach (\App\Models\Automation::FREQUENCIES as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('frequency') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <p class="text-xs text-slate-500">The automation starts as <span class="font-semibold text-green-400">Active</span> and begins publishing on your desktop app's next sync.</p>

                    <div class="flex justify-end gap-2 border-t border-edge pt-4">
                        <button type="button" wire:click="$set('showCreate', false)" class="rounded-xl border border-edge px-4 py-2 text-sm font-medium text-slate-300 hover:bg-raised">Cancel</button>
                        <button type="submit" class="rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">Create automation</button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>