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

describe('AppTopBarPageSelectorInternal', () => {
  it('accepts string shorthand pages', async () => {
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: {
        currentPageId: 'Workspace',
        pages: ['Workspace', 'Results'],
      },
    })

    expect(wrapper.find('.mint-page-selector__label').text()).toBe('Workspace')

    await wrapper.get('.mint-page-selector__trigger').trigger('click')
    expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
      'Workspace',
      'Results',
    ])

    await wrapper.findAll('.mint-page-selector__item')[1].trigger('click')

    expect(wrapper.emitted('select')).toEqual([[{ id: 'Results', label: 'Results' }]])
  })

  it('omits page hints from the menu for compact scanning', async () => {
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: {
        currentPageId: 'downloads',
        pages: [
          { id: 'downloads', label: 'Downloads', hint: 'Paste links and queue downloads' },
          { id: 'settings', label: 'Settings', hint: 'Credentials and destination' },
        ],
      },
    })

    await wrapper.get('.mint-page-selector__trigger').trigger('click')

    expect(wrapper.findAll('.mint-page-selector__item-label').map(item => item.text())).toEqual([
      'Downloads',
      'Settings',
    ])
    expect(wrapper.find('.mint-page-selector__item-hint').exists()).toBe(false)
    expect(wrapper.text()).not.toContain('Paste links')
    expect(wrapper.text()).not.toContain('Credentials')
  })

  it('closes linked page actions without emitting select', async () => {
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: {
        currentPageId: 'workspace',
        pages: [
          { id: 'workspace', label: 'Workspace' },
          { id: 'docs', label: 'Docs', href: '/docs' },
        ],
      },
    })

    await wrapper.get('.mint-page-selector__trigger').trigger('click')
    await wrapper.findAll('.mint-page-selector__item')[1].trigger('click')

    expect(wrapper.emitted('select')).toBeUndefined()
    expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(false)
  })

  it('keeps disabled linked page actions inert', async () => {
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: {
        currentPageId: 'workspace',
        pages: [
          { id: 'workspace', label: 'Workspace' },
          { id: 'docs', label: 'Docs', href: '/docs', disabled: true },
        ],
      },
    })

    await wrapper.get('.mint-page-selector__trigger').trigger('click')
    const disabledLink = wrapper.findAll('.mint-page-selector__item')[1]

    expect(disabledLink.attributes('href')).toBeUndefined()

    await disabledLink.trigger('click')

    expect(wrapper.emitted('select')).toBeUndefined()
    expect(wrapper.find('.mint-page-selector__menu').exists()).toBe(true)
  })

  it('emits select for button page actions', async () => {
    const page = { id: 'workspace', label: 'Workspace' }
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: {
        pages: [page],
      },
    })

    await wrapper.get('.mint-page-selector__trigger').trigger('click')
    await wrapper.get('.mint-page-selector__item').trigger('click')

    expect(wrapper.emitted('select')).toEqual([[page]])
  })

  it('renders PluginIcon-compatible metadata icons and keeps symbolic icons as fallback initials', async () => {
    const iconPath = 'M4 19h16M7 16V8m5 8V4m5 12v-6'
    const pngIcon = 'data:image/png;base64,iVBORw0KGgo='
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: {
        pages: [
          { id: 'analysis', label: 'Analysis', icon: iconPath },
          { id: 'image', label: 'Image', icon: pngIcon },
          { id: 'home', label: 'Home', icon: 'home' },
        ],
      },
    })

    expect(wrapper.get('.mint-page-selector__trigger .mint-plugin-icon__svg path').attributes('d')).toBe(iconPath)

    await wrapper.get('.mint-page-selector__trigger').trigger('click')

    const icons = wrapper.findAllComponents({ name: 'PluginIcon' })
    expect(icons).toHaveLength(3)
    expect(icons[0].props('icon')).toBe(iconPath)
    expect(icons[1].props('icon')).toBe(iconPath)
    expect(icons[2].props('icon')).toBe(pngIcon)
    expect(icons.every((icon) => icon.props('variant') === 'solid')).toBe(true)

    const pathIcons = wrapper.findAll('.mint-plugin-icon__svg')
    expect(pathIcons).toHaveLength(2)
    expect(pathIcons[0].find('path').attributes('d')).toBe(iconPath)

    const imageIcons = wrapper.findAll('.mint-plugin-icon__img')
    expect(imageIcons).toHaveLength(1)
    expect(imageIcons[0].attributes('src')).toBe(pngIcon)

    const fallbackIcons = wrapper.findAll('.mint-page-selector__icon-fallback')
    expect(fallbackIcons).toHaveLength(1)
    expect(fallbackIcons[0].text()).toBe('H')
  })

  it('renders https page icons through PluginIcon', async () => {
    const httpsIcon = 'https://example.com/plugin-icon.png'
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: {
        pages: [
          { id: 'docs', label: 'Docs', icon: httpsIcon },
        ],
      },
    })

    await wrapper.get('.mint-page-selector__trigger').trigger('click')

    const icon = wrapper.getComponent({ name: 'PluginIcon' })
    expect(icon.props('icon')).toBe(httpsIcon)
    expect(wrapper.get('.mint-plugin-icon__img').attributes('src')).toBe(httpsIcon)
  })

  it('should render the menu as its own panel, not the shared popover, when opened', async () => {
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: { currentPageId: 'Workspace', pages: ['Workspace', 'Results'] },
    })

    await wrapper.get('.mint-page-selector__trigger').trigger('click')

    expect(wrapper.get('.mint-page-selector__menu').classes()).not.toContain('mint-popover')
  })

  it('should mark the current page as the active item when opened', async () => {
    const wrapper = mount(AppTopBarPageSelectorInternal, {
      props: { currentPageId: 'Workspace', pages: ['Workspace', 'Results'] },
    })

    await wrapper.get('.mint-page-selector__trigger').trigger('click')

    expect(wrapper.findAll('.mint-page-selector__item')[0].classes()).toContain('mint-page-selector__item--active')
  })
})