@extends('layouts.panel')

@section('title', 'Gestión de Staff y Sesiones')

@section('content')

    {{-- Variables de Sesión para JS --}}
    {{-- Lógica de Sesión y Seguridad --}}
    @php
        // 1. Resolución de Empresa y Sucursal buscando en todos los guards (admin, web)
        $user = null;
        $guards = ['admin', 'web'];
        foreach($guards as $g) {
            if(Auth::guard($g)->check()) {
                $user = Auth::guard($g)->user();
                break;
            }
        }
        if (!$user) $user = Auth::user();

        $empresaId = $user->empresa_id ?? '';
        $sucursalId = $user->sucursal_asignada_id ?? '';
        $isInactive = $user && isset($user->estado) && strtoupper($user->estado) === 'INACTIVO';

        // --- 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';
        } 

        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)'; 
            $switchInactive = 'rgba(255, 255, 255, 0.1)';
            $switchKnob = '#ffffff';
        } else {
            $bgCard = 'rgba(255, 255, 255, 0.95)'; 
            $bgSurface = '#f8fafc'; 
            $textMain = '#0f172a'; 
            $textMuted = '#64748b';
            $borderColor = '#e2e8f0'; 
            $shadowColor = 'rgba(148, 163, 184, 0.15)'; 
            $switchInactive = '#e2e8f0';
            $switchKnob = '#ffffff';
        }
    @endphp

    @if($isInactive)
        <div class="fixed inset-0 z-[9999] bg-[var(--theme-bg-page)] flex flex-col items-center justify-center p-6 text-center">
            <div class="w-20 h-20 bg-[var(--theme-accent)]/10 rounded-full flex items-center justify-center mb-4">
                <i data-lucide="shield-off" class="w-10 h-10 text-[var(--theme-accent)]"></i>
            </div>
            <h2 class="text-2xl font-[1000] text-[var(--theme-text-main)] mb-2 uppercase tracking-tighter">Acceso Denegado</h2>
            <p class="text-[var(--theme-text-muted)] max-w-xs mb-8 font-bold uppercase text-[11px] tracking-widest">Su cuenta ha sido desactivada por la administración. No puede continuar en el sistema.</p>
            
            <form id="autoLogoutForm" action="{{ route('logout') }}" method="POST">
                @csrf
                <button type="submit" class="px-10 py-4 bg-[var(--theme-accent)] text-white rounded-2xl font-[1000] shadow-xl shadow-[var(--theme-accent)]/20 uppercase tracking-[0.2em] text-xs hover:brightness-110 transition-all">
                    Volver al Inicio
                </button>
            </form>

            <script src="https://unpkg.com/lucide@latest"></script>
            <script>
                lucide.createIcons();
                // Auto-ejecutar cierre de sesión tras 3 segundos
                setTimeout(() => { document.getElementById('autoLogoutForm').submit(); }, 3000);
            </script>
        </div>
        @php return; @endphp {{-- Detener el renderizado del resto de la página --}}
    @endif


    {{-- Header con Tabs --}}
    <div class="shrink-0 mb-6 fade-in">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
            <div>
                <h1 class="text-3xl font-[1000] text-[var(--theme-text-main)] uppercase tracking-tighter" id="pageTitle">GESTIÓN DE STAFF</h1>
                <p class="text-[11px] font-bold text-[var(--theme-text-muted)] mt-1 uppercase tracking-widest">Control de permisos y monitoreo de sesiones</p>
            </div>
            <button onclick="refreshData()" class="p-3 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-xl shadow-sm hover:brightness-110 transition-all group">
                <i data-lucide="refresh-cw" class="w-5 h-5 text-[var(--theme-accent)] group-hover:rotate-180 transition-transform duration-500"></i>
            </button>
        </div>

        {{-- Tabs Navigation --}}
        <div class="flex gap-2 bg-[var(--theme-bg-surface)] p-2 rounded-[2rem] border border-[var(--theme-border)] shadow-sm w-full md:w-auto">
            <button onclick="switchTab('staff')" id="tab-btn-staff" class="tab-button active flex-1 md:flex-none px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-3">
                <i data-lucide="users" class="w-4 h-4"></i>
                <span class="hidden md:inline">Gestión de Staff</span>
                <span class="md:hidden">Staff</span>
            </button>
            <button onclick="switchTab('sessions')" id="tab-btn-sessions" class="tab-button flex-1 md:flex-none px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-3">
                <i data-lucide="activity" class="w-4 h-4"></i>
                <span class="hidden md:inline">Control de Sesiones</span>
                <span class="md:hidden">Sesiones</span>
            </button>
            <button onclick="switchTab('audit')" id="tab-btn-audit" class="tab-button flex-1 md:flex-none px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-3">
                <i data-lucide="clipboard-list" class="w-4 h-4"></i>
                <span class="hidden md:inline">Registro de Auditoría</span>
                <span class="md:hidden">Auditoría</span>
            </button>
        </div>
    </div>

    {{-- Tab 1: Gestión de Staff --}}
    <div id="content-staff" class="tab-content fade-in">
        {{-- Búsqueda y Filtros --}}
        <div class="mb-6 flex flex-col md:flex-row gap-4">
            <div class="relative flex-1 group">
                <i data-lucide="search" class="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--theme-accent)] group-focus-within:scale-110 transition-transform"></i>
                <input type="text" id="searchStaff" placeholder="Buscar por nombre o DNI..." class="w-full pl-14 pr-6 py-4 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-[2rem] text-sm font-bold text-[var(--theme-text-main)] placeholder:text-[var(--theme-text-muted)] focus:border-[var(--theme-accent)] focus:ring-4 focus:ring-[var(--theme-accent)]/5 outline-none transition-all shadow-sm" oninput="filterStaff()">
            </div>
            <div class="relative min-w-[240px] group">
                <i data-lucide="filter" class="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--theme-text-muted)] group-focus-within:text-[var(--theme-accent)] transition-colors"></i>
                <select id="roleFilter" onchange="filterStaff()" class="w-full pl-14 pr-12 py-4 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-[2rem] text-[11px] font-black uppercase tracking-widest appearance-none focus:border-[var(--theme-accent)] outline-none transition-all shadow-sm cursor-pointer">
                    <option value="ALL">Todos los cargos</option>
                    <option value="BAR">Bar</option>
                    <option value="MESERO">Mesero</option>
                    <option value="CAJA">Caja</option>
                    <option value="COCINA">Cocina / Cocinero</option>
                </select>
                <i data-lucide="chevron-down" class="absolute right-5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--theme-text-muted)] pointer-events-none transition-transform group-focus-within:rotate-180"></i>
            </div>
        </div>

        {{-- Grid de Staff --}}
        <div id="staffGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
            {{-- Generado dinámicamente por JS --}}
            <div class="col-span-full text-center py-12">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-[var(--theme-border)] border-t-[var(--theme-accent)]"></div>
                <p class="text-[var(--theme-text-muted)] font-black uppercase tracking-widest mt-4">Cargando staff...</p>
            </div>
        </div>
    </div>

    {{-- Tab 2: Control de Sesiones --}}
    <div id="content-sessions" class="tab-content hidden">
        {{-- Filtros de Tiempo --}}
        <div class="mb-6 flex justify-center">
            <div class="inline-flex gap-1 bg-[var(--theme-bg-surface)] p-1.5 rounded-2xl border border-[var(--theme-border)] shadow-sm">
                <button onclick="filterSessions('today')" id="filter-today" class="session-filter active px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">
                    Hoy
                </button>
                <button onclick="filterSessions('yesterday')" id="filter-yesterday" class="session-filter px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">
                    Ayer
                </button>
                <button onclick="filterSessions('week')" id="filter-week" class="session-filter px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">
                    Semana
                </button>
            </div>
        </div>

        {{-- Lista de Sesiones --}}
        <div id="sessionsList" class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full">
            {{-- Generado dinámicamente por JS --}}
        </div>
    </div>

    {{-- Tab 3: Registro de Auditoría --}}
    <div id="content-audit" class="tab-content hidden">
        {{-- Filtros de Auditoría --}}
        <div class="mb-6 flex flex-wrap justify-center gap-2">
            <select id="auditTypeFilter" onchange="loadAuditLogs()" class="px-6 py-3 bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] rounded-xl text-[10px] font-black uppercase tracking-widest text-[var(--theme-text-main)] outline-none transition-all shadow-sm cursor-pointer">
                <option value="all">TODOS LOS TIPOS</option>
                <option value="success">EXITOSOS</option>
                <option value="warning">ADVERTENCIAS</option>
                <option value="danger">CRÍTICOS</option>
            </select>
            <button onclick="setAuditTimeFilter('hoy')" id="audit-filter-today" class="audit-filter px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all bg-[var(--theme-bg-surface)] border border-[var(--theme-border)] text-[var(--theme-text-muted)]">
                Hoy
            </button>
            <button onclick="setAuditTimeFilter('all')" id="audit-filter-all" class="audit-filter active px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all bg-[var(--theme-accent)] text-white shadow-lg shadow-[var(--theme-accent)]/20">
                Ver Todo
            </button>
        </div>

        {{-- Lista de Auditoría --}}
        <div id="auditLogsList" class="grid grid-cols-1 lg:grid-cols-2 gap-3 w-full">
            {{-- Generado dinámicamente por JS --}}
        </div>
    </div>

@endsection

@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 }};
    }

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

    /* Tabs */
    .tab-button {
        background: transparent;
        color: var(--theme-text-muted);
    }
    .tab-button.active {
        background: linear-gradient(135deg, var(--theme-accent) 0%, color-mix(in srgb, var(--theme-accent), black 20%) 100%);
        color: white;
        box-shadow: 0 8px 16px -4px color-mix(in srgb, var(--theme-accent), transparent 70%);
    }

    /* Session Filters */
    .session-filter {
        background: transparent;
        color: var(--theme-text-muted);
    }
    .session-filter.active {
        background: var(--theme-accent);
        color: white;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-accent), transparent 70%);
    }

    /* Toggle Switch */
    .toggle-switch {
        position: relative;
        width: 54px;
        height: 28px;
        background: {{ $isDark ? 'rgba(255,255,255,0.1)' : '#e2e8f0' }};
        border-radius: 99px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid var(--theme-border);
    }
    .toggle-switch.active {
        background: color-mix(in srgb, var(--theme-accent), transparent 80%) !important;
        border-color: var(--theme-accent);
    }
    .toggle-switch::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        background: {{ $isDark ? '#475569' : '#94a3b8' }};
        border-radius: 50%;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .toggle-switch.active::after {
        left: 29px;
        background: var(--theme-accent) !important;
        box-shadow: 0 0 10px var(--theme-accent);
    }

    /* Cards and Inputs Adaptación */
    .dynamic-card {
        background-color: var(--theme-bg-card) !important;
        border-color: var(--theme-border) !important;
        color: var(--theme-text-main) !important;
    }
    
    input, select, .dynamic-input {
        background-color: var(--theme-bg-surface) !important;
        color: var(--theme-text-main) !important;
        border-color: var(--theme-border) !important;
    }

    .fade-in {
        animation: fadeIn 0.5s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush

@push('scripts')
<script>
    // ==================== CONFIGURACIÓN ====================
    const API_BASE = '/api/Security';
    let staffData = [];
    let allStaffData = [];

    // ==================== FUNCIONES DE TABS ====================
    function switchTab(tab) {
        // Actualizar botones
        document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
        document.getElementById(`tab-btn-${tab}`).classList.add('active');

        // Actualizar contenido
        document.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden'));
        document.getElementById(`content-${tab}`).classList.remove('hidden');

        // Actualizar título
        const titles = {
            'staff': 'GESTIÓN DE STAFF',
            'sessions': 'CONTROL DE SESIONES',
            'audit': 'REGISTRO DE AUDITORÍA'
        };
        document.getElementById('pageTitle').textContent = titles[tab];

        // Cargar datos si es necesario
        if (tab === 'sessions') loadSessionsData();
        if (tab === 'audit') loadAuditLogs();
    }

    // ==================== GESTIÓN DE STAFF ====================
    async function loadStaffData() {
        try {
            const empresaId = '{{ $empresaId }}';
            const sucursalId = '{{ $sucursalId }}';
            
            const params = new URLSearchParams();
            if (empresaId) params.append('empresa_id', empresaId);
            if (sucursalId) params.append('sucursal_id', sucursalId);

            const response = await fetch(`${API_BASE}/Staff?${params.toString()}`);
            const result = await response.json();

            if (result.success) {
                // EXCLUSIÓN SEGURA: Solo Bar, Mesero, Caja, Cocinero. Ocultar Gerente/Dueño.
                const allowedRoles = ['BAR', 'MESERO', 'CAJA', 'COCINA', 'COCINERO'];
                const restrictedWords = ['GERENTE', 'DUEÑO', 'DUEÑO'];

                allStaffData = result.data.filter(staff => {
                    const role = (staff.rol || '').toUpperCase();
                    const name = (staff.nombre_completo || staff.nombre || '').toUpperCase();
                    
                    // Verificar si el rol está permitido
                    const isAllowedRole = allowedRoles.some(r => role.includes(r));
                    
                    // Verificar si NO es gerente ni dueño (doble check por rol y nombre)
                    const isRestricted = restrictedWords.some(w => role.includes(w) || name.includes(w));
                    
                    return isAllowedRole && !isRestricted;
                });

                staffData = allStaffData;
                filterStaff(); // Aplicar filtros iniciales
            } else {
                console.error('Error result:', result);
                if (result.message === 'Falta empresa_id') {
                    showError('Error: Empresa no identificada en su sesión.');
                } else {
                    showError('Error al cargar staff: ' + result.message);
                }
            }
        } catch (error) {
            console.error('Error loading staff:', error);
            showError('Error de conexión al cargar staff');
        }
    }

    function filterStaff() {
        const query = document.getElementById('searchStaff').value.toLowerCase();
        const roleFilter = document.getElementById('roleFilter').value;

        staffData = allStaffData.filter(staff => {
            const nombre = (staff.nombre_completo || staff.nombre || '').toLowerCase();
            const dni = (staff.dni || staff.documento || '').toString();
            const role = (staff.rol || '').toUpperCase();

            // Filtro por búsqueda de texto
            const matchesQuery = nombre.includes(query) || dni.includes(query);
            
            // Filtro por Rol (Select)
            let matchesRole = true;
            if (roleFilter !== 'ALL') {
                matchesRole = role.includes(roleFilter);
            }

            return matchesQuery && matchesRole;
        });

        renderStaff();
    }

    function renderStaff(filteredData = staffData) {
        const grid = document.getElementById('staffGrid');
        
        if (filteredData.length === 0) {
            grid.innerHTML = `
                <div class="text-center py-12">
                    <i data-lucide="user-x" class="w-16 h-16 text-[var(--theme-text-muted)] opacity-20 mx-auto mb-4"></i>
                    <p class="text-[var(--theme-text-muted)] font-[1000] uppercase tracking-widest text-xs">No se encontraron resultados</p>
                </div>
            `;
            lucide.createIcons();
            return;
        }

        grid.innerHTML = filteredData.map(staff => {
            const isEnabled = staff.estado === 'ACTIVO';
            const initials = getInitials(staff.nombre_completo || staff.nombre || '');
            const fotoUrl = staff.foto_url ? `/api/Security/uploads/${staff.foto_url}` : null;
            
            return `
                <div class="bg-[var(--theme-bg-card)] rounded-[2rem] border border-[var(--theme-border)] p-5 shadow-sm hover:shadow-md hover:border-[var(--theme-accent)]/30 transition-all group/card">
                    <div class="flex items-center gap-5">
                        <div class="w-14 h-14 rounded-full bg-[var(--theme-bg-surface)] flex items-center justify-center text-sm font-[1000] text-[var(--theme-text-muted)] flex-shrink-0 border-2 border-[var(--theme-border)] shadow-sm overflow-hidden group-hover/card:scale-105 transition-transform">
                            ${fotoUrl ? `<img src="${fotoUrl}" class="w-full h-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" /><span style="display:none;">${initials}</span>` : initials}
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="text-base font-[1000] text-[var(--theme-text-main)] uppercase tracking-tight leading-tight truncate">
                                ${staff.nombre_completo || staff.nombre || 'SIN NOMBRE'}
                            </h3>
                            <p class="text-[10px] font-black text-[var(--theme-accent)] mt-0.5 uppercase tracking-widest truncate">
                                ${staff.rol || 'STAFF'}
                            </p>
                            <div class="flex items-center gap-2 mt-1.5">
                                <div class="w-2 h-2 rounded-full ${isEnabled ? 'bg-emerald-500 animate-pulse' : 'bg-red-500'}"></div>
                                <p class="text-[9px] font-black uppercase tracking-widest ${isEnabled ? 'text-emerald-500' : 'text-red-500'}">
                                    ${isEnabled ? 'Acceso Habilitado' : 'Cuenta Bloqueada'}
                                </p>
                            </div>
                        </div>
                        <div class="flex flex-col items-center justify-center min-w-[60px] gap-2">
                            <div onclick="toggleAccess('${staff.id_usuario}', '${staff.estado}')" 
                                 class="toggle-switch ${isEnabled ? 'active' : ''} scale-90" 
                                 title="${isEnabled ? 'Bloquear' : 'Habilitar'}">
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }).join('');

        lucide.createIcons();
    }

    function getInitials(nombreCompleto) {
        const parts = nombreCompleto.trim().split(' ').filter(p => p.length > 0);
        if (parts.length === 0) return '??';
        if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase();
        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    }

    async function toggleAccess(usuarioId, estadoActual) {
        const nuevoEstado = estadoActual === 'ACTIVO' ? 'INACTIVO' : 'ACTIVO';
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;

        if (!csrfToken) {
            alert('Error: Token CSRF no encontrado. Por favor, refresque la página.');
            return;
        }
        
        try {
            const response = await fetch(`${API_BASE}/Staff/Estado`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({
                    usuario_id: usuarioId,
                    estado: nuevoEstado
                })
            });

            if (!response.ok) {
                const errorText = await response.text();
                console.error('API Error:', response.status, errorText);
                alert(`Error del servidor (${response.status}). Intente de nuevo.`);
                return;
            }

            const result = await response.json();

            if (result.success) {
                // Actualizar datos locales
                const staff = allStaffData.find(s => s.id_usuario === usuarioId);
                if (staff) {
                    staff.estado = nuevoEstado;
                    renderStaff(staffData);
                }
            } else {
                alert('No se pudo cambiar el estado: ' + result.message);
                await loadStaffData();
            }
        } catch (error) {
            console.error('Fetch Error:', error);
            alert('Error de red o conexión. Verifique su internet.');
            await loadStaffData();
        }
    }

    function showError(message) {
        document.getElementById('staffGrid').innerHTML = `
            <div class="text-center py-12">
                <i data-lucide="alert-circle" class="w-16 h-16 text-[var(--theme-accent)] opacity-50 mx-auto mb-4"></i>
                <p class="text-[var(--theme-accent)] font-black uppercase tracking-widest text-xs px-4">${message}</p>
            </div>
        `;
        lucide.createIcons();
    }

    // ==================== CONTROL DE SESIONES ====================
    let sessionsData = [];

    async function loadSessionsData(filter = 'today') {
        const list = document.getElementById('sessionsList');
        list.innerHTML = `
            <div class="text-center py-12">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-[var(--theme-border)] border-t-[var(--theme-accent)]"></div>
                <p class="text-[var(--theme-text-muted)] font-black uppercase tracking-widest mt-4">Cargando sesiones...</p>
            </div>
        `;

        try {
            const empresaId = '{{ $empresaId }}';
            const sucursalId = '{{ $sucursalId }}';
            
            const params = new URLSearchParams();
            if (empresaId) params.append('empresa_id', empresaId);
            if (sucursalId) params.append('sucursal_id', sucursalId);
            params.append('filtro_fecha', filter); // ENVIAR FILTRO DIRECTAMENTE

            const url = `${API_BASE}/Staff/Sessions?${params.toString()}`;
            console.log('Fetching sessions from:', url);

            const response = await fetch(url);
            const result = await response.json();

            console.log('Sessions Data Result:', result);

            if (result.success && Array.isArray(result.data)) {
                 sessionsData = result.data;
                 renderSessions();
            } else if (Array.isArray(result)) {
                sessionsData = result;
                renderSessions();
            } else {
                list.innerHTML = `<p class="text-center text-slate-400 py-12">No se pudo cargar el historial (${result.message || 'Error desconocido'}).</p>`;
            }
        } catch (error) {
            console.error('Error loading sessions:', error);
            list.innerHTML = `<p class="text-center text-red-400 py-12 font-bold">Error de conexión.</p>`;
        }
    }

    function renderSessions() {
        const list = document.getElementById('sessionsList');
        
        if (sessionsData.length === 0) {
            list.innerHTML = `
                <div class="text-center py-12">
                    <i data-lucide="activity" class="w-16 h-16 text-[var(--theme-text-muted)] opacity-20 mx-auto mb-4"></i>
                    <p class="text-[var(--theme-text-muted)] font-[1000] uppercase tracking-widest text-xs">No hay sesiones registradas en este periodo.</p>
                </div>
            `;
            lucide.createIcons();
            return;
        }

        list.innerHTML = sessionsData.map(session => {
            const fechaObj = new Date(session.fecha_ingreso);
            const hora = fechaObj.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
            const fecha = fechaObj.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' });
            
            return `
                <div class="bg-[var(--theme-bg-card)] rounded-2xl border border-[var(--theme-border)] p-5 shadow-sm hover:shadow-md transition-all group">
                    <div class="flex items-center gap-6">
                        <div class="w-12 h-12 rounded-2xl bg-[var(--theme-accent)]/10 flex items-center justify-center flex-shrink-0 border border-[var(--theme-accent)]/20 group-hover:scale-105 transition-transform">
                            <i data-lucide="log-in" class="w-6 h-6 text-[var(--theme-accent)]"></i>
                        </div>
                        <div class="flex-1 min-w-0 py-1">
                            <h3 class="text-base font-[1000] text-[var(--theme-text-main)] uppercase tracking-tight leading-tight truncate">
                                ${session.nombre_completo || 'USUARIO'}
                            </h3>
                            <div class="flex items-center gap-3 text-[10px] text-[var(--theme-text-muted)] font-black uppercase tracking-widest mt-1">
                                <span class="text-[var(--theme-accent)]">${session.rol || 'STAFF'}</span>
                                <span class="font-mono opacity-60">${session.ip || '0.0.0.0'}</span>
                            </div>
                        </div>
                        <div class="text-right flex-shrink-0">
                            <p class="text-base font-[1000] text-[var(--theme-text-main)] tracking-tighter">${hora}</p>
                            <p class="text-[9px] font-black text-[var(--theme-text-muted)] mt-0.5 uppercase tracking-widest">${fecha}</p>
                        </div>
                    </div>
                </div>
            `;
        }).join('');

        lucide.createIcons();
    }

    function filterSessions(filter) {
        document.querySelectorAll('.session-filter').forEach(btn => {
            btn.classList.remove('active', 'bg-[var(--theme-accent)]', 'text-white');
        });
        const activeBtn = document.getElementById(`filter-${filter}`);
        activeBtn.classList.add('active', 'bg-[var(--theme-accent)]', 'text-white');
        loadSessionsData(filter);
    }

    // ==================== REGISTRO DE AUDITORÍA ====================
    let auditTimeFilter = 'all';

    async function setAuditTimeFilter(filter) {
        auditTimeFilter = filter;
        document.querySelectorAll('.audit-filter').forEach(btn => {
            btn.classList.remove('active', 'bg-[var(--theme-accent)]', 'text-white');
            btn.classList.add('bg-[var(--theme-bg-surface)]', 'text-[var(--theme-text-muted)]');
        });
        
        const activeBtn = document.getElementById(`audit-filter-${filter}`);
        activeBtn.classList.add('active', 'bg-[var(--theme-accent)]', 'text-white');
        activeBtn.classList.remove('bg-[var(--theme-bg-surface)]', 'text-[var(--theme-text-muted)]');
        
        loadAuditLogs();
    }

    async function loadAuditLogs() {
        const list = document.getElementById('auditLogsList');
        list.innerHTML = `
            <div class="text-center py-12">
                <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-[var(--theme-border)] border-t-[var(--theme-accent)]"></div>
                <p class="text-[var(--theme-text-muted)] font-black uppercase tracking-widest mt-4">Cargando registros...</p>
            </div>
        `;

        try {
            const typeFilter = document.getElementById('auditTypeFilter').value;
            const params = new URLSearchParams();
            if (auditTimeFilter !== 'all') params.append('filtro_fecha', auditTimeFilter);
            if (typeFilter !== 'all') params.append('filtro_tipo', typeFilter);

            const response = await fetch(`${API_BASE}/Audit/Logs?${params.toString()}`);
            const result = await response.json();

            if (result.success && Array.isArray(result.data)) {
                renderAuditLogs(result.data);
            } else if (Array.isArray(result)) {
                renderAuditLogs(result);
            } else {
                list.innerHTML = `<p class="text-center text-slate-400 py-12">No hay registros de auditoría.</p>`;
            }
        } catch (error) {
            console.error('Error loading audit logs:', error);
            list.innerHTML = `<p class="text-center text-[var(--theme-accent)] py-12 font-black uppercase tracking-widest">Error al conectar con auditoría.</p>`;
        }
    }

    function renderAuditLogs(logs) {
        const list = document.getElementById('auditLogsList');
        
        if (logs.length === 0) {
            list.innerHTML = `
                <div class="text-center py-12">
                    <i data-lucide="clipboard-list" class="w-16 h-16 text-[var(--theme-text-muted)] opacity-20 mx-auto mb-4"></i>
                    <p class="text-[var(--theme-text-muted)] font-[1000] uppercase tracking-widest text-xs">Sin actividad para mostrar.</p>
                </div>
            `;
            lucide.createIcons();
            return;
        }

        list.innerHTML = logs.map(log => {
            const colorClass = {
                'DANGER': 'text-red-500 bg-red-500/5',
                'WARNING': 'text-amber-500 bg-amber-500/5',
                'SUCCESS': 'text-emerald-500 bg-emerald-500/5',
                'INFO': 'text-blue-500 bg-blue-500/5'
            }[log.tipo_semaforo] || 'text-[var(--theme-text-muted)] bg-[var(--theme-bg-surface)]';

            return `
                <div class="bg-[var(--theme-bg-card)] rounded-xl border border-[var(--theme-border)] p-4 shadow-sm hover:shadow-md transition-all group overflow-hidden">
                    <div class="flex items-center gap-4">
                        <div class="w-2.5 h-12 rounded-full ${colorClass.split(' ')[1]} flex-shrink-0 border border-current opacity-20"></div>
                        <div class="flex-1 min-w-0 py-0.5">
                            <div class="flex items-center justify-between gap-3">
                                <span class="px-2.5 py-1 rounded-lg border border-current ${colorClass.split(' ')[0]} text-[9px] font-black uppercase tracking-widest">
                                    ${log.accion}
                                </span>
                                <span class="text-[9px] font-black text-[var(--theme-text-muted)] uppercase tracking-widest opacity-60">${log.fecha_formateada || ''}</span>
                            </div>
                            <p class="text-xs font-bold text-[var(--theme-text-main)] mt-1.5 truncate uppercase tracking-tight" title="${log.descripcion}">
                                ${log.descripcion}
                            </p>
                            <div class="flex items-center gap-5 mt-1 text-[9px] text-[var(--theme-text-muted)] font-black uppercase tracking-widest">
                                <span class="text-[var(--theme-accent)] truncate">${log.nombre_completo || 'SISTEMA'}</span>
                                <span class="opacity-40">${log.modulo}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }).join('');

        lucide.createIcons();
    }

    // ==================== UTILIDADES ====================
    function refreshData() {
        const activeTab = document.querySelector('.tab-button.active').id.replace('tab-btn-', '');
        if (activeTab === 'staff') loadStaffData();
        else if (activeTab === 'sessions') {
            const activeFilter = document.querySelector('.session-filter.active').id.replace('filter-', '');
            loadSessionsData(activeFilter);
        } else if (activeTab === 'audit') {
            loadAuditLogs();
        }
    }

    // ==================== INICIALIZACIÓN ====================
    document.addEventListener('DOMContentLoaded', function() {
        loadStaffData();
        loadSessionsData('today');
        lucide.createIcons();
    });
</script>
@endpush