@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.tablecss')
    <style>
        .tx-11 {
            font-size: 11px;
        }

        .tx-12 {
            font-size: 12px;
        }

        .tx-13 {
            font-size: 13px;
        }

        .tx-30 {
            font-size: 30px;
        }

        .tx-50 {
            font-size: 50px;
        }

        .sticky-top {
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .stat-row {
            cursor: pointer;
            transition: background 0.2s;
        }

        .stat-row:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        #toggleIcon {
            transition: transform 0.3s ease;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">سجلات الدخول</h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ الأمان</span>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content align-items-center">
            <div class="pe-1 mb-xl-0 me-3">
                <span class="badge bg-success-transparent tx-13 me-2">
                    <x-lucide-activity class="me-1" width="20" height="20" />
                    نشط الآن: {{ $stats['active'] ?? 0 }}
                </span>
                <span class="badge bg-primary-transparent tx-13">
                    <x-lucide-calendar class="me-1" width="20" height="20" />
                    اليوم: {{ $stats['today'] ?? 0 }}
                </span>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        {{-- إحصائيات التجميع --}}
        <div class="col-12 mg-b-20">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">
                        <x-lucide-pie-chart class="me-1" width="20" height="20" /> إحصائيات وتجميعات
                    </h4>
                    <button class="btn btn-sm btn-outline-primary" type="button" id="toggleStats">
                        <x-lucide-chevron-down id="toggleIcon" width="20" height="20" />
                    </button>
                </div>
                <div id="statsCollapse" style="display: none;">
                    <div class="card-body">
                        <div class="row">
                            {{-- تجميع حسب الدولة --}}
                            <div class="col-lg-4 col-md-6 mb-4">
                                <div class="card border shadow-none mb-0">
                                    <div class="card-header bg-primary-transparent py-2">
                                        <h6 class="mb-0"><x-lucide-globe class="me-1" width="20" height="20" /> أعلى 10 دول</h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 250px; overflow-y: auto;">
                                            <table class="table table-sm table-hover mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th>الدولة</th>
                                                        <th class="text-end">العدد</th>
                                                        <th style="width: 100px"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($countryStats ?? [] as $stat)
                                                        @php $maxCountry = $countryStats->max('count'); @endphp
                                                        <tr class="stat-row" data-filter="country"
                                                            data-value="{{ $stat->country }}">
                                                            <td>{{ $stat->country ?: '—' }}</td>
                                                            <td class="text-end fw-semibold">
                                                                {{ number_format($stat->count) }}</td>
                                                            <td>
                                                                <div class="progress" style="height: 6px;">
                                                                    <div class="progress-bar bg-primary"
                                                                        style="width: {{ $maxCountry ? ($stat->count / $maxCountry) * 100 : 0 }}%">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="3" class="text-center text-muted py-3">لا توجد
                                                                بيانات</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- تجميع حسب المدينة --}}
                            <div class="col-lg-4 col-md-6 mb-4">
                                <div class="card border shadow-none mb-0">
                                    <div class="card-header bg-success-transparent py-2">
                                        <h6 class="mb-0"><x-lucide-map-pin class="me-1" width="20" height="20" /> أعلى 10 مدن</h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 250px; overflow-y: auto;">
                                            <table class="table table-sm table-hover mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th>المدينة</th>
                                                        <th class="text-end">العدد</th>
                                                        <th style="width: 100px"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($cityStats ?? [] as $stat)
                                                        @php $maxCity = $cityStats->max('count'); @endphp
                                                        <tr>
                                                            <td>
                                                                <span>{{ $stat->city ?: '—' }}</span>
                                                                <span class="text-muted tx-11">/ {{ $stat->country }}</span>
                                                            </td>
                                                            <td class="text-end fw-semibold">
                                                                {{ number_format($stat->count) }}</td>
                                                            <td>
                                                                <div class="progress" style="height: 6px;">
                                                                    <div class="progress-bar bg-success"
                                                                        style="width: {{ $maxCity ? ($stat->count / $maxCity) * 100 : 0 }}%">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="3" class="text-center text-muted py-3">لا توجد
                                                                بيانات</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- تجميع حسب نطاق الـ IP --}}
                            <div class="col-lg-4 col-md-6 mb-4">
                                <div class="card border shadow-none mb-0">
                                    <div class="card-header bg-danger-transparent py-2">
                                        <h6 class="mb-0"><x-lucide-server class="me-1" width="20" height="20" /> أعلى 10 نطاقات IP</h6>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive" style="max-height: 250px; overflow-y: auto;">
                                            <table class="table table-sm table-hover mb-0">
                                                <thead class="table-light sticky-top">
                                                    <tr>
                                                        <th>نطاق IP</th>
                                                        <th class="text-end">العدد</th>
                                                        <th style="width: 100px"></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($ipRangeStats ?? [] as $stat)
                                                        @php $maxIp = $ipRangeStats->max('count'); @endphp
                                                        <tr class="stat-row" data-filter="ip"
                                                            data-value="{{ $stat->ip_range }}">
                                                            <td><code>{{ $stat->ip_range }}.*</code></td>
                                                            <td class="text-end fw-semibold">
                                                                {{ number_format($stat->count) }}</td>
                                                            <td>
                                                                <div class="progress" style="height: 6px;">
                                                                    <div class="progress-bar bg-danger"
                                                                        style="width: {{ $maxIp ? ($stat->count / $maxIp) * 100 : 0 }}%">
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="3" class="text-center text-muted py-3">لا توجد
                                                                بيانات</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- تجميع حسب نوع الجهاز --}}
                            <div class="col-lg-6 col-md-6 mb-4">
                                <div class="card border shadow-none mb-0">
                                    <div class="card-header bg-warning-transparent py-2">
                                        <h6 class="mb-0"><x-lucide-smartphone class="me-1" width="20" height="20" /> توزيع الأجهزة</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            @forelse($deviceStats ?? [] as $stat)
                                                @php
                                                    $deviceIcon = match ($stat->device_type) {
                                                        'mobile' => 'smartphone',
                                                        'tablet' => 'tablet',
                                                        'desktop' => 'monitor',
                                                        default => 'help-circle',
                                                    };
                                                    $deviceName = match ($stat->device_type) {
                                                        'mobile' => 'موبايل',
                                                        'tablet' => 'تابلت',
                                                        'desktop' => 'كمبيوتر',
                                                        default => $stat->device_type,
                                                    };
                                                    $totalDevices = $deviceStats->sum('count');
                                                    $percentage = $totalDevices
                                                        ? round(($stat->count / $totalDevices) * 100)
                                                        : 0;
                                                @endphp
                                                <div class="col-md-4 col-6 text-center mb-3">
                                                    <div class="p-3 bg-light rounded stat-row" data-filter="device"
                                                        data-value="{{ $stat->device_type }}">
                                                        @svg('lucide-' . $deviceIcon, ['class' => 'text-warning', 'width' => 30, 'height' => 30])
                                                        <h4 class="mb-0 mt-2">{{ number_format($stat->count) }}</h4>
                                                        <span class="text-muted tx-12">{{ $deviceName }}
                                                            ({{ $percentage }}%)
                                                        </span>
                                                    </div>
                                                </div>
                                            @empty
                                                <div class="col-12 text-center text-muted py-3">لا توجد بيانات</div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- تجميع حسب المتصفح --}}
                            <div class="col-lg-6 col-md-6 mb-4">
                                <div class="card border shadow-none mb-0">
                                    <div class="card-header bg-info-transparent py-2">
                                        <h6 class="mb-0"><x-lucide-chrome class="me-1" width="20" height="20" /> أعلى 5 متصفحات</h6>
                                    </div>
                                    <div class="card-body">
                                        @php $totalBrowsers = isset($browserStats) ? $browserStats->sum('count') : 0; @endphp
                                        @forelse($browserStats ?? [] as $stat)
                                            @php $browserPercent = $totalBrowsers ? round($stat->count / $totalBrowsers * 100) : 0; @endphp
                                            <div class="d-flex justify-content-between align-items-center mb-2 stat-row"
                                                data-filter="browser" data-value="{{ $stat->browser }}">
                                                <span>{{ $stat->browser }}</span>
                                                <span class="badge bg-info-transparent">{{ number_format($stat->count) }}
                                                    ({{ $browserPercent }}%)
                                                </span>
                                            </div>
                                            <div class="progress mb-3" style="height: 8px;">
                                                <div class="progress-bar bg-info" style="width: {{ $browserPercent }}%">
                                                </div>
                                            </div>
                                        @empty
                                            <div class="text-center text-muted py-3">لا توجد بيانات</div>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- فلاتر البحث --}}
        <div class="col-12">
            <div class="card mg-b-20">
                <div class="card-body">
                    <div class="main-content-label mg-b-15">
                        <x-lucide-filter class="me-1" width="20" height="20" /> تصفية البيانات
                    </div>
                    <form id="filters">
                        <div class="row row-sm">
                            {{-- بحث عام --}}
                            <div class="col-lg-3 col-md-6 mb-3">
                                <label class="form-label">بحث عام</label>
                                <input type="text" id="qFilter" class="form-control"
                                    placeholder="اسم / إيميل / آيبي / متصفح...">
                            </div>

                            {{-- الحالة --}}
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label class="form-label">الحالة</label>
                                <select id="statusFilter" class="form-control select2">
                                    <option value="">الكل</option>
                                    <option value="active">نشط</option>
                                    <option value="completed">مكتمل</option>
                                    <option value="logged_out">خروج عادي</option>
                                    <option value="force_logout">خروج إجباري</option>
                                </select>
                            </div>

                            {{-- نوع الجهاز --}}
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label class="form-label">نوع الجهاز</label>
                                <select id="deviceFilter" class="form-control select2">
                                    <option value="">الكل</option>
                                    <option value="mobile">موبايل</option>
                                    <option value="desktop">كمبيوتر</option>
                                    <option value="tablet">تابلت</option>
                                </select>
                            </div>

                            {{-- المتصفح --}}
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label class="form-label">المتصفح</label>
                                <select id="browserFilter" class="form-control select2">
                                    <option value="">الكل</option>
                                    <option value="Chrome">Chrome</option>
                                    <option value="Firefox">Firefox</option>
                                    <option value="Safari">Safari</option>
                                    <option value="Edge">Edge</option>
                                </select>
                            </div>

                            {{-- المستخدم --}}
                            <div class="col-lg-3 col-md-6 mb-3">
                                <label class="form-label">المستخدم</label>
                                <div class="d-flex gap-1">
                                    <select id="user_idFilter" class="form-control select2-users" style="flex: 1;">
                                        <option value="">الكل</option>
                                        @foreach ($users ?? [] as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}
                                                ({{ $user->email }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="button" id="terminateUserBtn" class="btn btn-danger btn-sm d-none"
                                        title="إنهاء جلسات هذا المستخدم">
                                        <x-lucide-power width="20" height="20" />
                                    </button>
                                </div>
                            </div>

                            {{-- IP --}}
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label class="form-label">عنوان IP</label>
                                <input type="text" id="ipFilter" class="form-control" placeholder="مثال: 1.1.1.1">
                            </div>

                            {{-- الدولة --}}
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label class="form-label">الدولة</label>
                                <input type="text" id="countryFilter" class="form-control" placeholder="Country">
                            </div>

                            {{-- من تاريخ --}}
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label class="form-label">من تاريخ</label>
                                <input type="date" id="date_fromFilter" class="form-control">
                            </div>

                            {{-- إلى تاريخ --}}
                            <div class="col-lg-2 col-md-6 mb-3">
                                <label class="form-label">إلى تاريخ</label>
                                <input type="date" id="date_toFilter" class="form-control">
                            </div>

                            {{-- أزرار --}}
                            <div class="col-lg-2 col-md-6 mb-3 d-flex align-items-end">
                                <button type="button" id="refresh" class="btn btn-primary me-2">
                                    <x-lucide-search class="me-1" width="20" height="20" /> بحث
                                </button>
                                <button type="button" id="resetFilters" class="btn btn-outline-secondary">
                                    <x-lucide-x width="20" height="20" />
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- جدول السجلات --}}
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h4 class="card-title mg-b-0">
                        <x-lucide-list class="me-1" width="20" height="20" /> سجلات الدخول
                    </h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap" id="loginLogsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>المستخدم</th>
                                    <th>الجهاز</th>
                                    <th>المتصفح</th>
                                    <th>IP</th>
                                    <th>الموقع</th>
                                    <th>وقت الدخول</th>
                                    <th>آخر نشاط</th>
                                    <th>الحالة</th>
                                    <th>إجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            const filterdata = ['q', 'status', 'device', 'browser', 'user_id', 'ip', 'country', 'date_from',
                'date_to'
            ];
            const tablehead = ['id', 'user', 'device', 'browser', 'ip_address', 'location', 'login_at',
                'last_activity_at', 'status', 'action'
            ];

            const table = initFilteredDatatable({
                selector: '#loginLogsTable',
                url: "{{ route('admin.security.login-logs.index') }}",
                columns: tablehead,
                extraOptions: {
                    pageLength: 25,
                    lengthMenu: [
                        [10, 25, 50, 100],
                        [10, 25, 50, 100]
                    ],
                    order: [
                        [0, 'desc']
                    ],
                },
                filters: filterdata,
                refreshSelector: '#refresh',
                redrawDebounce: 300,
            });

            // زر إعادة تعيين الفلاتر
            $('#resetFilters').on('click', function() {
                $('#filters input, #filters select').val('').trigger('change');
                table.draw();
            });

            // الضغط على صفوف الإحصائيات للفلترة
            $(document).on('click', '.stat-row', function() {
                const filter = $(this).data('filter');
                const value = $(this).data('value');
                if (filter && value) {
                    $('#' + filter + 'Filter').val(value).trigger('change');
                    table.draw();
                    // انتقل للجدول
                    $('html, body').animate({
                        scrollTop: $('#loginLogsTable').offset().top - 100
                    }, 300);
                }
            });

            // تفعيل select2
            $('.select2').select2({
                minimumResultsForSearch: 5,
                allowClear: true,
                placeholder: 'اختر...'
            });

            // Select2 خاص بالمستخدمين مع بحث
            $('#user_idFilter').select2({
                minimumResultsForSearch: 0,
                allowClear: true,
                placeholder: 'اختر مستخدم...',
                width: '100%'
            });

            // إظهار/إخفاء زر إنهاء الجلسات عند اختيار مستخدم
            $(document).on('change', '#user_idFilter', function() {
                const userId = $(this).val();
                if (userId) {
                    $('#terminateUserBtn').removeClass('d-none');
                } else {
                    $('#terminateUserBtn').addClass('d-none');
                }
            });

            // Toggle stats collapse
            $('#toggleStats').on('click', function() {
                $('#statsCollapse').slideToggle(300);
                const icon = document.getElementById('toggleIcon');
                icon.style.transform = icon.style.transform === 'rotate(180deg)' ? '' : 'rotate(180deg)';
            });

            // إنهاء جلسات المستخدم المحدد
            $('#terminateUserBtn').on('click', function() {
                const userId = $('#user_idFilter').val();
                const userName = $('#user_idFilter option:selected').text();

                if (!userId) {
                    Swal.fire('تنبيه', 'اختر مستخدم أولاً', 'warning');
                    return;
                }

                Swal.fire({
                    title: 'تأكيد إنهاء جلسات المستخدم',
                    html: `<div class="text-danger">
                        {!! svg("lucide-triangle-alert", ["width" => 50, "height" => 50])->toHtml() !!}
                        <p class="mt-3">سيتم إنهاء جميع جلسات:</p>
                        <p class="fw-bold">${userName}</p>
                        <p class="text-muted">سيتم إجبار المستخدم على إعادة تسجيل الدخول</p>
                    </div>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، إنهاء الجلسات',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.security.login-logs.terminate-all') }}",
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                user_id: userId
                            },
                            beforeSend: function() {
                                Swal.fire({
                                    title: 'جاري الإنهاء...',
                                    allowOutsideClick: false,
                                    didOpen: () => Swal.showLoading()
                                });
                            },
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'تم',
                                    text: response.message,
                                }).then(() => {
                                    table.draw();
                                });
                            },
                            error: function(xhr) {
                                Swal.fire('خطأ', xhr.responseJSON?.message ||
                                    'حدث خطأ أثناء العملية', 'error');
                            }
                        });
                    }
                });
            });

            // Handle force logout
            $('#loginLogsTable tbody').on('submit', 'form', function(e) {
                e.preventDefault();
                const form = $(this);
                if (!confirm('تأكيد إخراج الجلسة؟')) return;

                $.ajax({
                    url: form.attr('action'),
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        table.draw();
                        Swal.fire('تم', 'تم إخراج الجلسة بنجاح', 'success');
                    },
                    error: function() {
                        Swal.fire('خطأ', 'حدث خطأ أثناء العملية', 'error');
                    }
                });
            });
        });
    </script>
@endsection