{{--
    brafa Systems — Parka token management.
    Livewire backing: App\Http\Livewire\SuperAdmin\ParkaTokenManagement.
    Bindings preserved: wire:submit.prevent="createToken", wire:model.defer
    name/lock_id/expires_at, wire:change="updateLock", wire:click toggleActive/
    rotateToken/revokeToken, $successMessage/$errorMessage/$newlyCreatedRawToken/
    $newlyCreatedTokenName, $availableLocks, $tokens.
--}}
<div class="brafa-screen">
    @if ($successMessage)
        <div class="status-banner status-banner--success">{{ $successMessage }}</div>
    @endif
    @if ($errorMessage)
        <div class="status-banner status-banner--danger">{{ $errorMessage }}</div>
    @endif

    {{-- Create token --}}
    <section class="card card--pad-lg" style="margin-bottom: 24px;">
        <div class="spread" style="margin-bottom: 6px;">
            <h3 class="card-heading" style="margin: 0;">Parka token management</h3>
            <span class="eyebrow">Superadmin</span>
        </div>
        <p class="subtle" style="font-size: 13px; margin: 0 0 20px;">
            Create and manage one-time-secret Parka webhook tokens mapped to Sciener locks.
        </p>

        @if ($newlyCreatedRawToken)
            <div class="status-banner status-banner--success" style="flex-direction: column; align-items: flex-start; gap: 6px;">
                <strong>Copy this token now — it's only shown once for {{ $newlyCreatedTokenName }}.</strong>
                <code class="mono" style="word-break: break-all; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; width: 100%; color: var(--fg);">{{ $newlyCreatedRawToken }}</code>
            </div>
        @endif

        <form wire:submit.prevent="createToken">
            <div class="input-row" style="grid-template-columns: 1.4fr 1.4fr 1fr; align-items: end;">
                <div>
                    <label class="field-label" for="parka-name">Token name</label>
                    <input wire:model.defer="name" id="parka-name" type="text"
                           class="input @error('name') is-invalid @enderror" placeholder="e.g. Front Gate Webhook">
                    @error('name') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="parka-lock">Lock</label>
                    <select wire:model.defer="lock_id" id="parka-lock" class="select @error('lock_id') is-invalid @enderror">
                        <option value="">Select lock</option>
                        @foreach ($availableLocks as $lock)
                            <option value="{{ $lock['id'] }}">{{ $lock['name'] }} ({{ $lock['id'] }})</option>
                        @endforeach
                    </select>
                    @error('lock_id') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label" for="parka-expires">Expires at <span class="subtle">(optional)</span></label>
                    <input wire:model.defer="expires_at" id="parka-expires" type="datetime-local"
                           class="input @error('expires_at') is-invalid @enderror">
                    @error('expires_at') <p class="field-error">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="hstack" style="margin-top: 4px;">
                <button type="submit" class="btn"><x-lucide name="plus" size="14" /> Create token</button>
            </div>
        </form>
    </section>

    {{-- Existing tokens --}}
    <div class="card prop-list">
        <div class="prop-toolbar">
            <h3 class="card-heading" style="margin: 0;">Existing tokens</h3>
        </div>
        <div style="overflow-x:auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Lock</th>
                        <th>Status</th>
                        <th>Expires</th>
                        <th>Last used</th>
                        <th style="width: 220px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($tokens as $token)
                        <tr>
                            <td><div class="prop-name__main">{{ $token->name }}</div></td>
                            <td>
                                <select class="select" style="min-width: 180px;"
                                        wire:change="updateLock({{ $token->id }}, $event.target.value)">
                                    <option value="">Select lock</option>
                                    @foreach ($availableLocks as $lock)
                                        <option value="{{ $lock['id'] }}" @selected((int) $token->lock_id === (int) $lock['id'])>
                                            {{ $lock['name'] }} ({{ $lock['id'] }})
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                @if ($token->is_active)
                                    <span class="pill pill--active"><span class="dot"></span>Active</span>
                                @else
                                    <span class="pill">Inactive</span>
                                @endif
                            </td>
                            <td class="mono muted">{{ optional($token->expires_at)->format('Y-m-d H:i') ?? 'Never' }}</td>
                            <td class="mono muted">{{ optional($token->last_used_at)->diffForHumans() ?? 'Never' }}</td>
                            <td>
                                <div class="hstack" style="gap: 6px; flex-wrap: wrap;">
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="toggleActive({{ $token->id }})">
                                        {{ $token->is_active ? 'Deactivate' : 'Activate' }}
                                    </button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="rotateToken({{ $token->id }})">
                                        <x-lucide name="refresh-ccw" size="13" /> Rotate
                                    </button>
                                    <button type="button" class="btn btn--outline btn--sm" wire:click="revokeToken({{ $token->id }})"
                                            style="border-color: var(--brafa-red); color: var(--brafa-red);">
                                        Revoke
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="padding:48px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">
                                No Parka tokens created yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>