@extends('layouts.app')

@section('title', 'Tổng Quan API Health')
@section('page_title', 'Tổng Quan API Health')

@push('styles')
    <style>
        /* === Info bar === */
        .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 .info-value { font-weight: 700; font-size: 1.1rem; }
        .info-bar .legend { font-size: 0.85rem; opacity: 0.95; line-height: 1.6; }
        .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 .api-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 === */
        td.ip-cell {
            background-color: #eef3fa !important;
            border-left: 4px solid #4a90e2 !important;
            color: #1a3a5e;
            font-size: 0.95em;
            font-weight: 600;
            white-space: nowrap;
            vertical-align: middle !important;
        }
        .api-url { font-size: 0.85em; font-weight: 600; word-break: break-all; }
        .api-url .badge-off { margin-left: 0.4rem; }

        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;
        }

        .metric-cell {
            text-align: center !important;
            vertical-align: middle !important;
            font-weight: 700;
            min-width: 90px;
        }
        .metric-cell.bg-success { color: #fff; }
        .metric-cell.bg-warning { color: #1f2d3d; }
        .metric-cell.bg-danger  { color: #fff; }
        .metric-cell.bg-neutral { background-color: #eef3fa; color: #1a3a5e; }
        .metric-cell.bg-empty {
            color: #d0d5db;
            background-color: #fafbfc;
            font-weight: 400;
        }

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

        /* === Nút Chi tiết === */
        .btn-detail {
            border-radius: 999px;
            font-weight: 600;
            font-size: 0.78rem;
            padding: 0.3rem 0.85rem;
        }
    </style>
@endpush

@section('content')
    @php
        $methodBadgeClass = [
            'GET' => 'badge-success',
            'POST' => 'badge-primary',
            'PUT' => 'badge-warning',
            'PATCH' => 'badge-warning',
            'DELETE' => 'badge-danger',
        ];
    @endphp

    {{-- Bộ lọc ngày --}}
    <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('api-health-stats') }}">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 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 d-flex justify-content-between align-items-start flex-wrap">
        <div>
            <i class="fas fa-heartbeat mr-2"></i>
            Dữ liệu ngày <span class="info-value">{{ $date->format('d/m/Y') }}</span>
        </div>
        <div class="legend text-right">
            <div>
                Tỉ lệ thành công &ge; 99 <span class="badge badge-success">xanh</span>
                • 90 – 98.9 <span class="badge badge-warning">vàng</span>
                • &lt; 90 <span class="badge badge-danger">đỏ</span>
            </div>
            <div>
                Avg &lt; 300ms <span class="badge badge-success">xanh</span>
                • 300 – 999 <span class="badge badge-warning">vàng</span>
                • &ge; 1000 <span class="badge badge-danger">đỏ</span>
            </div>
        </div>
    </div>

    @if (empty($domains))
        <div class="empty-overview">
            <i class="fas fa-plug"></i>
            <h5>Chưa có API nào để hiển thị.</h5>
            <a href="{{ route('apis.create') }}" class="btn btn-primary btn-sm mt-2">
                <i class="fas fa-plus"></i> Thêm API
            </a>
        </div>
    @else
        @foreach ($domains as $domainItem)
            @php
                $domain = $domainItem['domain'];
                $apis = $domainItem['apis'];
                $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="api-count">{{ count($apis) }} API</span>
                    </h3>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div id="{{ $collapseId }}" class="collapse show">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm mb-0">
                            <thead>
                                <tr>
                                    <th style="min-width: 140px">IP</th>
                                    <th style="min-width: 220px">API</th>
                                    <th class="text-center">Tổng check</th>
                                    <th class="text-center">Tỉ lệ thành công</th>
                                    <th class="text-center">Avg (ms)</th>
                                    <th class="text-center">Min / Max (ms)</th>
                                    <th class="text-center" style="width: 100px">Thao tác</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($apis as $item)
                                    @php
                                        $api = $item['api'];
                                        $server = $item['server'];
                                        $stats = $item['stats'];

                                        $totalChecks = $stats->total_checks ?? 0;
                                        $successChecks = $stats->success_checks ?? 0;
                                        $successRate = $totalChecks > 0 ? round($successChecks / $totalChecks * 100, 1) : null;
                                        $avgMs = $stats->avg_response_time_ms ?? null;
                                        $minMs = $stats->min_response_time_ms ?? null;
                                        $maxMs = $stats->max_response_time_ms ?? null;

                                        $rateColor = 'bg-empty';
                                        if ($successRate !== null) {
                                            $rateColor = $successRate >= 99 ? 'bg-success'
                                                : ($successRate >= 90 ? 'bg-warning' : 'bg-danger');
                                        }

                                        $avgColor = 'bg-empty';
                                        if ($avgMs !== null) {
                                            $avgColor = $avgMs < 300 ? 'bg-success'
                                                : ($avgMs < 1000 ? 'bg-warning' : 'bg-danger');
                                        }
                                    @endphp
                                    <tr>
                                        <td class="ip-cell">{{ $server->ip_address }}</td>
                                        <td class="align-middle">
                                            <div class="api-url">
                                                <span class="badge {{ $methodBadgeClass[$api->method] ?? 'badge-secondary' }}">
                                                    {{ $api->method }}
                                                </span>
                                                {{ $api->url }}
                                                @if (! $api->status)
                                                    <span class="badge badge-light badge-off">Đã tắt</span>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="metric-cell {{ $totalChecks > 0 ? 'bg-neutral' : 'bg-empty' }}">
                                            {{ $totalChecks > 0 ? $totalChecks : '—' }}
                                        </td>
                                        <td class="metric-cell {{ $rateColor }}">
                                            {{ $successRate !== null ? $successRate.'%' : '—' }}
                                        </td>
                                        <td class="metric-cell {{ $avgColor }}">
                                            {{ $avgMs !== null ? round($avgMs).' ms' : '—' }}
                                        </td>
                                        <td class="metric-cell {{ $minMs !== null ? 'bg-neutral' : 'bg-empty' }}">
                                            {{ $minMs !== null ? round($minMs).' / '.round($maxMs).' ms' : '—' }}
                                        </td>
                                        <td class="text-center align-middle">
                                            @if ($totalChecks > 0)
                                                <a href="{{ route('api-health-stats.day', [$api, $date->format('Y-m-d')]) }}"
                                                   class="btn btn-primary btn-detail">
                                                    <i class="fas fa-chart-line"></i> Chi tiết
                                                </a>
                                            @else
                                                <button type="button" class="btn btn-secondary btn-detail" disabled>
                                                    <i class="fas fa-chart-line"></i> Chi tiết
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endforeach
    @endif
@endsection

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