@extends('layouts.app')

@section('title', 'Chi tiết sự cố - Cao Tải Server')
@section('page_title', 'Chi tiết sự cố - Cao Tải Server')

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('incidents.index', ['date' => $incident->recorded_at->copy()->setTimezone(config('app.display_timezone'))->format('Y-m-d')]) }}">
            Cao Tải Server ({{ $incident->recorded_at->copy()->setTimezone(config('app.display_timezone'))->format('d/m/Y') }})
        </a>
    </li>
    <li class="breadcrumb-item active">{{ $incident->server?->ip_address ?? '—' }}</li>
@endsection

@push('styles')
    <style>
        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            border-radius: 999px;
            padding: 0.4rem 1.1rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: #357abd;
            background: #eef3fa;
            border: 1px solid #dbe7f7;
            transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }
        .btn-back:hover,
        .btn-back:focus {
            background: #4a90e2;
            color: #fff;
            border-color: #4a90e2;
            box-shadow: 0 4px 10px rgba(74, 144, 226, 0.25);
            text-decoration: none;
        }
        .btn-back i { transition: transform 0.15s ease; }
        .btn-back:hover i { transform: translateX(-3px); }

        .incident-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;
        }
        .incident-info-bar .server-line { font-weight: 700; font-size: 1.05rem; }
        .incident-info-bar .badge { font-weight: 600; }
        .incident-info-bar .meta-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
        .incident-info-bar .meta-chip {
            display: inline-flex; align-items: center;
            background: rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            padding: 0.3rem 0.8rem;
            font-size: 0.82rem;
            font-weight: 500;
        }
        .incident-info-bar .meta-chip i { margin-right: 0.4rem; width: 14px; text-align: center; opacity: 0.9; }

        .section-card {
            border-radius: 0.75rem;
            border: 1px solid #eef0f4;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            padding: 1.25rem;
            background: #fff;
            margin-bottom: 1.5rem;
        }
        .section-card h3 { font-size: 1rem; font-weight: 600; color: #1f2d3d; margin-bottom: 1rem; }

        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;
        }
        .metric-cell { text-align: center !important; vertical-align: middle !important; font-variant-numeric: tabular-nums; }
        .cmdline-cell { font-family: monospace; font-size: 0.82rem; word-break: break-all; }

        .log-card { border: 1px solid #eef0f4; border-radius: 0.6rem; margin-bottom: 0.9rem; overflow: hidden; }
        .log-card-header {
            display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
            padding: 0.65rem 0.9rem;
            background: #f8fafc;
            cursor: pointer;
            user-select: none;
        }
        .log-card-header .log-path { font-weight: 700; color: #1f2d3d; font-family: monospace; font-size: 0.85rem; word-break: break-all; }
        .log-card-header .fa-chevron-down { color: #6c757d; opacity: 0.7; transition: transform 0.2s; }
        .log-card-header.collapsed .fa-chevron-down { transform: rotate(-90deg); }
        .log-card-body { background: #1f2d3d; max-height: 420px; overflow: auto; }
        .log-card-body pre {
            color: #d7e3f0;
            font-size: 0.8rem;
            padding: 0.9rem 1.1rem;
            margin: 0;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .log-empty { padding: 1rem; color: #6c757d; text-align: center; }
    </style>
@endpush

@section('content')
    @php
        $displayTz = config('app.display_timezone');
        $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'];
        $breached = (array) $incident->breached_metrics;
    @endphp

    <a href="{{ route('incidents.index', ['date' => $incident->recorded_at->copy()->setTimezone($displayTz)->format('Y-m-d')]) }}" class="btn-back mb-3">
        <i class="fas fa-arrow-left"></i> Quay lại
    </a>

    <div class="incident-info-bar">
        <div class="server-line">
            <i class="fas fa-server mr-1"></i> {{ $incident->server?->domain?->name ?? '—' }} - {{ $incident->server?->ip_address ?? '—' }}
            <span class="badge {{ $statusBadge[$incident->status] ?? 'badge-secondary' }} ml-2">
                {{ $statusLabel[$incident->status] ?? $incident->status }}
            </span>
        </div>
        <div class="meta-chips">
            <span class="meta-chip"><i class="far fa-clock"></i> {{ $incident->recorded_at->copy()->setTimezone($displayTz)->format('d/m/Y H:i:s') }}</span>
            <span class="meta-chip"><i class="fas fa-microchip"></i> CPU {{ $incident->cpu_usage_pct }}%{{ in_array('cpu', $breached, true) ? ' ⚠️' : '' }}</span>
            <span class="meta-chip"><i class="fas fa-memory"></i> RAM {{ $incident->ram_usage_pct }}%{{ in_array('ram', $breached, true) ? ' ⚠️' : '' }}</span>
            <span class="meta-chip"><i class="fas fa-hdd"></i> DISK {{ $incident->disk_usage_pct }}%{{ in_array('disk', $breached, true) ? ' ⚠️' : '' }}</span>
        </div>
    </div>

    <div class="section-card">
        <h3><i class="fas fa-list-ol text-danger mr-1"></i> Top tiến trình tốn tài nguyên ({{ $processes->count() }})</h3>

        @if ($processes->isEmpty())
            <div class="log-empty">Không có dữ liệu tiến trình.</div>
        @else
            <div class="table-responsive">
                <table class="table table-bordered table-sm mb-0">
                    <thead>
                        <tr>
                            <th>PID</th>
                            <th>Tên tiến trình</th>
                            <th>User</th>
                            <th>Command line</th>
                            <th class="text-center">CPU %</th>
                            <th class="text-center">MEM %</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($processes as $process)
                            <tr>
                                <td class="align-middle">{{ $process->pid }}</td>
                                <td class="align-middle font-weight-bold">{{ $process->name }}</td>
                                <td class="align-middle">{{ $process->username ?? '—' }}</td>
                                <td class="cmdline-cell align-middle">{{ $process->cmdline ?? '—' }}</td>
                                <td class="metric-cell">{{ number_format($process->cpu_pct, 1) }}%</td>
                                <td class="metric-cell">{{ number_format($process->mem_pct, 1) }}%</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <div class="section-card">
        <h3><i class="fas fa-file-alt text-primary mr-1"></i> Log liên quan ({{ $logs->count() }} file)</h3>

        @if ($logs->isEmpty())
            <div class="log-empty">Không có dữ liệu log.</div>
        @else
            @foreach ($logs as $i => $log)
                @php $bodyId = 'log-body-'.$i; @endphp
                <div class="log-card">
                    <div class="log-card-header" data-toggle="collapse" data-target="#{{ $bodyId }}" aria-expanded="true">
                        <div>
                            <div class="log-path"><i class="fas fa-file-code mr-1"></i>{{ $log->path }}</div>
                        </div>
                        <div class="d-flex align-items-center">
                            @if ($log->error)
                                <span class="badge badge-danger mr-2">Lỗi đọc: {{ $log->error }}</span>
                            @else
                                <span class="badge badge-light mr-2">{{ $log->line_count }} dòng</span>
                                @if ($log->truncated)
                                    <span class="badge badge-warning mr-2">Đã cắt bớt (tail)</span>
                                @endif
                            @endif
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div id="{{ $bodyId }}" class="collapse show">
                        <div class="log-card-body">
                            @if ($log->error)
                                <div class="log-empty" style="color: #d7e3f0;">Không đọc được file này ({{ $log->error }}).</div>
                            @elseif ($log->line_count === 0)
                                <div class="log-empty" style="color: #d7e3f0;">File trống.</div>
                            @else
                                <pre>{{ $log->content }}</pre>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    </div>
@endsection

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