<x-app-layout>
    <x-slot name="header">
        <h2 class="h4 mb-0">API Token</h2>
    </x-slot>

    <div class="alert alert-info small">
        Token API ini hanya bisa mengakses data <strong>Kabupaten, Kecamatan, dan Desa</strong>
        (lihat/tambah/ubah/hapus sesuai izin yang dipilih). Token <strong>tidak pernah</strong>
        bisa mengakses data Pemilih/NIK — itu sengaja dikecualikan dari API demi keamanan data pribadi.
        Setiap token dibatasi 60 request/menit dan setiap aksinya tercatat di Activity Log.
    </div>

    @if (session('plainTextToken'))
        <div class="alert alert-warning">
            <strong>Salin token ini sekarang — tidak akan ditampilkan lagi:</strong>
            <div class="d-flex align-items-center gap-2 mt-2">
                <code class="flex-grow-1 p-2 bg-white border rounded" style="word-break: break-all;">{{ session('plainTextToken') }}</code>
                <button type="button" class="btn btn-sm btn-outline-secondary"
                        onclick="navigator.clipboard.writeText('{{ session('plainTextToken') }}'); Swal.fire({icon:'success', title:'Disalin', timer:1200, showConfirmButton:false})">
                    Copy
                </button>
            </div>
        </div>
    @endif

    <div class="row g-3">
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">Buat Token Baru</div>
                <div class="card-body">
                    <form action="{{ route('super-admin.api-tokens.store') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <x-input-label for="name" value="Nama Token" />
                            <x-text-input id="name" name="name" placeholder="mis. Integrasi Onboarding Desa" required />
                        </div>

                        <div class="mb-3">
                            <x-input-label value="Izin Akses (Ability)" />
                            @foreach ($abilityLabels as $value => $label)
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="abilities[]" id="ability-{{ $value }}" value="{{ $value }}">
                                    <label class="form-check-label" for="ability-{{ $value }}">{{ $label }}</label>
                                </div>
                            @endforeach
                            <x-input-error :messages="$errors->get('abilities')" class="mt-1" />
                        </div>

                        <div class="mb-3">
                            <x-input-label for="expires_in_days" value="Masa Berlaku (hari, kosongkan = tanpa batas waktu)" />
                            <input type="number" id="expires_in_days" name="expires_in_days" class="form-control" min="1" max="365" placeholder="90">
                        </div>

                        <button class="btn btn-primary btn-sm">Buat Token</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Izin</th>
                                <th>Terakhir Dipakai</th>
                                <th>Kedaluwarsa</th>
                                <th class="text-end">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($tokens as $token)
                                <tr>
                                    <td>{{ $token->name }}</td>
                                    <td>
                                        @foreach ($token->abilities as $ability)
                                            <span class="badge bg-secondary">{{ $abilityLabels[$ability] ?? $ability }}</span>
                                        @endforeach
                                    </td>
                                    <td>{{ $token->last_used_at?->diffForHumans() ?? 'Belum pernah' }}</td>
                                    <td>{{ $token->expires_at?->format('Y-m-d') ?? 'Tanpa batas' }}</td>
                                    <td class="text-end">
                                        <form action="{{ route('super-admin.api-tokens.destroy', $token->id) }}" method="POST" onsubmit="return confirm('Cabut token ini? Aplikasi yang memakainya akan langsung kehilangan akses.')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger">Cabut</button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center text-muted py-4">Belum ada token API.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
