import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import { CypherImage } from './ui/CypherImage'

// Mock external dependencies
vi.mock('@/lib/utils', () => ({
  cn: (...classes: (string | undefined | null)[]) => classes.filter(Boolean).join(' ')
}))

describe('Create Cell Without Icon - CypherImage Fallback', () => {
  it('shows fallback identicon when src is empty (simulating cell without icon)', () => {
    render(
      <CypherImage 
        src="" 
        alt="Test Cell" 
        className="w-16 h-16"
        generateUniqueFallback={true}
      />
    )

    // Verify that the fallback identicon is rendered instead of an img tag
    const identicon = screen.getByTitle('Test Cell')
    expect(identicon).toBeInTheDocument()
    
    // Check for the fallback identicon characteristics
    expect(identicon).toHaveClass('flex', 'items-center', 'justify-center')
    
    // The fallback should contain the first letter of the alt text (cell name)
    const firstLetter = screen.getByText('T') // First letter of "Test Cell"
    expect(firstLetter).toBeInTheDocument()
    expect(firstLetter).toHaveClass('font-bold')
    
    // Should not render an img element when src is empty
    const imgElement = screen.queryByRole('img')
    expect(imgElement).not.toBeInTheDocument()
  })

  it('shows fallback identicon when src is undefined (simulating cell without icon)', () => {
    render(
      <CypherImage 
        src={undefined} 
        alt="Another Cell" 
        className="w-16 h-16"
        generateUniqueFallback={true}
      />
    )

    // Verify that the fallback identicon is rendered
    const identicon = screen.getByTitle('Another Cell')
    expect(identicon).toBeInTheDocument()
    
    // The fallback should contain the first letter of the alt text
    const firstLetter = screen.getByText('A') // First letter of "Another Cell"
    expect(firstLetter).toBeInTheDocument()
    
    // Should not render an img element when src is undefined
    const imgElement = screen.queryByRole('img')
    expect(imgElement).not.toBeInTheDocument()
  })

  it('shows fallback identicon with correct cyberpunk styling', () => {
    render(
      <CypherImage 
        src="" 
        alt="Cyberpunk Cell" 
        className="w-16 h-16"
        generateUniqueFallback={true}
      />
    )

    const identicon = screen.getByTitle('Cyberpunk Cell')
    
    // Check for cyberpunk styling elements
    expect(identicon).toHaveStyle({ backgroundColor: '#0a1119' })
    
    // Check that the first letter is rendered with appropriate styling
    const firstLetter = screen.getByText('C')
    expect(firstLetter).toHaveClass('relative', 'font-bold', 'cyberpunk-glow', 'z-10')
  })

  it('renders normal img when src is provided (control test)', () => {
    render(
      <CypherImage 
        src="https://example.com/valid-image.jpg" 
        alt="Valid Image Cell" 
        className="w-16 h-16"
      />
    )

    // Should render an img element when src is provided
    const imgElement = screen.getByRole('img')
    expect(imgElement).toBeInTheDocument()
    expect(imgElement).toHaveAttribute('src', 'https://example.com/valid-image.jpg')
    expect(imgElement).toHaveAttribute('alt', 'Valid Image Cell')
    
    // Should not show fallback identicon when image src is provided
    const identicon = screen.queryByTitle('Valid Image Cell')
    expect(identicon).not.toBeInTheDocument()
  })

  it('generates unique fallbacks for different cell names', () => {
    const { rerender } = render(
      <CypherImage 
        src="" 
        alt="Alpha Cell" 
        generateUniqueFallback={true}
      />
    )

    const alphaLetter = screen.getByText('A')
    expect(alphaLetter).toBeInTheDocument()

    rerender(
      <CypherImage 
        src="" 
        alt="Beta Cell" 
        generateUniqueFallback={true}
      />
    )

    const betaLetter = screen.getByText('B')
    expect(betaLetter).toBeInTheDocument()
    
    // Alpha should no longer be present
    expect(screen.queryByText('A')).not.toBeInTheDocument()
  })
})