@extends('layouts.app')

@section('title', 'Dashboard tổng quan')
@section('page_title', 'Dashboard tổng quan')

@section('breadcrumb')
    <li class="breadcrumb-item active">Tổng quan</li>
@endsection

@push('styles')
    <style>
        /* === Info bar (date + legend) === */
        .info-bar {
            background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
            color: #fff;
            border-radius: 0.75rem;
            padding: 1rem 1.5rem;
            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
            margin-bottom: 1.5rem;
        }
        .info-bar .date-block { font-size: 1.05rem; }
        .info-bar .date-value { font-weight: 700; font-size: 1.25rem; }
        .info-bar .legend { font-size: 0.85rem; opacity: 0.95; }
        .info-bar .legend .badge {
            padding: 0.25rem 0.5rem;
            font-weight: 600;
            font-size: 0.78rem;
        }

        /* === Domain card === */
        .domain-card {
            border-radius: 0.75rem;
            border: 1px solid #eef0f4;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        .domain-card-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 1rem 1.5rem;
            background: linear-gradient(to right, #f7faff 0%, #fff 100%);
            border-bottom: 1px solid #eef0f4;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s ease;
        }
        .domain-card-header:hover { background: linear-gradient(to right, #eef5ff 0%, #fafcff 100%); }
        .domain-card-header .domain-title {
            display: flex; align-items: center; gap: 0.75rem;
            font-size: 1.1rem;
            font-weight: 600;
            color: #1f2d3d;
            margin: 0;
        }
        .domain-card-header .domain-globe {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, #4a90e2, #357abd);
            color: #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
        }
        .domain-card-header .ip-count {
            background: #eef3fa;
            color: #1a3a5e;
            padding: 0.25rem 0.65rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 0.5rem;
        }
        .domain-card-header .fa-chevron-down {
            color: #6c757d;
            transition: transform 0.2s;
        }
        .domain-card-header.collapsed .fa-chevron-down {
            transform: rotate(-90deg);
        }

        /* === Table === */
        .metric-cell {
            text-align: center !important;
            vertical-align: middle !important;
            font-weight: 600;
            min-width: 64px;
            font-size: 0.85rem;
        }
        .metric-cell.bg-success { color: #fff; }
        .metric-cell.bg-warning { color: #1f2d3d; }
        .metric-cell.bg-danger  { color: #fff; }
        .metric-cell.bg-empty {
            color: #d0d5db;
            background-color: #fafbfc;
            font-weight: 400;
        }
        .metric-label {
            font-weight: 600;
            font-size: 0.82rem;
            background-color: #f4f6f9;
            text-align: left !important;
            padding-left: 1.25rem !important;
            vertical-align: middle !important;
            width: 84px;
            color: #495057;
            letter-spacing: 0.03em;
        }
        td.ip-cell {
            background-color: #eef3fa !important;
            border-left: 4px solid #4a90e2 !important;
            color: #1a3a5e;
            font-size: 0.98em;
            padding-left: 1rem !important;
            font-weight: 600;
        }
        tbody tr.ip-block-alt > td.metric-label { background-color: #eceff3; }
        tbody tr.ip-block-alt > td.ip-cell { background-color: #e3ebf4 !important; }
        tbody tr.ip-block-alt > td.metric-cell.bg-empty { background-color: #f3f4f6; }
        tr.ip-group-end > td { border-bottom: 2px solid #cfd4da !important; }

        /* Header styling */
        thead th {
            background-color: #f8fafc !important;
            color: #495057;
            font-size: 0.78rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 2px solid #dee2e6 !important;
        }

        /* Current time column highlight */
        thead th.current-slot {
            background: linear-gradient(180deg, #4a90e2 0%, #357abd 100%) !important;
            color: #fff !important;
            position: relative;
        }
        thead th.current-slot::after {
            content: '';
            position: absolute;
            bottom: -2px; left: 50%;
            transform: translateX(-50%);
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #357abd;
        }
        td.current-slot-col {
            box-shadow: inset 2px 0 0 rgba(74, 144, 226, 0.3),
                        inset -2px 0 0 rgba(74, 144, 226, 0.3);
        }

        /* Custom thin scrollbar cho bảng */
        .domain-card .table-responsive {
            scrollbar-width: thin;
            scrollbar-color: #c1c8d1 #f1f3f5;
        }
        .domain-card .table-responsive::-webkit-scrollbar {
            height: 8px;
            width: 8px;
        }
        .domain-card .table-responsive::-webkit-scrollbar-track {
            background: #f1f3f5;
            border-radius: 4px;
        }
        .domain-card .table-responsive::-webkit-scrollbar-thumb {
            background: #c1c8d1;
            border-radius: 4px;
        }
        .domain-card .table-responsive::-webkit-scrollbar-thumb:hover {
            background: #a0a8b2;
        }

        /* Empty state */
        .empty-overview {
            text-align: center;
            padding: 4rem 1rem;
            color: #6c757d;
        }
        .empty-overview i { font-size: 3rem; color: #d0d5db; margin-bottom: 1rem; }

        /* === Chart view === */
        .chart-server-title {
            display: flex; align-items: center; gap: 0.75rem;
            font-weight: 600;
            color: #1f2d3d;
            margin-bottom: 0.75rem;
            padding: 0.5rem 0;
        }
        .chart-server-icon {
            width: 32px; height: 32px;
            background: linear-gradient(135deg, #4a90e2, #357abd);
            color: #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem;
        }
        .chart-wrapper {
            position: relative;
            height: 280px;
        }
    </style>
@endpush

@section('content')
    @php
        // Cột đang là "hiện tại" — index = giờ*2 + (phút >= 30 ? 1 : 0)
        $displayTz = config('app.display_timezone');
        $now = \Carbon\Carbon::now($displayTz);
        $currentSlotIndex = $now->isSameDay($date)
            ? $now->hour * 2 + ($now->minute >= 30 ? 1 : 0)
            : -1;
    @endphp

    {{-- Info bar --}}
    <div class="info-bar d-flex justify-content-between align-items-center flex-wrap">
        <div class="date-block">
            <i class="far fa-calendar-alt mr-2"></i>
            Dữ liệu hôm nay
            <span class="date-value mx-1">{{ $date->format('d/m/Y') }}</span>
            <span style="opacity: 0.85;">— {{ $date->isoFormat('dddd') }}</span>
        </div>
        <div class="legend">
            Thông số &lt; 60 <span class="badge badge-success">xanh</span>
            • 60 – 79 <span class="badge badge-warning">vàng</span>
            • ≥ 80 <span class="badge badge-danger">đỏ</span>
        </div>
    </div>

    {{-- Domain cards --}}
    @if (empty($domains))
        <div class="empty-overview">
            <i class="fas fa-inbox"></i>
            <h5>Chưa có domain nào có IP để hiển thị.</h5>
            <a href="{{ route('domains.create') }}" class="btn btn-primary btn-sm mt-2">
                <i class="fas fa-plus"></i> Thêm domain
            </a>
        </div>
    @else
        @php
            $metricRows = [
                ['label' => 'RAM',  'field' => 'ram_usage_pct'],
                ['label' => 'CPU',  'field' => 'cpu_usage_pct'],
                ['label' => 'DISK', 'field' => 'disk_usage_pct'],
            ];

            // slotKeys tính 1 lần duy nhất, dùng lại cho cả chart data lẫn bảng dưới — tránh gọi
            // Carbon::format() lặp lại nhiều lần cho cùng 1 slot (trước đây tới 4 lần/slot/server).
            $slotKeys = array_map(fn ($s) => $s->format('Y-m-d H:i:s'), $slots);
            $chartLabels = array_map(fn ($s) => $s->format('H:i'), $slots);
            $chartData = [];
            foreach ($domains as $item) {
                $domainItem = ['domainId' => $item['domain']->id, 'servers' => []];
                foreach ($item['servers'] as $server) {
                    $ram = $cpu = $disk = [];
                    foreach ($slotKeys as $slotKey) {
                        $key = $server->id.'|'.$slotKey;
                        $metric = $item['metrics']->get($key);
                        $ram[] = $metric !== null ? $metric['ram_usage_pct'] : null;
                        $cpu[] = $metric !== null ? $metric['cpu_usage_pct'] : null;
                        $disk[] = $metric !== null ? $metric['disk_usage_pct'] : null;
                    }
                    $domainItem['servers'][] = [
                        'id' => $server->id,
                        'ram' => $ram,
                        'cpu' => $cpu,
                        'disk' => $disk,
                    ];
                }
                $chartData[] = $domainItem;
            }
        @endphp

        <div class="d-flex justify-content-end mb-2">
            <div class="btn-group btn-group-sm" role="group" aria-label="View mode">
                <button type="button" id="view-table-btn" class="btn btn-primary">
                    <i class="fas fa-table"></i> Bảng
                </button>
                <button type="button" id="view-chart-btn" class="btn btn-outline-primary">
                    <i class="fas fa-chart-line"></i> Biểu đồ
                </button>
            </div>
        </div>

        @foreach ($domains as $item)
            @php
                $domain = $item['domain'];
                $servers = $item['servers'];
                $metrics = $item['metrics'];
                $collapseId = 'domain-'.$domain->id;
            @endphp

            <div class="domain-card">
                <div class="domain-card-header" data-toggle="collapse" data-target="#{{ $collapseId }}" aria-expanded="true">
                    <h3 class="domain-title">
                        <span class="domain-globe"><i class="fas fa-globe"></i></span>
                        {{ $domain->name }}
                        <span class="ip-count">{{ $servers->count() }} IP</span>
                    </h3>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div id="{{ $collapseId }}" class="collapse show">
                    <div class="table-responsive view-table">
                        <table class="table table-bordered table-sm mb-0">
                            <thead>
                                <tr>
                                    <th class="align-middle" style="min-width: 160px">IP</th>
                                    <th class="align-middle" style="width: 84px; padding-left: 1.25rem;">Chỉ số</th>
                                    @foreach ($chartLabels as $slotIdx => $label)
                                        <th class="text-center align-middle {{ $slotIdx === $currentSlotIndex ? 'current-slot' : '' }}">
                                            {{ $label }}
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($servers as $server)
                                    @foreach ($metricRows as $i => $row)
                                        <tr @class([
                                            'ip-group-end' => $i === count($metricRows) - 1,
                                            'ip-block-alt' => $loop->parent->iteration % 2 === 0,
                                        ])>
                                            @if ($i === 0)
                                                <td rowspan="3" class="align-middle ip-cell">
                                                    {{ $server->ip_address }}
                                                </td>
                                            @endif
                                            <td class="metric-label text-center align-middle">{{ $row['label'] }}</td>
                                            @foreach ($slotKeys as $slotIdx => $slotKey)
                                                @php
                                                    $key = $server->id.'|'.$slotKey;
                                                    $metric = $metrics->get($key);
                                                    $value = $metric !== null ? $metric[$row['field']] : null;

                                                    $color = 'bg-empty';
                                                    if ($value !== null) {
                                                        $color = $value < 60 ? 'bg-success'
                                                            : ($value < 80 ? 'bg-warning' : 'bg-danger');
                                                    }
                                                @endphp
                                                <td class="metric-cell {{ $color }} align-middle {{ $slotIdx === $currentSlotIndex ? 'current-slot-col' : '' }}">
                                                    {{ $value !== null ? $value.'%' : '—' }}
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="view-chart p-3" style="display: none;">
                        <div class="row">
                            @foreach ($servers as $server)
                                <div class="col-12 mb-4">
                                    <div class="chart-server-title">
                                        <span class="chart-server-icon"><i class="fas fa-server"></i></span>
                                        {{ $server->ip_address }}
                                    </div>
                                    <div class="chart-wrapper">
                                        <canvas id="chart-{{ $domain->id }}-{{ $server->id }}"></canvas>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    @endif
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
    @if (! empty($domains))
        <script>
            const chartLabels = @json($chartLabels ?? []);
            const chartData = @json($chartData ?? []);
        </script>
    @endif
    <script>
        $(function () {
            $('.domain-card-header').on('click', function () {
                $(this).toggleClass('collapsed');
            });

            // ==== Toggle Bảng / Biểu đồ ====
            // Nhiều domain × nhiều server → khởi tạo hết Chart.js cùng lúc sẽ đơ trình duyệt.
            // Dùng IntersectionObserver: chỉ new Chart() cho canvas đang/sắp lọt vào khung nhìn,
            // các canvas còn lại chỉ khởi tạo khi user cuộn tới.
            var chartsInitialized = false;
            var chartObserver = null;

            function findServerChartData(domainId, serverId) {
                var domain = chartData.find(function (d) { return d.domainId === domainId; });
                if (!domain) return null;
                return domain.servers.find(function (s) { return s.id === serverId; }) || null;
            }

            function initChartCanvas(canvas) {
                var parts = canvas.id.split('-'); // "chart", domainId, serverId
                var server = findServerChartData(parseInt(parts[1], 10), parseInt(parts[2], 10));
                if (!server) return;

                new Chart(canvas, {
                    type: 'line',
                    data: {
                        labels: chartLabels,
                        datasets: [
                            {
                                label: 'RAM',  data: server.ram,
                                borderColor: '#e74c3c', backgroundColor: 'rgba(231,76,60,0.08)',
                                borderWidth: 2, tension: 0.3, spanGaps: true, pointRadius: 2,
                            },
                            {
                                label: 'CPU',  data: server.cpu,
                                borderColor: '#3498db', backgroundColor: 'rgba(52,152,219,0.08)',
                                borderWidth: 2, tension: 0.3, spanGaps: true, pointRadius: 2,
                            },
                            {
                                label: 'DISK', data: server.disk,
                                borderColor: '#27ae60', backgroundColor: 'rgba(39,174,96,0.08)',
                                borderWidth: 2, tension: 0.3, spanGaps: true, pointRadius: 2,
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: { mode: 'index', intersect: false },
                        plugins: {
                            legend: { position: 'top' },
                            tooltip: {
                                callbacks: {
                                    label: function (ctx) {
                                        var v = ctx.parsed.y;
                                        return ctx.dataset.label + ': ' + (v === null ? '—' : v + '%');
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                min: 0, max: 100,
                                ticks: { stepSize: 10, callback: function (v) { return v + '%'; } },
                                title: { display: true, text: 'Sử dụng (%)' }
                            },
                            x: {
                                ticks: { autoSkip: false, maxRotation: 45, minRotation: 0, font: { size: 10 } }
                            }
                        }
                    }
                });
            }

            function renderCharts() {
                if (chartsInitialized || typeof chartData === 'undefined') return;
                chartsInitialized = true;

                var canvases = document.querySelectorAll('.view-chart canvas');

                if (typeof IntersectionObserver === 'undefined') {
                    // Fallback cho browser cũ không hỗ trợ — khởi tạo hết như trước.
                    canvases.forEach(initChartCanvas);
                    return;
                }

                chartObserver = new IntersectionObserver(function (entries) {
                    entries.forEach(function (entry) {
                        if (!entry.isIntersecting) return;
                        chartObserver.unobserve(entry.target);
                        initChartCanvas(entry.target);
                    });
                }, { rootMargin: '300px 0px' });

                canvases.forEach(function (canvas) {
                    chartObserver.observe(canvas);
                });
            }

            var VIEW_STORAGE_KEY = 'overview-view-mode';

            function showChartView() {
                $('.view-table').hide();
                $('.view-chart').show();
                $('#view-table-btn').removeClass('btn-primary').addClass('btn-outline-primary');
                $('#view-chart-btn').removeClass('btn-outline-primary').addClass('btn-primary');
                renderCharts();
            }

            function showTableView() {
                $('.view-chart').hide();
                $('.view-table').show();
                $('#view-chart-btn').removeClass('btn-primary').addClass('btn-outline-primary');
                $('#view-table-btn').removeClass('btn-outline-primary').addClass('btn-primary');
            }

            $('#view-chart-btn').on('click', function () {
                localStorage.setItem(VIEW_STORAGE_KEY, 'chart');
                showChartView();
            });

            $('#view-table-btn').on('click', function () {
                localStorage.setItem(VIEW_STORAGE_KEY, 'table');
                showTableView();
            });

            // Khôi phục tab user đã chọn lần trước (nếu nút tồn tại — tức có data)
            if ($('#view-chart-btn').length && localStorage.getItem(VIEW_STORAGE_KEY) === 'chart') {
                showChartView();
            }
        });
    </script>
@endpush