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

import { ErrorMessage } from './error-message';

describe('ErrorMessage', () => {
  it('renders nothing when error is null', () => {
    const { container } = render(<ErrorMessage error={null} />);
    expect(container).toBeEmptyDOMElement();
  });

  it('renders nothing when error is undefined', () => {
    const { container } = render(<ErrorMessage />);
    expect(container).toBeEmptyDOMElement();
  });

  it('converts HTTP 500 to friendly message', () => {
    render(<ErrorMessage error="500 Internal Server Error" />);
    expect(screen.getByRole('alert')).toHaveTextContent('Something went wrong on our end');
  });

  it('converts network error to friendly message', () => {
    render(<ErrorMessage error="Failed to fetch" />);
    expect(screen.getByRole('alert')).toHaveTextContent('Check your internet connection');
  });

  it('converts 403 to friendly message', () => {
    render(<ErrorMessage error="403 Forbidden" />);
    expect(screen.getByRole('alert')).toHaveTextContent('You do not have permission');
  });

  it('converts 404 to friendly message', () => {
    render(<ErrorMessage error="404 Not Found" />);
    expect(screen.getByRole('alert')).toHaveTextContent('could not be found');
  });

  it('converts unauthorized to friendly message', () => {
    render(<ErrorMessage error="Unauthorized" />);
    expect(screen.getByRole('alert')).toHaveTextContent('not authorized');
  });

  it('converts rate limit error to friendly message', () => {
    render(<ErrorMessage error="Too many requests (429)" />);
    expect(screen.getByRole('alert')).toHaveTextContent('Too many requests');
  });

  it('passes through already-friendly messages unchanged', () => {
    const msg = 'Please enter a valid email address.';
    render(<ErrorMessage error={msg} />);
    expect(screen.getByRole('alert')).toHaveTextContent(msg);
  });

  it('renders block variant with icon by default', () => {
    render(<ErrorMessage error="Something went wrong" />);
    const alert = screen.getByRole('alert');
    expect(alert).toBeInTheDocument();
    // Icon is present via svg
    expect(alert.querySelector('svg')).toBeInTheDocument();
  });

  it('renders inline variant with compact style', () => {
    render(<ErrorMessage error="Required field" variant="inline" />);
    const alert = screen.getByRole('alert');
    expect(alert.tagName).toBe('P');
  });

  it('applies custom className', () => {
    render(<ErrorMessage error="oops" className="mt-4" />);
    expect(screen.getByRole('alert')).toHaveClass('mt-4');
  });
});