@extends('layouts.app')

@section('title', 'Dashboard Admin')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-dark mb-1">Administrator Dashboard</h2>
            <p class="text-muted small mb-0">Monitorizare globală a sistemului AdGuard</p>
        </div>
        <div class="d-flex align-items-center gap-3">
             <span class="badge {{ $status['protection_enabled'] ?? false ? 'bg-success bg-opacity-10 text-success border border-success border-opacity-25' : 'bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25' }} px-3 py-2 fw-medium rounded-pill shadow-sm">
                <i class="bi bi-shield-{{ $status['protection_enabled'] ?? false ? 'check' : 'x' }} me-2"></i>
                {{ $status['protection_enabled'] ?? false ? 'Protecție Activă' : 'Protecție Oprită' }}
            </span>
        </div>
    </div>

    <!-- Stats Cards Row -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card p-4">
                <p class="stat-card-title">Total Interogări</p>
                <h3 class="stat-card-value">{{ number_format($stats['num_dns_queries'] ?? 0) }}</h3>
                <div class="stat-card-trend text-muted">
                    <small>În ultimele 24 de ore</small>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card p-4">
                <p class="stat-card-title">Interogări Blocate</p>
                <h3 class="stat-card-value">{{ number_format($stats['num_blocked_filtering'] ?? 0) }}</h3>
                <div class="stat-card-trend text-trend-down">
                    <i class="bi bi-shield-x"></i>
                    <span>Protectie activă</span>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card p-4">
                <p class="stat-card-title">Clienți Activi</p>
                <h3 class="stat-card-value">{{ count($uniqueIps) }}</h3>
                 <div class="stat-card-trend text-muted">
                    <small>IP-uri unice</small>
                </div>
            </div>
        </div>
        
         <div class="col-md-3">
            <div class="card p-4">
                <p class="stat-card-title">Utilizatori DB</p>
                <h3 class="stat-card-value">{{ $users->count() }}</h3>
                 <div class="stat-card-trend text-trend-up">
                    <i class="bi bi-person-check"></i>
                    <span>Manage</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Charts Row -->
    <div class="row mb-4">
        <!-- Global Traffic Chart -->
        <div class="col-lg-8">
            <div class="card p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <p class="stat-card-title mb-0">Trafic Global (DNS Queries)</p>
                </div>
                <div id="adminMainChart" style="height: 350px;"></div>
            </div>
        </div>
        
        <!-- Stats Distribution -->
        <div class="col-lg-4">
            <div class="card p-4 h-100">
                <p class="stat-card-title mb-4">Status Distribuție</p>
                <div id="adminDonutChart" class="d-flex justify-content-center align-items-center" style="min-height: 250px;"></div>
                <div class="mt-3 text-center">
                    <small class="text-muted">Raport Blokate vs Permise vs SafeSearch</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Tables Row -->
    <div class="row g-4">
        <!-- IP Classes Discovery -->
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header border-0 bg-white pt-4 px-4 pb-2">
                    <div class="d-flex align-items-center justify-content-between">
                        <h5 class="fw-bold mb-0">Rețea (IP-uri Detectate)</h5>
                    </div>
                </div>
                <div class="card-body px-0">
                    @if(empty($ipClasses))
                        <div class="text-center py-5">
                            <p class="text-muted">Nu s-au găsit IP-uri în AdGuard.</p>
                        </div>
                    @else
                        <div class="list-group list-group-flush px-3">
                            @foreach($ipClasses as $ipClass)
                                <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-3 py-3 rounded-3 hover-bg-light mb-1">
                                    <div class="d-flex align-items-center">
                                        <div class="bg-light rounded p-2 me-3 text-secondary">
                                            <i class="bi bi-ethernet"></i>
                                        </div>
                                        <div>
                                            <code class="fs-6 fw-bold text-dark">{{ $ipClass }}</code>
                                            @if(isset($clientNames[$ipClass]))
                                                <div class="small text-muted"><i class="bi bi-tag me-1"></i>{{ $clientNames[$ipClass] }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    @if(in_array($ipClass, $assignedIps))
                                        <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-2 border border-success border-opacity-10">
                                            Asociat
                                        </span>
                                    @else
                                        <span class="badge bg-warning bg-opacity-10 text-warning rounded-pill px-3 py-2 border border-warning border-opacity-10">
                                            Neasociat
                                        </span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Users -->
        <div class="col-lg-6">
             <div class="card h-100">
                <div class="card-header border-0 bg-white pt-4 px-4 pb-2">
                    <div class="d-flex align-items-center justify-content-between">
                        <h5 class="fw-bold mb-0">Utilizatori Recenți</h5>
                        <a href="{{ route('admin.users') }}" class="btn btn-sm btn-light text-primary fw-medium">Vezi toți</a>
                    </div>
                </div>
                <div class="card-body px-0">
                    @if($users->isEmpty())
                        <div class="text-center py-5">
                            <p class="text-muted mb-3">Nu există utilizatori creați.</p>
                        </div>
                    @else
                        <div class="list-group list-group-flush px-3">
                            @foreach($users->take(5) as $user)
                                <div class="list-group-item border-0 px-3 py-3 rounded-3 hover-bg-light mb-1">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center me-3 shadow-sm" style="width: 36px; height: 36px;">
                                                {{ substr($user->name, 0, 1) }}
                                            </div>
                                            <div>
                                                <h6 class="mb-0 fw-bold text-dark">{{ $user->name }}</h6>
                                                <small class="text-muted">{{ $user->email }}</small>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            @forelse($user->clientIps as $ip)
                                                <span class="badge bg-light text-dark border">{{ $ip->ip_pattern }}</span>
                                            @empty
                                                <span class="badge bg-light text-muted border">Fără IP</span>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const stats = @json($stats);
    
    // Main Admin Chart (DNS Queries over time)
    // AdGuard returns `dns_queries` as an array of counts.
    const timeSeriesData = stats.dns_queries || [];
    
    // Generate simple time labels based on count (assuming 24h interval split by count)
    // Often AGH returns 24*60 / interval data points.
    // We will just use index as category if we don't have timestamps.
    const categories = timeSeriesData.map((_, index) => index);

    const adminMainOptions = {
        series: [{
            name: 'Queries',
            data: timeSeriesData
        }],
        chart: {
            type: 'area',
            height: 350,
            toolbar: { show: false },
            zoom: { enabled: false }
        },
        dataLabels: { enabled: false },
        stroke: {
            curve: 'smooth',
            width: 2,
            colors: ['#4f46e5'] // Indigo
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.4,
                opacityTo: 0.05,
                stops: [0, 100],
                colorStops: [
                    { offset: 0, color: '#4f46e5', opacity: 0.4 },
                    { offset: 100, color: '#4f46e5', opacity: 0 }
                ]
            }
        },
        xaxis: {
            labels: { show: false }, // Hide explicit time labels for simplicity
            axisBorder: { show: false },
            axisTicks: { show: false },
             tooltip: { enabled: false }
        },
        grid: {
             borderColor: '#f1f5f9',
             strokeDashArray: 4,
        }
    };

    if (timeSeriesData.length > 0) {
        new ApexCharts(document.querySelector("#adminMainChart"), adminMainOptions).render();
    } else {
        document.querySelector("#adminMainChart").innerHTML = '<p class="text-center text-muted py-5">Nu există date istorice disponibile.</p>';
    }

    // Donut Chart
    const donutOptions = {
        series: [
            stats.num_blocked_filtering || 0, 
            stats.num_replaced_safebrowsing || 0,
            (stats.num_dns_queries - (stats.num_blocked_filtering || 0)) // Permise (roughly)
        ],
        labels: ['Blocate', 'SafeBrowsing', 'Permise'],
        chart: {
            type: 'donut',
            height: 250
        },
        colors: ['#ef4444', '#f59e0b', '#10b981'],
        dataLabels: { enabled: false },
        legend: { position: 'bottom' },
        plotOptions: {
            pie: {
                donut: {
                    size: '70%'
                }
            }
        }
    };
    
    new ApexCharts(document.querySelector("#adminDonutChart"), donutOptions).render();

</script>
@endpush
@endsection