@php
    $stations = $stations ?? collect();
    $roles = $roles ?? collect();

    $oldType = old('user_type', 'station');
    $oldStation = (int) old('station_id', 0);
    $assigned = old('roles', []);
@endphp

<x-layouts.app title="Benutzer anlegen" userRole="Bezirksstelle">
    <div class="flex flex-col gap-4">

        <div class="flex items-end justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Benutzer anlegen</div>
                <div class="mt-1 text-sm text-rk-slate">Bezirksstelle oder Ortstelle Benutzer erstellen.</div>
            </div>
            <a href="{{ route('security.users.index') }}" class="btn-rk-soft">
                Zurück
            </a>
        </div>

        @if ($errors->any())
            <div class="rounded-3xl border border-red-200 bg-red-50 p-4 text-sm text-red-800">
                <div class="font-semibold">Bitte prüfen:</div>
                <ul class="mt-2 list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('security.users.store') }}"
            class="rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-6">
            @csrf

            <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">

                {{-- Left: basics --}}
                <div class="xl:col-span-2 rounded-3xl border border-rk p-5">
                    <div class="text-sm font-semibold">Stammdaten</div>
                    <div class="mt-1 text-xs text-rk-slate">Login & Zuordnung.</div>

                    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Typ</label>
                            <select name="user_type" id="user_type"
                                class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                                <option value="station" @selected($oldType === 'station')>Ortstelle</option>
                                <option value="district" @selected($oldType === 'district')>Bezirksstelle</option>
                            </select>
                        </div>

                        <div id="stationWrap">
                            <label
                                class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Ortstelle</label>
                            <select name="station_id" id="station_id"
                                class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                                <option value="0">Bitte wählen…</option>
                                @foreach ($stations as $s)
                                    <option value="{{ $s->id }}" @selected((int) $oldStation === (int) $s->id)>{{ $s->name }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="mt-2 text-xs text-rk-slate">Nur Ortstellen aus deinem Bezirk.</div>
                        </div>

                        <div class="md:col-span-2">
                            <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Name</label>
                            <input name="name" value="{{ old('name') }}"
                                class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                                required>
                        </div>

                        <div class="md:col-span-2">
                            <label
                                class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">E-Mail</label>
                            <input name="email" type="email" value="{{ old('email') }}"
                                class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                                required>
                        </div>

                        <div>
                            <label
                                class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Passwort</label>

                            <div class="mt-2 flex gap-2">
                                <input name="password" id="password" type="password"
                                    class="w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                                    required>

                                <button type="button" id="genPwBtn"
                                    class="shrink-0 rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50">
                                    Zufällig
                                </button>
                            </div>

                            <div id="pwRevealWrap" class="mt-2 hidden rounded-2xl border border-rk bg-neutral-50 p-3">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">
                                            Generiertes Passwort</div>
                                        <div class="mt-1 font-mono text-sm break-all" id="pwReveal"></div>
                                    </div>
                                    <button type="button" id="copyPwBtn"
                                        class="rounded-2xl border border-rk bg-white px-3 py-2 text-xs font-semibold hover:bg-neutral-50">
                                        Kopieren
                                    </button>
                                </div>
                                <div class="mt-2 text-xs text-rk-slate">
                                    Dieses Passwort wird nur jetzt angezeigt. Bitte sicher an den Benutzer übergeben.
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Passwort
                                bestätigen</label>

                            <div class="mt-2 flex gap-2">
                                <input name="password_confirmation" id="password_confirmation" type="password"
                                    class="w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                                    required>

                                <button type="button" id="togglePwBtn"
                                    class="shrink-0 rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50">
                                    Anzeigen
                                </button>
                            </div>

                            <div id="pwHint" class="mt-2 text-xs text-rk-slate">Mind. 8 Zeichen.</div>
                        </div>

                        <div class="md:col-span-2 rounded-2xl border border-rk bg-neutral-50 p-4">
                            <input type="hidden" name="active" value="0">
                            <label class="flex items-start gap-3">
                                <input type="checkbox" name="active" value="1" checked
                                    class="mt-1 h-4 w-4 rounded border-rk">
                                <span>
                                    <div class="text-sm font-semibold">Aktiv</div>
                                    <div class="mt-1 text-xs text-rk-slate">Inaktive Benutzer können sich nicht
                                        einloggen.</div>
                                </span>
                            </label>
                        </div>

                    </div>
                </div>

                {{-- Right: roles --}}
                <div class="rounded-3xl border border-rk p-5">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-sm font-semibold">Rollen</div>
                            <div class="mt-1 text-xs text-rk-slate">Mindestens eine Rolle auswählen.</div>
                        </div>
                        <div class="flex gap-2">
                            <button type="button" id="allRoles" class="btn-rk-soft">
                                Alle
                            </button>
                            <button type="button" id="noRoles" class="btn-rk-soft">
                                Keine
                            </button>
                        </div>
                    </div>

                    <div class="mt-4 space-y-2">
                        @foreach ($roles as $r)
                            @php
                                $checked = in_array($r->id, $assigned, true);
                                $scopePill = match ($r->scope) {
                                    'district' => 'bg-blue-50 text-blue-700 border-blue-200',
                                    'station' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
                                    'global' => 'bg-neutral-100 text-rk-slate border-rk',
                                    default => 'bg-neutral-100 text-rk-slate border-rk',
                                };
                            @endphp
                            <label
                                class="flex items-start gap-3 rounded-2xl border border-rk bg-white p-3 hover:bg-neutral-50">
                                <input type="checkbox" class="roleBox mt-1 h-4 w-4 rounded border-rk" name="roles[]"
                                    value="{{ $r->id }}" @checked($checked)>
                                <span class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <div class="text-sm font-semibold">{{ $r->label ?? $r->name }}</div>
                                        <span
                                            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-semibold border {{ $scopePill }}">
                                            {{ $r->scope ?? '—' }}
                                        </span>
                                    </div>
                                    <div class="mt-0.5 text-xs text-rk-slate">{{ $r->name }}</div>
                                </span>
                            </label>
                        @endforeach
                    </div>

                    @error('roles')
                        <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                    @enderror
                </div>

            </div>

            <div class="flex justify-end gap-2">
                <a href="{{ route('security.users.index') }}" class="btn-rk-soft">
                    Abbrechen
                </a>
                <button class="btn-rk-soft-green">
                    Benutzer anlegen
                </button>
            </div>
        </form>

        <script>
            (function() {
                const type = document.getElementById('user_type');
                const stationWrap = document.getElementById('stationWrap');

                function syncStationVisibility() {
                    const isDistrict = type.value === 'district';
                    stationWrap.style.display = isDistrict ? 'none' : '';
                }

                syncStationVisibility();
                type.addEventListener('change', syncStationVisibility);

                const allBtn = document.getElementById('allRoles');
                const noneBtn = document.getElementById('noRoles');
                const boxes = () => Array.from(document.querySelectorAll('.roleBox'));

                allBtn?.addEventListener('click', () => boxes().forEach(b => b.checked = true));
                noneBtn?.addEventListener('click', () => boxes().forEach(b => b.checked = false));
            })();
        </script>
        <script>
            (function() {
                const pw = document.getElementById('password');
                const pwc = document.getElementById('password_confirmation');

                const genBtn = document.getElementById('genPwBtn');
                const toggleBtn = document.getElementById('togglePwBtn');

                const revealWrap = document.getElementById('pwRevealWrap');
                const reveal = document.getElementById('pwReveal');
                const copyBtn = document.getElementById('copyPwBtn');

                function randomPassword(len = 14) {
                    // Keine Sonderzeichen, die in manchen Systemen Probleme machen könnten.
                    const upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
                    const lower = 'abcdefghijkmnopqrstuvwxyz';
                    const nums = '23456789';
                    const sym = '!@#$%_-+';
                    const all = upper + lower + nums + sym;

                    const pick = (s) => s[Math.floor(Math.random() * s.length)];

                    // Mindestens je 1 Zeichen aus jeder Gruppe
                    let out = [pick(upper), pick(lower), pick(nums), pick(sym)];
                    for (let i = out.length; i < len; i++) out.push(pick(all));

                    // Shuffle
                    for (let i = out.length - 1; i > 0; i--) {
                        const j = Math.floor(Math.random() * (i + 1));
                        [out[i], out[j]] = [out[j], out[i]];
                    }

                    return out.join('');
                }

                function setPassword(val) {
                    pw.value = val;
                    pwc.value = val;

                    reveal.textContent = val;
                    revealWrap.classList.remove('hidden');
                }

                genBtn?.addEventListener('click', () => {
                    setPassword(randomPassword(14));
                });

                toggleBtn?.addEventListener('click', () => {
                    const show = pw.type === 'password';
                    pw.type = show ? 'text' : 'password';
                    pwc.type = show ? 'text' : 'password';
                    toggleBtn.textContent = show ? 'Verbergen' : 'Anzeigen';
                });

                copyBtn?.addEventListener('click', async () => {
                    try {
                        await navigator.clipboard.writeText(reveal.textContent || '');
                        copyBtn.textContent = 'Kopiert';
                        setTimeout(() => copyBtn.textContent = 'Kopieren', 1200);
                    } catch (e) {
                        // Fallback: select + copy
                        const tmp = document.createElement('textarea');
                        tmp.value = reveal.textContent || '';
                        document.body.appendChild(tmp);
                        tmp.select();
                        document.execCommand('copy');
                        document.body.removeChild(tmp);
                        copyBtn.textContent = 'Kopiert';
                        setTimeout(() => copyBtn.textContent = 'Kopieren', 1200);
                    }
                });
            })();
        </script>

    </div>
</x-layouts.app>