<!doctype html>
<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Forgot Password - MCP Gateway</title>
    <!-- Tailwind CSS -->
    <link rel="stylesheet" href="{{ root_path }}/static/css/tailwind.min.css" />
  </head>
  <body class="h-full bg-gray-50 dark:bg-gray-900">
    <div class="min-h-screen flex items-center justify-center px-4">
      <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <h1 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Forgot your password?</h1>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-6">
          Enter your account email and we will send a password reset link.
        </p>

        <div
          id="error-message"
          class="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm hidden"
        ></div>

        {% if password_reset_enabled %}
        <form method="post" action="{{ root_path }}/admin/forgot-password" class="space-y-4">
          <input type="hidden" name="csrf_token" value="" />
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email</label>
            <input
              id="email"
              name="email"
              type="email"
              required
              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
            />
          </div>
          <button
            type="submit"
            class="w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg"
          >
            Send Reset Link
          </button>
        </form>
        {% else %}
        <div class="p-3 bg-amber-50 border border-amber-200 text-amber-700 rounded-lg text-sm">
          Password reset is currently disabled by the administrator.
        </div>
        {% endif %}

        <div class="mt-4 text-center">
          <a href="{{ root_path }}/admin/login" class="text-sm text-indigo-600 hover:text-indigo-800">Back to login</a>
        </div>
      </div>
    </div>

    <script nonce="{{ csp_nonce(request) }}">
      function getCookie(name) {
        const parts = document.cookie.split(";");
        for (const part of parts) {
          const trimmed = part.trim();
          if (trimmed.startsWith(name + "=")) {
            return decodeURIComponent(trimmed.slice(name.length + 1));
          }
        }
        return "";
      }

      function attachCsrfToPostForms() {
        const csrfToken = getCookie("mcpgateway_csrf_token");
        if (!csrfToken) return;
        const forms = document.querySelectorAll("form");
        forms.forEach((form) => {
          const method = (form.getAttribute("method") || "get").toLowerCase();
          if (method === "get") return;
          let tokenInput = form.querySelector('input[name="csrf_token"]');
          if (!tokenInput) {
            tokenInput = document.createElement("input");
            tokenInput.type = "hidden";
            tokenInput.name = "csrf_token";
            form.appendChild(tokenInput);
          }
          tokenInput.value = csrfToken;
          form.addEventListener("submit", attachCsrfToPostForms);
        });
      }

      attachCsrfToPostForms();

      const params = new URLSearchParams(window.location.search);
      const error = params.get("error");
      if (error) {
        const target = document.getElementById("error-message");
        let message = "Request failed. Please try again.";
        switch (error) {
          case "missing_email":
            message = "Please provide an email address.";
            break;
          case "rate_limited":
            message = "Too many requests. Please try again later.";
            break;
          case "reset_link_expired":
            message = "The reset link expired. Request a new one.";
            break;
          case "reset_link_used":
            message = "This reset link was already used. Request a new one.";
            break;
          case "reset_link_invalid":
            message = "Invalid reset link. Request a new one.";
            break;
          case "password_reset_disabled":
            message = "Password reset is disabled.";
            break;
          case "server_error":
            message = "Server error. Please try again later.";
            break;
          default:
            message = error.replace(/_/g, " ");
        }
        target.textContent = message;
        target.classList.remove("hidden");
      }
    </script>
  </body>
</html>
