@extends('layouts.app')

@section('title', 'API Keys — LoreKeepers')

@section('content')
<div class="max-w-3xl mx-auto px-4 py-10">

    <h1 class="text-2xl font-bold text-white mb-1">API Keys</h1>
    <p class="text-slate-400 text-sm mb-8">Use API keys to access the <a href="{{ route('api.docs') }}" class="text-purple-400 hover:text-purple-300 underline">LoreKeepers API</a>. Keep them secret — treat them like passwords.</p>

    @if(session('new_api_key'))
    <div class="mb-8 p-4 bg-purple-900/30 border border-purple-500/40 rounded-xl" x-data="{ copied: false }">
        <div class="flex items-center gap-2 mb-2">
            <svg class="w-4 h-4 text-yellow-400 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
            </svg>
            <span class="text-yellow-300 text-sm font-semibold">This key will only be shown once. Copy it now.</span>
        </div>
        <div class="flex items-center gap-2 mt-3">
            <code class="flex-1 bg-[#0f0f13] border border-white/10 rounded-lg px-4 py-2.5 text-sm text-green-300 font-mono break-all select-all">{{ session('new_api_key') }}</code>
            <button @click="navigator.clipboard.writeText('{{ session('new_api_key') }}'); copied = true; setTimeout(() => copied = false, 2000)"
                    class="flex-shrink-0 px-3 py-2.5 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg transition-colors font-medium">
                <span x-show="!copied">Copy</span>
                <span x-show="copied" style="display:none">Copied!</span>
            </button>
        </div>
    </div>
    @endif

    <div class="bg-[#16161d] border border-white/5 rounded-xl mb-8 overflow-hidden">
        <div class="px-5 py-4 border-b border-white/5">
            <h2 class="text-sm font-semibold text-slate-200">Your API Keys</h2>
        </div>
        @forelse($keys as $key)
        <div class="px-5 py-4 flex items-center justify-between gap-4 @if(!$loop->last) border-b border-white/5 @endif">
            <div>
                <div class="text-sm font-medium text-white">{{ $key->name }}</div>
                <div class="text-xs text-slate-500 mt-0.5">
                    Created {{ $key->created_at->format('M j, Y') }}
                    @if($key->last_used_at)
                     · Last used {{ $key->last_used_at->diffForHumans() }}
                    @else
                     · Never used
                    @endif
                </div>
            </div>
            <form method="POST" action="{{ route('settings.api-keys.destroy', $key) }}" onsubmit="return confirm('Delete this API key? This cannot be undone.')">
                @csrf
                @method('DELETE')
                <button type="submit" class="text-xs px-3 py-1.5 bg-red-900/40 hover:bg-red-800/60 border border-red-700/40 text-red-400 hover:text-red-300 rounded-lg transition-colors">
                    Revoke
                </button>
            </form>
        </div>
        @empty
        <div class="px-5 py-8 text-center text-slate-500 text-sm">
            No API keys yet. Create one below.
        </div>
        @endforelse
    </div>

    <div class="bg-[#16161d] border border-white/5 rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-white/5">
            <h2 class="text-sm font-semibold text-slate-200">Create New Key</h2>
        </div>
        <form method="POST" action="{{ route('settings.api-keys.store') }}" class="px-5 py-4">
            @csrf
            <div class="flex items-end gap-3">
                <div class="flex-1">
                    <label for="name" class="block text-xs text-slate-400 mb-1.5">Key Label</label>
                    <input type="text" id="name" name="name" value="{{ old('name') }}"
                           placeholder="e.g. My App, Personal Script"
                           class="w-full bg-[#0f0f13] border border-white/10 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-purple-500 focus:ring-1 focus:ring-purple-500 transition"
                           maxlength="50">
                    @error('name')
                    <p class="text-red-400 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <button type="submit" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg transition-colors font-medium whitespace-nowrap">
                    Generate Key
                </button>
            </div>
        </form>
    </div>

</div>
@endsection