<?php
$nombre        = $config['nombre_plataforma'] ?? 'Sistema Integral para Importadores de Hidrocarburos';
$siglas        = $config['siglas'] ?? 'SIIH';
$logo          = $config['logo_url'] ?? 'assets/img/logo_siih.png';
$color1        = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')[0];
$color2        = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')[1];
$mantenimiento = $config['modo_mantenimiento'] ?? 0;
$mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encuentra en mantenimiento temporal. Por favor, vuelve más tarde.';

if (!isset($_SESSION['email_recuperacion'])) {
  // Si no hay correo en sesión, redirige a solicitar código
  header('Location: /IMPORTADORES/login/recuperar');
  exit;
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title><?= htmlspecialchars($siglas) ?> | Recuperación de Contraseña</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <style>
    body { background-color: #f4f6f9; font-family: 'Segoe UI', sans-serif; position: relative; min-height: 100vh; }
    .navbar { background-color: #fff; }
    .navbar .nav-link, .navbar-brand { color: <?= $color1 ?> !important; font-weight: 500; }
    .logo-siih { height: 90px; margin-right: 10px; }
    .login-container { max-width: 420px; margin: 80px auto; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); z-index: 10; position: relative; }
    .form-control { border-radius: 6px; transition: all 0.3s ease; }
    .form-control.error { border-color: #dc3545; background-color: #fff5f5; animation: shake 0.5s ease-in-out; }
    .form-control.success { border-color: #28a745; background-color: #f8fff9; }
    footer { background-color: #e9ecef; padding: 20px; text-align: center; font-size: 14px; color: #666; margin-top: 60px; }
    /* Contenedor de fondo semitransparente para las vistas */
    .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 5; }
    #mensaje { transition: all 0.3s ease; min-height: 24px; }
    #btnReenviarRespaldo { background: none; border: none; color: <?= $color1 ?>; text-decoration: underline; cursor: pointer; font-size: 14px; padding: 0; transition: color 0.3s ease; }
    #btnReenviarRespaldo:hover { color: <?= $color2 ?>; }
    #btnReenviarRespaldo:disabled { color: #ccc; cursor: not-allowed; text-decoration: none; }
    .btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .loading { position: relative; pointer-events: none; }
    .loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; transform: translate(-50%, -50%); }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }
    @keyframes spin {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-in { animation: fadeIn 0.3s ease-out; }
    @media (max-height: 600px) { footer { position: static !important; } }
    /* Estilos para input de código */
    #codigo { font-size: 18px; letter-spacing: 3px; text-align: center; font-weight: bold; }
    .input-group { position: relative; }
    .clear-input { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #ccc; cursor: pointer; z-index: 5; display: none; }
    .clear-input:hover { color: #666; }
  </style>
</head>
<body>

  <!-- Navbar institucional -->
  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <a class="navbar-brand d-flex align-items-center text-dark" href="#">
        <img src="/IMPORTADORES/public/<?= htmlspecialchars($logo) ?>" alt="Logo" class="logo-siih">
        | Inicio de Importador
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="/IMPORTADORES/">Inicio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " aria-current="page" href="/IMPORTADORES/registro">Registro</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="/IMPORTADORES/login">Inicio sesión</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <?php if ($mantenimiento): ?>
    <div class="container mt-4">
      <div class="alert alert-danger text-center" role="alert">
        <i class="fas fa-triangle-exclamation me-2"></i>
        <?= htmlspecialchars($mensajeMantenimiento) ?>
      </div>
    </div>
  <?php endif; ?>

  <!-- Overlay (fondo semitransparente) que cubre la pantalla -->
  <div class="overlay"></div>

  <!-- Formulario de validación de código -->
  <div class="login-container">
    <h4 class="mb-4 text-center text-dark">Verifica tu código</h4>
    <p class="text-muted text-center mb-4">
      <i class="fas fa-envelope me-2"></i>
      Hemos enviado un código de 6 dígitos a tu correo electrónico
    </p>
    
    <!-- Formulario para verificar el código -->
    <form id="formCodigo" action="/IMPORTADORES/login/verificarCodigo" method="POST">
      <div class="mb-3">
        <label class="form-label" for="codigo">
          <i class="fas fa-key me-2"></i>Código de verificación
        </label>
        <div class="input-group">
          <input type="text" 
                 id="codigo" 
                 name="codigo" 
                 class="form-control" 
                 required 
                 pattern="\d{6}" 
                 maxlength="6" 
                 placeholder="000000"
                 autocomplete="off"
                 inputmode="numeric">
          <button type="button" class="clear-input" id="clearCode" title="Limpiar código">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="form-text">
          <i class="fas fa-info-circle me-1"></i>
          Ingresa el código de 6 dígitos que recibiste por correo
        </div>
      </div>
      
      <button type="submit" id="btnVerificar" class="btn btn-success w-100">
        <i class="fas fa-check me-2"></i>Verificar código
      </button>

      <!-- Botón para enviar el código al correo de respaldo-->
      <div class="text-center mt-3">
        <button type="button" id="btnReenviarRespaldo" title="Enviar código al correo de respaldo">
          <i class="fas fa-paper-plane me-1"></i>
          ¿No tienes acceso al correo? Reenviar al correo de respaldo
        </button>
      </div>
    </form>

    <!-- Mostrar mensajes -->
    <div id="mensaje" class="mt-3 text-center fw-bold">
      <?php if (isset($_SESSION['codigo_error'])): ?>
        <div class="text-danger fade-in">
          <i class="fas fa-exclamation-triangle me-2"></i>
          <?= $_SESSION['codigo_error'] ?>
        </div>
        <?php unset($_SESSION['codigo_error']); ?>
      <?php elseif (isset($_SESSION['codigo_exito'])): ?>
        <div class="text-success fade-in">
          <i class="fas fa-check-circle me-2"></i>
          <?= $_SESSION['codigo_exito'] ?>
        </div>
        <?php unset($_SESSION['codigo_exito']); ?>
      <?php endif; ?>
    </div>

    <!-- Contador de intentos -->
    <div id="intentosInfo" class="mt-2 text-center text-muted" style="font-size: 12px;">
      <!-- Se llenará dinámicamente -->
    </div>
  </div>

  <!-- FOOTER -->
  <footer class="fixed-bottom">
    &copy; <?= date('Y') ?> <?= htmlspecialchars($siglas) ?> · <?= htmlspecialchars($nombre) ?>
  </footer>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const form = document.getElementById('formCodigo');
      const mensaje = document.getElementById('mensaje');
      const inputCodigo = document.getElementById('codigo');
      const btnVerificar = document.getElementById('btnVerificar');
      const btnReenviar = document.getElementById('btnReenviarRespaldo');
      const clearBtn = document.getElementById('clearCode');
      const intentosInfo = document.getElementById('intentosInfo');

      let intentosRealizados = 0;
      const maxIntentos = 5;

      // Auto-focus en el input al cargar
      inputCodigo.focus();

      // Mostrar/ocultar botón de limpiar
      inputCodigo.addEventListener('input', function() {
        clearBtn.style.display = this.value.length > 0 ? 'block' : 'none';
        
        // Limpiar mensajes previos
        limpiarMensajes();
        
        // Remover clases de error/éxito
        inputCodigo.classList.remove('error', 'success');
        
        // Solo permitir números
        this.value = this.value.replace(/[^0-9]/g, '');
        
        // Actualizar contador visual
        actualizarContadorVisual();
      });

      // Limpiar input
      clearBtn.addEventListener('click', function() {
        inputCodigo.value = '';
        inputCodigo.focus();
        clearBtn.style.display = 'none';
        limpiarMensajes();
        inputCodigo.classList.remove('error', 'success');
      });

      // Permitir solo números en tiempo real
      inputCodigo.addEventListener('keypress', function(e) {
        if (!/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'Tab', 'Enter'].includes(e.key)) {
          e.preventDefault();
        }
      });

      // Auto-envío cuando se completen 6 dígitos (opcional)
      inputCodigo.addEventListener('input', function() {
        if (this.value.length === 6) {
          // Opcional: enviar automáticamente después de un breve delay
          // setTimeout(() => form.dispatchEvent(new Event('submit')), 500);
        }
      });

      // Manejo del formulario
      form.addEventListener('submit', function(e) {
        e.preventDefault();

        const codigo = inputCodigo.value.trim();
        if (!validarCodigo(codigo)) return;

        enviarCodigo(codigo);
      });

      // Validación del código
      function validarCodigo(codigo) {
        if (!codigo) {
          mostrarError("❌ Por favor, ingresa el código.");
          return false;
        }
        
        if (codigo.length !== 6) {
          mostrarError("❌ El código debe tener exactamente 6 dígitos.");
          inputCodigo.classList.add('error');
          return false;
        }
        
        if (!/^\d{6}$/.test(codigo)) {
          mostrarError("❌ El código solo debe contener números.");
          inputCodigo.classList.add('error');
          return false;
        }
        
        return true;
      }

      // Enviar código para verificación
      function enviarCodigo(codigo) {
        // Mostrar estado de carga
        btnVerificar.disabled = true;
        btnVerificar.classList.add('loading');
        btnVerificar.innerHTML = '<span style="opacity: 0;">Verificando...</span>';
        
        const formData = new FormData();
        formData.append('codigo', codigo);

        fetch('/IMPORTADORES/login/verificarCodigo', {
          method: 'POST',
          body: formData,
          credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
          if (data.blocked) {
              mostrarError(data.message); // <-- función personalizada con un div bonito
              setTimeout(() => {
                  window.location.href = data.redirect;
              }, 4000);
          }

          if (data.success) {
            // Código correcto
            mostrarExito(data.message);
            inputCodigo.classList.add('success');
            inputCodigo.disabled = true;
            
            // Redirigir al formulario de cambio de contraseña
            setTimeout(() => {
              window.location.href = '/IMPORTADORES/login/cambiarPasswordVista';
            }, 1500);
            
          } else {
            // Código incorrecto
            manejarCodigoIncorrecto(data);
          }
        })
        .catch(error => {
          console.error('Error:', error);
          mostrarError("❌ Error de conexión. Intenta nuevamente.");
          inputCodigo.classList.add('error');
          limpiarYEnfocarInput();
        })
        .finally(() => {
          // Restaurar botón
          btnVerificar.disabled = false;
          btnVerificar.classList.remove('loading');
          btnVerificar.innerHTML = '<i class="fas fa-check me-2"></i>Verificar código';
        });
      }

      // Mostrar error de cuenta bloqueada
      function mostrarError(mensaje) {
        const mensajeDiv = document.getElementById('mensaje');
        mensajeDiv.innerHTML = `
          <div class="text-danger fade-in">
            <i class="fas fa-exclamation-triangle me-2"></i> ${mensaje}
          </div>
        `;
      }

      // Manejar código incorrecto
      function manejarCodigoIncorrecto(data) {
        intentosRealizados++;
        
        mostrarError(data.message);
        inputCodigo.classList.add('error');
        
        // Limpiar input y enfocar para nuevo intento
        limpiarYEnfocarInput();
        
        // Actualizar contador de intentos
        actualizarContadorIntentos();
        
        // Si se bloqueó el código
        if (data.blocked) {
          bloquearFormulario();
        }
      }

      // Limpiar input y enfocar
      function limpiarYEnfocarInput() {
        setTimeout(() => {
          inputCodigo.value = '';
          inputCodigo.classList.remove('error');
          inputCodigo.focus();
          clearBtn.style.display = 'none';
        }, 1500); // Esperar 1.5 segundos antes de limpiar
      }

      // Actualizar contador visual
      function actualizarContadorVisual() {
        const longitud = inputCodigo.value.length;
        if (longitud > 0) {
          inputCodigo.setAttribute('placeholder', '0'.repeat(6 - longitud) + inputCodigo.value);
        } else {
          inputCodigo.setAttribute('placeholder', '000000');
        }
      }

      // Actualizar contador de intentos
      function actualizarContadorIntentos() {
        if (intentosRealizados > 0) {
          const restantes = maxIntentos - intentosRealizados;
          intentosInfo.innerHTML = `
            <i class="fas fa-exclamation-triangle text-warning me-1"></i>
            Intentos restantes: <strong>${restantes}</strong> de ${maxIntentos}
          `;
          intentosInfo.classList.add('fade-in');
        }
      }

      // Bloquear formulario cuando se exceden intentos
      function bloquearFormulario() {
        inputCodigo.disabled = true;
        btnVerificar.disabled = true;
        btnReenviar.disabled = true;
        
        intentosInfo.innerHTML = `
          <i class="fas fa-ban text-danger me-1"></i>
          <span class="text-danger">Código bloqueado por seguridad</span>
        `;
        
        // Redirigir a solicitar nuevo código después de 5 segundos
        setTimeout(() => {
          window.location.href = '/IMPORTADORES/login/recuperar';
        }, 5000);
      }

      // Funciones de utilidad para mensajes
      function mostrarMensaje(texto, tipo) {
        mensaje.innerHTML = `<div class="${tipo} fade-in">${texto}</div>`;
        mensaje.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }

      function mostrarError(texto) {
        mostrarMensaje(`<i class="fas fa-exclamation-triangle me-2"></i>${texto}`, 'text-danger');
      }

      function mostrarExito(texto) {
        mostrarMensaje(`<i class="fas fa-check-circle me-2"></i>${texto}`, 'text-success');
      }

      function mostrarInfo(texto) {
        mostrarMensaje(`<i class="fas fa-info-circle me-2"></i>${texto}`, 'text-info');
      }

      function limpiarMensajes() {
        mensaje.innerHTML = '';
      }

      // Manejo del botón de reenvío
      btnReenviar.addEventListener("click", function() {
        const btnOriginalText = this.innerHTML;
        
        // Deshabilitar botón temporalmente
        this.disabled = true;
        this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Enviando...';
        
        fetch("/IMPORTADORES/login/reenviarCodigo", {
          method: "POST",
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          body: "accion=reenviarCodigo"
        })
        .then(response => response.json())
        .then(data => {
          mostrarInfo(data.message);
          
          // Habilitar botón después de 30 segundos
          setTimeout(() => {
            this.disabled = false;
            this.innerHTML = btnOriginalText;
          }, 30000);
        })
        .catch(error => {
          console.error('Error:', error);
          mostrarError("❌ Error al reenviar código.");
          
          // Restaurar botón en caso de error
          this.disabled = false;
          this.innerHTML = btnOriginalText;
        });
      });

      // Manejar tecla Enter en cualquier parte del formulario
      document.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !btnVerificar.disabled) {
          form.dispatchEvent(new Event('submit'));
        }
      });

      // Prevenir paste de contenido no numérico
      inputCodigo.addEventListener('paste', function(e) {
        e.preventDefault();
        const paste = (e.clipboardData || window.clipboardData).getData('text');
        const numericPaste = paste.replace(/[^0-9]/g, '').substring(0, 6);
        this.value = numericPaste;
        this.dispatchEvent(new Event('input'));
      });
    });
  </script>

</body>
</html>