@extends('admin.layout.index')

@section('title', 'Error & Crash Monitoring')

@push('head-scripts')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <style>
        /* DataTables horizontal scroll */
        .dataTables_scroll {
            position: relative;
            width: 100% !important;
        }

        .dataTables_scrollHead {
            border-bottom: 2px solid #dee2e6;
            overflow: hidden;
        }

        .dataTables_scrollBody {
            max-height: 600px;
            overflow-y: auto !important;
            overflow-x: auto !important;
        }

        .dataTables_scrollBody thead {
            display: none;
        }

        .dataTables_scrollBody .table {
            margin-top: 0 !important;
            border-top: none !important;
            width: 100% !important;
        }

        .dataTables_wrapper .dataTables_scroll {
            clear: both;
        }

        .dataTables_wrapper {
            width: 100% !important;
        }

        .dataTables_scrollHeadInner,
        .dataTables_scrollHeadInner table {
            width: 100% !important;
        }

        #crashStatsTable,
        #apiErrorLogsTable {
            width: 100% !important;
            table-layout: auto;
        }

        #crashStatsTable th,
        #crashStatsTable td,
        #apiErrorLogsTable th,
        #apiErrorLogsTable td {
            white-space: nowrap;
        }

        @media (min-width: 992px) {
            .table-responsive {
                overflow-x: visible;
            }
            
            .dataTables_scrollBody {
                overflow-x: visible !important;
            }
            
            .dataTables_scroll {
                width: 100% !important;
            }
            
            .dataTables_scrollHeadInner {
                width: 100% !important;
            }
        }

        .dataTables_wrapper .dataTables_paginate {
            margin-top: 1rem;
        }

        .dataTables_wrapper .dataTables_info {
            margin-top: 1rem;
        }

        .dataTables_wrapper .dataTables_length {
            margin-bottom: 1rem;
        }
    </style>
@endpush

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <h4 class="mb-0">Error & Crash Monitoring</h4>
            <p class="text-muted mb-0">Device-level crash stats, API error logs, and server status overview.</p>
        </div>
    </div>

    <!-- Stats -->
    <div class="row g-3 mb-4">
        <div class="col-xl-6 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Crashes (7d)</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                <span class="counter-value" data-target="{{ $totalCrashes7d }}">0</span>
                            </h4>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-danger-subtle rounded fs-3">
                                <i class="ri-error-warning-line text-danger"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">API Errors (24h)</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                <span class="counter-value" data-target="{{ $apiErrors24h }}">0</span>
                            </h4>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-warning-subtle rounded fs-3">
                                <i class="ri-bug-line text-warning"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Crash Stats & Server Status -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0">Device-Level Crash Statistics</h5>
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" id="crashStatsFilter" style="width:140px;">
                            <option value="7">Last 7 days</option>
                            <option value="30">Last 30 days</option>
                            <option value="90">Last 90 days</option>
                        </select>
                        <a href="{{ route('admin.system-config.export-crash-stats') }}" class="btn btn-soft-primary btn-sm">
                            <i class="ri-download-line me-1"></i> Export
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle table-nowrap mb-0" id="crashStatsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Device Model</th>
                                    <th>OS Version</th>
                                    <th>Crashes</th>
                                    <th>Last Crash</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- API Error Logs -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0">API Error Logs</h5>
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" id="apiErrorsFilter" style="width:140px;">
                            <option value="all">All Errors</option>
                            <option value="critical">Critical</option>
                            <option value="high">High</option>
                            <option value="medium">Medium</option>
                            <option value="low">Low</option>
                        </select>
                        <a href="{{ route('admin.system-config.export-api-errors') }}" class="btn btn-soft-primary btn-sm">
                            <i class="ri-download-line me-1"></i> Export
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle table-nowrap mb-0" id="apiErrorLogsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Timestamp</th>
                                    <th>Endpoint</th>
                                    <th>Error Code</th>
                                    <th>Message</th>
                                    <th>Severity</th>
                                    <th>User ID</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script>
        $(document).ready(function() {
            let crashStatsTable;
            let apiErrorLogsTable;

            // Initialize Crash Stats DataTable
            function initCrashStatsTable(days = 7) {
                if (crashStatsTable) {
                    crashStatsTable.destroy();
                }

                crashStatsTable = $('#crashStatsTable').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    searching: true,
                    scrollX: true,
                    autoWidth: false,
                    ajax: {
                        url: '{{ route('admin.system-config.crash-stats-data') }}',
                        data: function(d) {
                            d.days = days;
                        }
                    },
                    columns: [{
                            data: 'device_model',
                            name: 'device_model'
                        },
                        {
                            data: 'os_version',
                            name: 'os_version'
                        },
                        {
                            data: 'crashes_badge',
                            name: 'crashes',
                            orderable: true,
                            searchable: false
                        },
                        {
                            data: 'last_crash_formatted',
                            name: 'last_crash'
                        }
                    ],
                    order: [
                        [2, 'desc']
                    ],
                    lengthChange: false,
                    pageLength: 10
                });
            }

            // Initialize API Error Logs DataTable
            function initApiErrorLogsTable(severity = 'all') {
                if (apiErrorLogsTable) {
                    apiErrorLogsTable.destroy();
                }

                apiErrorLogsTable = $('#apiErrorLogsTable').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    searching: true,
                    scrollX: true,
                    autoWidth: false,
                    ajax: {
                        url: '{{ route('admin.system-config.api-error-logs-data') }}',
                        data: function(d) {
                            d.severity = severity;
                        }
                    },
                    columns: [{
                            data: 'timestamp_formatted',
                            name: 'timestamp'
                        },
                        {
                            data: 'endpoint_formatted',
                            name: 'endpoint'
                        },
                        {
                            data: 'error_code_badge',
                            name: 'error_code',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'message_truncated',
                            name: 'message'
                        },
                        {
                            data: 'severity_badge',
                            name: 'severity',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'user_id_formatted',
                            name: 'user_id'
                        }
                    ],
                    order: [
                        [0, 'desc']
                    ],
                    lengthChange: false,
                    pageLength: 10
                });
            }

            // Initialize tables on page load
            initCrashStatsTable();
            initApiErrorLogsTable();

            // Filter crash stats by date range
            $('#crashStatsFilter').on('change', function() {
                const days = $(this).val();
                initCrashStatsTable(days);
            });

            // Filter API errors by severity
            $('#apiErrorsFilter').on('change', function() {
                const severity = $(this).val();
                initApiErrorLogsTable(severity);
            });
        });
    </script>
@endpush