@php
    $statusColor = [
        'draft' => 'bg-slate-100 text-slate-700',
        'active' => 'bg-emerald-50 text-emerald-700',
        'archived' => 'bg-amber-50 text-amber-800',
    ];
@endphp
<x-user-layout>
    <x-slot name="title">{{ $campaign->name }}</x-slot>

    <div class="mx-auto max-w-5xl space-y-6">
        @foreach (['success', 'error'] as $flash)
            @if (session($flash))
                <div class="rounded-lg border px-4 py-3 {{ $flash === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700' }}">
                    <p class="text-sm">{{ session($flash) }}</p>
                </div>
            @endif
        @endforeach

        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <a href="{{ route('qr.campaigns.index') }}" class="text-sm text-slate-500 hover:text-slate-700">&larr; Campaigns</a>
                <div class="mt-2 flex flex-wrap items-center gap-2">
                    <h1 class="text-2xl font-semibold text-slate-900">{{ $campaign->name }}</h1>
                    <span class="rounded-full px-2 py-0.5 text-xs font-medium {{ $statusColor[$campaign->status] ?? 'bg-slate-100 text-slate-700' }}">
                        {{ $campaign->statusLabel() }}
                    </span>
                </div>
                @if ($campaign->description)
                    <p class="mt-1 text-sm text-slate-600">{{ $campaign->description }}</p>
                @endif
            </div>
            <form method="POST" action="{{ route('qr.campaigns.destroy', $campaign) }}" onsubmit="return confirm('Delete this campaign? Codes stay; they are only unassigned.')">
                @csrf @method('DELETE')
                <button type="submit" class="text-sm text-red-600 hover:text-red-700">Delete campaign</button>
            </form>
        </div>

        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <p class="text-2xl font-bold text-slate-900">{{ number_format($codes->count()) }}</p>
                <p class="mt-0.5 text-xs text-slate-500">QR codes</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-4">
                <p class="text-2xl font-bold text-slate-900">{{ number_format($totalScans) }}</p>
                <p class="mt-0.5 text-xs text-slate-500">Total scans</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-4 col-span-2 sm:col-span-1">
                <p class="text-sm font-semibold text-slate-900">
                    @if ($campaign->starts_at || $campaign->ends_at)
                        {{ optional($campaign->starts_at)->format('d M Y') ?? '…' }}
                        →
                        {{ optional($campaign->ends_at)->format('d M Y') ?? '…' }}
                    @else
                        No date range
                    @endif
                </p>
                <p class="mt-0.5 text-xs text-slate-500">Schedule</p>
            </div>
        </div>

        <form method="POST" action="{{ route('qr.campaigns.update', $campaign) }}" class="space-y-5 rounded-xl border border-slate-200 bg-white p-6">
            @csrf @method('PATCH')
            <h2 class="text-base font-semibold text-slate-900">Campaign details</h2>
            @include('qr.campaigns._form', ['campaign' => $campaign])
            <button type="submit" class="btn-primary">Save changes</button>
        </form>

        <div class="rounded-xl border border-slate-200 bg-white">
            <div class="border-b border-slate-100 px-6 py-4">
                <h2 class="text-base font-semibold text-slate-900">QR codes in this campaign</h2>
            </div>
            @if ($codes->isEmpty())
                <p class="px-6 py-8 text-center text-sm text-slate-500">No codes assigned yet.</p>
            @else
                <ul class="divide-y divide-slate-100">
                    @foreach ($codes as $code)
                        <li class="flex items-center justify-between gap-4 px-6 py-3">
                            <a href="{{ route('user.qr-codes.show', $code) }}" class="min-w-0 flex-1 hover:text-indigo-700">
                                <p class="truncate text-sm font-medium text-slate-900">{{ $code->label ?: $code->short_code }}</p>
                                <p class="truncate text-xs text-slate-500">{{ $code->publicUrl() }} · {{ number_format($code->scans_total) }} scans</p>
                            </a>
                            <form method="POST" action="{{ route('qr.campaigns.detach', [$campaign, $code]) }}">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs font-medium text-red-600 hover:text-red-800">Remove</button>
                            </form>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>

        @php
            $unassigned = $availableCodes->whereNull('campaign_id');
        @endphp
        @if ($unassigned->isNotEmpty())
            <form method="POST" action="{{ route('qr.campaigns.attach', $campaign) }}" class="space-y-4 rounded-xl border border-slate-200 bg-white p-6">
                @csrf
                <h2 class="text-base font-semibold text-slate-900">Add QR codes</h2>
                <div class="max-h-56 space-y-2 overflow-y-auto rounded-lg border border-slate-100 p-3">
                    @foreach ($unassigned as $code)
                        <label class="flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm hover:bg-slate-50">
                            <input type="checkbox" name="qr_code_ids[]" value="{{ $code->id }}" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="min-w-0 flex-1 truncate">
                                <span class="font-medium text-slate-900">{{ $code->label ?: $code->short_code }}</span>
                                <span class="text-slate-400"> · {{ $code->short_code }}</span>
                            </span>
                        </label>
                    @endforeach
                </div>
                <button type="submit" class="btn-primary">Add selected</button>
            </form>
        @endif
    </div>
</x-user-layout>