@extends('layouts.goberdata')

@section('title', 'Gestión de Usuarios')
@section('page_title', 'Gestión de Usuarios')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@section('content')
<!-- Top Bar -->
    <div class="gd-header text-white p-4 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold">👥 Gestión de Usuarios</h1>
            </div>
            <button onclick="window.location.href='/admin/dashboard'" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                <i class="fas fa-arrow-left mr-2"></i> Dashboard
            </button>
        </div>
    </div>

    <!-- Menú de Navegación -->
<div class="container mx-auto px-4 py-8">
        <!-- Auth Warning (si no hay token) -->
        <div id="authWarning" class="hidden bg-red-50 border-l-4 border-red-500 p-6 mb-6 rounded-lg shadow">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold text-red-800 mb-2">
                        <i class="fas fa-exclamation-triangle"></i> No has iniciado sesión
                    </h3>
                    <p class="text-red-700 mb-3">Debes iniciar sesión para gestionar usuarios.</p>
                    <a href="{{ url('/login') }}" class="inline-block bg-red-500 text-white px-6 py-2 rounded-lg font-semibold hover:bg-red-600 transition">
                        <i class="fas fa-sign-in-alt"></i> Iniciar Sesión
                    </a>
                </div>
            </div>
        </div>

        <!-- Campaign Setup Warning (si no tiene campaña) -->
        <div id="noCampaignWarning" class="hidden bg-orange-50 border-l-4 border-orange-500 p-6 mb-6 rounded-lg shadow">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <h3 class="text-xl font-bold text-orange-800 mb-2">
                        <i class="fas fa-exclamation-circle"></i> Debes configurar tu campaña primero
                    </h3>
                    <p class="text-orange-700 mb-3">Antes de crear usuarios, necesitas configurar tu campaña en 3 simples pasos.</p>
                    <a href="{{ url('/campaigns/wizard') }}" class="inline-block bg-orange-500 text-white px-6 py-3 rounded-lg font-bold hover:bg-orange-600 transition">
                        <i class="fas fa-cog"></i> Configurar Mi Campaña
                    </a>
                </div>
                <div class="text-6xl">⚙️</div>
            </div>
        </div>

        <!-- Header -->
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-4xl font-bold text-gray-800 mb-2">
                    <i class="fas fa-users text-indigo-600"></i> Gestión de Usuarios
                </h1>
                <p class="text-gray-600">Administra usuarios y sus roles</p>
            </div>
            <div class="flex gap-3">
                <button onclick="window.location.href='/admin/dashboard'" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition">
                    <i class="fas fa-arrow-left"></i> Volver
                </button>
                <button id="createUserBtn" onclick="openCreateModal()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
                    <i class="fas fa-plus"></i> Nuevo Usuario
                </button>
            </div>
        </div>

        <!-- Filtros -->
        <div class="bg-white rounded-xl shadow-md p-6 mb-6">
            <div class="grid md:grid-cols-3 gap-4">
                <input type="text" id="searchInput" placeholder="🔍 Buscar por nombre o email..."
                    class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <select id="roleFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">Todos los roles</option>
                    <option value="admin">Admin</option>
                    <option value="candidate">Candidato</option>
                    <option value="coordinator">Coordinador</option>
                    <option value="volunteer">Voluntario</option>
                </select>
                <select id="statusFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">Todos los estados</option>
                    <option value="active">Activos</option>
                    <option value="inactive">Inactivos</option>
                </select>
            </div>
        </div>

        <!-- Tabla de Usuarios -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <table class="min-w-full">
                <thead class="bg-indigo-600 text-white">
                    <tr>
                        <th class="px-6 py-3 text-left">Usuario</th>
                        <th class="px-6 py-3 text-left">Email</th>
                        <th class="px-6 py-3 text-left">Roles</th>
                        <th class="px-6 py-3 text-left">Estado</th>
                        <th class="px-6 py-3 text-left">Último acceso</th>
                        <th class="px-6 py-3 text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody id="usersTableBody">
                    <!-- Se llenará dinámicamente -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal Crear/Editar Usuario -->
    <div id="userModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-xl p-8 max-w-md w-full">
            <h3 id="modalTitle" class="text-2xl font-bold mb-4">Nuevo Usuario</h3>

            <!-- Banner de Campaña -->
            <div id="campaignBanner" class="mb-4 p-4 bg-indigo-50 border-l-4 border-indigo-500 rounded">
                <p class="text-sm text-indigo-800">
                    <i class="fas fa-flag"></i> <strong>Campaña:</strong>
                    <span id="currentCampaignNameModal">Cargando...</span>
                </p>
                <p class="text-xs text-indigo-600 mt-1">Este usuario será agregado a tu campaña actual</p>
            </div>

            <form id="userForm">
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Nombre</label>
                    <input type="text" id="userName" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Email</label>
                    <input type="email" id="userEmail" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Contraseña</label>
                    <input type="password" id="userPassword" placeholder="Dejar en blanco para mantener actual" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Rol</label>
                    <select id="userRole" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="volunteer">Voluntario</option>
                        <option value="coordinator">Coordinador</option>
                        <option value="candidate">Candidato</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" id="userActive" checked class="mr-2">
                        <span class="text-gray-700">Usuario activo</span>
                    </label>
                </div>
                <div class="flex gap-3">
                    <button type="button" onclick="closeModal()" class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition">
                        Cancelar
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
                        Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        let users = [];
        let editingUserId = null;

        // Verificar autenticación al cargar
        function checkAuth() {
            const token = localStorage.getItem('auth_token');
            if (!token) {
                document.getElementById('authWarning').classList.remove('hidden');
                setTimeout(() => {
                    window.location.href = '/login';
                }, 2000);
                return false;
            }
            return true;
        }

        async function loadUsers() {
            if (!checkAuth()) return;

            try {
                const response = await fetch('/api/admin/users', {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
                        'Accept': 'application/json'
                    }
                });

                if (response.status === 401) {
                    // Token inválido o expirado
                    localStorage.removeItem('auth_token');
                    localStorage.removeItem('user');
                    window.location.href = '/login';
                    return;
                }

                if (response.ok) {
                    const data = await response.json();
                    users = data.users || [];
                    renderUsers();
                } else {
                    console.error('Error loading users');
                }
            } catch (error) {
                console.error('Error:', error);
            }
        }

        async function checkCampaignStatus() {
            try {
                const response = await fetch('/api/campaigns', {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
                    }
                });

                if (response.ok) {
                    const data = await response.json();
                    const currentCampaign = data.current_campaign;

                    console.log('checkCampaignStatus - currentCampaign:', currentCampaign);

                    const createBtn = document.getElementById('createUserBtn');
                    const warningDiv = document.getElementById('noCampaignWarning');

                    if (!currentCampaign) {
                        // Sin campaña: mostrar aviso y deshabilitar crear usuario
                        console.log('❌ Sin campaña - mostrando warning');
                        warningDiv.classList.remove('hidden');
                        if (createBtn) {
                            createBtn.disabled = true;
                            createBtn.className = 'px-6 py-2 bg-gray-300 text-gray-600 rounded-lg cursor-not-allowed';
                        }
                        return false;
                    }

                    // Con campaña: ocultar aviso y habilitar crear usuario
                    console.log('✅ Con campaña - ocultando warning');
                    warningDiv.classList.add('hidden');
                    if (createBtn) {
                        createBtn.disabled = false;
                        createBtn.className = 'px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition';
                    }
                    return true;
                } else {
                    console.error('Response not OK:', response.status);
                }
            } catch (err) {
                console.error('Error checking campaign:', err);
            }
            return false; // Si hay error, no permitir crear usuarios
        }

        function renderUsers() {
            const tbody = document.getElementById('usersTableBody');
            const search = document.getElementById('searchInput').value.toLowerCase();
            const roleFilter = document.getElementById('roleFilter').value;
            const statusFilter = document.getElementById('statusFilter').value;

            let filtered = users.filter(user => {
                const matchSearch = user.name.toLowerCase().includes(search) || user.email.toLowerCase().includes(search);
                const matchRole = !roleFilter || (user.roles && user.roles.includes(roleFilter));
                const matchStatus = !statusFilter ||
                    (statusFilter === 'active' && user.is_active) ||
                    (statusFilter === 'inactive' && !user.is_active);
                return matchSearch && matchRole && matchStatus;
            });

            tbody.innerHTML = filtered.map(user => `
                <tr class="border-b hover:bg-gray-50">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold mr-3">
                                ${user.name.charAt(0).toUpperCase()}
                            </div>
                            <span class="font-semibold">${user.name}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">${user.email}</td>
                    <td class="px-6 py-4">
                        ${(user.roles || ['volunteer']).map(role => {
                            const colors = {
                                admin: 'bg-red-100 text-red-800',
                                candidate: 'bg-purple-100 text-purple-800',
                                coordinator: 'bg-blue-100 text-blue-800',
                                volunteer: 'bg-green-100 text-green-800'
                            };
                            return `<span class="px-2 py-1 rounded text-xs ${colors[role] || 'bg-gray-100 text-gray-800'}">${role}</span>`;
                        }).join(' ')}
                    </td>
                    <td class="px-6 py-4">
                        <span class="px-3 py-1 rounded-full text-xs ${user.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                            ${user.is_active ? '✓ Activo' : '✗ Inactivo'}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">
                        ${user.updated_at ? new Date(user.updated_at).toLocaleDateString('es-ES') : 'N/A'}
                    </td>
                    <td class="px-6 py-4 text-center">
                        <button onclick="editUser(${user.id})" class="text-blue-600 hover:text-blue-800 mr-3">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button onclick="deleteUser(${user.id})" class="text-red-600 hover:text-red-800">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `).join('');
        }

        async function openCreateModal() {
            editingUserId = null;
            document.getElementById('modalTitle').textContent = 'Nuevo Usuario';
            document.getElementById('userForm').reset();
            document.getElementById('userActive').checked = true;

            // Cargar nombre de campaña actual
            await loadCurrentCampaignName();

            document.getElementById('userModal').classList.remove('hidden');
        }

        async function loadCurrentCampaignName() {
            if (!checkAuth()) return;

            try {
                const response = await fetch('/api/campaigns', {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
                    }
                });

                if (response.status === 401) {
                    localStorage.removeItem('auth_token');
                    localStorage.removeItem('user');
                    window.location.href = '/login';
                    return;
                }

                if (response.ok) {
                    const data = await response.json();
                    const currentCampaign = data.current_campaign;

                    if (currentCampaign) {
                        document.getElementById('currentCampaignNameModal').textContent = currentCampaign.name;
                    } else {
                        document.getElementById('currentCampaignNameModal').textContent = 'No hay campaña activa';
                    }
                }
            } catch (err) {
                document.getElementById('currentCampaignNameModal').textContent = 'Error al cargar';
            }
        }

        function editUser(userId) {
            const user = users.find(u => u.id === userId);
            if (user) {
                editingUserId = userId;
                document.getElementById('modalTitle').textContent = 'Editar Usuario';
                document.getElementById('userName').value = user.name;
                document.getElementById('userEmail').value = user.email;
                document.getElementById('userPassword').value = '';
                document.getElementById('userRole').value = (user.roles && user.roles[0]) || 'volunteer';
                document.getElementById('userActive').checked = user.is_active;
                document.getElementById('userModal').classList.remove('hidden');
            }
        }

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

        async function deleteUser(userId) {
            if (!confirm('¿Estás seguro de eliminar este usuario?')) return;

            // Simulación - implementar API real
            alert('Función de eliminación - implementar endpoint DELETE /api/admin/users/' + userId);
        }

        document.getElementById('userForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            if (!checkAuth()) return;

            const userData = {
                name: document.getElementById('userName').value,
                email: document.getElementById('userEmail').value,
                role: document.getElementById('userRole').value,
                is_active: document.getElementById('userActive').checked
            };

            const password = document.getElementById('userPassword').value;
            if (password) {
                userData.password = password;
            }

            try {
                const response = await fetch('/api/admin/users', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(userData)
                });

                if (response.status === 401) {
                    localStorage.removeItem('auth_token');
                    localStorage.removeItem('user');
                    window.location.href = '/login';
                    return;
                }

                const data = await response.json();

                if (response.ok) {
                    // Refrescar listado SIN cerrar modal
                    await loadUsers();

                    // Mostrar confirmación visual
                    showSuccessInModal('✅ Usuario creado exitosamente');

                    // Limpiar formulario para crear otro
                    document.getElementById('userForm').reset();
                    document.getElementById('userActive').checked = true;
                } else {
                    showErrorInModal('❌ ' + (data.message || 'No se pudo crear el usuario'));
                }
            } catch (err) {
                console.error(err);
                showErrorInModal('❌ Error de red al crear usuario');
            }
        });

        function showSuccessInModal(message) {
            const banner = document.getElementById('campaignBanner');
            banner.className = 'mb-4 p-4 bg-green-50 border-l-4 border-green-500 rounded';
            banner.innerHTML = `
                <p class="text-sm text-green-800">
                    <i class="fas fa-check-circle"></i> ${message}
                </p>
                <p class="text-xs text-green-600 mt-1">Puedes cerrar o crear otro usuario</p>
            `;

            // Restaurar después de 3 segundos
            setTimeout(async () => {
                banner.className = 'mb-4 p-4 bg-indigo-50 border-l-4 border-indigo-500 rounded';
                await loadCurrentCampaignName();
                banner.innerHTML = `
                    <p class="text-sm text-indigo-800">
                        <i class="fas fa-flag"></i> <strong>Campaña:</strong>
                        <span id="currentCampaignNameModal">${document.getElementById('currentCampaignNameModal').textContent}</span>
                    </p>
                    <p class="text-xs text-indigo-600 mt-1">Este usuario será agregado a tu campaña actual</p>
                `;
            }, 3000);
        }

        function showErrorInModal(message) {
            const banner = document.getElementById('campaignBanner');
            banner.className = 'mb-4 p-4 bg-red-50 border-l-4 border-red-500 rounded';
            banner.innerHTML = `
                <p class="text-sm text-red-800">
                    <i class="fas fa-exclamation-circle"></i> ${message}
                </p>
            `;

            // Restaurar después de 3 segundos
            setTimeout(async () => {
                banner.className = 'mb-4 p-4 bg-indigo-50 border-l-4 border-indigo-500 rounded';
                await loadCurrentCampaignName();
                banner.innerHTML = `
                    <p class="text-sm text-indigo-800">
                        <i class="fas fa-flag"></i> <strong>Campaña:</strong>
                        <span id="currentCampaignNameModal">${document.getElementById('currentCampaignNameModal').textContent}</span>
                    </p>
                    <p class="text-xs text-indigo-600 mt-1">Este usuario será agregado a tu campaña actual</p>
                `;
            }, 3000);
        }

        document.getElementById('searchInput').addEventListener('input', renderUsers);
        document.getElementById('roleFilter').addEventListener('change', renderUsers);
        document.getElementById('statusFilter').addEventListener('change', renderUsers);

        // Inicializar: verificar campaña y cargar usuarios
        (async () => {
            await checkCampaignStatus();
            await loadUsers();
        })();
    </script>
@endpush