@extends('layouts.app')

@section('title', 'Cao Tải Server')
@section('page_title', 'Cao Tải Server')

@push('styles')
    <style>
        .info-bar {
            background: linear-gradient(135deg, #e2685a 0%, #c0392b 100%);
            color: #fff;
            border-radius: 0.75rem;
            padding: 1rem 1.5rem;
            box-shadow: 0 4px 12px rgba(192, 57, 43, 0.25);
            margin-bottom: 1.5rem;
        }
        .info-bar .info-value { font-weight: 700; font-size: 1.1rem; }

        .top-servers-card {
            border-radius: 0.75rem;
            border: 1px solid #eef0f4;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            padding: 1rem 1.25rem;
            margin-bottom: 1.5rem;
            background: #fff;
        }
        .top-servers-card h3 { font-size: 1rem; font-weight: 600; color: #1f2d3d; margin-bottom: 0.85rem; }
        .top-server-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0.4rem 0; border-bottom: 1px dashed #eef0f4;
        }
        .top-server-row:last-child { border-bottom: none; }
        .top-server-row .rank {
            display: inline-flex; align-items: center; justify-content: center;
            width: 22px; height: 22px; border-radius: 50%;
            background: #fdecea; color: #c0392b; font-size: 0.75rem; font-weight: 700;
            margin-right: 0.6rem;
        }

        /* === Domain card (khối ngoài) === */
        .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, #fdf3f2 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, #fbe6e4 0%, #fffaf9 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, #e2685a, #c0392b);
            color: #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
        }
        .domain-card-header .server-count {
            background: #fdecea;
            color: #7c231a;
            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); }

        /* === Server block (khối con theo IP) === */
        .server-block { border-top: 1px solid #eef0f4; }
        .server-block:first-child { border-top: none; }
        .server-block-header {
            display: flex; align-items: center; gap: 0.6rem;
            padding: 0.75rem 1.5rem;
            background: #eef3fa;
        }
        .server-block-header .ip-chip {
            display: inline-flex; align-items: center; gap: 0.4rem;
            color: #1a3a5e;
            font-weight: 700;
            font-size: 0.92rem;
        }

        /* Khung bảng cuộn dọc khi 1 IP có nhiều sự cố, header dính lại khi cuộn. */
        .incident-table-wrap {
            max-height: 420px;
            overflow-y: auto;
        }

        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;
            vertical-align: middle;
        }
        .incident-table-wrap thead th {
            position: sticky;
            top: 0;
            z-index: 2;
        }

        .metric-cell { text-align: center !important; vertical-align: middle !important; font-variant-numeric: tabular-nums; }
        .metric-cell.breached { font-weight: 700; color: #c0392b; }

        .badge-status { font-weight: 600; font-size: 0.8rem; padding: 0.35rem 0.7rem; }

        .btn-detail {
            border-radius: 999px;
            font-weight: 600;
            font-size: 0.78rem;
            padding: 0.3rem 0.85rem;
        }

        .empty-overview { text-align: center; padding: 4rem 1rem; color: #6c757d; }
        .empty-overview i { font-size: 3rem; color: #d0d5db; margin-bottom: 1rem; }
    </style>
@endpush

@section('content')
    @php
        $statusBadge = ['started' => 'badge-danger', 'ongoing' => 'badge-warning', 'recovered' => 'badge-success'];
        $statusLabel = ['started' => 'Mới xảy ra', 'ongoing' => 'Đang tiếp diễn', 'recovered' => 'Đã hồi phục'];
        $metricLabel = ['cpu' => 'CPU', 'ram' => 'RAM', 'disk' => 'DISK'];
        $displayTz = config('app.display_timezone');
        $hasAnyIncident = ! empty($domainGroups);
    @endphp

    {{-- Bộ lọc --}}
    <div class="card card-outline card-primary">
        <div class="card-header">
            <h3 class="card-title">Bộ lọc</h3>
        </div>
        <form method="GET" action="{{ route('incidents.index') }}">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 col-sm-6 form-group mb-0">
                        <label for="date">Ngày</label>
                        <select name="date" id="date" class="form-control">
                            @foreach ($validDates as $vd)
                                <option value="{{ $vd->format('Y-m-d') }}" {{ $vd->isSameDay($date) ? 'selected' : '' }}>
                                    {{ $vd->format('d/m/Y') }}{{ $vd->isToday() ? ' — Hôm nay' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> Xem
                </button>
            </div>
        </form>
    </div>

    {{-- Info bar --}}
    <div class="info-bar">
        <i class="fas fa-fire mr-2"></i>
        Ngày <span class="info-value">{{ $date->format('d/m/Y') }}</span>
    </div>

    @if ($hasAnyIncident && ! empty($topServers))
        <div class="top-servers-card">
            <h3><i class="fas fa-ranking-star mr-1"></i> Server cao tải nhiều nhất trong ngày</h3>
            @foreach ($topServers as $i => $ts)
                <div class="top-server-row">
                    <div><span class="rank">{{ $i + 1 }}</span>{{ $ts['label'] }}</div>
                </div>
            @endforeach
        </div>
    @endif

    @if (! $hasAnyIncident)
        <div class="empty-overview">
            <i class="fas fa-check-circle text-success"></i>
            <h5>Không có sự cố cao tải nào trong ngày này.</h5>
        </div>
    @else
        @foreach ($domainGroups as $domainGroup)
            @php
                $domain = $domainGroup['domain'];
                $servers = $domainGroup['servers'];
                $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="server-count">{{ count($servers) }} IP</span>
                    </h3>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div id="{{ $collapseId }}" class="collapse show">
                    @foreach ($servers as $serverItem)
                        @php
                            $server = $serverItem['server'];
                            $serverIncidents = $serverItem['incidents'];
                        @endphp
                        <div class="server-block">
                            <div class="server-block-header">
                                <span class="ip-chip"><i class="fas fa-server"></i> {{ $server->ip_address }}</span>
                            </div>
                            <div class="table-responsive incident-table-wrap">
                                <table class="table table-bordered table-sm mb-0">
                                    <thead>
                                        <tr>
                                            <th>Thời gian</th>
                                            <th class="text-center">Trạng thái</th>
                                            <th class="text-center">Vượt ngưỡng</th>
                                            <th class="text-center">CPU</th>
                                            <th class="text-center">RAM</th>
                                            <th class="text-center">DISK</th>
                                            <th class="text-center" style="width: 100px">Thao tác</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($serverIncidents as $incident)
                                            @php
                                                $breached = (array) $incident->breached_metrics;
                                                $hasDetail = $incident->status !== 'recovered'
                                                    && ($incident->processes_count > 0 || $incident->logs_count > 0);
                                            @endphp
                                            <tr>
                                                <td class="align-middle">{{ $incident->recorded_at->copy()->setTimezone($displayTz)->format('d/m/Y H:i') }}</td>
                                                <td class="text-center align-middle">
                                                    <span class="badge badge-status {{ $statusBadge[$incident->status] ?? 'badge-secondary' }}">
                                                        {{ $statusLabel[$incident->status] ?? $incident->status }}
                                                    </span>
                                                </td>
                                                <td class="text-center align-middle">
                                                    @foreach ($breached as $metric)
                                                        <span class="badge badge-danger">{{ $metricLabel[$metric] ?? $metric }}</span>
                                                    @endforeach
                                                </td>
                                                <td class="metric-cell {{ in_array('cpu', $breached, true) ? 'breached' : '' }}">{{ $incident->cpu_usage_pct }}%</td>
                                                <td class="metric-cell {{ in_array('ram', $breached, true) ? 'breached' : '' }}">{{ $incident->ram_usage_pct }}%</td>
                                                <td class="metric-cell {{ in_array('disk', $breached, true) ? 'breached' : '' }}">{{ $incident->disk_usage_pct }}%</td>
                                                <td class="text-center align-middle">
                                                    @if ($hasDetail)
                                                        <a href="{{ route('incidents.show', $incident) }}" class="btn btn-primary btn-detail">
                                                            <i class="fas fa-search"></i> Chi tiết
                                                        </a>
                                                    @else
                                                        <button type="button" class="btn btn-secondary btn-detail" disabled>
                                                            <i class="fas fa-search"></i> Chi tiết
                                                        </button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    @endif
@endsection

@push('scripts')
    <script>
        $(function () {
            $('.domain-card-header').on('click', function () {
                $(this).toggleClass('collapsed');
            });
        });
    </script>
@endpush