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

describe('Breadcrumbs', () => {
  it('renders an accessible nav with aria-label', () => {
    render(<Breadcrumbs items={[{ label: 'Home' }]} />)
    const nav = screen.getByRole('navigation', { name: 'Breadcrumb' })
    expect(nav).toBeTruthy()
  })

  it('renders a single item as a static span (no link)', () => {
    render(<Breadcrumbs items={[{ label: 'Home' }]} />)
    const home = screen.getByText('Home')
    expect(home.tagName).toBe('SPAN')
    expect(home.className).toContain('font-medium')
  })

  it('renders items with href as links', () => {
    render(
      <Breadcrumbs
        items={[
          { label: 'Home', href: '/' },
          { label: 'Library', href: '/lib' },
        ]}
      />,
    )
    const link = screen.getByRole('link', { name: 'Home' })
    expect(link.getAttribute('href')).toBe('/')
  })

  it('renders the last item as a static span when no href/onClick', () => {
    render(
      <Breadcrumbs
        items={[
          { label: 'Home', href: '/' },
          { label: 'Current' },
        ]}
      />,
    )
    const current = screen.getByText('Current')
    expect(current.tagName).toBe('SPAN')
    expect(current.className).toContain('font-medium')
  })

  it('renders clickable items as buttons when onClick is provided', () => {
    const onClick = vi.fn()
    render(
      <Breadcrumbs
        items={[
          { label: 'Home', href: '/' },
          { label: 'Settings', onClick },
        ]}
      />,
    )
    const button = screen.getByRole('button', { name: 'Settings' })
    fireEvent.click(button)
    expect(onClick).toHaveBeenCalledOnce()
  })

  it('renders separators between items', () => {
    render(
      <Breadcrumbs
        items={[
          { label: 'A', href: '/a' },
          { label: 'B', href: '/b' },
          { label: 'C' },
        ]}
      />,
    )
    const separators = screen.getAllByText('/')
    expect(separators.length).toBe(2)
  })

  it('supports custom separator', () => {
    render(
      <Breadcrumbs
        separator="→"
        items={[
          { label: 'A', href: '/a' },
          { label: 'B' },
        ]}
      />,
    )
    expect(screen.getByText('→')).toBeTruthy()
  })

  it('applies custom className', () => {
    const { container } = render(
      <Breadcrumbs className="my-custom" items={[{ label: 'X' }]} />,
    )
    const nav = container.querySelector('nav')!
    expect(nav.className).toContain('my-custom')
  })
})