import { render, screen, mockMatchMedia } from '../test-utils';

import CriticalCommsBanner from './CriticalCommsBanner';

mockMatchMedia();

describe('CriticalCommsBanner', () => {
  const defaultProps = {
    title: 'Test title',
    subtitle: 'Test subtitle',
    action: { label: 'Take action', href: 'https://wise.com' },
  };

  it('renders with default negative sentiment', () => {
    render(<CriticalCommsBanner {...defaultProps} />);

    expect(screen.getByText('Test title')).toBeInTheDocument();
    expect(screen.getByText('Test subtitle')).toBeInTheDocument();
    expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
  });

  it('renders the action as a link with correct href', () => {
    render(<CriticalCommsBanner {...defaultProps} />);

    const action = screen.getByText('Take action');
    expect(action.closest('a')).toHaveAttribute('href', 'https://wise.com');
  });

  it('renders the action as a button when only onClick is provided', () => {
    const onClick = jest.fn();
    render(<CriticalCommsBanner title="Test title" action={{ label: 'Take action', onClick }} />);

    expect(screen.getByText('Take action').closest('button')).toBeInTheDocument();
  });

  it('passes target to the action link', () => {
    render(
      <CriticalCommsBanner
        {...defaultProps}
        action={{ label: 'Take action', href: 'https://wise.com', target: '_blank' }}
      />,
    );

    expect(screen.getByText('Take action').closest('a')).toHaveAttribute('target', '_blank');
  });

  it('does not render the action when action is undefined', () => {
    render(<CriticalCommsBanner title="Test title" />);

    expect(screen.queryByRole('link')).not.toBeInTheDocument();
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
  });

  describe('sentiment variants', () => {
    it('renders negative sentiment with correct alert type and icon', () => {
      render(<CriticalCommsBanner {...defaultProps} sentiment="negative" />);

      expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
      // Custom icon replaces the default StatusIcon
      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
    });

    it('renders warning sentiment with correct alert type and icon', () => {
      render(<CriticalCommsBanner {...defaultProps} sentiment="warning" />);

      expect(screen.getByTestId('alert')).toHaveClass('alert-warning');
      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
    });

    it('renders neutral sentiment with correct alert type and icon', () => {
      render(<CriticalCommsBanner {...defaultProps} sentiment="neutral" />);

      expect(screen.getByTestId('alert')).toHaveClass('alert-neutral');
      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
    });
  });

  it('wraps content in SentimentSurface with elevated emphasis', () => {
    render(<CriticalCommsBanner {...defaultProps} sentiment="warning" />);

    const surface = screen.getByTestId('alert').closest('.critical-comms');
    expect(surface).toHaveClass('wds-sentiment-surface');
    expect(surface).toHaveClass('wds-sentiment-surface-warning-elevated');
  });

  it('applies className to the wrapper', () => {
    render(<CriticalCommsBanner {...defaultProps} className="custom-class" />);

    const surface = screen.getByTestId('alert').closest('.critical-comms');
    expect(surface).toHaveClass('custom-class');
  });
});