/**
 * Tests for AuthButton Component
 * FE-TEST-005: Test auth button component
 */

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { AuthButton } from './AuthButton';

describe('AuthButton', () => {
  it('should render button with children', () => {
    render(<AuthButton>Click me</AuthButton>);
    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
  });

  it('should call onClick when clicked', async () => {
    const handleClick = vi.fn();
    const user = userEvent.setup();

    render(<AuthButton onClick={handleClick}>Click me</AuthButton>);

    await user.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('should show loading state', () => {
    render(<AuthButton loading>Submit</AuthButton>);

    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
    expect(button).toHaveAttribute('aria-busy', 'true');
    expect(screen.getByText('Chargement...')).toBeInTheDocument();
  });

  it('should be disabled when disabled prop is true', () => {
    render(<AuthButton disabled>Submit</AuthButton>);

    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
    expect(button).toHaveAttribute('aria-disabled', 'true');
  });

  it('should be disabled when loading', () => {
    render(<AuthButton loading>Submit</AuthButton>);

    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
    expect(button).toHaveAttribute('aria-disabled', 'true');
  });

  it('should apply primary variant by default', () => {
    render(<AuthButton>Submit</AuthButton>);

    const button = screen.getByRole('button');
    expect(button.className).toContain('bg-blue-600');
  });

  it('should apply secondary variant', () => {
    render(<AuthButton variant="secondary">Submit</AuthButton>);

    const button = screen.getByRole('button');
    expect(button.className).toContain('bg-gray-200');
  });

  it('should apply custom className', () => {
    render(<AuthButton className="custom-class">Submit</AuthButton>);

    const button = screen.getByRole('button');
    expect(button.className).toContain('custom-class');
  });

  it('should pass through other button props', () => {
    render(
      <AuthButton type="submit" data-testid="auth-button">
        Submit
      </AuthButton>,
    );

    const button = screen.getByTestId('auth-button');
    expect(button).toHaveAttribute('type', 'submit');
  });

  it('should not call onClick when disabled', async () => {
    const handleClick = vi.fn();
    const user = userEvent.setup();

    render(
      <AuthButton onClick={handleClick} disabled>
        Submit
      </AuthButton>,
    );

    await user.click(screen.getByRole('button'));
    expect(handleClick).not.toHaveBeenCalled();
  });

  it('should not call onClick when loading', async () => {
    const handleClick = vi.fn();
    const user = userEvent.setup();

    render(
      <AuthButton onClick={handleClick} loading>
        Submit
      </AuthButton>,
    );

    await user.click(screen.getByRole('button'));
    expect(handleClick).not.toHaveBeenCalled();
  });
});