<!DOCTYPE html>
<html lang="en">
  {% load static %}

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reset Password - Tayapromediverse</title>

    <link rel="stylesheet" href="{% static 'css/signin.css' %}" />

    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
      rel="stylesheet"
    />

    <!-- Toastify CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
    />
  </head>

  <body>
    <div class="container">
      <!-- Left side -->
      <div class="left-side">
        <img
          src="{% static 'images/logo-desktop.png' %}"
          alt="Tayapromediverse Logo"
        />
      </div>

      <!-- Right side -->
      <div class="right-side">
        <div class="mobile-logo">
          <img
            src="{% static 'images/logo-mobile.png' %}"
            alt="Tayapromediverse Mobile Logo"
            style="max-width: 180px"
          />
        </div>

        <div class="form-container">
          <h2>Reset Your Password</h2>
          <p>Please enter your new password</p>

          <form method="post" id="resetForm">
            {% csrf_token %}

            <input
              type="password"
              class="input-box"
              placeholder="New Password"
              name="password1"
              id="password1"
              required
            />
            <div class="error-message" id="password1Error"></div>

            <input
              type="password"
              class="input-box"
              placeholder="Confirm New Password"
              name="password2"
              id="password2"
              required
            />
            <div class="error-message" id="password2Error"></div>

            <div class="button-container">
              <button type="submit" class="login-btn" id="resetBtn">
                Reset Password
              </button>
              <a
                href="{% url 'login' %}"
                class="signup-btn"
                id="backToLoginBtn"
              >
                Back to Login
              </a>
            </div>
          </form>

          <div class="terms">
            By resetting your password, you agree to our
            <a href="{% url 'term' %}">Terms of Service</a> and
            <a href="{% url 'term' %}">Privacy Policy</a>.
          </div>
        </div>
      </div>
    </div>

    <!-- Toastify JS -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/toastify-js"
    ></script>
    <script src="{% static 'js/toastify-utils.js' %}"></script>
    <script>
      // Handle Django messages with Toastify
      document.addEventListener("DOMContentLoaded", function () {
        // Check for Django messages
        const messages = document.querySelectorAll(".alert");
        messages.forEach(function (message) {
          const messageText = message.textContent.trim();
          const messageType = message.classList.contains("alert-success")
            ? "success"
            : message.classList.contains("alert-error")
            ? "error"
            : "info";

          if (window.ToastifyUtils) {
            window.ToastifyUtils[messageType](messageText);
          } else {
            showToast(messageText, messageType);
          }
        });
      });

      function showToast(message, type = "info") {
        const backgroundColor =
          type === "error"
            ? "linear-gradient(to right, #ff416c, #ff4b2b)"
            : type === "success"
            ? "linear-gradient(to right, #4facfe, #00f2fe)"
            : type === "warning"
            ? "linear-gradient(to right, #f093fb, #f5576c)"
            : "linear-gradient(to right, #667eea, #764ba2)";

        Toastify({
          text: message,
          duration: 5000,
          gravity: "top",
          position: "right",
          backgroundColor: backgroundColor,
          stopOnFocus: true,
        }).showToast();
      }

      // === Password Validation Functions ===
      function validatePassword(password) {
        const errors = [];

        // Check minimum length
        if (password.length < 6) {
          errors.push("Password must be at least 6 characters long.");
        }

        // Check for very common passwords
        const very_common_passwords = [
          "password",
          "123456",
          "123456789",
          "qwerty",
          "abc123",
          "admin",
        ];
        if (very_common_passwords.includes(password.toLowerCase())) {
          errors.push(
            "This password is too common. Please choose a more secure password."
          );
        }

        return errors;
      }

      function showWarning(message) {
        if (window.ToastifyUtils) {
          window.ToastifyUtils.warning(message);
        } else {
          showToast(message, "warning");
        }
      }

      // === Form submission validation ===
      document
        .getElementById("resetForm")
        .addEventListener("submit", function (e) {
          const password1 = document.getElementById("password1").value;
          const password2 = document.getElementById("password2").value;

          // Validate password rules
          const passwordErrors = validatePassword(password1);
          if (passwordErrors.length > 0) {
            e.preventDefault();
            showWarning(passwordErrors[0]);
            return false;
          }

          // Validate password confirmation
          if (password1 !== password2) {
            e.preventDefault();
            showWarning(
              "Passwords do not match. Please make sure both passwords are the same."
            );
            return false;
          }

          // If validation passes, proceed with form submission
          const submitBtn = document.getElementById("resetBtn");
          submitBtn.textContent = "Resetting...";
          submitBtn.disabled = true;
        });
    </script>
  </body>
</html>
