@extends('admin.layout')

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

@section('content')
<div class="flex-1 flex flex-col gap-6 w-full">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Monitoring API Proxy</h2>
            <p class="text-sm text-on-surface-variant mt-1">Pantau penggunaan API pihak ketiga seperti OpenStreetMap (Nominatim).</p>
        </div>
    </div>

    <!-- Stats Bar -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Total Hit Hari Ini</span>
                <span class="material-symbols-outlined text-primary">today</span>
            </div>
            <p class="text-4xl font-bold font-headline-md">{{ number_format($todayHits) }}</p>
        </div>
        
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Total Hit (Keseluruhan)</span>
                <span class="material-symbols-outlined text-primary">stacked_line_chart</span>
            </div>
            <p class="text-4xl font-bold font-headline-md">{{ number_format($totalHits) }}</p>
        </div>
    </div>

    <!-- Chart -->
    <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
        <h3 class="font-bold text-lg mb-4 text-on-surface">Tren Penggunaan 14 Hari Terakhir</h3>
        <div class="relative h-72 w-full">
            <canvas id="apiUsageChart"></canvas>
        </div>
    </div>

    <!-- Filter & Table -->
    <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 overflow-hidden">
        <div class="p-4 border-b border-outline-variant/30 bg-surface-container-low/50">
            <h3 class="font-bold text-lg">Log Harian</h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm whitespace-nowrap">
                <thead class="text-xs text-on-surface-variant uppercase bg-surface-container-lowest border-b border-outline-variant/30">
                    <tr>
                        <th scope="col" class="px-6 py-4 font-medium">Tanggal</th>
                        <th scope="col" class="px-6 py-4 font-medium">Endpoint</th>
                        <th scope="col" class="px-6 py-4 font-medium">Provider</th>
                        <th scope="col" class="px-6 py-4 font-medium text-right">Hit Count</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/20">
                    @forelse($logs as $log)
                    <tr class="hover:bg-surface-variant/20 transition-colors">
                        <td class="px-6 py-4 text-on-surface">{{ \Carbon\Carbon::parse($log->date)->translatedFormat('d F Y') }}</td>
                        <td class="px-6 py-4 font-medium">/api/map/{{ $log->endpoint }}</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                {{ strtoupper($log->provider) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right font-bold">{{ number_format($log->hit_count) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-6 py-8 text-center text-on-surface-variant">Belum ada log API.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($logs->hasPages())
        <div class="p-4 border-t border-outline-variant/30">
            {{ $logs->links() }}
        </div>
        @endif
    </div>
</div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('apiUsageChart').getContext('2d');
        const labels = {!! json_encode($chartLabels) !!};
        const data = {!! json_encode($chartValues) !!};

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Total Hits (Nominatim)',
                    data: data,
                    borderColor: '#2563eb', // blue-600
                    backgroundColor: 'rgba(37, 99, 235, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#2563eb',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(15, 23, 42, 0.9)',
                        titleFont: { size: 13, family: "'Inter', sans-serif" },
                        bodyFont: { size: 14, family: "'Inter', sans-serif" },
                        padding: 12,
                        cornerRadius: 8,
                        displayColors: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0,0,0,0.05)',
                            drawBorder: false,
                        },
                        ticks: {
                            font: { family: "'Inter', sans-serif" },
                            color: '#64748b'
                        }
                    },
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false,
                        },
                        ticks: {
                            font: { family: "'Inter', sans-serif" },
                            color: '#64748b',
                            maxRotation: 45,
                            minRotation: 45
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    });
</script>
@endpush
@endsection