@php
    $steps = [
        'intro' => 'Willkommen',
        'packages' => 'Aufgaben wählen',
        'event' => 'Event benennen',
        'palette' => 'Farbwelt',
        'invite' => 'Einladungen',
    ];
@endphp

<x-filament-panels::page>
    <div class="mx-auto w-full max-w-4xl space-y-10">
        <section class="rounded-3xl border border-white/60 bg-white/80 p-8 shadow-xl shadow-rose-100/40 backdrop-blur-md">
            <header class="space-y-4 text-center">
                <p class="inline-flex items-center gap-2 rounded-full border border-rose-100 bg-white/70 px-4 py-1 text-sm font-medium text-rose-500 shadow-sm">
                    Fotospiel Studio · Geführter Start
                </p>
                <h1 class="font-display text-4xl font-semibold tracking-tight text-slate-900">
                    Eure Gäste werden zu Geschichtenerzähler:innen
                </h1>
                <p class="mx-auto max-w-2xl text-base leading-relaxed text-slate-600">
                    Wir richten mit euch die Aufgaben, das Event und den ersten QR-Code ein. Alles ohne Technikstress – Schritt für Schritt.
                </p>
            </header>

            <ol class="mt-8 grid gap-3 md:grid-cols-5">
                @foreach ($steps as $key => $label)
                    <li class="flex flex-col items-center gap-2">
                        <span
                            @class([
                                'flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition',
                                'bg-rose-500 text-white shadow-lg shadow-rose-300/70' => $step === $key,
                                'bg-white text-rose-500 border border-rose-200' => $step !== $key,
                            ])>
                            {{ $loop->iteration }}
                        </span>
                        <span class="text-sm font-medium text-slate-600">
                            {{ $label }}
                        </span>
                    </li>
                @endforeach
            </ol>
        </section>

        @if ($step === 'intro')
            <section class="rounded-3xl border border-white/70 bg-gradient-to-br from-rose-50 via-white to-sky-50 p-10 shadow-lg shadow-rose-100/50">
                <div class="space-y-6 text-center">
                    <h2 class="text-3xl font-semibold text-slate-900">So funktioniert Fotospiel</h2>
                    <div class="grid gap-6 md:grid-cols-3">
                        <div class="rounded-2xl bg-white/80 p-5 shadow-sm">
                            <h3 class="font-semibold text-slate-900">1 · Aufgaben auswählen</h3>
                            <p class="mt-2 text-sm text-slate-600">Kuratiere Aufgaben, die eure Gäste inspirieren – ohne schon Fotos zu sammeln.</p>
                        </div>
                        <div class="rounded-2xl bg-white/80 p-5 shadow-sm">
                            <h3 class="font-semibold text-slate-900">2 · Event gestalten</h3>
                            <p class="mt-2 text-sm text-slate-600">Name, Datum und Farben bestimmen das Look & Feel eurer Fotostory.</p>
                        </div>
                        <div class="rounded-2xl bg-white/80 p-5 shadow-sm">
                            <h3 class="font-semibold text-slate-900">3 · QR-Code teilen</h3>
                            <p class="mt-2 text-sm text-slate-600">Euer Einladungslink führt Gäste direkt in die Galerie – kein App-Download notwendig.</p>
                        </div>
                    </div>
                    <button
                        wire:click="start"
                        type="button"
                        class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-8 py-3 text-base font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
                        Jetzt loslegen
                    </button>
                </div>
            </section>
        @endif

        @if ($step === 'packages')
            <section class="rounded-3xl border border-white/70 bg-white/85 p-10 shadow-xl shadow-rose-100/50">
                <form wire:submit.prevent="savePackages" class="space-y-6">
                    <div class="space-y-2 text-center">
                        <h2 class="text-3xl font-semibold text-slate-900">Wählt euer erstes Aufgabenpaket</h2>
                        <p class="text-sm text-slate-600">Jedes Paket enthält spielerische Prompts. Ihr könnt später weitere hinzufügen oder eigene Aufgaben erstellen.</p>
                    </div>
                    <div class="grid gap-4 md:grid-cols-2">
                        @foreach ($this->packageList as $package)
                            <label
                                for="package-{{ $package['id'] }}"
                                class="group flex cursor-pointer flex-col gap-3 rounded-2xl border border-rose-100 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
                                <div class="flex items-start gap-3">
                                    <input
                                        id="package-{{ $package['id'] }}"
                                        type="checkbox"
                                        value="{{ $package['id'] }}"
                                        wire:model="selectedPackages"
                                        class="mt-1 h-4 w-4 rounded border-rose-200 text-rose-500 focus:ring-rose-400" />
                                    <div>
                                        <p class="text-base font-semibold text-slate-900">{{ $package['name'] }}</p>
                                        @if ($package['description'])
                                            <p class="mt-1 text-sm text-slate-600">{{ $package['description'] }}</p>
                                        @endif
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                    @error('selectedPackages')
                        <p class="text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                    <div class="flex justify-end">
                        <button
                            type="submit"
                            class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
                            Weiter zu Schritt 2
                        </button>
                    </div>
                </form>
            </section>
        @endif

        @if ($step === 'event')
            <section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-sky-100/50">
                <form wire:submit.prevent="saveEvent" class="space-y-6">
                    <div class="space-y-2">
                        <h2 class="text-3xl font-semibold text-slate-900">Wie heißt euer Event?</h2>
                        <p class="text-sm text-slate-600">Name und Anlass erscheinen in eurer Gästegalerie und auf den Einladungen.</p>
                    </div>
                    <div class="grid gap-5 md:grid-cols-2">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-semibold text-slate-700">
                                Event-Name
                                <input
                                    type="text"
                                    wire:model.defer="eventName"
                                    class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400"
                                    placeholder="z. B. Hochzeit Anna & Lea" />
                            </label>
                            @error('eventName')
                                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-slate-700">
                                Datum
                                <input
                                    type="date"
                                    wire:model.defer="eventDate"
                                    class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400" />
                            </label>
                            @error('eventDate')
                                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-slate-700">
                                Anlass
                                <select
                                    wire:model.defer="eventTypeId"
                                    class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-rose-400 focus:ring-rose-400">
                                    <option value="">Bitte wählen</option>
                                    @foreach ($this->eventTypeOptions as $id => $label)
                                        <option value="{{ $id }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </label>
                            @error('eventTypeId')
                                <p class="mt-1 text-sm text-rose-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div class="flex justify-between">
                        <button type="button" wire:click="$set('step', 'packages')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
                            Zurück
                        </button>
                        <button
                            type="submit"
                            class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
                            Weiter zu Schritt 3
                        </button>
                    </div>
                </form>
            </section>
        @endif

        @if ($step === 'palette')
            <section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-emerald-100/50">
                <form wire:submit.prevent="savePalette" class="space-y-6">
                    <div class="space-y-2">
                        <h2 class="text-3xl font-semibold text-slate-900">Welche Farben spiegeln eure Story?</h2>
                        <p class="text-sm text-slate-600">Wir wenden die Palette auf Karten, QR-Layouts und App-Elemente an. Ihr könnt sie später jederzeit ändern.</p>
                    </div>
                    <div class="grid gap-4 md:grid-cols-2">
                        @foreach ($this->paletteOptions as $value => $data)
                            <label
                                for="palette-{{ $value }}"
                                class="flex cursor-pointer flex-col gap-3 rounded-2xl border border-slate-200 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
                                <div class="flex items-start gap-3">
                                    <input
                                        id="palette-{{ $value }}"
                                        type="radio"
                                        value="{{ $value }}"
                                        wire:model.defer="palette"
                                        class="mt-1 h-4 w-4 border-rose-300 text-rose-500 focus:ring-rose-400" />
                                    <div>
                                        <p class="text-base font-semibold text-slate-900">{{ $data['label'] }}</p>
                                        <p class="mt-1 text-sm text-slate-600">{{ $data['description'] }}</p>
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                    @error('palette')
                        <p class="text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                    <div class="flex justify-between">
                        <button type="button" wire:click="$set('step', 'event')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
                            Zurück
                        </button>
                        <button
                            type="submit"
                            class="inline-flex items-center justify-center gap-2 rounded-full bg-rose-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-rose-300/60 transition hover:bg-rose-600">
                            Weiter zu Schritt 4
                        </button>
                    </div>
                </form>
            </section>
        @endif

        @if ($step === 'invite')
            <section class="rounded-3xl border border-white/70 bg-white/90 p-10 shadow-xl shadow-indigo-100/50">
                <form wire:submit.prevent="finish" class="space-y-6">
                    <div class="space-y-2">
                        <h2 class="text-3xl font-semibold text-slate-900">Wie soll euer Einladungs-Layout aussehen?</h2>
                        <p class="text-sm text-slate-600">Wir generieren sofort einen QR-Code samt PDF/SVG-Downloads.</p>
                    </div>
                    <div class="grid gap-4 md:grid-cols-2">
                        @foreach ($this->layoutOptions as $layout)
                            <label
                                for="layout-{{ $layout['id'] }}"
                                class="flex cursor-pointer flex-col gap-3 rounded-2xl border border-slate-200 bg-white/80 p-5 shadow-sm transition hover:border-rose-300 hover:shadow-lg">
                                <div class="flex items-start gap-3">
                                    <input
                                        id="layout-{{ $layout['id'] }}"
                                        type="radio"
                                        value="{{ $layout['id'] }}"
                                        wire:model.defer="inviteLayout"
                                        class="mt-1 h-4 w-4 border-rose-300 text-rose-500 focus:ring-rose-400" />
                                    <div>
                                        <p class="text-base font-semibold text-slate-900">{{ $layout['name'] }}</p>
                                        <p class="mt-1 text-sm text-slate-600">{{ $layout['subtitle'] }}</p>
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                    @error('inviteLayout')
                        <p class="text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                    <div class="flex justify-between">
                        <button type="button" wire:click="$set('step', 'palette')" class="text-sm font-semibold text-slate-500 hover:text-slate-700">
                            Zurück
                        </button>
                        <button
                            type="submit"
                            @class([
                                'inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold text-white shadow-lg transition',
                                'bg-rose-500 shadow-rose-300/60 hover:bg-rose-600' => ! $isProcessing,
                                'bg-rose-400 opacity-70' => $isProcessing,
                            ])
                            wire:loading.attr="disabled"
                            wire:target="finish">
                            <span wire:loading.remove wire:target="finish">Setup abschließen</span>
                            <span wire:loading wire:target="finish" class="flex items-center gap-2">
                                <x-filament::loading-indicator class="h-4 w-4" />
                                Bitte warten …
                            </span>
                        </button>
                    </div>
                </form>
            </section>
        @endif
    </div>
</x-filament-panels::page>