@extends('layouts.app')

@section('title', 'Seguridad del Sistema')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Panel de Seguridad</h3>
                </div>
                <div class="card-body">
                    <!-- Estadísticas de Seguridad -->
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $estadisticas['usuarios_con_2fa'] }}</h4>
                                    <small>Usuarios con 2FA</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $estadisticas['usuarios_bloqueados'] }}</h4>
                                    <small>Usuarios Bloqueados</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $estadisticas['intentos_fallidos_hoy'] }}</h4>
                                    <small>Intentos Fallidos Hoy</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $estadisticas['sesiones_activas'] }}</h4>
                                    <small>Sesiones Activas</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h4>{{ $estadisticas['cambios_password_hoy'] }}</h4>
                                    <small>Cambios Password Hoy</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pestañas de Seguridad -->
                    <ul class="nav nav-tabs" id="securityTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="authentication-tab" data-toggle="tab" href="#authentication" role="tab">
                                <i class="fas fa-shield-alt"></i> Autenticación
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="sessions-tab" data-toggle="tab" href="#sessions" role="tab">
                                <i class="fas fa-users"></i> Sesiones
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="policies-tab" data-toggle="tab" href="#policies" role="tab">
                                <i class="fas fa-cog"></i> Políticas
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="logs-tab" data-toggle="tab" href="#logs" role="tab">
                                <i class="fas fa-list"></i> Logs
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content" id="securityTabsContent">
                        <!-- Pestaña de Autenticación -->
                        <div class="tab-pane fade show active" id="authentication" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Autenticación de Dos Factores (2FA)</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <div class="form-check">
                                                    <input type="checkbox" id="habilitar_2fa" class="form-check-input" {{ Auth::user()->two_factor_enabled ? 'checked' : '' }}>
                                                    <label for="habilitar_2fa" class="form-check-label">Habilitar 2FA</label>
                                                </div>
                                            </div>
                                            <div class="form-group" id="metodo_2fa_group" style="display: none;">
                                                <label for="metodo_2fa">Método de Autenticación</label>
                                                <select id="metodo_2fa" class="form-control">
                                                    <option value="app">Aplicación Autenticadora</option>
                                                    <option value="sms">SMS</option>
                                                    <option value="email">Correo Electrónico</option>
                                                </select>
                                            </div>
                                            <button type="button" class="btn btn-primary" onclick="configurar2FA()">
                                                <i class="fas fa-save"></i> Guardar Configuración
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Cambiar Contraseña</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="cambiarPasswordForm">
                                                <div class="form-group">
                                                    <label for="password_actual">Contraseña Actual</label>
                                                    <input type="password" id="password_actual" class="form-control" required>
                                                </div>
                                                <div class="form-group">
                                                    <label for="password_nuevo">Nueva Contraseña</label>
                                                    <input type="password" id="password_nuevo" class="form-control" required minlength="8">
                                                </div>
                                                <div class="form-group">
                                                    <label for="password_confirm">Confirmar Nueva Contraseña</label>
                                                    <input type="password" id="password_confirm" class="form-control" required>
                                                </div>
                                                <button type="submit" class="btn btn-warning">
                                                    <i class="fas fa-key"></i> Cambiar Contraseña
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pestaña de Sesiones -->
                        <div class="tab-pane fade" id="sessions" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h5>Sesiones Activas</h5>
                                            <button type="button" class="btn btn-danger btn-sm" onclick="revocarTodasLasSesiones()">
                                                <i class="fas fa-ban"></i> Revocar Todas
                                            </button>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-striped">
                                                    <thead>
                                                        <tr>
                                                            <th>Usuario</th>
                                                            <th>IP</th>
                                                            <th>Navegador</th>
                                                            <th>Última Actividad</th>
                                                            <th>Acciones</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="sesionesTable">
                                                        @forelse($sesionesActivas as $sesion)
                                                            <tr>
                                                                <td>{{ $sesion['usuario'] }}</td>
                                                                <td>{{ $sesion['ip'] }}</td>
                                                                <td>{{ $sesion['navegador'] }}</td>
                                                                <td>{{ $sesion['ultima_actividad'] }}</td>
                                                                <td>
                                                                    <button type="button" class="btn btn-sm btn-danger" onclick="revocarSesion({{ $sesion['id'] }})">
                                                                        <i class="fas fa-ban"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="5" class="text-center">No hay sesiones activas</td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pestaña de Políticas -->
                        <div class="tab-pane fade" id="policies" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Políticas de Contraseñas</h5>
                                        </div>
                                        <div class="card-body">
                                            <form id="politicasForm">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="longitud_minima">Longitud Mínima</label>
                                                            <input type="number" id="longitud_minima" class="form-control" value="8" min="6" max="20">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="dias_expiracion">Días de Expiración</label>
                                                            <input type="number" id="dias_expiracion" class="form-control" value="90" min="30" max="365">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-check">
                                                                <input type="checkbox" id="requerir_mayusculas" class="form-check-input" checked>
                                                                <label for="requerir_mayusculas" class="form-check-label">Requerir Mayúsculas</label>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="form-check">
                                                                <input type="checkbox" id="requerir_minusculas" class="form-check-input" checked>
                                                                <label for="requerir_minusculas" class="form-check-label">Requerir Minúsculas</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-check">
                                                                <input type="checkbox" id="requerir_numeros" class="form-check-input" checked>
                                                                <label for="requerir_numeros" class="form-check-label">Requerir Números</label>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="form-check">
                                                                <input type="checkbox" id="requerir_simbolos" class="form-check-input">
                                                                <label for="requerir_simbolos" class="form-check-label">Requerir Símbolos</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="prevenir_reutilizacion">Prevenir Reutilización (últimas N contraseñas)</label>
                                                    <input type="number" id="prevenir_reutilizacion" class="form-control" value="5" min="1" max="10">
                                                </div>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-save"></i> Guardar Políticas
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pestaña de Logs -->
                        <div class="tab-pane fade" id="logs" role="tabpanel">
                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Logs de Seguridad</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-striped">
                                                    <thead>
                                                        <tr>
                                                            <th>Fecha</th>
                                                            <th>Usuario</th>
                                                            <th>Acción</th>
                                                            <th>IP</th>
                                                            <th>Observaciones</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @forelse($logsSeguridad as $log)
                                                            <tr>
                                                                <td>{{ $log->created_at->format('d/m/Y H:i:s') }}</td>
                                                                <td>{{ $log->usuario ? $log->usuario->name : 'Sistema' }}</td>
                                                                <td>
                                                                    <span class="badge badge-{{ $log->tipoAccion->color ?? 'secondary' }}">
                                                                        {{ $log->tipoAccion->nombre ?? 'N/A' }}
                                                                    </span>
                                                                </td>
                                                                <td>{{ $log->ip_address }}</td>
                                                                <td>{{ $log->observaciones }}</td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="5" class="text-center">No hay logs de seguridad</td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Mostrar/ocultar método 2FA
document.getElementById('habilitar_2fa').addEventListener('change', function() {
    const metodoGroup = document.getElementById('metodo_2fa_group');
    metodoGroup.style.display = this.checked ? 'block' : 'none';
});

// Configurar 2FA
function configurar2FA() {
    const habilitar = document.getElementById('habilitar_2fa').checked;
    const metodo = document.getElementById('metodo_2fa').value;
    
    fetch('{{ route("seguridad.configurar-2fa") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            habilitar_2fa: habilitar,
            metodo_2fa: metodo
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            if (data.qr_code) {
                // Mostrar QR code
                console.log('QR Code:', data.qr_code);
            }
        } else {
            alert('Error: ' + data.message);
        }
    });
}

// Cambiar contraseña
document.getElementById('cambiarPasswordForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const passwordActual = document.getElementById('password_actual').value;
    const passwordNuevo = document.getElementById('password_nuevo').value;
    const passwordConfirm = document.getElementById('password_confirm').value;
    
    if (passwordNuevo !== passwordConfirm) {
        alert('Las contraseñas no coinciden');
        return;
    }
    
    fetch('{{ route("seguridad.cambiar-password") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            password_actual: passwordActual,
            password_nuevo: passwordNuevo,
            password_nuevo_confirmation: passwordConfirm
        })
    })
    .then(response => response.json())
    .then(data => {
        alert(data.message);
        if (data.success) {
            document.getElementById('cambiarPasswordForm').reset();
        }
    });
});

// Guardar políticas
document.getElementById('politicasForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const politicas = {
        longitud_minima: document.getElementById('longitud_minima').value,
        requerir_mayusculas: document.getElementById('requerir_mayusculas').checked,
        requerir_minusculas: document.getElementById('requerir_minusculas').checked,
        requerir_numeros: document.getElementById('requerir_numeros').checked,
        requerir_simbolos: document.getElementById('requerir_simbolos').checked,
        dias_expiracion: document.getElementById('dias_expiracion').value,
        prevenir_reutilizacion: document.getElementById('prevenir_reutilizacion').value
    };
    
    fetch('{{ route("seguridad.configurar-politicas") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(politicas)
    })
    .then(response => response.json())
    .then(data => {
        alert(data.message);
    });
});

function revocarSesion(sesionId) {
    if (confirm('¿Revocar esta sesión?')) {
        // Implementar revocación de sesión
        alert('Sesión revocada');
    }
}

function revocarTodasLasSesiones() {
    if (confirm('¿Revocar todas las sesiones activas?')) {
        // Implementar revocación de todas las sesiones
        alert('Todas las sesiones han sido revocadas');
    }
}
</script>
@endsection