// Example: 2FA setup handler with multiple methods
async function handleRequest2FA(email, method, phone = null) {
  try {
    const result = await graphqlClient.mutate({
      mutation: gql`
        mutation Request2FA($email: String!, $method: String!, $phone: String) {
          request2FA(email: $email, method: $method, phone: $phone)
        }
      `,
      variables: {
        email: email,
        method: method,
        phone: phone
      }
    });

    const response = result.data.request2FA;

    if (method === "app") {
      // Display QR code for authenticator app
      const qrCodeImage = response; // base64 image string
      displayQRCode(qrCodeImage);

      showNotification(
        "Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)"
      );

    } else if (method === "email") {
      // Email code sent
      showNotification("A verification code has been sent to your email.");
      showCodeInputDialog();

    } else if (method === "phone") {
      // SMS code sent
      showNotification(`A verification code has been sent to ${phone}`);
      showCodeInputDialog();
    }

    // Move to confirmation step
    setState({
      twoFAMethod: method,
      awaitingConfirmation: true
    });

  } catch (error) {
    if (error.message.includes("Not verified")) {
      showError("Please verify your email before setting up 2FA.");
      router.push('/verify-email');
    } else if (error.message.includes("Cannot find user")) {
      showError("Email not found. Please sign up first.");
      router.push('/signup');
    } else {
      console.error("2FA request failed:", error);
      showError("Failed to setup 2FA. Please try again.");
    }
  }
}

// Display QR code for app method
function displayQRCode(base64Image) {
  const qrCodeElement = document.getElementById('qr-code');
  qrCodeElement.src = base64Image;
  qrCodeElement.style.display = 'block';

  // Also provide manual entry option
  const secret = extractSecretFromQR(base64Image);
  document.getElementById('manual-secret').textContent = secret;
}

// Method selector component
function TwoFAMethodSelector({ onSelect }) {
  return (
    <div className="grid gap-4 md:grid-cols-3">
      <button onClick={() => onSelect('app')} className="method-card">
        <span className="text-4xl">📱</span>
        <h3>Authenticator App</h3>
        <p>Most secure option</p>
        <span className="badge">Recommended</span>
      </button>

      <button onClick={() => onSelect('email')} className="method-card">
        <span className="text-4xl">📧</span>
        <h3>Email Code</h3>
        <p>Convenient and reliable</p>
      </button>

      <button onClick={() => onSelect('phone')} className="method-card">
        <span className="text-4xl">💬</span>
        <h3>SMS Code</h3>
        <p>Requires phone number</p>
      </button>
    </div>
  );
}