import React from 'react';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { AuthProviderButtons } from './AuthProviderButtons';

describe('AuthProviderButtons', () => {
  describe('rendering', () => {
    it('should render with single button', () => {
      render(
        <AuthProviderButtons>
          <button type="button">Sign in with Google</button>
        </AuthProviderButtons>
      );

      expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
    });

    it('should render with multiple buttons', () => {
      render(
        <AuthProviderButtons>
          <button type="button">Sign in with Google</button>
          <button type="button">Sign in with Discord</button>
          <button type="button">Sign in with GitHub</button>
        </AuthProviderButtons>
      );

      expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
      expect(screen.getByText('Sign in with Discord')).toBeInTheDocument();
      expect(screen.getByText('Sign in with GitHub')).toBeInTheDocument();
    });

    it('should render with anchor links', () => {
      render(
        <AuthProviderButtons>
          <a href="/auth/google">Sign in with Google</a>
          <a href="/auth/discord">Sign in with Discord</a>
        </AuthProviderButtons>
      );

      expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
      expect(screen.getByText('Sign in with Discord')).toBeInTheDocument();
    });

    it('should render with mixed element types', () => {
      render(
        <AuthProviderButtons>
          <button type="button">Sign in with Google</button>
          <a href="/auth/discord">Sign in with Discord</a>
          <button type="button">Sign in with GitHub</button>
        </AuthProviderButtons>
      );

      expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
      expect(screen.getByText('Sign in with Discord')).toBeInTheDocument();
      expect(screen.getByText('Sign in with GitHub')).toBeInTheDocument();
    });
  });

  describe('accessibility', () => {
    it('should have proper button semantics', () => {
      render(
        <AuthProviderButtons>
          <button type="button">Sign in with Google</button>
        </AuthProviderButtons>
      );

      const button = screen.getByRole('button', { name: 'Sign in with Google' });
      expect(button).toBeInTheDocument();
    });

    it('should have proper link semantics', () => {
      render(
        <AuthProviderButtons>
          <a href="/auth/google">Sign in with Google</a>
        </AuthProviderButtons>
      );

      const link = screen.getByRole('link', { name: 'Sign in with Google' });
      expect(link).toBeInTheDocument();
    });

    it('should maintain focus order', () => {
      render(
        <AuthProviderButtons>
          <button type="button">Sign in with Google</button>
          <button type="button">Sign in with Discord</button>
          <button type="button">Sign in with GitHub</button>
        </AuthProviderButtons>
      );

      const buttons = screen.getAllByRole('button');
      expect(buttons).toHaveLength(3);
    });
  });

  describe('edge cases', () => {
    it('should handle empty children', () => {
      render(<AuthProviderButtons>{null}</AuthProviderButtons>);
      // Component should render without errors
    });

    it('should handle undefined children', () => {
      render(<AuthProviderButtons>{undefined}</AuthProviderButtons>);
      // Component should render without errors
    });

    it('should handle empty string children', () => {
      render(<AuthProviderButtons>{''}</AuthProviderButtons>);
      // Component should render without errors
    });

    it('should handle nested children', () => {
      render(
        <AuthProviderButtons>
          <div>
            <button type="button">Sign in with Google</button>
          </div>
        </AuthProviderButtons>
      );

      expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
    });

    it('should handle complex button structures', () => {
      render(
        <AuthProviderButtons>
          <button type="button">
            <span>Sign in with</span>
            <span>Google</span>
          </button>
        </AuthProviderButtons>
      );

      expect(screen.getByText('Sign in with')).toBeInTheDocument();
      expect(screen.getByText('Google')).toBeInTheDocument();
    });

    it('should handle buttons with icons', () => {
      render(
        <AuthProviderButtons>
          <button type="button">
            <span data-testid="icon">🔍</span>
            <span>Sign in with Google</span>
          </button>
        </AuthProviderButtons>
      );

      expect(screen.getByTestId('icon')).toBeInTheDocument();
      expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
    });
  });

  describe('visual states', () => {
    it('should maintain grid layout', () => {
      render(
        <AuthProviderButtons>
          <button type="button">Sign in with Google</button>
          <button type="button">Sign in with Discord</button>
        </AuthProviderButtons>
      );

      // The component uses Grid for layout
      expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
      expect(screen.getByText('Sign in with Discord')).toBeInTheDocument();
    });

    it('should maintain spacing', () => {
      render(
        <AuthProviderButtons>
          <button type="button">Sign in with Google</button>
          <button type="button">Sign in with Discord</button>
          <button type="button">Sign in with GitHub</button>
        </AuthProviderButtons>
      );

      // The component uses Box with marginBottom and Grid with gap
      expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
      expect(screen.getByText('Sign in with Discord')).toBeInTheDocument();
      expect(screen.getByText('Sign in with GitHub')).toBeInTheDocument();
    });
  });
});