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

// Mock() Button component
vi.mock('../../../apps/website/components/ui/Button', () => ({
  default: ({ onClick, children, className, title, variant }: any) => (
    <button 
      onClick={onClick} 
      className={className} 
      title={title}
      data-variant={variant}
      data-testid="penalty-button"
    >
      {children}
    </button>
  ),
}));

import InlinePenaltyButton from '../../../apps/website/components/races/InlinePenaltyButton';

describe('InlinePenaltyButton', () => {
  const mockDriver = { id: 'driver-1', name: 'Test Driver' };
  const mockOnPenaltyClick = vi.fn();

  it('should not render when user is not admin', () => {
    render(
      <InlinePenaltyButton
        driver={mockDriver}
        onPenaltyClick={mockOnPenaltyClick}
        isAdmin={false}
      />
    );

    const button = screen.queryByTestId('penalty-button');
    expect(button).not.toBeInTheDocument();
  });

  it('should render when user is admin', () => {
    render(
      <InlinePenaltyButton
        driver={mockDriver}
        onPenaltyClick={mockOnPenaltyClick}
        isAdmin={true}
      />
    );

    const button = screen.getByTestId('penalty-button');
    expect(button).toBeInTheDocument();
    expect(button).toHaveAttribute('title', 'Issue penalty to Test Driver');
    expect(button).toHaveAttribute('data-variant', 'danger');
  });

  it('should call onPenaltyClick when button is clicked', () => {
    render(
      <InlinePenaltyButton
        driver={mockDriver}
        onPenaltyClick={mockOnPenaltyClick}
        isAdmin={true}
      />
    );

    const button = screen.getByTestId('penalty-button');
    fireEvent.click(button);

    expect(mockOnPenaltyClick).toHaveBeenCalledTimes(1);
    expect(mockOnPenaltyClick).toHaveBeenCalledWith(mockDriver);
  });

  it('should not crash when onPenaltyClick is not provided', () => {
    render(
      <InlinePenaltyButton
        driver={mockDriver}
        isAdmin={true}
      />
    );

    const button = screen.getByTestId('penalty-button');
    
    // Should not crash when clicked without onPenaltyClick
    expect(() => fireEvent.click(button)).not.toThrow();
  });

  it('should have proper button styling for spacing', () => {
    render(
      <InlinePenaltyButton
        driver={mockDriver}
        onPenaltyClick={mockOnPenaltyClick}
        isAdmin={true}
      />
    );

    const button = screen.getByTestId('penalty-button');
    
    // Check that button has proper spacing classes
    expect(button).toHaveClass('p-1.5');
    expect(button).toHaveClass('min-h-[32px]');
    expect(button).toHaveClass('w-8');
    expect(button).toHaveClass('h-8');
    expect(button).toHaveClass('rounded-full');
    expect(button).toHaveClass('flex');
    expect(button).toHaveClass('items-center');
    expect(button).toHaveClass('justify-center');
  });

  it('should render AlertTriangle icon with proper sizing', () => {
    render(
      <InlinePenaltyButton
        driver={mockDriver}
        onPenaltyClick={mockOnPenaltyClick}
        isAdmin={true}
      />
    );

    const button = screen.getByTestId('penalty-button');
    const icon = button.querySelector('svg');
    
    expect(icon).toBeInTheDocument();
    expect(icon).toHaveClass('w-4');
    expect(icon).toHaveClass('h-4');
    expect(icon).toHaveClass('flex-shrink-0');
  });
});