@extends('layouts.admin')

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

@section('page-title', 'API Keys Management')

@section('breadcrumbs')
    <a href="{{ route('admin.settings.index') }}" class="hover:text-primary">Settings</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">API Keys</span>
@endsection

@section('header-actions')
    <button onclick="document.getElementById('create-api-key-modal').classList.remove('hidden')" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
        <span class="material-symbols-outlined text-lg">add</span>
        <span>Create API Key</span>
    </button>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- API Keys Table -->
    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-background-light border-b border-[#e5e7eb]">
                    <tr>
                        <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Name</th>
                        <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Key</th>
                        <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Created By</th>
                        <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Last Used</th>
                        <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Expires</th>
                        <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Status</th>
                        <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#e5e7eb]">
                    @forelse($apiKeys as $apiKey)
                        <tr>
                            <td class="py-4 px-4 text-sm text-[#111418] text-gray-900 font-medium">{{ $apiKey->name }}</td>
                            <td class="py-4 px-4 text-sm text-[#617589] font-mono">{{ substr($apiKey->key, 0, 20) }}...</td>
                            <td class="py-4 px-4 text-sm text-[#617589]">{{ $apiKey->creator->name ?? 'N/A' }}</td>
                            <td class="py-4 px-4 text-sm text-[#617589]">{{ $apiKey->last_used_at ? $apiKey->last_used_at->format('M d, Y') : 'Never' }}</td>
                            <td class="py-4 px-4 text-sm text-[#617589]">{{ $apiKey->expires_at ? $apiKey->expires_at->format('M d, Y') : 'Never' }}</td>
                            <td class="py-4 px-4">
                                @php
                                    $isExpired = $apiKey->expires_at && $apiKey->expires_at->isPast();
                                    $isActive = $apiKey->is_active && !$isExpired;
                                @endphp
                                <span class="px-2 py-1 rounded-full text-xs font-medium {{ $isActive ? 'bg-green-100 text-green-700' : ($isExpired ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700') }}">
                                    {{ $isActive ? 'Active' : ($isExpired ? 'Expired' : 'Inactive') }}
                                </span>
                            </td>
                            <td class="py-4 px-4 text-right">
                                <form method="POST" action="{{ route('admin.settings.api-keys.delete', $apiKey) }}" class="inline" onsubmit="return confirm('Are you sure you want to delete this API key?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:underline text-sm">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 px-4 text-center text-[#617589]">No API keys found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Create API Key Modal -->
    <div id="create-api-key-modal" data-admin-modal class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-lg max-w-md w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-[#111418] text-gray-900">Create API Key</h3>
                <button onclick="document.getElementById('create-api-key-modal').classList.add('hidden')" class="text-[#617589] hover:text-[#111418]">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form method="POST" action="{{ route('admin.settings.api-keys.create') }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Name</label>
                    <input type="text" name="name" required class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                </div>
                <div>
                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Expires At (Optional)</label>
                    <input type="date" name="expires_at" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                </div>
                <div class="flex justify-end gap-2">
                    <button type="button" onclick="document.getElementById('create-api-key-modal').classList.add('hidden')" class="px-4 py-2 border border-[#dbe0e6] text-[#617589] rounded-lg hover:bg-background-light transition-colors">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection