@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description d-flex align-items-center justify-content-between">
                <h1>Detail API Key</h1>
                <a href="{{ route('api-management.index') }}" class="btn btn-outline-secondary">
                    <i class="material-icons-outlined">arrow_back</i> Kembali
                </a>
            </div>
        </div>
    </div>

    {{-- Key Info --}}
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">vpn_key</i> {{ $apiKey->name }}</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <td class="fw-bold" style="width:180px;">Prefix</td>
                            <td><code>{{ $apiKey->prefix }}...</code></td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Status</td>
                            <td>
                                @if($apiKey->isRevoked())
                                    <span class="badge bg-danger">Revoked</span>
                                @elseif($apiKey->isExpired())
                                    <span class="badge bg-warning">Expired</span>
                                @elseif($apiKey->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Scopes</td>
                            <td>
                                @if($apiKey->scopes === null)
                                    <span class="badge bg-success">All Access</span>
                                @else
                                    @foreach($apiKey->scopes as $scope)
                                        <span class="badge bg-info me-1">{{ $scope }}</span>
                                    @endforeach
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Rate Limit</td>
                            <td>{{ $apiKey->rate_limit }} requests/menit</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Dibuat Oleh</td>
                            <td>{{ $apiKey->creator->name ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Tanggal Dibuat</td>
                            <td>{{ $apiKey->created_at->format('d M Y H:i') }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Expires</td>
                            <td>{{ $apiKey->expires_at ? $apiKey->expires_at->format('d M Y H:i') : 'Tidak pernah' }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold">Terakhir Digunakan</td>
                            <td>{{ $apiKey->last_used_at ? $apiKey->last_used_at->diffForHumans() : 'Belum pernah' }}</td>
                        </tr>
                        @if($apiKey->revoked_at)
                        <tr>
                            <td class="fw-bold">Dicabut Pada</td>
                            <td>{{ $apiKey->revoked_at->format('d M Y H:i') }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
        </div>

        {{-- Stats --}}
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0"><i class="material-icons-outlined">analytics</i> Statistik Penggunaan</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <h3 class="mb-0">{{ number_format($stats['total']) }}</h3>
                            <small class="text-muted">Total Requests</small>
                        </div>
                        <div class="col-6 mb-3">
                            <h3 class="mb-0">{{ number_format($stats['last_24h']) }}</h3>
                            <small class="text-muted">24 Jam Terakhir</small>
                        </div>
                        <div class="col-6">
                            <h3 class="mb-0">{{ number_format($stats['last_7d']) }}</h3>
                            <small class="text-muted">7 Hari Terakhir</small>
                        </div>
                        <div class="col-6">
                            <h3 class="mb-0">{{ number_format($stats['last_30d']) }}</h3>
                            <small class="text-muted">30 Hari Terakhir</small>
                        </div>
                    </div>
                </div>
            </div>

            @if(!$apiKey->isRevoked() && $apiKey->is_active)
            <div class="card">
                <div class="card-body text-center">
                    <form action="{{ route('api-management.revoke', $apiKey->id) }}" method="POST" onsubmit="return confirm('Yakin ingin mencabut API key ini? Key tidak bisa digunakan lagi setelah dicabut.')">
                        @csrf
                        <button type="submit" class="btn btn-warning w-100">
                            <i class="material-icons-outlined">block</i> Revoke Key
                        </button>
                    </form>
                </div>
            </div>
            @endif
        </div>
    </div>

    {{-- Recent Logs --}}
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">history</i> Request Terbaru</h5>
                    <a href="{{ route('api-management.logs', $apiKey->id) }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
                </div>
                <div class="card-body">
                    @if($recentLogs->isEmpty())
                        <p class="text-muted text-center py-3">Belum ada request tercatat.</p>
                    @else
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Waktu</th>
                                    <th>Method</th>
                                    <th>Endpoint</th>
                                    <th>Status</th>
                                    <th>IP</th>
                                    <th>Response Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentLogs as $log)
                                <tr>
                                    <td><small>{{ $log->created_at->format('d/m H:i:s') }}</small></td>
                                    <td><span class="badge bg-primary">{{ $log->method }}</span></td>
                                    <td><code class="small">{{ $log->endpoint }}</code></td>
                                    <td>
                                        <span class="badge {{ $log->status_code < 400 ? 'bg-success' : ($log->status_code < 500 ? 'bg-warning' : 'bg-danger') }}">
                                            {{ $log->status_code }}
                                        </span>
                                    </td>
                                    <td><small>{{ $log->ip_address }}</small></td>
                                    <td><small>{{ $log->response_time_ms }}ms</small></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection