<h2 class="text-2xl font-bold text-gray-900 text-center mb-2">
  Reset Password
</h2>
<p class="text-center text-gray-600 text-sm mb-8">
  Enter your email address and we'll send you a link to reset your password.
</p>

<div id="reset-form" class="space-y-6">
  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">
      Email Address
    </label>
    <div class="mt-1">
      <input type="email" id="email" placeholder="Enter your email" required
             class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
    </div>
  </div>

  <div>
    <button id="reset-button" type="button"
            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
      Send Reset Link
    </button>
  </div>

  <div id="message"></div>
</div>

<div class="mt-6 text-center">
  <%= link_to "Back to Login", "/pwb_login",
      class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
</div>

<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>

<script>
  // Firebase configuration
  const firebaseConfig = {
    apiKey: "<%= ENV['FIREBASE_API_KEY'] %>",
    authDomain: "<%= ENV['FIREBASE_PROJECT_ID'] %>.firebaseapp.com",
    projectId: "<%= ENV['FIREBASE_PROJECT_ID'] %>",
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  const auth = firebase.auth();

  document.getElementById('reset-button').addEventListener('click', function() {
    const email = document.getElementById('email').value;
    const messageDiv = document.getElementById('message');
    const button = document.getElementById('reset-button');

    if (!email) {
      messageDiv.innerHTML = '<div class="bg-red-50 border-l-4 border-red-400 p-4 text-red-700 text-sm">Please enter your email address.</div>';
      return;
    }

    // Disable button and show loading
    button.disabled = true;
    button.innerHTML = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Sending...';
    messageDiv.innerHTML = '';

    // Send password reset email
    auth.sendPasswordResetEmail(email)
      .then(function() {
        messageDiv.innerHTML = '<div class="bg-green-50 border-l-4 border-green-400 p-4 text-green-700 text-sm">Password reset email sent! Please check your inbox.</div>';
        document.getElementById('email').value = '';
        button.innerHTML = 'Send Reset Link';
        button.disabled = false;
      })
      .catch(function(error) {
        let errorMessage = 'An error occurred. Please try again.';

        switch(error.code) {
          case 'auth/invalid-email':
            errorMessage = 'Invalid email address.';
            break;
          case 'auth/user-not-found':
            errorMessage = 'No account found with this email address.';
            break;
          default:
            errorMessage = error.message;
        }

        messageDiv.innerHTML = '<div class="bg-red-50 border-l-4 border-red-400 p-4 text-red-700 text-sm">' + errorMessage + '</div>';
        button.innerHTML = 'Send Reset Link';
        button.disabled = false;
      });
  });

  // Allow Enter key to submit
  document.getElementById('email').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      document.getElementById('reset-button').click();
    }
  });
</script>
