import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from '../avatar'

describe('Avatar Component', () => {
  describe('Avatar', () => {
    it('renders correctly with default props', () => {
      render(
        <Avatar>
          <AvatarFallback>JD</AvatarFallback>
        </Avatar>
      )
      const avatar = screen.getByText('JD').parentElement
      expect(avatar).toBeInTheDocument()
      expect(avatar).toHaveClass('relative')
      expect(avatar).toHaveClass('flex')
      expect(avatar).toHaveClass('shrink-0')
      expect(avatar).toHaveClass('overflow-hidden')
      expect(avatar).toHaveClass('h-10')
      expect(avatar).toHaveClass('w-10')
      expect(avatar).toHaveClass('rounded-full')
    })

    it('applies custom className', () => {
      render(
        <Avatar className="custom-avatar">
          <AvatarFallback>JD</AvatarFallback>
        </Avatar>
      )
      const avatar = screen.getByText('JD').parentElement
      expect(avatar).toHaveClass('custom-avatar')
    })

    it('forwards ref correctly', () => {
      const ref = React.createRef<HTMLSpanElement>()
      render(
        <Avatar ref={ref}>
          <AvatarFallback>JD</AvatarFallback>
        </Avatar>
      )
      expect(ref.current).toBeInstanceOf(HTMLSpanElement)
    })

    describe('Sizes', () => {
      it('renders xs size correctly', () => {
        render(
          <Avatar size="xs">
            <AvatarFallback>XS</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('XS').parentElement
        expect(avatar).toHaveClass('h-6')
        expect(avatar).toHaveClass('w-6')
      })

      it('renders sm size correctly', () => {
        render(
          <Avatar size="sm">
            <AvatarFallback>SM</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('SM').parentElement
        expect(avatar).toHaveClass('h-8')
        expect(avatar).toHaveClass('w-8')
      })

      it('renders md size correctly', () => {
        render(
          <Avatar size="md">
            <AvatarFallback>MD</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('MD').parentElement
        expect(avatar).toHaveClass('h-10')
        expect(avatar).toHaveClass('w-10')
      })

      it('renders lg size correctly', () => {
        render(
          <Avatar size="lg">
            <AvatarFallback>LG</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('LG').parentElement
        expect(avatar).toHaveClass('h-12')
        expect(avatar).toHaveClass('w-12')
      })

      it('renders xl size correctly', () => {
        render(
          <Avatar size="xl">
            <AvatarFallback>XL</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('XL').parentElement
        expect(avatar).toHaveClass('h-16')
        expect(avatar).toHaveClass('w-16')
      })

      it('renders 2xl size correctly', () => {
        render(
          <Avatar size="2xl">
            <AvatarFallback>2XL</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('2XL').parentElement
        expect(avatar).toHaveClass('h-20')
        expect(avatar).toHaveClass('w-20')
      })
    })

    describe('Radius', () => {
      it('renders default radius correctly', () => {
        render(
          <Avatar radius="default">
            <AvatarFallback>DF</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('DF').parentElement
        expect(avatar).toHaveClass('rounded-full')
      })

      it('renders sm radius correctly', () => {
        render(
          <Avatar radius="sm">
            <AvatarFallback>SM</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('SM').parentElement
        expect(avatar).toHaveClass('rounded-md')
      })

      it('renders lg radius correctly', () => {
        render(
          <Avatar radius="lg">
            <AvatarFallback>LG</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('LG').parentElement
        expect(avatar).toHaveClass('rounded-xl')
      })

      it('renders full radius correctly', () => {
        render(
          <Avatar radius="full">
            <AvatarFallback>FL</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('FL').parentElement
        expect(avatar).toHaveClass('rounded-full')
      })

      it('renders none radius correctly', () => {
        render(
          <Avatar radius="none">
            <AvatarFallback>NO</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('NO').parentElement
        expect(avatar).toHaveClass('rounded-none')
      })
    })

    describe('Variants', () => {
      it('renders default variant correctly', () => {
        render(
          <Avatar variant="default">
            <AvatarFallback>DF</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('DF').parentElement
        expect(avatar).toBeInTheDocument()
        // Default variant has no additional classes
      })

      it('renders ring variant correctly', () => {
        render(
          <Avatar variant="ring">
            <AvatarFallback>RG</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('RG').parentElement
        expect(avatar).toHaveClass('ring-2')
        expect(avatar).toHaveClass('ring-gray-300')
        expect(avatar).toHaveClass('dark:ring-gray-600')
      })

      it('renders ringOffset variant correctly', () => {
        render(
          <Avatar variant="ringOffset">
            <AvatarFallback>RO</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('RO').parentElement
        expect(avatar).toHaveClass('ring-2')
        expect(avatar).toHaveClass('ring-gray-300')
        expect(avatar).toHaveClass('dark:ring-gray-600')
        expect(avatar).toHaveClass('ring-offset-2')
        expect(avatar).toHaveClass('ring-offset-background')
        expect(avatar).toHaveClass('dark:ring-offset-gray-950')
      })

      it('renders border variant correctly', () => {
        render(
          <Avatar variant="border">
            <AvatarFallback>BD</AvatarFallback>
          </Avatar>
        )
        const avatar = screen.getByText('BD').parentElement
        expect(avatar).toHaveClass('border-2')
        expect(avatar).toHaveClass('border-gray-200')
        expect(avatar).toHaveClass('dark:border-gray-800')
      })
    })
  })

  describe('AvatarImage', () => {
    it('renders image correctly', () => {
      render(
        <Avatar>
          <AvatarImage src="/test-image.jpg" alt="Test User" />
          <AvatarFallback>TU</AvatarFallback>
        </Avatar>
      )
      // AvatarImage falls back to AvatarFallback when image fails to load in test environment
      const fallback = screen.getByText('TU')
      expect(fallback).toBeInTheDocument()
    })

    it('applies custom className to image', () => {
      render(
        <Avatar>
          <AvatarImage src="/test.jpg" className="custom-image" />
          <AvatarFallback>TU</AvatarFallback>
        </Avatar>
      )
      // AvatarImage falls back to AvatarFallback when image fails to load in test environment
      const fallback = screen.getByText('TU')
      expect(fallback).toBeInTheDocument()
    })

    it('forwards ref correctly', () => {
      const ref = React.createRef<HTMLImageElement>()
      render(
        <Avatar>
          <AvatarImage ref={ref} src="/test.jpg" />
          <AvatarFallback>TU</AvatarFallback>
        </Avatar>
      )
      // In test environment, ref may be null due to image loading behavior
      expect(ref.current).toBeDefined()
    })
  })

  describe('AvatarFallback', () => {
    it('renders fallback correctly', () => {
      render(
        <Avatar>
          <AvatarFallback>FB</AvatarFallback>
        </Avatar>
      )
      const fallback = screen.getByText('FB')
      expect(fallback).toBeInTheDocument()
      expect(fallback).toHaveClass('flex')
      expect(fallback).toHaveClass('h-full')
      expect(fallback).toHaveClass('w-full')
      expect(fallback).toHaveClass('items-center')
      expect(fallback).toHaveClass('justify-center')
      expect(fallback).toHaveClass('bg-muted')
    })

    it('applies custom className to fallback', () => {
      render(
        <Avatar>
          <AvatarFallback className="custom-fallback">FB</AvatarFallback>
        </Avatar>
      )
      const fallback = screen.getByText('FB')
      expect(fallback).toHaveClass('custom-fallback')
    })

    it('forwards ref correctly', () => {
      const ref = React.createRef<HTMLSpanElement>()
      render(
        <Avatar>
          <AvatarFallback ref={ref}>FB</AvatarFallback>
        </Avatar>
      )
      expect(ref.current).toBeInstanceOf(HTMLSpanElement)
    })
  })

  describe('AvatarGroup', () => {
    const mockAvatars = [
      <Avatar key="1"><AvatarFallback>A1</AvatarFallback></Avatar>,
      <Avatar key="2"><AvatarFallback>A2</AvatarFallback></Avatar>,
      <Avatar key="3"><AvatarFallback>A3</AvatarFallback></Avatar>,
      <Avatar key="4"><AvatarFallback>A4</AvatarFallback></Avatar>,
      <Avatar key="5"><AvatarFallback>A5</AvatarFallback></Avatar>,
    ]

    it('renders all avatars when no limit is set', () => {
      render(<AvatarGroup avatars={mockAvatars} />)
      expect(screen.getByText('A1')).toBeInTheDocument()
      expect(screen.getByText('A2')).toBeInTheDocument()
      expect(screen.getByText('A3')).toBeInTheDocument()
      expect(screen.getByText('A4')).toBeInTheDocument()
      expect(screen.getByText('A5')).toBeInTheDocument()
    })

    it('limits avatars when limit is set', () => {
      render(<AvatarGroup avatars={mockAvatars} limit={3} />)
      expect(screen.getByText('A1')).toBeInTheDocument()
      expect(screen.getByText('A2')).toBeInTheDocument()
      expect(screen.getByText('A3')).toBeInTheDocument()
      expect(screen.queryByText('A4')).not.toBeInTheDocument()
      expect(screen.queryByText('A5')).not.toBeInTheDocument()
    })

    it('shows remaining count when limit is exceeded', () => {
      render(<AvatarGroup avatars={mockAvatars} limit={3} />)
      expect(screen.getByText('+2')).toBeInTheDocument()
    })

    it('applies custom className', () => {
      render(<AvatarGroup avatars={mockAvatars} className="custom-group" />)
      const group = screen.getByText('A1').closest('.custom-group')
      expect(group).toBeInTheDocument()
    })

    it('forwards ref correctly', () => {
      const ref = React.createRef<HTMLDivElement>()
      render(<AvatarGroup ref={ref} avatars={mockAvatars} />)
      expect(ref.current).toBeInstanceOf(HTMLDivElement)
    })

    it('applies custom overlap offset', () => {
      render(<AvatarGroup avatars={mockAvatars} overlapOffset={-12} />)
      // This test verifies the component renders without error with custom offset
      expect(screen.getByText('A1')).toBeInTheDocument()
    })

    it('handles empty avatars array', () => {
      render(<AvatarGroup avatars={[]} data-testid="avatar-group" />)
      const group = screen.getByTestId('avatar-group')
      expect(group).toBeInTheDocument()
      expect(group).toHaveClass('flex')
      expect(group).toHaveClass('items-center')
    })

    it('handles single avatar', () => {
      const singleAvatar = [<Avatar key="1"><AvatarFallback>SA</AvatarFallback></Avatar>]
      render(<AvatarGroup avatars={singleAvatar} />)
      expect(screen.getByText('SA')).toBeInTheDocument()
      expect(screen.queryByText('+')).not.toBeInTheDocument()
    })
  })

  describe('Complex Combinations', () => {
    it('renders avatar with image and fallback', () => {
      render(
        <Avatar size="lg" variant="ring" radius="sm">
          <AvatarImage src="/test.jpg" alt="Test" />
          <AvatarFallback>TU</AvatarFallback>
        </Avatar>
      )
      const avatar = screen.getByText('TU').parentElement
      expect(avatar).toHaveClass('h-12')
      expect(avatar).toHaveClass('w-12')
      expect(avatar).toHaveClass('ring-2')
      expect(avatar).toHaveClass('rounded-md')
    })

    it('maintains displayName for all components', () => {
      expect(Avatar.displayName).toBeDefined()
      expect(AvatarImage.displayName).toBeDefined()
      expect(AvatarFallback.displayName).toBeDefined()
      expect(AvatarGroup.displayName).toBe('AvatarGroup')
    })
  })
})