otp.js

import app from './firebase.js';
import { getAuth, signInWithPhoneNumber, RecaptchaVerifier } from 'firebase/auth';

const auth = getAuth(app);

// Initialize invisible reCAPTCHA verifier
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', { size: 'invisible' }, auth);

const phoneInput = document.getElementById('phone-number');
const sendBtn = document.getElementById('send-otp');
const verifyBtn = document.getElementById('verify-otp');
const statusEl = document.getElementById('status');

sendBtn?.addEventListener('click', () => {
  const phoneNumber = phoneInput?.value?.trim();
  if (!phoneNumber) {
    statusEl.textContent = 'Please enter a valid phone number (E.164 format e.g. +91XXXXXXXXXX).';
    return;
  }
  signInWithPhoneNumber(auth, phoneNumber, window.recaptchaVerifier)
    .then((confirmationResult) => {
      window.confirmationResult = confirmationResult;
      statusEl.textContent = 'OTP sent!';
    })
    .catch((error) => {
      statusEl.textContent = 'Error sending OTP: ' + error.message;
    });
});

verifyBtn?.addEventListener('click', () => {
  const code = document.getElementById('otp')?.value?.trim();
  if (!code) {
    statusEl.textContent = 'Please enter the OTP code.';
    return;
  }
  window.confirmationResult.confirm(code)
    .then((result) => {
      const user = result.user;
      statusEl.textContent = 'OTP verified! User logged in.';
      console.log('Logged in user:', user);
    })
    .catch((error) => {
      statusEl.textContent = 'Error verifying OTP: ' + error.message;
    });
});