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

describe('Avatar', () => {
  it('should render with image when src is provided', () => {
    render(<Avatar src="https://example.com/avatar.jpg" alt="Test User" />);

    const img = screen.getByAltText('Test User');
    expect(img).toBeInTheDocument();
    expect(img).toHaveAttribute('src', 'https://example.com/avatar.jpg');
  });

  it('should render initials when no src is provided', () => {
    render(<Avatar name="John Doe" />);

    expect(screen.getByText('JD')).toBeInTheDocument();
  });

  it('should render initials from first and last name', () => {
    render(<Avatar name="John Doe" />);

    expect(screen.getByText('JD')).toBeInTheDocument();
  });

  it('should render first two characters when only one word', () => {
    render(<Avatar name="John" />);

    expect(screen.getByText('JO')).toBeInTheDocument();
  });

  it('should render initials from alt when name is not provided', () => {
    render(<Avatar alt="Jane Smith" />);

    expect(screen.getByText('JS')).toBeInTheDocument();
  });

  it('should render fallback "?" when no name or alt provided', () => {
    render(<Avatar />);

    expect(screen.getByText('?')).toBeInTheDocument();
  });

  it('should fallback to initials when image fails to load', () => {
    render(<Avatar src="https://invalid-url.com/image.jpg" name="John Doe" />);

    const img = screen.getByAltText('John Doe');
    expect(img).toBeInTheDocument();

    // Simulate image error
    img.dispatchEvent(new Event('error'));

    // Should show fallback
    expect(screen.getByText('JD')).toBeInTheDocument();
  });

  it('should apply size classes correctly', () => {
    const { rerender } = render(<Avatar name="Test" size="sm" />);
    let container = screen.getByText('TE').closest('div');
    expect(container).toHaveClass('w-8', 'h-8', 'text-xs');

    rerender(<Avatar name="Test" size="md" />);
    container = screen.getByText('TE').closest('div');
    expect(container).toHaveClass('w-12', 'h-12', 'text-sm');

    rerender(<Avatar name="Test" size="lg" />);
    container = screen.getByText('TE').closest('div');
    expect(container).toHaveClass('w-16', 'h-16', 'text-base');

    rerender(<Avatar name="Test" size="xl" />);
    container = screen.getByText('TE').closest('div');
    expect(container).toHaveClass('w-32', 'h-32', 'text-xl');
  });

  it('should apply custom className', () => {
    render(<Avatar name="Test" className="custom-class" />);

    const container = screen.getByText('TE').closest('div');
    expect(container).toHaveClass('custom-class');
  });

  it('should handle multiple words correctly', () => {
    render(<Avatar name="John Michael Doe" />);

    expect(screen.getByText('JD')).toBeInTheDocument();
  });

  it('should handle empty string name', () => {
    render(<Avatar name="" />);

    expect(screen.getByText('?')).toBeInTheDocument();
  });

  it('should handle null src', () => {
    render(<Avatar src={null} name="John Doe" />);

    expect(screen.getByText('JD')).toBeInTheDocument();
  });
});
