import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { Alert, ErrorMessage, SuccessMessage, WarningMessage, InfoMessage } from '../Alert';

describe('Alert', () => {
  it('renders message', () => {
    render(<Alert variant="info" message="Test message" />);
    expect(screen.getByText('Test message')).toBeInTheDocument();
  });

  it('renders title when provided', () => {
    render(<Alert variant="info" message="Message" title="Title" />);
    expect(screen.getByText('Title')).toBeInTheDocument();
  });

  it('renders message as ReactNode', () => {
    render(
      <Alert
        variant="info"
        message={<span data-testid="custom">Custom content</span>}
      />
    );
    expect(screen.getByTestId('custom')).toBeInTheDocument();
  });

  it('has alert role', () => {
    render(<Alert variant="info" message="Test" />);
    expect(screen.getByRole('alert')).toBeInTheDocument();
  });

  it('renders error variant', () => {
    render(<Alert variant="error" message="Error" />);
    expect(screen.getByRole('alert')).toHaveClass('bg-red-50');
  });

  it('renders success variant', () => {
    render(<Alert variant="success" message="Success" />);
    expect(screen.getByRole('alert')).toHaveClass('bg-green-50');
  });

  it('renders warning variant', () => {
    render(<Alert variant="warning" message="Warning" />);
    expect(screen.getByRole('alert')).toHaveClass('bg-amber-50');
  });

  it('renders info variant', () => {
    render(<Alert variant="info" message="Info" />);
    expect(screen.getByRole('alert')).toHaveClass('bg-blue-50');
  });

  it('shows dismiss button when onDismiss is provided', () => {
    const handleDismiss = vi.fn();
    render(<Alert variant="info" message="Test" onDismiss={handleDismiss} />);
    expect(screen.getByLabelText('Dismiss')).toBeInTheDocument();
  });

  it('calls onDismiss when dismiss button clicked', () => {
    const handleDismiss = vi.fn();
    render(<Alert variant="info" message="Test" onDismiss={handleDismiss} />);
    fireEvent.click(screen.getByLabelText('Dismiss'));
    expect(handleDismiss).toHaveBeenCalled();
  });

  it('does not show dismiss button without onDismiss', () => {
    render(<Alert variant="info" message="Test" />);
    expect(screen.queryByLabelText('Dismiss')).not.toBeInTheDocument();
  });

  it('applies custom className', () => {
    render(<Alert variant="info" message="Test" className="custom-class" />);
    expect(screen.getByRole('alert')).toHaveClass('custom-class');
  });

  it('applies compact style', () => {
    render(<Alert variant="info" message="Test" compact />);
    expect(screen.getByRole('alert')).toHaveClass('p-2');
  });

  it('applies regular padding without compact', () => {
    render(<Alert variant="info" message="Test" />);
    expect(screen.getByRole('alert')).toHaveClass('p-3');
  });
});

describe('Convenience components', () => {
  it('ErrorMessage renders error variant', () => {
    render(<ErrorMessage message="Error" />);
    expect(screen.getByRole('alert')).toHaveClass('bg-red-50');
  });

  it('SuccessMessage renders success variant', () => {
    render(<SuccessMessage message="Success" />);
    expect(screen.getByRole('alert')).toHaveClass('bg-green-50');
  });

  it('WarningMessage renders warning variant', () => {
    render(<WarningMessage message="Warning" />);
    expect(screen.getByRole('alert')).toHaveClass('bg-amber-50');
  });

  it('InfoMessage renders info variant', () => {
    render(<InfoMessage message="Info" />);
    expect(screen.getByRole('alert')).toHaveClass('bg-blue-50');
  });
});
