@extends('admin.layouts.admin')

@section('title', 'API · Uso')

@section('content')

<div class="d-flex justify-content-between align-items-end flex-wrap gap-2 mb-1">
    <div>
        <div class="admin-page-title">Uso del API</div>
        <p class="admin-page-sub mb-0">Volumen de peticiones, usuarios conectados y errores de api.fermenty.es</p>
    </div>

    {{-- Rango (escopa todos los bloques de la página) --}}
    <div class="btn-group" role="group" aria-label="Rango de fechas">
        @foreach(\App\Http\Controllers\Admin\ApiStatsAdminController::RANGES as $range)
            <a href="{{ route('admin.api.index', ['days' => $range]) }}"
               class="btn btn-sm {{ $days === $range ? 'btn-fermenty-orange' : 'btn-fermenty-outline' }}">
                {{ $range }} días
            </a>
        @endforeach
    </div>
</div>

@php $fmt = fn ($v) => number_format($v, 0, ',', '.'); @endphp

{{-- KPIs --}}
<div class="row g-3 my-3">
    <div class="col-6 col-md-3">
        <div class="admin-stat-card">
            <div class="admin-stat-label">Peticiones ({{ $days }} días)</div>
            <div class="admin-stat-value">{{ $fmt($stats['total']) }}</div>
            <div class="admin-stat-sub">{{ $fmt($stats['today']) }} hoy</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="admin-stat-card">
            <div class="admin-stat-label">Usuarios API únicos</div>
            <div class="admin-stat-value">{{ $fmt($stats['users']) }}</div>
            <div class="admin-stat-sub">{{ $fmt($stats['users_today']) }} hoy</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="admin-stat-card">
            <div class="admin-stat-label">Latencia media</div>
            <div class="admin-stat-value">{{ $fmt($stats['avg_ms']) }} ms</div>
            <div class="admin-stat-sub">sobre {{ $fmt($stats['total']) }} peticiones</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="admin-stat-card">
            <div class="admin-stat-label">Errores (≥ 400)</div>
            <div class="admin-stat-value">{{ $fmt($stats['errors']) }}</div>
            <div class="admin-stat-sub">{{ str_replace('.', ',', (string) $stats['error_rate']) }}% del total</div>
        </div>
    </div>
</div>

@if($stats['total'] === 0)
    <div class="admin-card">
        <div class="admin-card-title">Aún no hay peticiones registradas</div>
        <p class="text-muted mb-0" style="font-size:.9rem;">
            Cada consulta a <code>api.fermenty.es</code> queda registrada automáticamente.
            En cuanto la app empiece a hacer peticiones verás aquí el volumen diario,
            los usuarios conectados y los endpoints más usados.
        </p>
    </div>
@else

{{-- Charts --}}
<div class="row g-4 mb-1">
    <div class="col-12 col-xl-6">
        <div class="admin-card">
            <div class="admin-card-title">Peticiones por día</div>
            @include('admin.api_stats._columns', [
                'data' => array_map(fn ($d) => [
                    'label' => $d['label'],
                    'value' => $d['requests'],
                    'tip'   => $d['label'] . ' — ' . $fmt($d['requests']) . ' peticiones · ' . $fmt($d['errors']) . ' errores · ' . $fmt($d['avg_ms']) . ' ms',
                ], $daily),
                'color'     => '#2a78d6',
                'unit'      => 'peticiones',
                'ariaLabel' => 'Peticiones al API por día',
            ])
        </div>
    </div>
    <div class="col-12 col-xl-6">
        <div class="admin-card">
            <div class="admin-card-title">Usuarios únicos por día</div>
            @include('admin.api_stats._columns', [
                'data' => array_map(fn ($d) => [
                    'label' => $d['label'],
                    'value' => $d['users'],
                    'tip'   => $d['label'] . ' — ' . $fmt($d['users']) . ' usuarios únicos',
                ], $daily),
                'color'     => '#1baf7a',
                'unit'      => 'usuarios',
                'ariaLabel' => 'Usuarios únicos del API por día',
            ])
        </div>
    </div>
</div>

{{-- Vista tabla (equivalente accesible de ambos charts) --}}
<details class="mb-4">
    <summary class="text-muted" style="font-size:.85rem;cursor:pointer;">Ver datos diarios en tabla</summary>
    <div class="admin-card mt-2">
        <div class="admin-table-wrap">
            <table class="admin-table" style="font-variant-numeric:tabular-nums;">
                <thead>
                    <tr><th>Fecha</th><th>Peticiones</th><th>Usuarios únicos</th><th>Errores</th><th>Media ms</th></tr>
                </thead>
                <tbody>
                    @foreach(array_reverse($daily) as $d)
                        <tr>
                            <td>{{ $d['label'] }}</td>
                            <td>{{ $fmt($d['requests']) }}</td>
                            <td>{{ $fmt($d['users']) }}</td>
                            <td>{{ $fmt($d['errors']) }}</td>
                            <td>{{ $fmt($d['avg_ms']) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</details>

<div class="row g-4">

    {{-- Top endpoints --}}
    <div class="col-12 col-lg-7">
        <div class="admin-card">
            <div class="admin-card-title">Endpoints más usados</div>
            <div class="admin-table-wrap">
                <table class="admin-table">
                    <thead>
                        <tr><th>Endpoint</th><th>Peticiones</th><th>Usuarios</th><th>Media ms</th><th>Errores</th></tr>
                    </thead>
                    <tbody style="font-variant-numeric:tabular-nums;">
                        @foreach($endpoints as $ep)
                            <tr>
                                <td>
                                    <span class="fermenty-badge">{{ $ep->method }}</span>
                                    <code style="font-size:.8rem;">{{ str_replace('api.v1.', '', $ep->endpoint) }}</code>
                                </td>
                                <td>{{ $fmt($ep->requests) }}</td>
                                <td>{{ $fmt($ep->users) }}</td>
                                <td>{{ $fmt(round($ep->avg_ms ?? 0)) }}</td>
                                <td class="{{ $ep->errors > 0 ? 'text-danger' : '' }}">{{ $fmt($ep->errors) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Top usuarios --}}
    <div class="col-12 col-lg-5">
        <div class="admin-card">
            <div class="admin-card-title">Usuarios más activos</div>
            @if($topUsers->isEmpty())
                <p class="text-muted mb-0" style="font-size:.85rem;">Todavía no hay peticiones autenticadas.</p>
            @else
                <div class="admin-table-wrap">
                    <table class="admin-table">
                        <thead>
                            <tr><th>Usuario</th><th>Peticiones</th><th>Última actividad</th></tr>
                        </thead>
                        <tbody style="font-variant-numeric:tabular-nums;">
                            @foreach($topUsers as $row)
                                <tr>
                                    <td>
                                        @if($row->user)
                                            <a href="{{ route('admin.usuarios.show', $row->user) }}">{{ $row->user->name }}</a>
                                            <div class="admin-user-email">{{ $row->user->email }}</div>
                                        @else
                                            <span class="text-muted">Usuario eliminado</span>
                                        @endif
                                    </td>
                                    <td>{{ $fmt($row->requests) }}</td>
                                    <td>{{ \Illuminate\Support\Carbon::parse($row->last_seen)->format('d/m H:i') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

</div>

{{-- Errores recientes --}}
<div class="admin-card mt-4">
    <div class="admin-card-title">Errores recientes (≥ 400)</div>
    @if($recentErrors->isEmpty())
        <p class="text-muted mb-0" style="font-size:.85rem;">Sin errores en este rango. 🎉</p>
    @else
        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead>
                    <tr><th>Fecha</th><th>Código</th><th>Endpoint</th><th>Usuario</th><th>IP</th></tr>
                </thead>
                <tbody style="font-variant-numeric:tabular-nums;">
                    @foreach($recentErrors as $err)
                        <tr>
                            <td>{{ $err->created_at->format('d/m H:i') }}</td>
                            <td class="{{ $err->status >= 500 ? 'text-danger' : 'text-warning' }}">
                                <strong>{{ $err->status }}</strong>
                            </td>
                            <td><code style="font-size:.8rem;">{{ $err->method }} {{ $err->path }}</code></td>
                            <td>{{ $err->user?->email ?? '—' }}</td>
                            <td>{{ $err->ip }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

@endif

@endsection

@push('scripts')
<script>
// Tooltip compartido de los charts (los valores también están en la vista tabla)
(function () {
    const tt = document.createElement('div');
    tt.style.cssText = 'position:fixed;z-index:1080;pointer-events:none;display:none;' +
        'background:#0b0b0b;color:#fff;font-size:12px;padding:4px 8px;border-radius:6px;white-space:nowrap;';
    document.body.appendChild(tt);

    document.addEventListener('mousemove', (e) => {
        const target = e.target.closest('[data-tip]');
        if (!target) { tt.style.display = 'none'; return; }
        tt.textContent = target.dataset.tip;
        tt.style.display = 'block';
        const pad = 12;
        let x = e.clientX + pad, y = e.clientY - 30;
        const w = tt.offsetWidth;
        if (x + w > window.innerWidth - 8) x = e.clientX - w - pad;
        tt.style.left = x + 'px';
        tt.style.top  = Math.max(8, y) + 'px';
    });
})();
</script>
@endpush