@extends('user.layouts.app')

@section('title', 'سجلات الدخول والأجهزة')

@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/login-logs.css') }}">
@endsection

@section('content')
    <div class="content-wrapper login-logs-page" x-data="logsManager()">

        {{-- Page Header --}}
        <div class="page-header">
            <x-lucide-clock width="28" height="28" />
            <h1>سجلات تسجيل الدخول</h1>
            <div class="header-actions">
                <button class="action-btn secondary" @click="cleanupOldSessions()" title="تنظيف الجلسات القديمة">
                    <x-lucide-trash-2 width="16" height="16" />
                    تنظيف
                </button>
                <button class="action-btn warning" @click="forceLogoutAllOthers()">
                    <x-lucide-log-out width="16" height="16" />
                    إخراج جميع الأجهزة الأخرى
                </button>
                <a href="{{ route('user-logs.export') }}" class="action-btn success">
                    <x-lucide-download width="16" height="16" />
                    تصدير
                </a>
            </div>
        </div>

        {{-- Stats Cards --}}
        <div class="login-logs-stats">
            <div class="stat-card">
                <div class="stat-icon primary">
                    <x-lucide-door-open width="24" height="24" />
                </div>
                <div class="stat-info">
                    <span class="stat-value">{{ $stats['total_logins'] }}</span>
                    <span class="stat-label">إجمالي مرات الدخول</span>
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-icon success">
                    <x-lucide-radio width="24" height="24" />
                </div>
                <div class="stat-info">
                    <span class="stat-value">{{ $stats['active_sessions'] }}</span>
                    <span class="stat-label">الجلسات النشطة</span>
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-icon info">
                    <x-lucide-laptop width="24" height="24" />
                </div>
                <div class="stat-info">
                    <span class="stat-value">{{ $stats['unique_devices'] }}</span>
                    <span class="stat-label">الأجهزة المختلفة</span>
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-icon warning">
                    <x-lucide-network width="24" height="24" />
                </div>
                <div class="stat-info">
                    <span class="stat-value">{{ $stats['unique_ips'] }}</span>
                    <span class="stat-label">عناوين IP مختلفة</span>
                </div>
            </div>
        </div>

        {{-- Active Sessions --}}
        @if ($activeSessions->count() > 0)
            <div class="active-sessions">
                <div class="section-header">
                    <x-lucide-radio width="20" height="20" />
                    <h3>الجلسات النشطة حالياً ({{ $activeSessions->count() }})</h3>
                </div>
                <div class="sessions-grid">
                    @foreach ($activeSessions as $session)
                        <div class="session-card {{ $session->session_id === session('user_log_session_id') ? 'current' : '' }}">
                            <div class="device-icon">
                                @svg('lucide-' . ($session->device_type === 'mobile' ? 'smartphone' : ($session->device_type === 'tablet' ? 'tablet' : 'monitor')), ['width' => 24, 'height' => 24])
                            </div>
                            <div class="session-info">
                                <div class="device-name">
                                    <span>{{ $session->device_name ?: 'Unknown Device' }}</span>
                                    @if ($session->session_id === session('user_log_session_id'))
                                        <span class="badge current">الجهاز الحالي</span>
                                    @else
                                        <span class="badge active">نشط</span>
                                    @endif
                                </div>
                                <div class="session-details">
                                    {{ $session->ip_address }}
                                    @if ($session->city)
                                        - {{ $session->city }}, {{ $session->country }}
                                    @elseif($session->country)
                                        - {{ $session->country }}
                                    @endif
                                </div>
                            </div>
                            @if ($session->session_id !== session('user_log_session_id'))
                                <div class="session-actions">
                                    <button class="action-btn danger sm" @click="forceLogoutDevice({{ $session->id }})" title="إخراج">
                                        <x-lucide-log-out width="16" height="16" />
                                    </button>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Logs Table --}}
        <div class="logs-table-wrapper">
            <div class="logs-table-header">
                <h3>
                    <x-lucide-table width="18" height="18" />
                    سجل عمليات الدخول
                </h3>
            </div>
            <div style="overflow-x: auto;">
                <table class="logs-table">
                <thead>
                    <tr>
                        <th>الجهاز</th>
                        <th>المتصفح</th>
                        <th>نظام التشغيل</th>
                        <th>عنوان IP</th>
                        <th>الموقع</th>
                        <th>وقت الدخول</th>
                        <th>آخر نشاط</th>
                        <th>الحالة</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($logs as $log)
                        <tr>
                            <td>
                                <div class="device-cell">
                                    <div class="icon">
                                        @svg('lucide-' . ($log->device_type === 'mobile' ? 'smartphone' : ($log->device_type === 'tablet' ? 'tablet' : 'monitor')), ['width' => 18, 'height' => 18])
                                    </div>
                                    <div class="info">
                                        <strong>{{ $log->device_name }}</strong>
                                        <small>{{ ucfirst($log->device_type) }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if ($log->browser)
                                    {{ $log->browser }}
                                    @if ($log->browser_version)
                                        <br><small>v{{ $log->browser_version }}</small>
                                    @endif
                                @else
                                    <span style="color: var(--color-gray-400, #9ca3af);">غير محدد</span>
                                @endif
                            </td>
                            <td>
                                @if ($log->operating_system)
                                    {{ $log->operating_system }}
                                    @if ($log->os_version)
                                        <br><small>{{ $log->os_version }}</small>
                                    @endif
                                @else
                                    <span style="color: var(--color-gray-400, #9ca3af);">غير محدد</span>
                                @endif
                            </td>
                            <td>
                                <code class="ip-code">{{ $log->ip_address }}</code>
                            </td>
                            <td>
                                @if ($log->city && $log->country)
                                    {{ $log->city }}, {{ $log->country }}
                                @elseif($log->country)
                                    {{ $log->country }}
                                @else
                                    <span style="color: var(--color-gray-400, #9ca3af);">غير محدد</span>
                                @endif
                            </td>
                            <td>
                                {{ $log->login_at->format('Y-m-d H:i') }}
                                <small>{{ $log->login_at?->diffForHumans() }}</small>
                            </td>
                            <td>
                                @if ($log->is_active && $log->last_activity_at)
                                    {{ $log->last_activity_at->format('Y-m-d H:i') }}
                                    <small>{{ $log->last_activity_at->diffForHumans() }}</small>
                                @elseif($log->logout_at)
                                    {{ $log->logout_at->format('Y-m-d H:i') }}
                                    <small>خروج {{ $log->logout_at->diffForHumans() }}</small>
                                @else
                                    <span style="color: var(--color-gray-400, #9ca3af);">—</span>
                                @endif
                            </td>
                            <td>
                                @if ($log->is_active)
                                    <span class="status-badge active">نشط</span>
                                    @if ($log->session_id === session('user_log_session_id'))
                                        <span class="status-badge" style="background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1)); color: var(--color-primary-500, #06b6d4);">الحالي</span>
                                    @endif
                                @elseif($log->force_logout)
                                    <span class="status-badge forced">إخراج قسري</span>
                                @else
                                    <span class="status-badge ended">منتهي</span>
                                @endif
                            </td>
                            <td>
                                <div class="actions-cell">
                                    <a href="{{ route('user-logs.show', $log->id) }}" class="action-btn secondary sm">
                                        <x-lucide-eye width="16" height="16" />
                                    </a>
                                    @if ($log->is_active && $log->session_id !== session('user_log_session_id'))
                                        <button class="action-btn warning sm" @click="forceLogoutDevice({{ $log->id }})">
                                            <x-lucide-log-out width="16" height="16" />
                                        </button>
                                    @endif
                                    @if (!$log->is_active)
                                        <button class="action-btn danger sm" @click="deleteLog({{ $log->id }})">
                                            <x-lucide-trash-2 width="16" height="16" />
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <x-lucide-clock width="40" height="40" />
                                    </div>
                                    <h3>لا توجد سجلات</h3>
                                    <p>لم يتم تسجيل أي عمليات دخول حتى الآن</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            </div>

            {{-- Pagination --}}
            @if($logs->hasPages())
                <div class="pagination-wrapper">
                    {{ $logs->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection

@section('js')
<script>
function logsManager() {
    return {
        cleanupOldSessions() {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'تنظيف الجلسات القديمة',
                    text: 'سيتم إنهاء الجلسات غير النشطة منذ أكثر من 24 ساعة. هل تريد المتابعة؟',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، تنظيف',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.doCleanup();
                    }
                });
            } else if (confirm('سيتم إنهاء الجلسات غير النشطة منذ أكثر من 24 ساعة. هل تريد المتابعة؟')) {
                this.doCleanup();
            }
        },

        doCleanup() {
            fetch('{{ route("user-logs.cleanup-old") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.showToast('success', data.message || 'تم تنظيف الجلسات القديمة');
                    location.reload();
                } else {
                    this.showToast('error', data.message || 'حدث خطأ');
                }
            })
            .catch(error => {
                this.showToast('error', 'حدث خطأ أثناء العملية');
            });
        },

        forceLogoutDevice(logId) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'تأكيد الإخراج',
                    text: 'هل أنت متأكد من إخراج هذا الجهاز؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، إخراج',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.doForceLogout(logId);
                    }
                });
            } else if (confirm('هل أنت متأكد من إخراج هذا الجهاز؟')) {
                this.doForceLogout(logId);
            }
        },

        doForceLogout(logId) {
            fetch(`/user-logs/${logId}/force-logout`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.showToast('success', data.message || 'تم إخراج الجهاز بنجاح');
                    location.reload();
                } else {
                    this.showToast('error', data.message || 'حدث خطأ');
                }
            })
            .catch(error => {
                this.showToast('error', 'حدث خطأ أثناء العملية');
            });
        },

        forceLogoutAllOthers() {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'تأكيد الإخراج',
                    text: 'هل أنت متأكد من إخراج جميع الأجهزة الأخرى؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، إخراج الكل',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.doLogoutAllOthers();
                    }
                });
            } else if (confirm('هل أنت متأكد من إخراج جميع الأجهزة الأخرى؟')) {
                this.doLogoutAllOthers();
            }
        },

        doLogoutAllOthers() {
            fetch('/user-logs/force-logout-all-others', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.showToast('success', data.message || 'تم إخراج جميع الأجهزة الأخرى بنجاح');
                    location.reload();
                } else {
                    this.showToast('error', data.message || 'حدث خطأ');
                }
            })
            .catch(error => {
                this.showToast('error', 'حدث خطأ أثناء العملية');
            });
        },

        deleteLog(logId) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'تأكيد الحذف',
                    text: 'هل أنت متأكد من حذف هذا السجل؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم، حذف',
                    cancelButtonText: 'إلغاء',
                    confirmButtonColor: '#ef4444'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.doDeleteLog(logId);
                    }
                });
            } else if (confirm('هل أنت متأكد من حذف هذا السجل؟')) {
                this.doDeleteLog(logId);
            }
        },

        doDeleteLog(logId) {
            fetch(`/user-logs/${logId}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.showToast('success', data.message || 'تم حذف السجل بنجاح');
                    location.reload();
                } else {
                    this.showToast('error', data.message || 'حدث خطأ');
                }
            })
            .catch(error => {
                this.showToast('error', 'حدث خطأ أثناء العملية');
            });
        },

        showToast(type, message) {
            if (typeof Swal !== 'undefined') {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true
                });
                Toast.fire({
                    icon: type,
                    title: message
                });
            }
        }
    }
}
</script>
@endsection