@extends('layouts.panel')

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

@section('content')

    {{-- Header y Stats --}}
    <div class="flex flex-col lg:flex-row justify-between items-end mb-8 gap-6 border-b border-slate-200 pb-6 shrink-0 fade-in">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <div class="bg-[#194B95] p-2 rounded-lg shadow-md shadow-blue-100">
                    <i data-lucide="users" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-extrabold text-[#0f172a] tracking-tight">GESTIÓN DE STAFF</h1>
                    <p class="text-slate-500 font-medium text-xs">Administración de accesos, roles y rendimiento.</p>
                </div>
            </div>
        </div>
        
        <div class="flex gap-4 w-full lg:w-auto">
            <div class="stat-card flex-1 lg:w-40 border-l-4 border-l-[#194B95] py-3 px-4">
                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Total Staff</p>
                <p class="text-2xl font-black text-[#0f172a]">24</p>
            </div>
            <div class="stat-card flex-1 lg:w-40 border-l-4 border-l-indigo-500 py-3 px-4">
                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Turno Noche</p>
                <p class="text-2xl font-black text-indigo-600">18 <span class="text-xs text-slate-400 font-medium">/ 24</span></p>
            </div>
            <div class="stat-card flex-1 lg:w-40 border-l-4 border-l-emerald-500 py-3 px-4">
                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Activos Ahora</p>
                <p class="text-2xl font-black text-emerald-600 flex items-center gap-1">
                    <span class="relative flex h-2.5 w-2.5 mr-1">
                      <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-2.5 w-2.5 bg-emerald-500"></span>
                    </span> 
                    15
                </p>
            </div>
        </div>
    </div>

    {{-- Buscador y Filtros --}}
    <div class="flex flex-col md:flex-row justify-between items-center mb-6 gap-4 fade-in" style="animation-delay: 100ms;">
        <div class="flex w-full md:w-auto gap-3">
            <div class="relative group w-full md:w-80">
                <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-[#194B95] transition-colors"></i>
                <input type="text" placeholder="Buscar por nombre, ID o email..." class="input-light w-full rounded-xl py-2.5 pl-10 pr-4 text-sm shadow-sm">
            </div>
            <select class="input-light rounded-xl py-2.5 px-4 text-sm font-bold text-slate-600 cursor-pointer w-full md:w-auto">
                <option value="">Todos los Roles</option>
                <option value="admin">Administradores</option>
                <option value="vip">Meseros VIP</option>
                <option value="barra">Barra</option>
                <option value="seguridad">Seguridad</option>
            </select>
        </div>
        
        <button onclick="openModal('modalUsuario')" class="w-full md:w-auto bg-[#194B95] hover:bg-[#123670] text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-blue-100 transition-all flex items-center justify-center gap-2 active:scale-95">
            <i data-lucide="user-plus" class="w-4 h-4"></i> Nuevo Miembro
        </button>
    </div>

    {{-- Tabla de Personal --}}
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm flex flex-col flex-1 overflow-hidden fade-in" style="animation-delay: 200ms;">
        <div class="flex-1 overflow-auto custom-scrollbar">
            <table class="w-full text-left border-collapse">
                <thead class="bg-slate-50 sticky top-0 z-10 border-b border-slate-200">
                    <tr>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Colaborador</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Rol / Puesto</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider">Contacto</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider text-center">Estado</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider text-center">Rendimiento (Mes)</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-wider text-right">Acciones</th>
                    </tr>
                </thead>
                <tbody id="staffTableBody" class="divide-y divide-slate-100 text-sm">
                    {{-- Contenido dinámico cargado vía JS --}}
                </tbody>
            </table>
        </div>

        <div class="p-4 border-t border-slate-200 bg-slate-50 flex justify-between items-center text-xs text-slate-500 font-medium">
            <span id="showingText">Cargando...</span>
            <div class="flex gap-2">
                <button class="px-3 py-1.5 border border-slate-200 bg-white rounded hover:bg-slate-50 disabled:opacity-50" disabled>Anterior</button>
                <button class="px-3 py-1.5 border border-slate-200 bg-white rounded hover:bg-slate-50" disabled>Siguiente</button>
            </div>
        </div>
    </div>

    {{-- Modals remain unchanged in HTML structure... --}}

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        loadStaff();
        
        // Search filter listener
        const searchInput = document.querySelector('input[placeholder="Buscar por nombre, ID o email..."]');
        if(searchInput){
            searchInput.addEventListener('input', (e) => {
                loadStaff(e.target.value);
            });
        }
    });

    // Estado global
    let currentStaff = [];

    async function loadStaff(search = '') {
        const tbody = document.getElementById('staffTableBody');
        const showingText = document.getElementById('showingText');
        
        // Mostrar estado de carga si es la primera vez o búsqueda explícita
        if(!tbody.hasChildNodes() || search.length > 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-8 text-center text-slate-500"><i data-lucide="loader-2" class="w-6 h-6 animate-spin mx-auto mb-2"></i> Cargando personal...</td></tr>';
            lucide.createIcons();
        }

        try {
            // DEBUG: Ver qué está llegando realmente
            console.log('User Payload:', {
                id: "{{ Auth::guard('admin')->id() }}",
                check: "{{ Auth::guard('admin')->check() }}",
                user: @json(Auth::guard('admin')->user()),
                default_user: @json(Auth::user()),
                empresa_id_field: "{{ Auth::guard('admin')->user()->empresa_id ?? 'NULL' }}"
            });

            // Obtener ID de empresa del usuario autenticado (Inyectado por Blade)
            // Intentar obtenerlo del guard 'admin' O del guard por defecto
            const empresaId = "{{ Auth::guard('admin')->user()->empresa_id ?? Auth::user()->empresa_id ?? '' }}";
            
            if (!empresaId || empresaId === 'NULL') {
                console.error("Empresa ID missing. User Data:", @json(Auth::guard('admin')->user()));
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6" class="px-6 py-8 text-center text-red-500">
                            <strong>Error de Contexto:</strong> No se identificó la empresa.<br>
                            <span class="text-xs text-slate-400">
                                Admin Check: {{ Auth::guard('admin')->check() ? 'YES' : 'NO' }} <br>
                                User ID: {{ Auth::guard('admin')->id() ?? 'N/A' }}
                            </span>
                        </td>
                    </tr>`;
                return;
            }

            // Construir URL
            let url = `/api/Security/Staff?empresa_id=${empresaId}`;
            if (search) {
                url += `&search=${encodeURIComponent(search)}`;
            }

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

            if (result.success) {
                currentStaff = result.data;
                renderStaffTable(result.data);
                updateStats(result.data);
            } else {
                console.error("API Error:", result.message);
                tbody.innerHTML = `<tr><td colspan="6" class="px-6 py-8 text-center text-red-500">Error: ${result.message}</td></tr>`;
            }
        } catch (error) {
            console.error('Error loading staff:', error);
            tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-8 text-center text-red-500">Error de conexión al cargar el personal.</td></tr>';
        }
    }

    function renderStaffTable(staffList) {
        const tbody = document.getElementById('staffTableBody');
        const showingText = document.getElementById('showingText');
        tbody.innerHTML = '';

        if (!staffList || staffList.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-8 text-center text-slate-500">No hay miembros de staff registrados.</td></tr>';
            showingText.innerText = 'Mostrando 0 miembros';
            return;
        }

        staffList.forEach(member => {
            // Safeguards para datos
            const name = member.nombre_completo || 'Sin Nombre';
            const email = member.email || 'N/A';
            const phone = member.telefono || 'N/A';
            const role = member.rol || 'Staff';
            // ID recortado para simular formato STF-XXX
            const shortId = 'STF-' + (member.dni ? member.dni.substring(0,4) : '000');
            
            // Iniciales para avatar si no hay foto
            let initials = 'NA';
            if (name !== 'Sin Nombre') {
                const parts = name.match(/\b\w/g) || [];
                initials = (parts.slice(0, 2).join('') || 'NA').toUpperCase();
            }

            // Verificar estado
            const isActive = String(member.estado).toUpperCase() === 'ACTIVO' || member.estado == 1;

            const row = document.createElement('tr');
            row.className = 'hover:bg-blue-50/50 transition-colors group';
            row.innerHTML = `
                <td class="px-6 py-4">
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 rounded-full bg-slate-100 border border-slate-200 p-0.5 flex items-center justify-center text-slate-500 font-bold text-xs overflow-hidden">
                            ${member.foto_url 
                                ? `<img src="${member.foto_url}" class="w-full h-full rounded-full object-cover">` 
                                : `<span>${initials}</span>`
                            }
                        </div>
                        <div>
                            <p class="font-bold text-[#0f172a] text-sm">${name}</p>
                            <p class="text-xs text-slate-500 font-mono">ID: ${shortId}</p>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4">
                    <span class="px-2.5 py-1 rounded text-[10px] font-bold border uppercase tracking-wider badge-admin bg-slate-100 text-slate-600 border-slate-200">
                        ${role}
                    </span>
                </td>
                <td class="px-6 py-4 text-slate-500">
                    <div class="flex items-center gap-2"><i data-lucide="mail" class="w-3 h-3"></i> ${email}</div>
                    <div class="flex items-center gap-2 mt-1"><i data-lucide="phone" class="w-3 h-3"></i> ${phone}</div>
                </td>
                <td class="px-6 py-4 text-center">
                    ${isActive 
                        ? `<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-50 text-emerald-600 border border-emerald-200"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span> Activo</span>`
                        : `<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-slate-50 text-slate-500 border border-slate-200">Inactivo</span>`
                    }
                </td>
                <td class="px-6 py-4 text-center">
                    <span class="text-xs text-slate-400 font-bold italic">N/A</span>
                </td>
                <td class="px-6 py-4 text-right">
                    <div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button onclick="openModal('modalUsuario')" class="p-2 text-slate-400 hover:text-[#194B95] hover:bg-blue-50 rounded-lg transition-colors" title="Editar"><i data-lucide="pencil" class="w-4 h-4"></i></button>
                    </div>
                </td>
            `;
            tbody.appendChild(row);
        });

        showingText.innerText = `Mostrando ${staffList.length} miembros`;
        lucide.createIcons();
    }

    function updateStats(staffList) {
        const total = staffList.length;
        const active = staffList.filter(m => String(m.estado).toUpperCase() === 'ACTIVO' || m.estado == 1).length;
        
        // Buscar elementos por texto si no tienen IDs, o usar selectores más específicos
        // Para asegurar, buscamos los contenedores de las stats
        const statCards = document.querySelectorAll('.stat-card');
        
        if (statCards.length >= 3) {
            // Total Staff (Card 1)
            statCards[0].querySelector('.text-2xl').innerText = total;

            // Turno Noche (Card 2) - Mock por ahora
            // statCards[1].querySelector('.text-2xl').innerText ...

            // Activos Ahora (Card 3)
            const activeEl = statCards[2].querySelector('.text-2xl');
            activeEl.innerHTML = `
                <span class="relative flex h-2.5 w-2.5 mr-1">
                  <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-2.5 w-2.5 bg-emerald-500"></span>
                </span> 
                ${active}
            `;
        }
    }
    
    // Funciones de modal existentes...
    function openModal(id) {
        document.getElementById(id).classList.remove('hidden');
    }

    function closeModal(id) {
        document.getElementById(id).classList.add('hidden');
    }

    // [ANTIGRAVITY] Lógica para guardar nuevo usuario
    document.querySelector('#modalUsuario button.bg-\\[\\#194B95\\]').addEventListener('click', async () => {
        const data = {};
        
        // selectores por ID (más robusto)
        data.nombre_completo = document.getElementById('inputNombre').value;
        data.dni = document.getElementById('inputDNI').value;
        data.email = document.getElementById('inputEmail').value;
        data.telefono = document.getElementById('inputTelefono').value;
        data.rol = document.getElementById('inputRol').value;
        data.turno = document.getElementById('inputTurno').value;

        // Validaciones básicas
        if (!data.nombre_completo || !data.email || !data.rol) {
            alert('Por favor complete Nombre, Email y Rol como mínimo.');
            return;
        }

        const btn = document.querySelector('#modalUsuario button.bg-\\[\\#194B95\\]');
        const originalText = btn.innerText;
        btn.innerText = 'Guardando...';
        btn.disabled = true;

        try {
            const empresaId = "{{ Auth::guard('admin')->user()->empresa_id ?? Auth::user()->empresa_id ?? '' }}";
            
            const payload = {
                ...data,
                empresa_id: empresaId,
                password: 'password123' // Default password, usuario debería cambiarla
            };

            const response = await fetch('/api/Security/Staff', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(payload)
            });

            const result = await response.json();

            if (result.success) {
                alert('Usuario registrado correctamente. Contraseña temporal: password123');
                closeModal('modalUsuario');
                loadStaff(); // Recargar tabla
                // Limpiar inputs
                document.getElementById('inputNombre').value = '';
                document.getElementById('inputDNI').value = '';
                document.getElementById('inputEmail').value = '';
                document.getElementById('inputTelefono').value = '';
                document.getElementById('inputRol').value = 'vip'; // default
                document.getElementById('inputTurno').value = 'manana'; // default
            } else {
                alert('Error al guardar: ' + result.message);
            }

        } catch (error) {
            console.error(error);
            alert('Error de conexión.');
        } finally {
            btn.innerText = originalText;
            btn.disabled = false;
        }
    });
</script>