import React from 'react';
import API_BASE_URL from '../../config';

interface OAuthButtonsProps {
  /** Label prefix, e.g. "Sign in" or "Sign up" */
  action?: string;
  /** Whether the Google OAuth button should be rendered. */
  googleEnabled?: boolean;
  /** Whether the Microsoft OAuth button should be rendered. */
  microsoftEnabled?: boolean;
}

const OAuthButtons: React.FC<OAuthButtonsProps> = ({
  action = 'Sign in',
  googleEnabled = true,
  microsoftEnabled = true,
}) => {
  if (!googleEnabled && !microsoftEnabled) {
    return null;
  }

  const handleOAuth = async (provider: string) => {
    try {
      // Round-trip the current path+query through the signed state JWT so the
      // OAuth callback can redirect back here (the bare app root would lose it).
      const returnTo = window.location.pathname + window.location.search;
      const authorizeUrl =
        `${API_BASE_URL}/auth/${provider}/authorize?return_to=${encodeURIComponent(returnTo)}`;
      const res = await fetch(authorizeUrl, {
        method: 'GET',
        headers: { 'Accept': 'application/json' },
      });
      const data = await res.json();
      if (data.authorization_url) {
        window.location.href = data.authorization_url;
      }
    } catch (err) {
      console.error(`OAuth ${provider} error:`, err);
    }
  };

  const handleGoogle = () => handleOAuth('google');
  const handleMicrosoft = () => handleOAuth('microsoft');

  return (
    <div className="oauth-buttons">
      {googleEnabled && (
      <button type="button" className="oauth-button oauth-google" onClick={handleGoogle}>
        <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
          <path
            d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"
            fill="#4285F4"
          />
          <path
            d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z"
            fill="#34A853"
          />
          <path
            d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.997 8.997 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"
            fill="#FBBC05"
          />
          <path
            d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z"
            fill="#EA4335"
          />
        </svg>
        {action} with Google
      </button>
      )}
      {microsoftEnabled && (
      <button type="button" className="oauth-button oauth-microsoft" onClick={handleMicrosoft}>
        <svg width="18" height="18" viewBox="0 0 21 21" aria-hidden="true">
          <rect x="1" y="1" width="9" height="9" fill="#f25022" />
          <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
          <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
          <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
        </svg>
        {action} with Microsoft
      </button>
      )}
    </div>
  );
};

export default OAuthButtons;
