/**
 * (share/ui/breadcrumb — list, link, page, separator, ellipsis).
 */
import React from 'react'
import { render, screen } from '@testing-library/react'
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from '@/share/ui/breadcrumb'

jest.mock('radix-ui', () => ({
  Slot: {
    Root: ({ children, ...p }: any) =>
      React.isValidElement(children) ? React.cloneElement(children, p) : <span {...p}>{children}</span>,
  },
}))
jest.mock('lucide-react', () => ({
  ChevronRightIcon: () => <span data-testid="chevron" />,
  MoreHorizontalIcon: () => <span data-testid="more" />,
}))

describe('[share/ui/breadcrumb]', () => {
  describe('list and link', () => {
    it('renders breadcrumb and list slots', () => {
      render(
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>Item</BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>,
      )
      expect(document.querySelector('[data-slot="breadcrumb"]')).toBeInTheDocument()
      expect(document.querySelector('[data-slot="breadcrumb-list"]')).toBeInTheDocument()
      expect(screen.getByText('Item')).toBeInTheDocument()
    })

    it('renders BreadcrumbLink with href', () => {
      render(
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">Home</BreadcrumbLink>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>,
      )
      expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute('href', '/')
    })

    it('supports asChild composition', () => {
      render(
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <a href="/docs">Docs</a>
              </BreadcrumbLink>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>,
      )
      expect(screen.getByRole('link', { name: 'Docs' })).toHaveAttribute('href', '/docs')
    })
  })

  describe('current page', () => {
    it('renders BreadcrumbPage for current segment', () => {
      render(
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbPage>Current</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>,
      )
      expect(
        document.querySelector('[data-slot="breadcrumb-page"]'),
      ).toHaveTextContent('Current')
    })
  })

  describe('separator', () => {
    it('renders default separator with chevron', () => {
      render(
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">A</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>B</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>,
      )
      expect(
        document.querySelector('[data-slot="breadcrumb-separator"]'),
      ).toBeInTheDocument()
    })

    it('allows custom separator children', () => {
      render(
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbSeparator>
              <span data-testid="custom-separator">/</span>
            </BreadcrumbSeparator>
          </BreadcrumbList>
        </Breadcrumb>,
      )
      expect(screen.getByTestId('custom-separator')).toBeInTheDocument()
      expect(screen.queryByTestId('chevron')).not.toBeInTheDocument()
    })
  })

  describe('ellipsis', () => {
    it('renders ellipsis slot and label', () => {
      render(
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbEllipsis />
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>,
      )
      expect(
        document.querySelector('[data-slot="breadcrumb-ellipsis"]'),
      ).toBeInTheDocument()
      expect(screen.getByText('More')).toBeInTheDocument()
    })
  })
})
