@extends('layouts.panel')

@section('title', 'Sesiones Activas - Piter Professional')

@section('content')
    @php
        // 1. Resolución de Administrador para la consulta de sesiones
        $admin = \Illuminate\Support\Facades\Auth::guard('admin')->user() ?? \Illuminate\Support\Facades\Auth::user();
        $user = $admin; // Alias para compatibilidad con la lógica de tema

        // --- LÓGICA DE TEMA DINÁMICO ---
        $convertColor = function($color) {
            if (empty($color)) return null;
            if (str_starts_with($color, '#')) return $color;
            if (str_starts_with($color, '0x')) return '#' . substr($color, -6);
            return $color;
        };

        $getContrastColor = function($hex) {
             if(!$hex) return '#ffffff';
             $hex = str_replace('#', '', $hex);
             if(strlen($hex) == 3) $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
             $r = hexdec(substr($hex, 0, 2));
             $g = hexdec(substr($hex, 2, 2));
             $b = hexdec(substr($hex, 4, 2));
             $yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
             return ($yiq >= 128) ? '#0f172a' : '#ffffff';
        };

        $panelColor = $convertColor($user->color_preferido ?? null) ?? '#020617'; 
        $bgColor = $convertColor($user->color_fondo_preferido ?? null) ?? '#f8fafc';
        
        $textColor = $getContrastColor($bgColor);
        $isDark = ($textColor === '#ffffff');
        $bgPage = $bgColor; 
        $accentColor = $panelColor; 

        if ($panelColor === '#020617' || $panelColor === '#000000') {
            $accentColor = '#ef4444'; // Rojo por defecto si el panel es negro/obsidian
        } 

        if ($isDark) {
            $bgCard = 'color-mix(in srgb, '.$bgColor.', white 2%)'; 
            $bgSurface = 'color-mix(in srgb, '.$bgColor.', white 5%)'; 
            $textMain = '#ffffff';
            $textMuted = '#94a3b8'; 
            $borderColor = 'rgba(255,255,255,0.05)';
            $shadowColor = 'rgba(0,0,0,0.8)'; 
        } else {
            $bgCard = 'rgba(255, 255, 255, 0.95)'; 
            $bgSurface = '#f8fafc'; 
            $textMain = '#0f172a'; 
            $textMuted = '#64748b';
            $borderColor = '#e2e8f0'; 
            $shadowColor = 'rgba(148, 163, 184, 0.15)'; 
        }

        // Redefinimos $sessions para saltarnos las limitaciones del controlador
        // Y asegurar que solo vemos lo REALMENTE activo y sin duplicados por dispositivo
        $rawSessions = \Illuminate\Support\Facades\DB::table('dbo.Seguridad_Sesiones as s')
            ->join('dbo.Seguridad_Usuarios as u', 's.usuario_id', '=', 'u.id_usuario')
            ->leftJoin('dbo.Seguridad_Perfiles as p', 'u.perfil_id', '=', 'p.id_perfil')
            ->leftJoin('dbo.Nucleo_Sucursales as suc', function($join) {
                $join->on('u.sucursal_asignada_id', '=', 'suc.id_sucursal')
                     ->orOn('u.id_usuario', '=', 'suc.gerente_encargado_id');
            })
            ->select(
                's.id_sesiones',
                's.ip',
                's.user_agent',
                's.fecha_ingreso',
                's.fecha_expiracion',
                'u.nombre_completo',
                'u.email',
                'u.foto_url',
                'u.id_usuario',
                'p.nombre as rol',
                'suc.nombre as sucursal_nombre',
                'suc.id_sucursal'
            )
            ->where('u.empresa_id', $admin->empresa_id)
            ->where('u.estado', 'ACTIVO')
            ->where(function($q) {
                $q->where('p.nombre', 'NOT LIKE', '%DUENIO%')
                  ->where('p.nombre', 'NOT LIKE', '%OWNER%')
                  ->where('p.nombre', 'NOT LIKE', '%ADMIN%'); // Excluir perfiles administrativos superiores
            })
            ->where('s.fecha_expiracion', '>', \Illuminate\Support\Facades\DB::raw('GETDATE()')) // Solo sesiones que no han expirado
            ->where('s.fecha_ingreso', '>', \Illuminate\Support\Facades\DB::raw('DATEADD(hour, -48, GETDATE())')) // Límite de 48h para considerar "Tiempo Real"
            ->orderByDesc('s.fecha_ingreso')
            ->get();

        $isMobile = function($userAgent) {
            return preg_match('/Mobile|Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|Dart|Flutter/i', $userAgent);
        };

        // FILTRADO INTELIGENTE: Solo la última sesión activa por usuario y por TIPO de dispositivo (PC o App)
        // Esto evita que si alguien entró 10 veces, veas 10 tarjetas.
        $allSessions = $rawSessions->groupBy(function($s) use ($isMobile) {
            $deviceType = $isMobile($s->user_agent) ? 'MOBILE' : 'PC';
            return $s->id_usuario . '_' . $deviceType;
        })->map(function($group) {
            return $group->first(); // Al estar ordenadas por fecha_ingreso DESC, el primero es el más reciente
        })->values();

        // Obtener lista de sucursales para el filtro
        $sucursales = $allSessions->pluck('sucursal_nombre', 'id_sucursal')->filter()->unique();

        // Aplicar filtrado por sucursal si se solicita
        $selectedBranch = request('sucursal_id');
        if ($selectedBranch) {
            $filteredSessions = $allSessions->filter(function($s) use ($selectedBranch) {
                return $s->id_sucursal == $selectedBranch;
            });
        } else {
            $filteredSessions = $allSessions;
        }

        // Agrupar
        $groupedSessions = $filteredSessions->map(function($s) {
            $s->sucursal_display = $s->sucursal_nombre ?? 'OFICINA CENTRAL / SIN SUCURSAL';
            return $s;
        })->groupBy('sucursal_display');

        $isMobile = function($userAgent) {
            return preg_match('/Mobile|Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|Dart|Flutter/i', $userAgent);
        };
    @endphp
<div class="max-w-[1440px] mx-auto pb-32 px-4 sm:px-6 fade-in">
    
    {{-- Header Content --}}
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12 mt-8">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.profile') }}" class="p-3 bg-[var(--theme-bg-card)] hover:brightness-110 rounded-2xl text-[var(--theme-text-muted)] border border-[var(--theme-border)] shadow-sm transition-all hover:-translate-x-1">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div class="space-y-1">
                <div class="flex items-center gap-3">
                    <h1 class="text-3xl font-[1000] text-[var(--theme-text-main)] tracking-tighter uppercase italic">
                        Sesiones <span class="text-[var(--theme-accent)]">Vivas</span>
                    </h1>
                    <span class="px-3 py-1 bg-emerald-500/10 text-emerald-500 rounded-full text-[9px] font-black uppercase tracking-widest border border-emerald-500/20 animate-pulse">
                        Live
                    </span>
                </div>
                <p class="text-[10px] font-black text-[var(--theme-text-muted)] uppercase tracking-[0.3em]">
                    Control total • {{ $filteredSessions->count() }} Conexiones activas
                </p>
            </div>
        </div>

        {{-- Sucursal Filter --}}
        <div class="flex items-center gap-3">
            <form method="GET" action="{{ url()->current() }}" class="flex items-center gap-2">
                <div class="relative group">
                    <select name="sucursal_id" onchange="this.form.submit()" 
                            class="appearance-none bg-[var(--theme-bg-card)] border border-[var(--theme-border)] text-[var(--theme-text-main)] text-[10px] font-black uppercase tracking-widest rounded-xl pl-10 pr-12 py-3.5 focus:ring-4 focus:ring-[var(--theme-accent)]/10 focus:border-[var(--theme-accent)] transition-all cursor-pointer shadow-sm group-hover:border-[var(--theme-accent)]/50">
                        <option value="">Todas las Sucursales</option>
                        @foreach($sucursales as $id => $nombre)
                            <option value="{{ $id }}" {{ $selectedBranch == $id ? 'selected' : '' }}>{{ $nombre }}</option>
                        @endforeach
                    </select>
                    <div class="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none opacity-50 group-hover:text-[var(--theme-accent)] transition-colors">
                        <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                    </div>
                    <div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none opacity-50">
                        <i data-lucide="chevron-down" class="w-3.5 h-3.5"></i>
                    </div>
                </div>
                
                @if($selectedBranch)
                    <a href="{{ url()->current() }}" class="p-3.5 bg-rose-500/10 text-rose-500 rounded-xl border border-rose-500/20 hover:bg-rose-500 hover:text-white transition-all shadow-sm" title="Limpiar filtro">
                        <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                    </a>
                @endif
            </form>
        </div>
    </div>

    {{-- Sessions Grid --}}
    {{-- Sessions Grid Grouped by Branch --}}
    <div class="space-y-16">
        @forelse($groupedSessions as $branchName => $branchSessions)
            <div class="animate-in fade-in slide-in-from-bottom-4 duration-700">
                {{-- Brach Header --}}
                <div class="flex items-center gap-4 mb-8">
                    <div class="h-px flex-1 bg-gradient-to-r from-transparent via-[var(--theme-border)] to-transparent opacity-50"></div>
                    <div class="px-6 py-2 bg-[var(--theme-bg-card)] border border-[var(--theme-border)] rounded-full shadow-sm">
                        <h2 class="text-[11px] font-black text-[var(--theme-accent)] uppercase tracking-[0.3em] flex items-center gap-3">
                            <i data-lucide="map-pin" class="w-3.5 h-3.5 opacity-70"></i>
                            {{ $branchName }}
                            <span class="px-2 py-0.5 bg-[var(--theme-accent)]/10 rounded-md text-[9px]">{{ count($branchSessions) }}</span>
                        </h2>
                    </div>
                    <div class="h-px flex-1 bg-gradient-to-r from-transparent via-[var(--theme-border)] to-transparent opacity-50"></div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    @foreach($branchSessions as $session)
                        @php
                            $deviceMobile = $isMobile($session->user_agent);
                        @endphp
                        <div class="bg-[var(--theme-bg-card)] rounded-[2rem] p-6 shadow-xl shadow-[var(--theme-shadow)] border border-[var(--theme-border)] relative group hover:shadow-2xl hover:shadow-[var(--theme-accent)]/10 transition-all duration-300" id="session-card-{{ $session->id_sesiones }}">
                            
                            {{-- Device Type Indicator (Upper Left) --}}
                            <div class="absolute top-6 left-6 px-4 py-1.5 {{ $deviceMobile ? 'bg-indigo-500/10 text-indigo-500 border-indigo-500/20' : 'bg-sky-500/10 text-sky-500 border-sky-500/20' }} border rounded-[1rem] flex items-center gap-2.5 shadow-sm transition-all group-hover:scale-105 overflow-hidden">
                                <i data-lucide="{{ $deviceMobile ? 'smartphone' : 'monitor' }}" class="w-4 h-4"></i>
                                <span class="text-[9px] font-[1000] uppercase tracking-widest">
                                    {{ $deviceMobile ? 'App Móvil' : 'PC • Web' }}
                                </span>
                            </div>

                            {{-- Status Dot (Upper Right) --}}
                            <div class="absolute top-6 right-6 flex items-center gap-2">
                                <span class="relative flex h-3 w-3">
                                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                                  <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
                                </span>
                            </div>

                            <div class="flex items-start gap-4 mb-6 mt-14">
                                {{-- Avatar --}}
                                <div class="relative">
                                    @php
                                        $userPhoto = 'https://ui-avatars.com/api/?name=' . urlencode($session->nombre_completo) . '&background=fef2f2&color=ef4444';
                                        if (!empty($session->foto_url) && $session->foto_url !== 'null') {
                                            $cleanPath = str_replace(['uploads / ', 'uploads/', 'uploads\ ', 'uploads\\'], '', $session->foto_url);
                                            $cleanPath = trim(str_replace('\\', '/', $cleanPath));
                                            if (str_starts_with($cleanPath, '/')) $cleanPath = substr($cleanPath, 1);
                                            $userPhoto = url('/api/Security/uploads/' . $cleanPath);
                                        }
                                    @endphp
                                    <img src="{{ $userPhoto }}" class="w-16 h-16 rounded-[1.2rem] object-cover shadow-md border-2 border-[var(--theme-bg-page)]">
                                </div>

                                {{-- Info --}}
                                <div class="pt-1">
                                    <h3 class="text-sm font-black text-[var(--theme-text-main)] leading-tight uppercase tracking-tight mb-1">
                                        {{ $session->nombre_completo }}
                                    </h3>
                                    <p class="text-[10px] font-bold text-[var(--theme-text-muted)] uppercase tracking-wider mb-2">
                                        {{ $session->rol }}
                                    </p>
                                    <p class="text-[10px] text-emerald-500 font-bold flex items-center gap-1">
                                        <i data-lucide="wifi" class="w-3 h-3"></i> En Línea
                                    </p>
                                </div>
                            </div>

                            {{-- Device Info --}}
                            <div class="bg-[var(--theme-bg-surface)] rounded-2xl p-4 mb-6 border border-[var(--theme-border)]">
                                <div class="flex items-center gap-2 mb-2">
                                    <i data-lucide="globe" class="w-3 h-3 text-[var(--theme-text-muted)]"></i>
                                    <span class="text-[10px] font-bold text-[var(--theme-text-muted)] truncate w-full" title="{{ $session->user_agent }}">
                                        IP: {{ $session->ip }}
                                    </span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <i data-lucide="clock" class="w-3 h-3 text-[var(--theme-text-muted)]"></i>
                                    <span class="text-[10px] font-bold text-[var(--theme-text-muted)]">
                                        Ingreso: {{ \Carbon\Carbon::parse($session->fecha_ingreso)->format('d/m H:i') }}
                                    </span>
                                </div>
                            </div>

                            {{-- Action - Botón Estilo Naranja de la Imagen --}}
                            <button onclick="closeSession('{{ $session->id_sesiones }}')" 
                                    class="w-full py-3.5 rounded-xl bg-rose-500/10 text-rose-500 border border-rose-500/20 font-black text-[10px] uppercase tracking-[0.2em] flex items-center justify-center gap-2 hover:bg-rose-500 hover:text-white transition-all active:scale-95 group/btn shadow-sm hover:shadow-lg hover:shadow-rose-500/20">
                                <i data-lucide="log-out" class="w-4 h-4 group-hover/btn:rotate-12 transition-transform"></i>
                                Cerrar Sesión
                            </button>

                        </div>
                    @endforeach
                </div>
            </div>
        @empty
            <div class="flex flex-col items-center justify-center py-20 text-center select-none opacity-50">
                <div class="w-24 h-24 bg-slate-50 rounded-3xl flex items-center justify-center mb-6">
                    <i data-lucide="shield-check" class="w-10 h-10 text-slate-300"></i>
                </div>
                <h3 class="text-lg font-black text-slate-300 uppercase tracking-widest">Sin Sesiones Activas</h3>
                <p class="text-xs text-slate-400 mt-2 font-medium max-w-xs">No hay otros usuarios conectados a la plataforma en este momento.</p>
            </div>
        @endforelse
    </div>

    </div>

</div>

@push('styles')
<style>
    :root {
        --theme-bg-page: {{ $bgPage }};
        --theme-bg-card: {{ $bgCard }};
        --theme-bg-surface: {{ $bgSurface }};
        --theme-text-main: {{ $textMain }};
        --theme-text-muted: {{ $textMuted }};
        --theme-border: {{ $borderColor }};
        --theme-shadow: {{ $shadowColor }};
        --theme-accent: {{ $accentColor }};
        --theme-accent-soft: color-mix(in srgb, var(--theme-accent), transparent 90%);
    }

    body {
        background-color: var(--theme-bg-page) !important;
        color: var(--theme-text-main) !important;
    }

    .fade-in { animation: fadeIn 0.4s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* Estilos para SweetAlert adaptados al tema */
    .swal2-popup.rounded-\[2rem\] {
        background-color: var(--theme-bg-card) !important;
        color: var(--theme-text-main) !important;
        border: 1px solid var(--theme-border) !important;
    }
    .swal2-title, .swal2-html-container {
        color: var(--theme-text-main) !important;
    }
</style>
@endpush
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        if(typeof lucide !== 'undefined') lucide.createIcons();
    });

    async function closeSession(sessionId) {
        // Confirmación
        const result = await Swal.fire({
            title: '¿Cerrar Sesión?',
            text: "El usuario perderá el acceso inmediatamente y tendrá que volver a ingresar.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#f1f5f9',
            confirmButtonText: 'SÍ, CERRAR',
            cancelButtonText: 'Cancelar',
            customClass: {
                popup: 'rounded-[2rem]',
                confirmButton: 'rounded-xl px-6 py-3 font-black text-[10px] uppercase tracking-widest',
                cancelButton: 'rounded-xl px-6 py-3 font-black text-[10px] uppercase tracking-widest text-slate-500'
            }
        });

        if (result.isConfirmed) {
            try {
                // UI Loading state
                const card = document.getElementById(`session-card-${sessionId}`);
                card.classList.add('opacity-50', 'pointer-events-none');

                const response = await fetch("{{ route('admin.sessions.close') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ session_id: sessionId })
                });

                const data = await response.json();

                if (response.ok && data.success) {
                    // Success UI
                    card.style.transform = 'scale(0.9) translateY(10px)';
                    card.style.opacity = '0';
                    
                    setTimeout(() => {
                        card.remove();
                        // Check if empty
                        if(document.querySelectorAll('[id^="session-card-"]').length === 0) {
                            location.reload(); // Simple reload to show empty state
                        }
                    }, 300);

                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    });
                    
                    Toast.fire({
                        icon: 'success',
                        title: 'Sesión cerrada correctamente'
                    });

                } else {
                    throw new Error(data.message || 'Error al procesar');
                }
            } catch (error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error.message,
                    confirmButtonColor: '#ef4444',
                    customClass: { popup: 'rounded-[2rem]' }
                });
                // Revert UI
                document.getElementById(`session-card-${sessionId}`).classList.remove('opacity-50', 'pointer-events-none');
            }
        }
    }
</script>
@endpush