@extends('admin.layout')
@section('title', 'API Key Management')

@section('content')
<div class="toolbar">
    <h2 style="font-size: 18px;">🔑 API Key Management</h2>
</div>

<div style="background:#1a1a1a;border-radius:8px;padding:20px;margin-bottom:24px;border:1px solid #2a2a2a;">
    <h3 style="font-size:14px;margin-bottom:12px;color:#888;">Buat API Key Baru</h3>
    <form method="POST" action="{{ route('admin.api-keys.store') }}" style="display:flex;gap:8px;align-items:end;">
        @csrf
        <div style="width:140px;">
            <label style="display:block;font-size:12px;color:#666;margin-bottom:4px;">Prefix</label>
            <input type="text" name="prefix" class="form-control" placeholder="pk_" value="{{ old('prefix', 'pk_') }}" style="max-width:100%;">
        </div>
        <div style="flex:1;max-width:400px;">
            <label style="display:block;font-size:12px;color:#666;margin-bottom:4px;">Nama / Label</label>
            <input type="text" name="name" class="form-control" placeholder="cth: Vidtube Production" required style="max-width:100%;">
        </div>
        <button type="submit" class="btn btn-primary">
            + Buat Key
        </button>
    </form>
    @error('name')
        <div class="form-error" style="margin-top:8px;">{{ $message }}</div>
    @enderror
    @error('prefix')
        <div class="form-error" style="margin-top:8px;">{{ $message }}</div>
    @enderror
</div>

@if($apiKeys->isEmpty())
    <div class="empty-state">
        <p>Belum ada API key. Buat satu untuk mulai menggunakan API.</p>
    </div>
@else
    <table>
        <thead>
            <tr>
                <th>Nama</th>
                <th>Prefix</th>
                <th>API Key</th>
                <th>Status</th>
                <th>Terakhir Digunakan</th>
                <th>Request</th>
                <th>Dibuat</th>
                <th style="text-align:right;">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach($apiKeys as $key)
            <tr>
                <td style="font-weight:600;">{{ $key->name }}</td>
                <td>
                    <span style="display:inline-flex;align-items:center;background:#111;border:1px solid #2a2a2a;padding:4px 8px;border-radius:999px;font-size:12px;color:#6fafdf;gap:6px;">
                        <span style="width:8px;height:8px;border-radius:50%;background:#6fafdf;display:inline-block;"></span>
                        {{ $key->prefix ?: 'pk_' }}
                    </span>
                </td>
                <td>
                    <div style="display:flex;align-items:center;gap:8px;">
                        <code id="key-{{ $key->id }}" style="background:#111;padding:4px 8px;border-radius:4px;font-size:12px;color:#6fafdf;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;">
                            {{ $key->key }}
                        </code>
                        <button type="button" onclick="copyKey('{{ $key->key }}')" class="btn btn-secondary btn-sm" title="Copy">
                            📋
                        </button>
                    </div>
                    <div style="margin-top:4px;font-size:11px;color:#666;">Format: <code style="background:#111;padding:2px 4px;border-radius:3px;color:#888;">prefix + token</code></div>
                </td>
                <td>
                    @if($key->is_active)
                        <span class="badge badge-active">Active</span>
                    @else
                        <span class="badge badge-disabled">Inactive</span>
                    @endif
                </td>
                <td>
                    @if($key->last_used_at)
                        <span style="font-size:12px;">{{ $key->last_used_at->diffForHumans() }}</span>
                    @else
                        <span class="text-muted" style="font-size:12px;">Belum pernah</span>
                    @endif
                </td>
                <td style="font-size:12px;">{{ number_format($key->requests_count) }}</td>
                <td style="font-size:12px;">{{ $key->created_at->format('d M Y') }}</td>
                <td style="text-align:right;">
                    <div style="display:flex;gap:4px;justify-content:flex-end;">
                        {{-- Toggle Active/Inactive --}}
                        <form method="POST" action="{{ route('admin.api-keys.toggle', $key) }}">
                            @csrf
                            <button type="submit" class="btn btn-sm {{ $key->is_active ? 'btn-warning' : 'btn-success' }}" title="{{ $key->is_active ? 'Nonaktifkan' : 'Aktifkan' }}">
                                {{ $key->is_active ? '⏸' : '▶' }}
                            </button>
                        </form>

                        {{-- Regenerate --}}
                        <form method="POST" action="{{ route('admin.api-keys.regenerate', $key) }}" onsubmit="return confirm('Regenerate key ini? Key lama akan tidak bisa digunakan lagi.')">
                            @csrf
                            <button type="submit" class="btn btn-secondary btn-sm" title="Regenerate Key">
                                🔄
                            </button>
                        </form>

                        {{-- Delete --}}
                        <form method="POST" action="{{ route('admin.api-keys.destroy', $key) }}" onsubmit="return confirm('Hapus API key ini? Aksi ini tidak bisa di-undo.')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm" title="Hapus">
                                🗑
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
@endif

{{-- API Documentation --}}
<div style="background:#1a1a1a;border-radius:8px;padding:20px;margin-top:24px;border:1px solid #2a2a2a;">
    <h3 style="font-size:14px;margin-bottom:12px;color:#888;">📖 API Documentation</h3>
    <div style="font-size:13px;color:#aaa;line-height:1.8;">
        <h4 style="margin:0 0 8px;color:#bdbdbd;font-size:13px;">Admin API Key Endpoints</h4>
        <table style="margin-top:6px;margin-bottom:18px;">
            <thead>
                <tr>
                    <th>Method</th>
                    <th>Endpoint</th>
                    <th>Deskripsi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span class="badge badge-auto">GET</span></td>
                    <td><code style="font-size:12px;">/admin/api-keys</code></td>
                    <td>Daftar API key, prefix, dan usage</td>
                </tr>
                <tr>
                    <td><span class="badge badge-auto">POST</span></td>
                    <td><code style="font-size:12px;">/admin/api-keys</code></td>
                    <td>Buat API key baru dengan prefix</td>
                </tr>
                <tr>
                    <td><span class="badge badge-auto">POST</span></td>
                    <td><code style="font-size:12px;">/admin/api-keys/{apiKey}/regenerate</code></td>
                    <td>Generate ulang key dengan prefix yang sama</td>
                </tr>
                <tr>
                    <td><span class="badge badge-auto">POST</span></td>
                    <td><code style="font-size:12px;">/admin/api-keys/{apiKey}/toggle</code></td>
                    <td>Aktif/nonaktif API key</td>
                </tr>
                <tr>
                    <td><span class="badge badge-auto">DELETE</span></td>
                    <td><code style="font-size:12px;">/admin/api-keys/{apiKey}</code></td>
                    <td>Hapus API key</td>
                </tr>
            </tbody>
        </table>

        <h4 style="margin:0 0 8px;color:#bdbdbd;font-size:13px;">Public API Endpoints</h4>
        <div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px;">
            <span>Base URL:</span>
            <code id="apiBaseUrlCode" style="background:#111;padding:2px 6px;border-radius:3px;color:#6fafdf;">{{ url('/api/v1') }}</code>
            <button type="button" class="btn btn-secondary btn-sm" onclick="copyText('apiBaseUrlCode')" title="Copy Base URL">📋</button>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px;">
            <span>Header:</span>
            <code id="apiHeaderCode" style="background:#111;padding:2px 6px;border-radius:3px;color:#6fafdf;">X-API-Key: pk_your_api_key</code>
            <button type="button" class="btn btn-secondary btn-sm" onclick="copyText('apiHeaderCode')" title="Copy Header">📋</button>
        </div>
        <div style="margin-bottom:8px;color:#666;">Prefix aktif default untuk key baru: <code style="background:#111;padding:2px 6px;border-radius:3px;color:#6fafdf;">pk_</code></div>
        <p style="margin-bottom:8px;color:#666;">Prefix disimpan per key dan dipakai saat generate/regenerate. Format key bisa berbeda, misalnya <code style="background:#111;padding:2px 6px;border-radius:3px;color:#6fafdf;">pk_</code>, <code style="background:#111;padding:2px 6px;border-radius:3px;color:#6fafdf;">vk_</code>, atau prefix lain yang valid.</p>
        @if(!empty($videoPrefixes) && $videoPrefixes->isNotEmpty())
            <div style="margin:10px 0 14px;">
                <div style="margin-bottom:6px;color:#666;">Available video prefixes:</div>
                <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    @foreach($videoPrefixes as $videoPrefix)
                        <code style="background:#111;padding:4px 8px;border-radius:999px;color:#6fafdf;">{{ $videoPrefix }}</code>
                    @endforeach
                </div>
                <div style="margin-top:6px;color:#555;font-size:12px;">Gunakan salah satu prefix ini pada endpoint: <code style="background:#111;padding:2px 4px;border-radius:3px;color:#888;">/api/v1/videos?prefix=...</code></div>
            </div>
        @endif

        <table style="margin-top:12px;">
            <thead>
                <tr>
                    <th>Method</th>
                    <th>Endpoint</th>
                    <th>Deskripsi</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span class="badge badge-auto">GET</span></td>
                    <td><code style="font-size:12px;">/api/v1/videos</code></td>
                    <td>Daftar semua video (search, filter, pagination)</td>
                </tr>
                <tr>
                    <td><span class="badge badge-auto">GET</span></td>
                    <td><code style="font-size:12px;">/api/v1/videos?prefix=video1</code></td>
                    <td>Daftar video berdasarkan folder prefix asset, misalnya video1 / video2 / video3</td>
                </tr>
                <tr>
                    <td><span class="badge badge-auto">GET</span></td>
                    <td><code style="font-size:12px;">/api/v1/videos/{slug}</code></td>
                    <td>Detail satu video</td>
                </tr>
                <tr>
                    <td><span class="badge badge-auto">GET</span></td>
                    <td><code style="font-size:12px;">/api/v1/providers</code></td>
                    <td>Daftar provider yang tersedia</td>
                </tr>
                <tr>
                    <td><span class="badge badge-auto">GET</span></td>
                    <td><code style="font-size:12px;">/api/v1/stats</code></td>
                    <td>Statistik video</td>
                </tr>
            </tbody>
        </table>

        <p style="margin-top:12px;color:#666;">Query params untuk /videos: <code style="font-size:11px;background:#111;padding:2px 4px;border-radius:3px;color:#888;">search, prefix, provider, status, per_page, exclude_slugs[]</code></p>
    </div>
</div>

<script>
function copyKey(key) {
    navigator.clipboard.writeText(key).then(() => {
        alert('API Key berhasil disalin!');
    });
}

function copyText(elementId) {
    var el = document.getElementById(elementId);
    if (!el) return;

    navigator.clipboard.writeText(el.textContent.trim()).then(() => {
        alert('Teks berhasil disalin!');
    });
}
</script>
@endsection