@extends('admin.layout')
@section('title', 'Detalle de Clave API')
@section('page-title', 'API Key Detayı')

@section('content')
    <div class="content-card mb-4">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
            <div>
                <h3 class="mb-1">{{ $key->name }}</h3>
                <code class="bg-light px-2 py-1 rounded">{{ $key->key_prefix }}</code>
                <span class="badge {{ $key->environment === 'live' ? 'bg-primary' : 'bg-warning text-dark' }}">
                    {{ $key->environment }}
                </span>
                @if ($key->status === \App\Models\ApiKey::STATUS_ACTIVE)
                    <span class="badge bg-success">Aktif</span>
                @else
                    <span class="badge bg-danger">Askıya alınmış</span>
                @endif
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.api.keys.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Listeye dön
                </a>
                @if ($key->status === \App\Models\ApiKey::STATUS_ACTIVE)
                    <form action="{{ route('admin.api.keys.revoke', $key) }}" method="POST"
                        onsubmit="return confirm('Bu key askıya alınacak, entegrasyon anında durur. Devam?');">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="btn btn-danger">
                            <i class="bi bi-slash-circle"></i> Askıya al
                        </button>
                    </form>
                @else
                    <form action="{{ route('admin.api.keys.activate', $key) }}" method="POST">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-arrow-counterclockwise"></i> Yeniden aktifleştir
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <div class="border rounded p-3 mb-3">
            <div class="text-muted small mb-1">Tam key değeri</div>
            @if ($plainKey)
                <div class="input-group" style="max-width: 520px;">
                    <input type="password" class="form-control font-monospace" id="plainKeyField"
                        value="{{ $plainKey }}" readonly>
                    <button class="btn btn-outline-secondary" type="button" onclick="toggleVisibility('plainKeyField', this)">
                        <i class="bi bi-eye"></i>
                    </button>
                    <button class="btn btn-outline-secondary" type="button" onclick="copyPlainKey(this)">
                        <i class="bi bi-clipboard"></i> Kopyala
                    </button>
                </div>
                <div class="form-text text-danger">
                    Bu değer müşteri destek amaçlı gösteriliyor ve her görüntüleme loglanıyor. Kimseyle paylaşmayın.
                </div>
            @else
                <span class="text-muted">Bu key, tam değer görüntüleme özelliğinden önce oluşturulduğu için tam değeri saklanmıyor.</span>
            @endif
        </div>

        <div class="row g-3">
            <div class="col-md-3">
                <div class="border rounded p-3">
                    <div class="text-muted small">Müşteri</div>
                    @if ($key->customer)
                        <a href="{{ route('admin.api.customers.show', $key->customer) }}"
                            class="fw-bold text-decoration-none">{{ $key->customer->name }}</a>
                        <div class="small text-muted">{{ $key->customer->email }}</div>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </div>
            </div>
            <div class="col-md-3">
                <div class="border rounded p-3">
                    <div class="text-muted small">API Kredi Bakiyesi</div>
                    <strong>{{ number_format((int) ($key->customer?->api_credit_balance ?? 0), 0, ',', '.') }}</strong>
                </div>
            </div>
            <div class="col-md-3">
                <div class="border rounded p-3">
                    <div class="text-muted small">Son {{ $recentDays }} gün istek</div>
                    <strong>{{ number_format($recentCount, 0, ',', '.') }}</strong>
                </div>
            </div>
            <div class="col-md-3">
                <div class="border rounded p-3">
                    <div class="text-muted small">Son kullanım</div>
                    <strong>{{ $key->last_used_at?->format('d.m.Y H:i') ?? '—' }}</strong>
                </div>
            </div>
        </div>
    </div>

    <div class="content-card">
        <h5 class="mb-3">Son 100 Kullanım Kaydı</h5>

        @if ($logs->count() > 0)
            <div class="table-responsive">
                <table class="table table-sm table-hover align-middle">
                    <thead>
                        <tr>
                            <th>Tarih</th>
                            <th>SKU</th>
                            <th>Kaynak</th>
                            <th>Durum</th>
                            <th>HTTP</th>
                            <th>Kredi</th>
                            <th>Süre (ms)</th>
                            <th>IP</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($logs as $log)
                            <tr>
                                <td>{{ $log->created_at?->format('d.m.Y H:i:s') ?? '—' }}</td>
                                <td><code>{{ $log->sku }}</code></td>
                                <td><span class="badge bg-light text-dark">{{ $log->source }}</span></td>
                                <td>
                                    @if ($log->status === \App\Models\ApiUsageLog::STATUS_SUCCESS)
                                        <span class="badge bg-success">success</span>
                                    @elseif ($log->status === \App\Models\ApiUsageLog::STATUS_CACHED)
                                        <span class="badge bg-info text-dark">cached</span>
                                    @elseif ($log->status === \App\Models\ApiUsageLog::STATUS_REJECTED)
                                        <span class="badge bg-warning text-dark">rejected</span>
                                    @elseif ($log->status === \App\Models\ApiUsageLog::STATUS_PENDING)
                                        <span class="badge bg-secondary">pending</span>
                                    @else
                                        <span class="badge bg-danger">{{ $log->status }}</span>
                                    @endif
                                </td>
                                <td>{{ $log->http_status ?? '—' }}</td>
                                <td>{{ $log->credits_charged }}</td>
                                <td>{{ $log->duration_ms ?? '—' }}</td>
                                <td class="text-muted small">{{ $log->ip ?? '—' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-muted mb-0">Bu key için henüz kullanım kaydı yok.</p>
        @endif
    </div>

    <script>
        function toggleVisibility(inputId, btn) {
            const input = document.getElementById(inputId);
            if (!input) return;
            const isPassword = input.type === 'password';
            input.type = isPassword ? 'text' : 'password';
            btn.innerHTML = isPassword
                ? '<i class="bi bi-eye-slash"></i>'
                : '<i class="bi bi-eye"></i>';
        }

        function copyPlainKey(btn) {
            const input = document.getElementById('plainKeyField');
            if (!input) return;
            navigator.clipboard.writeText(input.value).then(() => {
                const original = btn.innerHTML;
                btn.innerHTML = '<i class="bi bi-check2"></i> Kopyalandı';
                setTimeout(() => { btn.innerHTML = original; }, 1500);
            });
        }
    </script>
@endsection