@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
            <h4 class="mb-1">Network Quality</h4>
            <div class="text-secondary small">
                <a href="{{ route('reports.index') }}" class="text-decoration-none">Reports</a> &nbsp;›&nbsp; Network Quality
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" class="card mb-3">
        <div class="card-body py-3">
            @include('reports._date-presets')
            <div class="row g-2 align-items-end">
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">From</label>
                    <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm">
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">To</label>
                    <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm">
                </div>
                <div class="col-4 col-md-2">
                    <button class="btn btn-sm btn-primary w-100">Apply</button>
                </div>
            </div>
        </div>
    </form>

    {{-- KPI tiles --}}
    <div class="row g-3 mb-3">
        <div class="col-6 col-md-3">
            <div class="card h-100"><div class="card-body py-3">
                <div class="text-secondary small">Average RTT</div>
                <div class="fw-bold" style="font-size:1.5rem;color:#2563eb;">{{ $kpis['avg_rtt'] }}ms</div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card h-100"><div class="card-body py-3">
                <div class="text-secondary small">Overall Grade</div>
                <div class="fw-bold" style="font-size:1.5rem;color:{{ $kpis['grade_color'] }};">{{ $kpis['grade'] }}</div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card h-100"><div class="card-body py-3">
                <div class="text-secondary small">Worst Recorded</div>
                <div class="fw-bold" style="font-size:1.5rem;color:{{ $kpis['max_rtt'] > 150 ? '#dc2626' : '#475569' }};">{{ $kpis['max_rtt'] }}ms</div>
            </div></div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card h-100"><div class="card-body py-3">
                <div class="text-secondary small">Samples</div>
                <div class="fw-bold" style="font-size:1.5rem;color:#475569;">{{ number_format($kpis['samples']) }}</div>
            </div></div>
        </div>
    </div>

    {{-- Trend chart --}}
    <div class="card mb-3">
        <div class="card-header bg-white py-2"><strong>RTT Trend (avg per hour)</strong></div>
        <div class="card-body"><canvas id="rttChart" height="100"></canvas></div>
    </div>

    {{-- Problem endpoints --}}
    @if(!empty($problemEndpoints))
    <div class="card mb-3">
        <div class="card-header bg-white py-2"><strong>Problem Endpoints</strong> <span class="text-secondary small">— consistently high RTT or unavailable</span></div>
        <div class="card-body p-0">
            <table class="table table-sm table-hover mb-0">
                <thead><tr><th class="ps-3">Extension</th><th class="text-center">Avg RTT</th><th class="text-center">Max RTT</th><th class="text-center">Unavail %</th><th class="pe-3">Status</th></tr></thead>
                <tbody>
                @foreach($problemEndpoints as $ep)
                    @php
                        $epType = str_ends_with($ep['ext'], 'm') ? 'Mobile' : (str_ends_with($ep['ext'], 'w') ? 'Web' : 'Desk');
                        $epTypeBg = $epType === 'Mobile' ? 'background:#faf5ff;color:#7c3aed;' : ($epType === 'Web' ? 'background:#ecfeff;color:#0891b2;' : 'background:#f1f5f9;color:#475569;');
                    @endphp
                    <tr>
                        <td class="ps-3 fw-medium">{{ $ep['ext'] }} <span style="display:inline-block;padding:1px 6px;border-radius:999px;font-size:.68rem;font-weight:700;{{ $epTypeBg }}">{{ $epType }}</span></td>
                        <td class="text-center">{{ $ep['avg_rtt'] }}ms</td>
                        <td class="text-center" style="color:{{ $ep['max_rtt'] > 150 ? '#dc2626' : '#475569' }};">{{ $ep['max_rtt'] }}ms</td>
                        <td class="text-center">{{ $ep['unavail_pct'] }}%</td>
                        <td class="pe-3">
                            @if($ep['avg_rtt'] > 200)<span class="badge bg-danger-subtle text-danger">Poor</span>
                            @elseif($ep['avg_rtt'] > 100)<span class="badge bg-warning-subtle text-warning">Fair</span>
                            @else<span class="badge bg-success-subtle text-success">OK</span>@endif
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    {{-- Degradation events --}}
    @if(!empty($degradationEvents))
    <div class="card">
        <div class="card-header bg-white py-2"><strong>Degradation Events</strong> <span class="text-secondary small">— periods where avg RTT exceeded 100ms</span></div>
        <div class="card-body p-0">
            <table class="table table-sm mb-0">
                <thead><tr><th class="ps-3">When</th><th class="text-center">Avg RTT</th><th class="text-center">Max RTT</th><th class="pe-3">Grade</th></tr></thead>
                <tbody>
                @foreach($degradationEvents as $ev)
                    <tr>
                        <td class="ps-3 small">{{ \Illuminate\Support\Carbon::parse($ev->sampled_at)->format('d M Y H:i') }}</td>
                        <td class="text-center fw-bold" style="color:#d97706;">{{ round($ev->avg_rtt, 1) }}ms</td>
                        <td class="text-center" style="color:#dc2626;">{{ round($ev->max_rtt, 1) }}ms</td>
                        <td class="pe-3"><span class="badge bg-{{ $ev->grade === 'Poor' ? 'danger' : 'warning' }}-subtle text-{{ $ev->grade === 'Poor' ? 'danger' : 'warning' }}">{{ $ev->grade }}</span></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const trend = @json($trend);
    if (typeof Chart === 'undefined' || !trend.labels.length) return;
    new Chart(document.getElementById('rttChart'), {
        type: 'line',
        data: {
            labels: trend.labels,
            datasets: [
                { label: 'Avg RTT (ms)', data: trend.avg, borderColor: '#2563eb', backgroundColor: 'rgba(37,99,235,.08)', fill: true, tension: .3 },
                { label: 'Max RTT (ms)', data: trend.max, borderColor: '#dc2626', backgroundColor: 'rgba(220,38,38,.05)', fill: false, tension: .3, borderDash: [4,4] },
            ]
        },
        options: { responsive: true, plugins: { legend: { position: 'bottom' } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'ms' } } } }
    });
});
</script>
@endpush