<div class="p-4 max-w-6xl mx-auto" x-data="{ showToken: false }">
    <x-loading-spinner wire:target="createKey,revokeKey" />

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
        <div class="text-xl font-bold text-gray-900">API Keys</div>
        <div class="text-sm text-gray-500 mt-1">Use API keys to authenticate your integration</div>

        <div class="mt-5 grid grid-cols-1 lg:grid-cols-3 gap-4">
            <div class="lg:col-span-1 border border-gray-200 rounded-xl p-4">
                <div class="font-semibold text-gray-900">Create API Key</div>
                <div class="mt-3">
                    <x-input-label value="Name (optional)" />
                    <x-text-input wire:model.defer="name" class="w-full mt-1" />
                    <x-input-error :messages="$errors->get('name')" class="mt-2" />
                </div>

                <div class="mt-4">
                    <x-primary-button wire:click="createKey" class="rounded-xl px-6 py-3">
                        Create Key
                    </x-primary-button>
                </div>

                @if($createdToken)
                    <div class="mt-4 border border-green-200 bg-green-50 rounded-xl p-3">
                        <div class="font-semibold text-green-800">New Key (copy now)</div>
                        <div class="mt-2 font-mono text-xs bg-white border border-green-200 rounded-xl p-2 break-all">
                            {{ $createdToken }}
                        </div>
                        <div class="text-xs text-green-800 mt-2">This token will not be shown again.</div>
                    </div>
                @endif
            </div>

            <div class="lg:col-span-2 border border-gray-200 rounded-xl overflow-hidden">
                <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 font-semibold text-gray-900">Your Keys</div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-left text-gray-600">
                        <thead class="text-xs uppercase bg-white text-gray-700">
                            <tr>
                                <th class="px-4 py-3">Name</th>
                                <th class="px-4 py-3">Prefix</th>
                                <th class="px-4 py-3">Last Used</th>
                                <th class="px-4 py-3">Status</th>
                                <th class="px-4 py-3">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @forelse($keys as $key)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 text-gray-900">{{ $key->name ?? '-' }}</td>
                                    <td class="px-4 py-3 font-mono text-xs">{{ $key->token_prefix }}</td>
                                    <td class="px-4 py-3">{{ $key->last_used_at ? $key->last_used_at->format('d M Y, H:i') : '-' }}</td>
                                    <td class="px-4 py-3">
                                        @if($key->revoked_at)
                                            <span class="px-2 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">REVOKED</span>
                                        @else
                                            <span class="px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">ACTIVE</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">
                                        @if(!$key->revoked_at)
                                            <x-secondary-button wire:click="revokeKey({{ $key->id }})" class="rounded-xl px-4 py-2">
                                                Revoke
                                            </x-secondary-button>
                                        @else
                                            <span class="text-xs text-gray-500">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-4 py-10 text-center text-gray-500">No API keys yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <x-slot:headerTitle>
        API Keys
    </x-slot:headerTitle>
</div>

