@extends('layouts.app')
@section('content')

{{-- HEADER --}}
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
    <a href="{{ route('profile') }}"
       style="width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);text-decoration:none;flex-shrink:0">
        <i class="fas fa-arrow-left" style="font-size:13px"></i>
    </a>
    <div>
        <div style="font-size:16px;font-weight:800;color:var(--text)">API Keys</div>
        <div style="font-size:11px;color:var(--muted)">Kelola akses API kamu</div>
    </div>
    <a href="{{ route('api.docs') }}"
       style="margin-left:auto;padding:8px 14px;background:var(--primary-l);color:var(--primary-d);border:1px solid var(--primary-r);border-radius:var(--r);font-size:12px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:6px">
        <i class="fas fa-book"></i> Docs
    </a>
</div>

@if(session('success'))
<div style="background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:var(--r);padding:10px 14px;margin-bottom:14px;font-size:13px;color:#16a34a">
    <i class="fas fa-circle-check" style="margin-right:6px"></i>{{ session('success') }}
</div>
@endif
@if(session('error'))
<div style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:var(--r);padding:10px 14px;margin-bottom:14px;font-size:13px;color:#dc2626">
    <i class="fas fa-circle-xmark" style="margin-right:6px"></i>{{ session('error') }}
</div>
@endif

{{-- GENERATE FORM --}}
<div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:16px">
    <div style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px">
        <i class="fas fa-plus-circle" style="color:var(--primary-d);margin-right:6px"></i>Buat API Key Baru
    </div>
    <form action="{{ route('api.generate') }}" method="POST" style="display:flex;gap:10px;flex-wrap:wrap">
        @csrf
        <input type="text" name="name" placeholder="Nama key (opsional)" maxlength="50"
               style="flex:1;min-width:160px;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);font-size:13px;color:var(--text);outline:none">
        <button type="submit"
                style="padding:9px 18px;background:var(--primary);color:#fff;border:none;border-radius:var(--r);font-size:13px;font-weight:700;cursor:pointer">
            <i class="fas fa-key"></i> Generate
        </button>
    </form>
    <div style="font-size:11px;color:var(--muted);margin-top:8px">Maksimal 5 API key per akun.</div>
</div>

{{-- LIST API KEYS --}}
@forelse($apiKeys as $ak)
<div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:12px">

    {{-- Header --}}
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px">
        <div>
            <div style="font-size:13px;font-weight:700;color:var(--text)">{{ $ak->name }}</div>
            @if($ak->last_used_at)
            <div style="font-size:11px;color:var(--muted)">Terakhir digunakan: {{ $ak->last_used_at->diffForHumans() }}</div>
            @else
            <div style="font-size:11px;color:var(--muted)">Belum pernah digunakan</div>
            @endif
        </div>
        <div style="display:flex;gap:8px;align-items:center">
            {{-- Toggle aktif --}}
            <form action="{{ route('api.toggle', $ak) }}" method="POST">
                @csrf
                <button type="submit"
                        style="padding:5px 12px;border-radius:99px;font-size:11px;font-weight:700;border:none;cursor:pointer;background:{{ $ak->is_active ? 'rgba(34,197,94,.15)' : 'rgba(239,68,68,.15)' }};color:{{ $ak->is_active ? '#16a34a' : '#dc2626' }}">
                    {{ $ak->is_active ? 'Aktif' : 'Nonaktif' }}
                </button>
            </form>
            {{-- Hapus --}}
            <form action="{{ route('api.destroy', $ak) }}" method="POST"
                  onsubmit="return confirm('Hapus API key ini?')">
                @csrf @method('DELETE')
                <button type="submit"
                        style="width:30px;height:30px;border-radius:8px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:#dc2626;cursor:pointer;display:flex;align-items:center;justify-content:center">
                    <i class="fas fa-trash" style="font-size:11px"></i>
                </button>
            </form>
        </div>
    </div>

    {{-- API Key string --}}
    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:12px;display:flex;align-items:center;gap:10px">
        <code id="key_{{ $ak->id }}" style="flex:1;font-size:12px;color:var(--text);word-break:break-all;font-family:monospace">
            {{ substr($ak->key,0,12) }}••••••••••••••••••••••••••••••••••••••••
        </code>
        <button onclick="revealKey('{{ $ak->id }}','{{ $ak->key }}')"
                id="revBtn_{{ $ak->id }}"
                style="padding:5px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap">
            <i class="fas fa-eye"></i>
        </button>
        <button onclick="copyText('{{ $ak->key }}')"
                style="padding:5px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:11px;color:var(--muted);cursor:pointer">
            <i class="fas fa-copy"></i>
        </button>
    </div>

    {{-- IP Whitelist --}}
    <div>
        <div style="font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">
            <i class="fas fa-shield-halved" style="margin-right:4px"></i>Whitelist IP
            <span style="font-weight:400;text-transform:none;letter-spacing:0">(kosongkan = semua IP boleh)</span>
        </div>
        <form action="{{ route('api.update-ip', $ak) }}" method="POST">
            @csrf
            <textarea name="ips" rows="3" placeholder="Satu IP per baris&#10;Contoh:&#10;103.12.34.56&#10;192.168.1.1"
                      style="width:100%;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);font-size:12px;color:var(--text);font-family:monospace;resize:vertical;outline:none;margin-bottom:8px">{{ implode("\n", $ak->ip_whitelist ?? []) }}</textarea>
            <button type="submit"
                    style="padding:7px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:12px;font-weight:700;color:var(--text);cursor:pointer">
                <i class="fas fa-save"></i> Simpan Whitelist
            </button>
        </form>
    </div>
</div>
@empty
<div style="text-align:center;padding:50px 20px;color:var(--muted)">
    <i class="fas fa-key" style="font-size:32px;margin-bottom:12px;display:block;opacity:.3"></i>
    <div style="font-size:13px">Belum ada API key. Buat yang pertama!</div>
</div>
@endforelse

<script>
var revealed = {};
function revealKey(id, key) {
    var el  = document.getElementById('key_'+id);
    var btn = document.getElementById('revBtn_'+id);
    if (revealed[id]) {
        el.textContent = key.substring(0,12) + '••••••••••••••••••••••••••••••••••••••••';
        btn.innerHTML  = '<i class="fas fa-eye"></i>';
        revealed[id]   = false;
    } else {
        el.textContent = key;
        btn.innerHTML  = '<i class="fas fa-eye-slash"></i>';
        revealed[id]   = true;
    }
}
function copyText(text) {
    navigator.clipboard?.writeText(text).then(function(){ showToast('API key disalin!'); });
}
function showToast(msg) {
    var t = document.createElement('div');
    t.textContent = msg;
    t.style.cssText = 'position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:10px 18px;border-radius:99px;font-size:13px;font-weight:600;z-index:9999;border:1px solid rgba(255,255,255,.1)';
    document.body.appendChild(t);
    setTimeout(function(){ t.remove(); }, 2000);
}
</script>
@endsection