---
// src/pages/auth/callback.astro
---

<html>
<head>
  <title>Processing Authentication...</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: var(--color-bg, #ffffff);
      color: var(--color-text, #000000);
      margin: 0;
      padding: 0;
    }
    
    .container {
      text-align: center;
      padding: 4rem 2rem;
      max-width: 500px;
      margin: 0 auto;
    }
    
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 1rem;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .error {
      color: #e74c3c;
      background: #fdf2f2;
      padding: 1rem;
      border-radius: 0.5rem;
      border: 1px solid #e74c3c;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="spinner"></div>
    <h2>Processing authentication...</h2>
    <p>Please wait while we complete your login.</p>
    <div id="error-message" class="hidden error"></div>
  </div>

  <script>
    (function() {
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');
      const state = urlParams.get('state');
      const error = urlParams.get('error');
      
      console.log('Client-side callback params:', { code: !!code, state: !!state, error });
      
      const errorDiv = document.getElementById('error-message') as HTMLElement;
      
      if (error) {
        if (errorDiv) {
          errorDiv.textContent = `Authentication error: ${error}`;
          errorDiv.style.display = 'block';
        }
        setTimeout(() => {
          window.location.href = '/?auth=error';
        }, 3000);
      } else if (code && state) {
        fetch('/api/auth/process', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ code, state })
        })
        .then(response => {
          if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
          }
          return response.json();
        })
        .then(data => {
          if (data.success) {
            window.location.href = data.redirectTo || '/';
          } else {
            throw new Error(data.error || 'Authentication failed');
          }
        })
        .catch(error => {
          console.error('Authentication processing failed:', error);
          if (errorDiv) {
            errorDiv.textContent = `Authentication failed: ${error.message}`;
            errorDiv.style.display = 'block';
          }
          setTimeout(() => {
            window.location.href = '/?auth=error';
          }, 3000);
        });
      } else {
        console.error('Missing code or state parameters');
        if (errorDiv) {
          errorDiv.textContent = 'Missing authentication parameters';
          errorDiv.style.display = 'block';
        }
        setTimeout(() => {
          window.location.href = '/?auth=error';
        }, 3000);
      }
    })();
  </script>
</body>
</html>