<?php
require 'conexion_PDO.php';

$email = $_POST['email'] ?? $_GET['email'] ?? '';
$tokenIngresado = $_POST['token'] ?? null;

// Si se viene desde el formulario de código (POST), validar el token
if ($_SERVER['REQUEST_METHOD'] === 'POST' && $tokenIngresado !== null) {
    $stmt = $pdo->prepare("SELECT token_pass FROM Usuarios WHERE usuario = ?");
    $stmt->execute([$email]);
    $usuario = $stmt->fetch();

    if (!$usuario || $usuario['token_pass'] != $tokenIngresado) {
        header("Location: verificar_token.php?email=" . urlencode($email) . "&error=token_invalido");
        exit;
    }
}

// Mensajes de error o éxito
$mensajeError = "";
$mensajeExito = "";

if (isset($_GET['error']) && $_GET['error'] === 'no_coinciden') {
    $mensajeError = "Las contraseñas no coinciden.";
}

if (isset($_GET['exito']) && $_GET['exito'] == 1) {
    $mensajeExito = "Contraseña cambiada correctamente. Serás redirigido en unos segundos...";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Cambiar contraseña</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f2f4f8;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .form-container {
      background: #fff;
      padding: 2.5rem;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 400px;
      text-align: center;
    }

    .form-container img {
      width: 64px;
      margin-bottom: 0;
    }

    .form-container h2 {
      margin-top: 0;
      font-size: 1.5rem;
      color: #333;
      margin-bottom: 0.5rem;
    }

    .form-container p {
      color: #666;
      font-size: 0.95rem;
      margin-bottom: 1.5rem;
    }

    .form-container label {
      display: block;
      text-align: left;
      margin: 0.5rem 0 0.25rem;
      font-weight: 500;
    }

    .form-container input[type="password"] {
      width: 90%;
      padding: 0.75rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .form-container button {
      width: 70%;
      padding: 0.75rem;
      background-color: #17a2b8;
      border: none;
      color: #fff;
      font-size: 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .form-container button:hover {
      background-color: #138496;
    }

    .error-message {
      color: #d93025;
      font-weight: bold;
      font-size: 0.95rem;
      margin-bottom: 1rem;
      text-align: center;
    }

    .success-message {
      color: #28a745;
      font-weight: bold;
      font-size: 0.95rem;
      margin-bottom: 1rem;
      text-align: center;
    }

    .button-row {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 1.5rem;
    }

    .button-row button {
      min-width: 160px;           /* ⬅️ mismo ancho mínimo */
      padding: 0.75rem 1.5rem;
      background-color: #17a2b8;
      color: white;
      font-size: 1rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      white-space: nowrap;        /* ⬅️ evitar que se divida el texto */
    }

    .button-row button:hover {
      background-color: #138496;
    }

    .button-row form {
      margin: 0;
    }

    @media (max-width: 500px) {
      .form-container {
        width: 80%;
        padding: 2rem 1.5rem;
      }
    }
  </style>
</head>
<body>
  <div class="form-container">
    <img src="https://cdn-icons-png.flaticon.com/512/2913/2913964.png" alt="Lock icon">
    <h2>Cambiar contraseña</h2>
    <p>Ingresa una nueva contraseña segura y confírmala para continuar.</p>

    <?php if (!empty($mensajeExito)): ?>
      <div class="success-message"><?= htmlspecialchars($mensajeExito) ?></div>
      <script>
        setTimeout(() => {
          window.location.href = 'index.html';
        }, 4000); // Redirige en 4 segundos
      </script>
    <?php endif; ?>

    <?php if (empty($mensajeExito)): ?>
      <form method="POST" action="cambiar_contrasena.php" id="formCambiar" style="display: flex; flex-direction: column; align-items: center;">
        <input type="hidden" name="email" value="<?= htmlspecialchars($email) ?>">

        <label for="password1">Nueva contraseña</label>
        <input type="password" name="password1" id="password1" required>

        <label for="password2">Confirmar contraseña</label>
        <input type="password" name="password2" id="password2" required>

        <?php if (!empty($mensajeError)): ?>
          <div class="error-message"><?= htmlspecialchars($mensajeError) ?></div>
        <?php endif; ?>


      </form>

      <!-- Contenedor externo para ambos botones -->
      <div class="button-row">
        <button form="formCambiar" type="submit">Guardar contraseña</button>

        <form method="POST" action="cancelar_cambio.php">
          <input type="hidden" name="email" value="<?= htmlspecialchars($email) ?>">
          <button type="submit">Cancelar</button>
        </form>
      </div>
    <?php endif; ?>

  </div>
</body>
</html>
