import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import BreadcrumbBar from '../BreadcrumbBar.vue'

const STUBS = { global: { stubs: { AppIcon: true } } }

function seg(id, label) { return { id, label } }
function staticSeg(label) { return { label } }

describe('BreadcrumbBar', () => {
  it('renders rootLabel button when showRoot=true', () => {
    const w = mount(BreadcrumbBar, {
      props: { rootLabel: 'Home', segments: [] },
      ...STUBS,
    })
    expect(w.find('button').text()).toBe('Home')
  })

  it('does NOT render root button when showRoot=false', () => {
    const w = mount(BreadcrumbBar, {
      props: { showRoot: false, segments: [staticSeg('Users')] },
      ...STUBS,
    })
    expect(w.findAll('button').length).toBe(0)
  })

  it('clicking root button emits navigate(null)', async () => {
    const w = mount(BreadcrumbBar, {
      props: { segments: [] },
      ...STUBS,
    })
    await w.find('button').trigger('click')
    expect(w.emitted('navigate')).toBeTruthy()
    expect(w.emitted('navigate')[0]).toEqual([null])
  })

  it('last segment renders as a non-clickable <span>', () => {
    const w = mount(BreadcrumbBar, {
      props: { segments: [seg('a', 'A'), seg('b', 'B')] },
      ...STUBS,
    })
    const text = w.text()
    expect(text).toContain('B')
    const buttonWithB = w.findAll('button').filter(b => b.text() === 'B')
    expect(buttonWithB.length).toBe(0)
  })

  it('clicking intermediate segment emits navigate(segment.id)', async () => {
    const w = mount(BreadcrumbBar, {
      props: { segments: [seg('r1', 'Root'), seg('f1', 'Test')] },
      ...STUBS,
    })
    const buttons = w.findAll('button')
    const rootBtn = buttons.find(b => b.text() === 'Root')
    await rootBtn.trigger('click')
    expect(w.emitted('navigate')).toBeTruthy()
    expect(w.emitted('navigate')[0]).toEqual(['r1'])
  })

  it('segments without id render as plain text even when intermediate', () => {
    const w = mount(BreadcrumbBar, {
      props: {
        showRoot: false,
        segments: [staticSeg('Admin'), staticSeg('Users')],
      },
      ...STUBS,
    })
    expect(w.findAll('button').length).toBe(0)
  })

  it('>4 segments collapse to first + ellipsis + last two', () => {
    const segments = [
      seg('a', 'Alpha'),
      seg('b', 'Beta'),
      seg('c', 'Gamma'),
      seg('d', 'Delta'),
      seg('e', 'Epsilon'),
    ]
    const w = mount(BreadcrumbBar, {
      props: { segments },
      ...STUBS,
    })
    const text = w.text()
    expect(text).toContain('Alpha')
    expect(text).toContain('…')
    expect(text).toContain('Delta')
    expect(text).toContain('Epsilon')
    expect(text).not.toContain('Beta')
    expect(text).not.toContain('Gamma')
  })

  it('rootLabel defaults to "Home"', () => {
    const w = mount(BreadcrumbBar, {
      props: { segments: [] },
      ...STUBS,
    })
    expect(w.find('button').text()).toBe('Home')
  })

  it('custom rootLabel "Cloud" renders correctly', () => {
    const w = mount(BreadcrumbBar, {
      props: { rootLabel: 'Cloud', segments: [] },
      ...STUBS,
    })
    expect(w.find('button').text()).toBe('Cloud')
  })

  it('renders chevronRight separator between segments', () => {
    const w = mount(BreadcrumbBar, {
      props: { segments: [seg('a', 'A'), seg('b', 'B')] },
      ...STUBS,
    })
    const appIcons = w.findAll('app-icon-stub')
    expect(appIcons.length).toBeGreaterThanOrEqual(1)
  })
})
