@extends('dashboard.layouts.app')

@section('title', 'Configuración de Seguridad')

@section('content')
<div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h2 class="text-title-md2 font-bold text-black dark:text-white">
            Configuración de Seguridad
        </h2>
    </div>

    <!-- Alertas de éxito/error -->
    @if(session('success'))
        <div class="mb-4 rounded-lg bg-success-50 p-4 text-success-700 dark:bg-success-900/20 dark:text-success-400">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-4 rounded-lg bg-error-50 p-4 text-error-700 dark:bg-error-900/20 dark:text-error-400">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <!-- Cambio de Contraseña -->
        <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
            <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white">
                Cambiar Contraseña
            </h3>
            
            <form action="{{ route('security.password') }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="mb-4">
                    <label for="current_password" class="mb-2.5 block text-sm font-medium text-gray-700 dark:text-white">
                        Contraseña Actual
                    </label>
                    <input
                        type="password"
                        id="current_password"
                        name="current_password"
                        class="w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pl-4 pr-10 text-gray-700 placeholder:text-gray-400 focus:border-primary focus-visible:outline-none dark:border-gray-600 dark:text-white dark:placeholder:text-gray-400"
                        placeholder="Ingresa tu contraseña actual"
                        required
                    />
                </div>

                <div class="mb-4">
                    <label for="password" class="mb-2.5 block text-sm font-medium text-gray-700 dark:text-white">
                        Nueva Contraseña
                    </label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pl-4 pr-10 text-gray-700 placeholder:text-gray-400 focus:border-primary focus-visible:outline-none dark:border-gray-600 dark:text-white dark:placeholder:text-gray-400"
                        placeholder="Ingresa tu nueva contraseña"
                        required
                    />
                    <p class="mt-1 text-xs text-gray-500">
                        Mínimo 8 caracteres, incluyendo mayúsculas, minúsculas, números y caracteres especiales
                    </p>
                </div>

                <div class="mb-6">
                    <label for="password_confirmation" class="mb-2.5 block text-sm font-medium text-gray-700 dark:text-white">
                        Confirmar Nueva Contraseña
                    </label>
                    <input
                        type="password"
                        id="password_confirmation"
                        name="password_confirmation"
                        class="w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pl-4 pr-10 text-gray-700 placeholder:text-gray-400 focus:border-primary focus-visible:outline-none dark:border-gray-600 dark:text-white dark:placeholder:text-gray-400"
                        placeholder="Confirma tu nueva contraseña"
                        required
                    />
                </div>

                <button
                    type="submit"
                    class="inline-flex items-center justify-center rounded-lg bg-primary px-6 py-2.5 text-center text-sm font-medium text-white hover:bg-opacity-90"
                >
                    <i data-lucide="lock" class="mr-2 h-4 w-4"></i>
                    Cambiar Contraseña
                </button>
            </form>
        </div>

        <!-- Configuración de Seguridad -->
        <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
            <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white">
                Configuración de Seguridad
            </h3>
            
            <form action="{{ route('security.settings') }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="mb-4">
                    <div class="flex items-center justify-between">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            Autenticación de dos factores
                        </label>
                        <div x-data="{ switcherToggle: false }">
                            <label class="flex cursor-pointer items-center">
                                <div class="relative">
                        <input
                            type="checkbox"
                            name="two_factor_enabled"
                                        class="sr-only"
                                        @change="switcherToggle = !switcherToggle"
                                    />
                                    <div
                                        class="block h-6 w-11 rounded-full"
                                        :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                                    ></div>
                                    <div
                                        :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                                        class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                                    ></div>
                                </div>
                    </label>
                        </div>
                    </div>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Requiere un código adicional al iniciar sesión
                    </p>
                </div>

                <div class="mb-4">
                    <label for="session_timeout" class="mb-2.5 block text-sm font-medium text-gray-700 dark:text-white">
                        Tiempo de Sesión (minutos)
                    </label>
                    <select
                        id="session_timeout"
                        name="session_timeout"
                        class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800"
                    >
                        <option value="15">15 minutos</option>
                        <option value="30">30 minutos</option>
                        <option value="60" selected>1 hora</option>
                        <option value="120">2 horas</option>
                        <option value="240">4 horas</option>
                        <option value="480">8 horas</option>
                    </select>
                </div>

                <div class="mb-4">
                    <div class="flex items-center justify-between">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            Notificaciones de inicio de sesión
                        </label>
                        <div x-data="{ switcherToggle: true }">
                            <label class="flex cursor-pointer items-center">
                                <div class="relative">
                        <input
                            type="checkbox"
                            name="login_notifications"
                            checked
                                        class="sr-only"
                                        @change="switcherToggle = !switcherToggle"
                        />
                                    <div
                                        class="block h-6 w-11 rounded-full"
                                        :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                                    ></div>
                                    <div
                                        :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                                        class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                                    ></div>
                                </div>
                    </label>
                        </div>
                    </div>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Recibe alertas por email cuando inicies sesión desde un nuevo dispositivo
                    </p>
                </div>

                <div class="mb-6">
                    <div class="flex items-center justify-between">
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            Gestión de dispositivos
                        </label>
                        <div x-data="{ switcherToggle: true }">
                            <label class="flex cursor-pointer items-center">
                                <div class="relative">
                        <input
                            type="checkbox"
                            name="device_management"
                            checked
                                        class="sr-only"
                                        @change="switcherToggle = !switcherToggle"
                        />
                                    <div
                                        class="block h-6 w-11 rounded-full"
                                        :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                                    ></div>
                                    <div
                                        :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                                        class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                                    ></div>
                                </div>
                    </label>
                        </div>
                    </div>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Permite ver y gestionar dispositivos conectados
                    </p>
                </div>

                <button
                    type="submit"
                    class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-3 focus:ring-blue-500/10 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-200"
                >
                    <i data-lucide="settings" class="w-4 h-4"></i>
                    Guardar Configuración
                </button>
            </form>
        </div>
    </div>

    <!-- Sesiones Activas -->
    <div class="mt-6 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
        <div class="mb-4 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">
                Sesiones Activas
            </h3>
            <button
                id="terminate-all-sessions"
                class="inline-flex items-center justify-center rounded-lg bg-error px-4 py-2 text-center text-sm font-medium text-white hover:bg-opacity-90"
            >
                <i data-lucide="log-out" class="mr-2 h-4 w-4"></i>
                Cerrar Todas las Demás Sesiones
            </button>
        </div>
        
        <div id="sessions-container" class="space-y-3">
            <!-- Las sesiones se cargarán dinámicamente aquí -->
        </div>
    </div>

    <!-- Historial de Actividad -->
    <div class="mt-6 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
        <h3 class="mb-4 text-lg font-semibold text-gray-800 dark:text-white">
            Historial de Actividad de Seguridad
        </h3>
        
        <div id="activity-container" class="space-y-3">
            <!-- El historial se cargará dinámicamente aquí -->
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Cargar sesiones activas
    loadActiveSessions();
    
    // Cargar historial de actividad
    loadSecurityActivity();
    
    // Evento para cerrar todas las demás sesiones
    document.getElementById('terminate-all-sessions').addEventListener('click', function() {
        if (confirm('¿Estás seguro de que quieres cerrar todas las demás sesiones?')) {
            terminateAllOtherSessions();
        }
    });
});

function loadActiveSessions() {
    fetch('{{ route("security.sessions") }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const container = document.getElementById('sessions-container');
                container.innerHTML = '';
                
                data.sessions.forEach(session => {
                    const sessionElement = createSessionElement(session);
                    container.appendChild(sessionElement);
                });
            }
        })
        .catch(error => {
            console.error('Error al cargar sesiones:', error);
        });
}

function createSessionElement(session) {
    const div = document.createElement('div');
    div.className = 'flex items-center justify-between rounded-lg border border-gray-200 p-4 dark:border-gray-700';
    
    const isCurrent = session.is_current ? 'bg-primary/10 border-primary' : '';
    div.className += ` ${isCurrent}`;
    
    div.innerHTML = `
        <div class="flex items-center space-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
                <i data-lucide="monitor" class="h-5 w-5 text-primary"></i>
            </div>
            <div>
                <p class="font-medium text-gray-800 dark:text-white">${session.device}</p>
                <p class="text-sm text-gray-500">${session.location} • ${session.ip_address}</p>
                <p class="text-xs text-gray-400">Última actividad: ${formatTime(session.last_activity)}</p>
            </div>
        </div>
        <div class="flex items-center space-x-2">
            ${session.is_current ? '<span class="rounded-full bg-primary px-2 py-1 text-xs text-white">Actual</span>' : ''}
            ${!session.is_current ? `<button onclick="terminateSession('${session.id}')" class="rounded-lg bg-error px-3 py-1 text-sm text-white hover:bg-opacity-90">Cerrar</button>` : ''}
        </div>
    `;
    
    return div;
}

function terminateSession(sessionId) {
    if (confirm('¿Estás seguro de que quieres cerrar esta sesión?')) {
        fetch(`{{ route('security.sessions.terminate', '') }}/${sessionId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showSuccessAlert(data.message);
                loadActiveSessions();
            } else {
                showErrorAlert(data.message);
            }
        })
        .catch(error => {
            console.error('Error al cerrar sesión:', error);
            showErrorAlert('Error al cerrar la sesión');
        });
    }
}

function terminateAllOtherSessions() {
    fetch('{{ route("security.sessions.terminate-all") }}', {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSuccessAlert(data.message);
            loadActiveSessions();
        } else {
            showErrorAlert(data.message);
        }
    })
    .catch(error => {
        console.error('Error al cerrar sesiones:', error);
        showErrorAlert('Error al cerrar las sesiones');
    });
}

function loadSecurityActivity() {
    fetch('{{ route("security.activity") }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const container = document.getElementById('activity-container');
                container.innerHTML = '';
                
                data.activity.forEach(activity => {
                    const activityElement = createActivityElement(activity);
                    container.appendChild(activityElement);
                });
            }
        })
        .catch(error => {
            console.error('Error al cargar actividad:', error);
        });
}

function createActivityElement(activity) {
    const div = document.createElement('div');
    div.className = 'flex items-center justify-between rounded-lg border border-gray-200 p-4 dark:border-gray-700';
    
    const statusColor = activity.status === 'success' ? 'text-success' : 'text-error';
    const statusIcon = activity.status === 'success' ? 'check-circle' : 'x-circle';
    
    div.innerHTML = `
        <div class="flex items-center space-x-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                <i data-lucide="${statusIcon}" class="h-5 w-5 ${statusColor}"></i>
            </div>
            <div>
                <p class="font-medium text-gray-800 dark:text-white">${activity.action}</p>
                <p class="text-sm text-gray-500">${activity.description}</p>
                <p class="text-xs text-gray-400">${activity.device} • ${activity.ip_address}</p>
            </div>
        </div>
        <div class="text-right">
            <p class="text-sm text-gray-500">${formatTime(activity.timestamp)}</p>
        </div>
    `;
    
    return div;
}

function formatTime(timestamp) {
    const date = new Date(timestamp);
    const now = new Date();
    const diffInMinutes = Math.floor((now - date) / (1000 * 60));
    
    if (diffInMinutes < 1) {
        return 'Hace un momento';
    } else if (diffInMinutes < 60) {
        return `Hace ${diffInMinutes} minutos`;
    } else if (diffInMinutes < 1440) {
        const hours = Math.floor(diffInMinutes / 60);
        return `Hace ${hours} hora${hours > 1 ? 's' : ''}`;
    } else {
        const days = Math.floor(diffInMinutes / 1440);
        return `Hace ${days} día${days > 1 ? 's' : ''}`;
    }
}

function showSuccessAlert(message) {
    if (typeof showSuccessAlert === 'function') {
        window.showSuccessAlert(message);
    } else {
        alert(message);
    }
}

function showErrorAlert(message) {
    if (typeof showErrorAlert === 'function') {
        window.showErrorAlert(message);
    } else {
        alert(message);
    }
}
</script>
@endpush
@endsection