import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SsoButtons from './SsoButtons';
import { startOAuth } from '../../auth/sso';

jest.mock('../../auth/sso', () => ({
  startOAuth: jest.fn(),
}));

describe('SsoButtons', () => {
  beforeEach(() => {
    jest.mocked(startOAuth).mockReset();
  });

  it('renders nothing when no providers enabled', () => {
    const { container } = render(
      <SsoButtons intent="login" providers={{ google: false, microsoft: false }} />
    );
    expect(container).toBeEmptyDOMElement();
  });

  it('uses brand-compliant labels and logos for login', () => {
    render(<SsoButtons intent="login" providers={{ google: true, microsoft: true }} />);

    expect(screen.getByRole('button', { name: 'Continue with Google' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Sign in with Microsoft' })).toBeInTheDocument();
    expect(document.querySelectorAll('svg').length).toBeGreaterThanOrEqual(2);
  });

  it('uses Sign up with Google for signup intent', () => {
    render(<SsoButtons intent="signup" providers={{ google: true }} />);
    expect(screen.getByRole('button', { name: 'Sign up with Google' })).toBeInTheDocument();
  });

  it('starts OAuth for the selected provider', async () => {
    const user = userEvent.setup();
    render(<SsoButtons intent="login" providers={{ google: true, microsoft: true }} />);

    await user.click(screen.getByRole('button', { name: 'Continue with Google' }));
    expect(startOAuth).toHaveBeenCalledWith('google', 'login');

    await user.click(screen.getByRole('button', { name: 'Sign in with Microsoft' }));
    expect(startOAuth).toHaveBeenCalledWith('microsoft', 'login');
  });
});
