// Frontend - obtain token via Pi SDK
const auth = await Pi.authenticate(['payments'], onIncompletePaymentFound);
const accessToken = auth.accessToken;

// Make authenticated API call
const response = await fetch('https://api.minepi.com/v2/me', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${accessToken}`,
    'Content-Type': 'application/json'
  }
});

const userData = await response.json();
console.log('Authenticated user:', userData);

// ✅ Production-ready hybrid authentication
async function initializeAuth() {
  // 1. Initialize Pi SDK
  Pi.init({ version: "2.0", sandbox: false });
  
  // 2. Detect Pi Browser environment
  const isPiBrowser = await detectPiBrowser();
  
  if (!isPiBrowser) {
    // 3a. Show fallback for regular browsers
    showAuthFallback();
    return;
  }
  
  // 3b. Enable Pi authentication for Pi Browser users
  enablePiAuth();
}

function showAuthFallback() {
  document.getElementById('auth-section').innerHTML = `
    <div class="auth-fallback">
      <h3>🔐 Pi Network Login</h3>
      <p>Secure authentication is available in Pi Browser:</p>
      
      <div class="cta-section">
        <a href="https://pinet.com/YOUR_APP" class="pi-button">
          Continue in Pi Browser
        </a>
      </div>
      
      <div class="info-section">
        <h4>Why Pi Browser?</h4>
        <ul>
          <li>✅ Secure Pi Network authentication</li>
          <li>✅ Access to your Pi wallet</li>
          <li>✅ Full app functionality</li>
        </ul>
      </div>
    </div>
  `;
}

function enablePiAuth() {
  // Show login button only in Pi Browser
  document.getElementById('login-button').style.display = 'block';
  document.getElementById('login-button').onclick = handleLogin;
}

async function handleLogin() {
  try {
    // Only authenticate when user clicks login
    const auth = await Pi.authenticate(['payments'], onIncompletePaymentFound);
    
    console.log('✅ Authentication successful:', auth);
    
    // Send access token to your backend for verification
    await verifyUserOnServer(auth.accessToken, auth.user.uid);
    
    // Update UI for authenticated user
    updateUIForAuthenticatedUser(auth);
    
  } catch (error) {
    console.error('❌ Authentication failed:', error);
    handleAuthError(error);
  }
}

async function verifyUserOnServer(accessToken, uid) {
  const response = await fetch('/api/verify-user', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${accessToken}`
    },
    body: JSON.stringify({ uid: uid })
  });
  
  if (!response.ok) {
    throw new Error(`Server verification failed: ${response.status}`);
  }
  
  return await response.json();
}

function updateUIForAuthenticatedUser(auth) {
  document.getElementById('user-info').innerHTML = `
    <h3>Welcome!</h3>
    <p>User ID: ${auth.user.uid}</p>
    <p>Authenticated with scopes: ${auth.user.credentials.scopes.join(', ')}</p>
  `;
  
  // Show authenticated user features
  document.getElementById('authenticated-features').style.display = 'block';
}

function handleAuthError(error) {
  document.getElementById('auth-error').innerHTML = `
    <div class="error-message">
      <h4>Authentication Error</h4>
      <p>${error.message}</p>
      <button onclick="handleLogin()">Try Again</button>
    </div>
  `;
}

function onIncompletePaymentFound(payment) {
  console.log('Found incomplete payment:', payment);
  // Handle incomplete payment restoration
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', initializeAuth);