<?php
// La sesion la inicia funcionesPhp.php (via controladores/login.php) con cookie endurecida
require_once("controladores/login.php");

if (isset($_SESSION['idusuario'])) {
    header("Location: admin/dashboard/index.php");
    exit;
}

// Auto-login por cookie "recuerdame": valida activo, rol, expiracion y hash; rota el token
$idPorCookie = validarCookieRecuerdame();
if ($idPorCookie > 0) {
    session_regenerate_id(true);
    $_SESSION['idusuario'] = $idPorCookie;
    header("Location: admin/dashboard/index.php");
    exit;
}

// ===========================================================================
// PERSONALIZACION (cambia estos valores para adaptar el login)
// ===========================================================================
$empresaNombre  = 'Mantis';                       // Nombre de la empresa
$logoPath       = 'assets/img/logo_mantis.png';        // Logo
$colorPrimario  = '#061c6b';                      // Azul profundo corporativo
$colorAcento    = '#07ba86';                      // Verde turquesa corporativo
$bgImageDark    = '';                             // (opcional) imagen de fondo modo oscuro
$bgImageLight   = '';                             // (opcional) imagen de fondo modo claro
$landingUrl     = rtrim($_ENV['LANDING_URL'] ?? 'https://mantis.alkes.mx', '/');
?>
<!DOCTYPE html>
<html lang="es" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($empresaNombre) ?> · Iniciar sesión</title>
  <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
  <link rel="stylesheet" href="assets/css/login.premium.css?v=<?= filemtime(__DIR__ . '/assets/css/login.premium.css') ?>">

  <!-- Colores corporativos configurables -->
  <style>
    :root { --brand-deep: <?= $colorPrimario ?>; --brand-teal: <?= $colorAcento ?>; }
  </style>

  <?php echo $jaxon->getScript(true); ?>
</head>

<body>
  <!-- ===================== FONDO ===================== -->
  <div class="bg-stage" aria-hidden="true">
    <div class="bg-image" id="bgImage"></div>
    <span class="nebula n1"></span>
    <span class="nebula n2"></span>
    <span class="nebula n3"></span>
    <canvas id="particles"></canvas>
  </div>

  <!-- ===================== TOGGLE TEMA ===================== -->
  <button class="theme-toggle" id="themeToggle" type="button" aria-label="Cambiar tema">
    <i class="bi bi-moon-stars-fill"></i>
    <i class="bi bi-sun-fill"></i>
  </button>

  <!-- ===================== STAGE ===================== -->
  <main class="login-stage">
    <div class="login-card">

      <div class="brand">
        <img src="<?= htmlspecialchars($logoPath) ?>" alt="<?= htmlspecialchars($empresaNombre) ?>" class="brand-logo"
             onerror="this.style.display='none'">
        <div class="brand-name"><?= htmlspecialchars($empresaNombre) ?></div>
      </div>

      <div class="panels">

        <!-- ============ PANEL: LOGIN ============ -->
        <section class="panel is-active" data-panel="login" aria-labelledby="loginTitle">
          <h1 class="panel-title" id="loginTitle">Bienvenido de nuevo</h1>
          <p class="panel-sub">Inicia sesión para continuar a tu panel.</p>

          <form id="login" autocomplete="off" onsubmit="return enviar(event, 'login', 'btnLogin');">
            <div class="field">
              <label for="correo">Correo electrónico</label>
              <div class="control">
                <input name="correo" id="correo" type="email" placeholder="tu@empresa.com" required autofocus>
                <i class="ico bi bi-envelope"></i>
              </div>
            </div>

            <div class="field">
              <label for="clave">Contraseña</label>
              <div class="control">
                <input name="clave" id="clave" type="password" placeholder="••••••••" required>
                <i class="ico bi bi-lock"></i>
                <button class="eye" type="button" aria-label="Mostrar u ocultar contraseña" onclick="toggleEye(this)">
                  <i class="bi bi-eye"></i>
                </button>
              </div>
            </div>

            <div class="row-options">
              <label class="check">
                <input type="checkbox" name="rememberPasswordCheck" id="rememberPasswordCheck" checked>
                <span class="box"></span>
                <span>Recordarme</span>
              </label>
              <a class="link" href="#" onclick="mostrarPanel('recuperar'); return false;">¿Olvidaste tu contraseña?</a>
            </div>

            <button class="btn-primary" id="btnLogin" type="submit">
              <span class="label">Iniciar sesión</span>
              <span class="spin"><i></i></span>
            </button>
          </form>

          <div class="card-foot">
            ¿No tienes una cuenta?
            <a href="<?= htmlspecialchars($landingUrl) ?>/#precios">Contrata aquí</a>
          </div>
        </section>

        <!-- ============ PANEL: RECUPERAR ============ -->
        <section class="panel" data-panel="recuperar" aria-labelledby="recTitle">
          <h1 class="panel-title" id="recTitle">Recuperar contraseña</h1>
          <p class="panel-sub">Te enviaremos un código a tu correo para restablecerla.</p>

          <form id="formRecuperar" autocomplete="off" onsubmit="return enviar(event, 'formRecuperar', 'btnRecuperar');">
            <div class="field">
              <label for="rec_correo">Correo electrónico</label>
              <div class="control">
                <input name="correo" id="rec_correo" type="email" placeholder="tu@empresa.com" required>
                <i class="ico bi bi-envelope"></i>
              </div>
            </div>
            <button class="btn-primary" id="btnRecuperar" type="submit">
              <span class="label">Enviar enlace de recuperación</span>
              <span class="spin"><i></i></span>
            </button>
          </form>

          <button class="btn-ghost" type="button" onclick="mostrarPanel('login')">
            <i class="bi bi-arrow-left"></i> Volver al inicio de sesión
          </button>
        </section>

        <!-- ============ PANEL: RESET ============ -->
        <section class="panel" data-panel="reset" aria-labelledby="resTitle">
          <h1 class="panel-title" id="resTitle">Nueva contraseña</h1>
          <p class="panel-sub">Ingresa el código que recibiste y tu nueva contraseña.</p>

          <form id="formReset" autocomplete="off" onsubmit="return enviar(event, 'formReset', 'btnReset');">
            <input type="hidden" name="correo" id="reset_correo" value="">

            <div class="field">
              <label for="reset_pin">Código de verificación</label>
              <div class="control">
                <input name="pin" id="reset_pin" class="pin" type="text" inputmode="numeric" maxlength="6"
                       placeholder="••••••" required>
              </div>
            </div>

            <div class="field">
              <label for="reset_password">Nueva contraseña</label>
              <div class="control">
                <input name="password" id="reset_password" type="password" placeholder="Mínimo 8 caracteres" required>
                <i class="ico bi bi-lock"></i>
                <button class="eye" type="button" aria-label="Mostrar u ocultar contraseña" onclick="toggleEye(this)">
                  <i class="bi bi-eye"></i>
                </button>
              </div>
            </div>

            <div class="field">
              <label for="reset_password2">Confirmar contraseña</label>
              <div class="control">
                <input name="password2" id="reset_password2" type="password" placeholder="Repite la contraseña" required>
                <i class="ico bi bi-shield-lock"></i>
              </div>
            </div>

            <button class="btn-primary" id="btnReset" type="submit">
              <span class="label">Restablecer contraseña</span>
              <span class="spin"><i></i></span>
            </button>
          </form>

          <button class="btn-ghost" type="button" onclick="mostrarPanel('login')">
            <i class="bi bi-arrow-left"></i> Volver al inicio de sesión
          </button>
        </section>

      </div>
    </div>

    <p class="powered-by">
      Powered by <a href="https://alkes.mx" target="_blank" rel="noopener">Alkes</a>
    </p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
  <script>
    // ===================== TEMA (claro / oscuro) =====================
    var BG_IMAGES = { dark: <?= json_encode($bgImageDark) ?>, light: <?= json_encode($bgImageLight) ?> };

    function aplicarTema(tema) {
      document.documentElement.setAttribute('data-theme', tema);
      try { localStorage.setItem('mantis_login_theme', tema); } catch (e) {}
      var url = BG_IMAGES[tema] || '';
      var bg = document.getElementById('bgImage');
      if (url) { bg.style.backgroundImage = "url('" + url + "')"; document.body.classList.add('has-bg-image'); }
      else { bg.style.backgroundImage = 'none'; document.body.classList.remove('has-bg-image'); }
    }

    (function () {
      var guardado = 'dark';
      try { guardado = localStorage.getItem('mantis_login_theme') || 'dark'; } catch (e) {}
      aplicarTema(guardado);
    })();

    document.getElementById('themeToggle').addEventListener('click', function () {
      var actual = document.documentElement.getAttribute('data-theme');
      aplicarTema(actual === 'dark' ? 'light' : 'dark');
    });

    // ===================== PANELES (login / recuperar / reset) =====================
    function mostrarPanel(panel) {
      var nombre = panel || 'login';
      document.querySelectorAll('.panel').forEach(function (p) {
        p.classList.toggle('is-active', p.getAttribute('data-panel') === nombre);
      });
      var activo = document.querySelector('.panel.is-active');
      if (activo) {
        var input = activo.querySelector('input:not([type=hidden])');
        if (input) { setTimeout(function () { input.focus(); }, 60); }
      }
    }

    // Lo invoca el backend tras solicitar recuperacion de contrasena
    window.mostrarPanelReset = function (correo) {
      document.getElementById('reset_correo').value = correo;
      document.getElementById('reset_pin').value = '';
      mostrarPanel('reset');
    };

    // ===================== MOSTRAR / OCULTAR CONTRASEÑA =====================
    function toggleEye(btn) {
      var input = btn.parentElement.querySelector('input');
      var icon = btn.querySelector('i');
      if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bi-eye'); icon.classList.add('bi-eye-slash');
      } else {
        input.type = 'password';
        icon.classList.remove('bi-eye-slash'); icon.classList.add('bi-eye');
      }
    }

    // ===================== ENVIO (estado loading + Jaxon) =====================
    function enviar(e, formId, btnId) {
      e.preventDefault();
      var btn = document.getElementById(btnId);
      btn.classList.add('is-loading');
      btn.disabled = true;
      // Reabilita por si el backend responde con error (no recarga la pagina)
      setTimeout(function () { btn.classList.remove('is-loading'); btn.disabled = false; }, 4000);

      var valores = jaxon.getFormValues(formId);
      if (formId === 'login')         { Jaxonlogin.login(valores); }
      else if (formId === 'formRecuperar') { Jaxonlogin.recuperarPassword(valores); }
      else if (formId === 'formReset')     { Jaxonlogin.restablecerPassword(valores); }
      return false;
    }

    // ===================== FONDO: PARTICULAS =====================
    (function () {
      var canvas = document.getElementById('particles');
      if (!canvas) return;
      var ctx = canvas.getContext('2d');
      var particulas = [];
      var w, h, dpr;
      var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

      function color() {
        return getComputedStyle(document.documentElement).getPropertyValue('--star').trim() || 'rgba(255,255,255,0.9)';
      }

      function resize() {
        dpr = Math.min(window.devicePixelRatio || 1, 2);
        w = canvas.clientWidth; h = canvas.clientHeight;
        canvas.width = w * dpr; canvas.height = h * dpr;
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
        var cantidad = Math.min(120, Math.floor((w * h) / 14000));
        particulas = [];
        for (var i = 0; i < cantidad; i++) {
          particulas.push({
            x: Math.random() * w,
            y: Math.random() * h,
            r: Math.random() * 1.6 + 0.3,
            vx: (Math.random() - 0.5) * 0.12,
            vy: (Math.random() - 0.5) * 0.12,
            a: Math.random() * 0.6 + 0.2,
            tw: Math.random() * 0.02 + 0.004
          });
        }
      }

      function frame() {
        ctx.clearRect(0, 0, w, h);
        var c = color();
        for (var i = 0; i < particulas.length; i++) {
          var p = particulas[i];
          p.x += p.vx; p.y += p.vy;
          p.a += p.tw;
          if (p.a > 0.85 || p.a < 0.15) p.tw *= -1;
          if (p.x < 0) p.x = w; if (p.x > w) p.x = 0;
          if (p.y < 0) p.y = h; if (p.y > h) p.y = 0;
          ctx.globalAlpha = p.a;
          ctx.fillStyle = c;
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
          ctx.fill();
        }
        ctx.globalAlpha = 1;
        if (!reduce) requestAnimationFrame(frame);
      }

      window.addEventListener('resize', resize);
      resize();
      if (reduce) { frame(); } else { requestAnimationFrame(frame); }
    })();
  </script>
</body>
</html>
