@extends('layouts.dashboard')

@section('title', 'Admin · Bots · TacForce Pro')

@php
    // Masked token preview: ••••••••{last4}. Never expose the real token.
    $maskToken = function ($bot) {
        try {
            $plain = $bot->discord_token; // decrypted by the model cast
        } catch (\Throwable $e) {
            $plain = null;
        }
        $last4 = $plain ? substr($plain, -4) : '····';
        return '••••••••' . $last4;
    };
@endphp

@section('content')
    <div class="space-y-6"
         x-data="botRegistry()"
         x-init="init()">

        {{-- Kopf --}}
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight">Multi-Bot-Registry</h1>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                    Discord-Bots verwalten. Der Bot-Worker liest diese Tabelle und startet je aktivem Eintrag eine Client-Instanz.
                </p>
            </div>
            <button type="button" @click="openCreate()"
                    class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-4 py-2.5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Bot hinzufügen
            </button>
        </div>

        {{-- Info-Panel (ARCHITECTURE.md §4) --}}
        <div class="rounded-xl border border-blue-500/20 bg-blue-500/5 dark:bg-blue-500/10 p-5">
            <div class="flex items-start gap-3">
                <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400 shrink-0">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                </span>
                <div class="text-sm">
                    <p class="font-semibold text-zinc-900 dark:text-zinc-100">So bindest du einen neuen Bot ein</p>
                    <ol class="mt-2 space-y-1.5 text-zinc-600 dark:text-zinc-300 list-decimal list-inside">
                        <li><strong>Discord-App anlegen</strong> auf <span class="font-mono text-xs">discord.com/developers/applications</span> → Bot-Tab → Token, Client-ID und Public Key kopieren.</li>
                        <li>Hier <strong>„Bot hinzufügen"</strong> klicken und die Werte eintragen. Das Token wird via <span class="font-mono text-xs">Crypt::encryptString()</span> verschlüsselt gespeichert.</li>
                        <li>Speichern → der <strong>Bot-Worker</strong> erkennt den Eintrag beim nächsten Start und startet automatisch eine weitere Client-Instanz.</li>
                        <li>Slash-Commands registrieren: <span class="font-mono text-xs">npm run register -- --bot &lt;id&gt;</span></li>
                    </ol>
                    <p class="mt-3 flex items-center gap-1.5 text-xs text-zinc-500">
                        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        Tokens werden verschlüsselt gespeichert (AES-256, Key aus <span class="font-mono">APP_KEY</span>) und erscheinen nie im Klartext.
                    </p>
                </div>
            </div>
        </div>

        {{-- Bot-Karten --}}
        @if ($bots->isEmpty())
            <div class="rounded-xl border border-dashed border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-6 py-16 text-center">
                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-400">
                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>
                </div>
                <p class="mt-4 text-sm font-medium">Noch kein Bot registriert</p>
                <p class="mt-1 text-sm text-zinc-500">Lege deinen ersten Discord-Bot an, um loszulegen.</p>
                <button type="button" @click="openCreate()"
                        class="mt-5 inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-4 py-2.5 transition">
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Bot hinzufügen
                </button>
            </div>
        @else
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
                @foreach ($bots as $bot)
                    <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-hidden flex flex-col">
                        {{-- Akzentstreifen --}}
                        <div class="h-1.5 w-full" style="background-color: {{ $bot->accent_color }}"></div>
                        <div class="p-5 flex-1">
                            <div class="flex items-start justify-between gap-3">
                                <div class="flex items-center gap-3 min-w-0">
                                    @include('admin.partials.avatar', ['url' => $bot->avatar_url, 'name' => $bot->name, 'size' => 'h-11 w-11', 'rounded' => 'rounded-xl'])
                                    <div class="min-w-0">
                                        <div class="font-semibold truncate">{{ $bot->name }}</div>
                                        <div class="text-xs text-zinc-500 truncate">
                                            {{ $bot->owner ? ($bot->owner->global_name ?: $bot->owner->username) : 'TacForce (intern)' }}
                                        </div>
                                    </div>
                                </div>
                                @if ($bot->is_active && $bot->isOnline())
                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-1 ring-emerald-500/20 px-2.5 py-0.5 text-xs font-medium whitespace-nowrap">
                                        <span class="relative flex h-1.5 w-1.5"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span><span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500"></span></span>
                                        Online
                                    </span>
                                @elseif ($bot->is_active)
                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-red-500/10 text-red-600 dark:text-red-400 ring-1 ring-red-500/20 px-2.5 py-0.5 text-xs font-medium whitespace-nowrap"
                                          title="Aktiv, aber kein frischer Supervisor-Heartbeat (< 90 s)">
                                        <span class="h-1.5 w-1.5 rounded-full bg-red-500"></span> Offline
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-zinc-500/10 text-zinc-500 ring-1 ring-zinc-500/20 px-2.5 py-0.5 text-xs font-medium whitespace-nowrap">
                                        <span class="h-1.5 w-1.5 rounded-full bg-zinc-400"></span> Inaktiv
                                    </span>
                                @endif
                            </div>

                            {{-- Detail-Zeilen --}}
                            <dl class="mt-4 space-y-2.5 text-sm">
                                <div class="flex items-center justify-between gap-3">
                                    <dt class="text-zinc-500">Client-ID</dt>
                                    <dd class="font-mono text-xs text-zinc-700 dark:text-zinc-300 truncate">{{ $bot->discord_client_id }}</dd>
                                </div>
                                <div class="flex items-center justify-between gap-3">
                                    <dt class="text-zinc-500">Token</dt>
                                    <dd class="font-mono text-xs text-zinc-700 dark:text-zinc-300">{{ $maskToken($bot) }}</dd>
                                </div>
                                <div class="flex items-center justify-between gap-3">
                                    <dt class="text-zinc-500">Server</dt>
                                    <dd class="tabular-nums text-zinc-700 dark:text-zinc-300">{{ $bot->guilds_count }}</dd>
                                </div>
                                <div class="flex items-center justify-between gap-3">
                                    <dt class="text-zinc-500">Verwaltung</dt>
                                    <dd class="text-xs">
                                        @if ($bot->isExternal())
                                            <span class="inline-flex items-center gap-1 rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-1 ring-amber-500/20 px-2 py-0.5 font-medium">
                                                Eigener Prozess · Supervisor
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20 px-2 py-0.5 font-medium">
                                                Bot-Worker
                                            </span>
                                        @endif
                                    </dd>
                                </div>
                                <div class="flex items-center justify-between gap-3">
                                    <dt class="text-zinc-500">Heartbeat</dt>
                                    <dd class="font-mono text-xs text-zinc-700 dark:text-zinc-300">
                                        {{ $bot->last_heartbeat_at ? $bot->last_heartbeat_at->diffForHumans() : '—' }}
                                    </dd>
                                </div>
                                <div class="flex items-center justify-between gap-3">
                                    <dt class="text-zinc-500">Akzent</dt>
                                    <dd class="flex items-center gap-2">
                                        <span class="h-4 w-4 rounded ring-1 ring-zinc-200 dark:ring-zinc-700" style="background-color: {{ $bot->accent_color }}"></span>
                                        <span class="font-mono text-xs uppercase text-zinc-500">{{ $bot->accent_color }}</span>
                                    </dd>
                                </div>
                            </dl>
                        </div>

                        {{-- Aktionen --}}
                        <div class="border-t border-zinc-100 dark:border-zinc-800 px-5 py-3 flex items-center justify-end gap-2">
                            <button type="button"
                                    @click="openEdit({{ Illuminate\Support\Js::from([
                                        'id' => $bot->id,
                                        'name' => $bot->name,
                                        'discord_client_id' => $bot->discord_client_id,
                                        'discord_public_key' => $bot->discord_public_key,
                                        'owner_user_id' => $bot->owner_user_id,
                                        'managed' => $bot->managed,
                                        'accent_color' => $bot->accent_color,
                                        'avatar_url' => $bot->avatar_url,
                                        'is_active' => (bool) $bot->is_active,
                                    ]) }})"
                                    class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-medium px-3 py-1.5 transition">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>
                                Bearbeiten
                            </button>
                            <button type="button"
                                    @click="confirmDelete = { id: {{ $bot->id }}, name: {{ Illuminate\Support\Js::from($bot->name) }} }"
                                    class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-red-50 dark:hover:bg-red-500/10 text-red-600 dark:text-red-400 text-sm font-medium px-3 py-1.5 transition">
                                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                Löschen
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        {{-- ============ MODAL: Bot anlegen / bearbeiten ============ --}}
        <div x-cloak x-show="modalOpen"
             class="fixed inset-0 z-50 flex items-center justify-center p-4"
             x-transition.opacity>
            <div class="absolute inset-0 bg-zinc-950/60 backdrop-blur-sm" @click="modalOpen = false"></div>
            <div class="relative w-full max-w-lg rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-2xl max-h-[90vh] overflow-y-auto"
                 x-transition.scale.origin.center>
                {{-- Header --}}
                <div class="sticky top-0 z-10 flex items-center justify-between px-6 py-4 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
                    <h3 class="text-base font-semibold" x-text="mode === 'edit' ? 'Bot bearbeiten' : 'Bot hinzufügen'"></h3>
                    <button type="button" @click="modalOpen = false" class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    </button>
                </div>

                <form method="POST"
                      :action="mode === 'edit' ? `{{ url('admin/bots') }}/${form.id}` : `{{ route('admin.bots.store') }}`"
                      class="p-6 space-y-4">
                    @csrf
                    <template x-if="mode === 'edit'">
                        <input type="hidden" name="_method" value="PUT">
                    </template>

                    {{-- Name --}}
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Name <span class="text-red-500">*</span></label>
                        <input type="text" name="name" x-model="form.name" required maxlength="120"
                               placeholder="TacForce Operator"
                               class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                    </div>

                    {{-- Client-ID --}}
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Discord Client-ID <span class="text-red-500">*</span></label>
                        <input type="text" name="discord_client_id" x-model="form.discord_client_id" required
                               inputmode="numeric" pattern="\d{15,25}"
                               placeholder="123456789012345678"
                               class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm font-mono placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                    </div>

                    {{-- Token --}}
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">
                            Bot-Token <span x-show="mode !== 'edit'" class="text-red-500">*</span>
                        </label>
                        <input type="password" name="discord_token" x-model="form.discord_token"
                               :required="mode !== 'edit'" autocomplete="new-password"
                               :placeholder="mode === 'edit' ? 'Leer lassen, um Token beizubehalten' : 'Bot-Token einfügen'"
                               class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm font-mono placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                        <p class="mt-1 flex items-center gap-1 text-xs text-zinc-500">
                            <svg class="h-3.5 w-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                            Wird verschlüsselt gespeichert. <span x-show="mode === 'edit'">Nur ausfüllen, um es zu ersetzen.</span>
                        </p>
                    </div>

                    {{-- Public Key --}}
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Public Key <span class="text-zinc-400 font-normal">(optional)</span></label>
                        <input type="text" name="discord_public_key" x-model="form.discord_public_key" maxlength="255"
                               placeholder="Für Interaction-Verifizierung"
                               class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm font-mono placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                    </div>

                    {{-- Owner + Accent --}}
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Besitzer <span class="text-zinc-400 font-normal">(White-Label)</span></label>
                            <select name="owner_user_id" x-model="form.owner_user_id"
                                    class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                                <option value="">TacForce (intern)</option>
                                @foreach ($owners as $owner)
                                    <option value="{{ $owner->id }}">{{ $owner->global_name ?: $owner->username }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Akzentfarbe</label>
                            <div class="flex items-center gap-2">
                                <input type="color" x-model="form.accent_color"
                                       class="h-10 w-12 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 cursor-pointer p-1">
                                <input type="text" name="accent_color" x-model="form.accent_color" pattern="#[0-9A-Fa-f]{6}"
                                       class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm font-mono uppercase focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                            </div>
                        </div>
                    </div>

                    {{-- Verwaltung --}}
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Verwaltung</label>
                        <select name="managed" x-model="form.managed"
                                class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                            <option value="worker">Bot-Worker (discord.js, von TacForce gestartet)</option>
                            <option value="external">Eigener Prozess (z. B. Python) — nur vom Supervisor</option>
                        </select>
                        <p class="mt-1 text-xs text-zinc-500" x-show="form.managed === 'external'" x-cloak>
                            Läuft als eigener Prozess. In <span class="font-mono">supervisor/processes.json</span> eintragen und Supervisor neu starten.
                        </p>
                    </div>

                    {{-- Avatar URL --}}
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Avatar-URL <span class="text-zinc-400 font-normal">(optional)</span></label>
                        <input type="url" name="avatar_url" x-model="form.avatar_url" maxlength="255"
                               placeholder="https://cdn.discordapp.com/…"
                               class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
                    </div>

                    {{-- Aktiv-Toggle --}}
                    <div class="flex items-center justify-between rounded-lg border border-zinc-200 dark:border-zinc-800 px-3 py-2.5">
                        <div>
                            <div class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Aktiv</div>
                            <div class="text-xs text-zinc-500">Der Worker startet nur aktive Bots.</div>
                        </div>
                        {{-- verstecktes Feld = 0, Toggle setzt 1 --}}
                        <input type="hidden" name="is_active" :value="form.is_active ? 1 : 0">
                        <button type="button" @click="form.is_active = !form.is_active"
                                :class="form.is_active ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
                                class="relative h-6 w-11 rounded-full transition shrink-0"
                                aria-label="Aktiv umschalten">
                            <span :class="form.is_active ? 'translate-x-5' : 'translate-x-0.5'"
                                  class="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition"></span>
                        </button>
                    </div>

                    {{-- Footer --}}
                    <div class="flex justify-end gap-3 pt-2">
                        <button type="button" @click="modalOpen = false"
                                class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-medium px-4 py-2.5 transition">
                            Abbrechen
                        </button>
                        <button type="submit"
                                class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-4 py-2.5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
                            <span x-text="mode === 'edit' ? 'Speichern' : 'Bot anlegen'"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- ============ MODAL: Löschen bestätigen ============ --}}
        <div x-cloak x-show="confirmDelete !== null"
             class="fixed inset-0 z-50 flex items-center justify-center p-4"
             x-transition.opacity>
            <div class="absolute inset-0 bg-zinc-950/60 backdrop-blur-sm" @click="confirmDelete = null"></div>
            <div class="relative w-full max-w-md rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 shadow-2xl"
                 x-transition.scale.origin.center>
                <div class="flex items-start gap-4">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-red-500/10 text-red-600 dark:text-red-400 shrink-0">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                    </span>
                    <div>
                        <h3 class="text-base font-semibold">Bot löschen?</h3>
                        <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                            <strong x-text="confirmDelete?.name"></strong> wird dauerhaft entfernt. Der Worker beendet diese Client-Instanz beim nächsten Reload. Diese Aktion kann nicht rückgängig gemacht werden.
                        </p>
                    </div>
                </div>
                <div class="mt-6 flex justify-end gap-3">
                    <button type="button" @click="confirmDelete = null"
                            class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-700 dark:text-zinc-200 text-sm font-medium px-4 py-2.5 transition">
                        Abbrechen
                    </button>
                    <form method="POST" :action="`{{ url('admin/bots') }}/${confirmDelete?.id}`">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="inline-flex items-center gap-2 rounded-lg bg-red-600 hover:bg-red-500 text-white text-sm font-medium px-4 py-2.5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500">
                            Endgültig löschen
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function botRegistry() {
            return {
                modalOpen: false,
                mode: 'create',
                confirmDelete: null,
                form: {
                    id: null,
                    name: '',
                    discord_client_id: '',
                    discord_token: '',
                    discord_public_key: '',
                    owner_user_id: '',
                    managed: 'worker',
                    accent_color: '#3B82F6',
                    avatar_url: '',
                    is_active: true,
                },
                init() {
                    // Re-open create modal after a validation error on store/edit.
                    @if ($errors->any())
                        this.openCreate();
                        this.form.name = @json(old('name', ''));
                        this.form.discord_client_id = @json(old('discord_client_id', ''));
                        this.form.discord_public_key = @json(old('discord_public_key', ''));
                        this.form.owner_user_id = @json(old('owner_user_id', ''));
                        this.form.accent_color = @json(old('accent_color', '#3B82F6'));
                        this.form.avatar_url = @json(old('avatar_url', ''));
                    @endif
                },
                resetForm() {
                    this.form = {
                        id: null, name: '', discord_client_id: '', discord_token: '',
                        discord_public_key: '', owner_user_id: '', managed: 'worker', accent_color: '#3B82F6',
                        avatar_url: '', is_active: true,
                    };
                },
                openCreate() {
                    this.resetForm();
                    this.mode = 'create';
                    this.modalOpen = true;
                },
                openEdit(bot) {
                    this.resetForm();
                    this.mode = 'edit';
                    this.form.id = bot.id;
                    this.form.name = bot.name ?? '';
                    this.form.discord_client_id = bot.discord_client_id ?? '';
                    this.form.discord_public_key = bot.discord_public_key ?? '';
                    this.form.owner_user_id = bot.owner_user_id ?? '';
                    this.form.managed = bot.managed ?? 'worker';
                    this.form.accent_color = bot.accent_color ?? '#3B82F6';
                    this.form.avatar_url = bot.avatar_url ?? '';
                    this.form.is_active = !!bot.is_active;
                    this.form.discord_token = ''; // never prefill the token
                    this.modalOpen = true;
                },
            };
        }
    </script>
@endsection