@extends('layouts.app')

@section('title', 'Tablou de bord')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center gap-3">
            <h2 class="fw-bold mb-0 text-dark">Tablou de bord</h2>
            <div class="badge {{ $protectionEnabled ? 'bg-success' : 'bg-danger' }} text-white small px-2">
                Stare: {{ $protectionEnabled ? 'Activ' : 'Inactiv' }}
            </div>
        </div>
        <div>
            <form action="{{ route('dashboard.toggle-protection') }}" method="POST" class="d-inline">
                @csrf
                <input type="hidden" name="enable" value="{{ $protectionEnabled ? '0' : '1' }}">
                <button type="submit" class="btn btn-sm {{ $protectionEnabled ? 'btn-danger' : 'btn-success' }} me-2">
                    <i class="bi {{ $protectionEnabled ? 'bi-shield-x' : 'bi-shield-check' }} me-1"></i>
                    {{ $protectionEnabled ? 'Dezactivați protecția' : 'Activați protecția' }}
                </button>
            </form>
            <a href="{{ route('dashboard') }}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-arrow-clockwise me-1"></i> Actualizare statistici
            </a>
        </div>
    </div>

    <!-- Top Stats Cards -->
    <div class="row g-3 mb-4">
        <!-- Interogari DNS -->
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <h2 class="fw-bold text-primary mb-0">{{ number_format($stats['total_queries']) }}</h2>
                    <p class="text-muted small mb-3">Interogări DNS</p>
                    <div style="height: 50px;">
                        <canvas id="chartTotal"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!-- Blocate de Filtre -->
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                 <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="fw-bold text-danger mb-0">{{ number_format($stats['blocked_filters']) }}</h2>
                        <span class="badge bg-danger bg-opacity-10 text-danger">{{ $stats['total_queries'] > 0 ? round(($stats['blocked_filters'] / $stats['total_queries']) * 100, 2) : 0 }}%</span>
                    </div>
                    <p class="text-muted small mb-3">Blocate de Filtre</p>
                     <div style="height: 50px;">
                        <canvas id="chartBlocked"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!-- Malware/Phishing -->
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                 <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="fw-bold text-success mb-0">{{ number_format($stats['blocked_malware']) }}</h2>
                        <span class="badge bg-success bg-opacity-10 text-success">{{ $stats['total_queries'] > 0 ? round(($stats['blocked_malware'] / $stats['total_queries']) * 100, 2) : 0 }}%</span>
                    </div>
                    <p class="text-muted small mb-3">Malware/phishing blocate</p>
                     <div style="height: 50px;">
                        <canvas id="chartMalware"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!-- Continut Adult -->
        <div class="col-md-3">
             <div class="card border-0 shadow-sm h-100">
                 <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="fw-bold text-warning mb-0">{{ number_format($stats['blocked_adult']) }}</h2>
                        <span class="badge bg-warning bg-opacity-10 text-warning">{{ $stats['total_queries'] > 0 ? round(($stats['blocked_adult'] / $stats['total_queries']) * 100, 2) : 0 }}%</span>
                    </div>
                    <p class="text-muted small mb-3">Site-uri cu conținut adult blocate</p>
                    <div style="height: 50px;">
                        <canvas id="chartAdult"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <!-- Statistici Generale -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0 text-dark">Statistici generale</h5>
                    <small class="text-muted">în ultima zi</small>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted">Interogări DNS</span>
                            <span class="fw-bold text-primary">{{ number_format($stats['total_queries']) }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted">Blocate de Filtre</span>
                            <span class="fw-bold text-danger">{{ number_format($stats['blocked_filters']) }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted">Malware/phishing blocate</span>
                            <span class="fw-bold text-success">{{ number_format($stats['blocked_malware']) }}</span>
                        </li>
                         <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <span class="text-muted">Site-uri cu conținut adult blocate</span>
                            <span class="fw-bold text-warning">{{ number_format($stats['blocked_adult']) }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Clienti de Top -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0 text-dark">Clienți de top</h5>
                    <small class="text-muted">în ultima zi</small>
                </div>
                <!-- Box with fixed height and scroll -->
                <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
                     <div class="table-responsive">
                        <table class="table align-middle mb-0 text-muted">
                            <thead class="bg-light small text-uppercase sticky-top" style="z-index: 1;">
                                <tr>
                                    <th class="ps-3 border-0 bg-light">Client</th>
                                    <th class="text-end pe-3 border-0 bg-light">Cont interogări</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($stats['top_clients'] as $ip => $count)
                                    @php
                                        // Resolve Name
                                        $name = $clientMap[$ip] ?? '';
                                        if (!$name) {
                                            $subnet = substr($ip, 0, strrpos($ip, '.')) . '.0';
                                            $name = $clientMap[$subnet] ?? '';
                                        }
                                        $percent = $stats['total_queries'] > 0 ? round(($count / $stats['total_queries']) * 100, 2) : 0;
                                    @endphp
                                    <tr>
                                        <td class="ps-3 border-bottom-0">
                                            <div class="d-flex flex-column">
                                                <span class="fw-medium text-primary">{{ $name ?: $ip }}</span>
                                                <small class="text-muted">{{ $ip }}</small>
                                            </div>
                                        </td>
                                        <td class="pe-3 border-bottom-0" style="min-width: 120px;">
                                            <div class="d-flex flex-column align-items-end">
                                                <span class="fw-bold text-dark">{{ number_format($count) }} <small class="text-muted fw-normal ms-1">{{ $percent }}%</small></span>
                                                <div class="progress w-100 mt-1" style="height: 4px;">
                                                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $percent }}%"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Domenii Table Row -->
    <div class="row g-4">
        <!-- Domeniile cele mai cautate -->
        <div class="col-md-6">
             <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0 text-dark">Domeniile cele mai căutate</h5>
                    <small class="text-muted">în ultima zi</small>
                </div>
                <div class="card-body p-0">
                     <div class="table-responsive">
                        <table class="table align-middle mb-0 text-muted">
                            <thead class="bg-light small text-uppercase">
                                <tr>
                                    <th class="ps-3 border-0">Domeniu</th>
                                    <th class="text-end pe-3 border-0">Cont interogări</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($stats['top_domains'] as $domain => $count)
                                    @php $percent = $stats['total_queries'] > 0 ? round(($count / $stats['total_queries']) * 100, 2) : 0; @endphp
                                    <tr>
                                        <td class="ps-3 border-bottom-0 text-break">{{ $domain }}</td>
                                        <td class="pe-3 border-bottom-0" style="min-width: 120px;">
                                             <div class="d-flex flex-column align-items-end">
                                                <span class="fw-bold text-dark">{{ number_format($count) }} <small class="text-muted fw-normal ms-1">{{ $percent }}%</small></span>
                                                <div class="progress w-100 mt-1" style="height: 4px;">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ $percent }}%"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                     </div>
                </div>
            </div>
        </div>

        <!-- Domeniile blocate cel mai des -->
        <div class="col-md-6">
             <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0 text-dark">Domeniile blocate cel mai des</h5>
                    <small class="text-muted">în ultima zi</small>
                </div>
                <div class="card-body p-0">
                     <div class="table-responsive">
                        <table class="table align-middle mb-0 text-muted">
                            <thead class="bg-light small text-uppercase">
                                <tr>
                                    <th class="ps-3 border-0">Domeniu</th>
                                    <th class="text-end pe-3 border-0">Cont interogări</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($stats['top_blocked'] as $domain => $count)
                                    @php $percent = $stats['total_queries'] > 0 ? round(($count / $stats['total_queries']) * 100, 2) : 0; @endphp
                                    <tr>
                                        <td class="ps-3 border-bottom-0 text-danger text-break">{{ $domain }}</td>
                                        <td class="pe-3 border-bottom-0" style="min-width: 120px;">
                                             <div class="d-flex flex-column align-items-end">
                                                <span class="fw-bold text-dark">{{ number_format($count) }} <small class="text-muted fw-normal ms-1">{{ $percent }}%</small></span>
                                                <div class="progress w-100 mt-1" style="height: 4px;">
                                                    <div class="progress-bar bg-danger" role="progressbar" style="width: {{ $percent }}%"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Initialize Sparkline Charts
    function createSparkline(ctxId, color, data) {
        const ctx = document.getElementById(ctxId).getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: Array(data.length).fill(''),
                datasets: [{
                    data: data,
                    borderColor: color,
                    borderWidth: 2,
                    tension: 0.4,
                    pointRadius: 0,
                    fill: false
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false }, tooltip: { enabled: false } },
                scales: {
                    x: { display: false },
                    y: { display: false }
                }
            }
        });
    }

    // Mock Data for visual effect (random variations)
    const generateRandomData = (count) => Array.from({length: 10}, () => Math.floor(Math.random() * count * 0.5));

    createSparkline('chartTotal', '#0d6efd', generateRandomData({{ $stats['total_queries'] }}));
    createSparkline('chartBlocked', '#dc3545', generateRandomData({{ $stats['blocked_filters'] }}));
    createSparkline('chartMalware', '#198754', generateRandomData({{ $stats['blocked_malware'] }}));
    createSparkline('chartAdult', '#ffc107', generateRandomData({{ $stats['blocked_adult'] }}));

    // Auto-refresh stats every 30s
    setTimeout(() => {
        window.location.reload();
    }, 30000);
</script>
@endpush
@endsection