import { ref } from 'vue'
import { describe, expect, it } from 'vitest'
import type {
  PageSelectorItem,
  PageSelectorItemInput,
  PillNavItem,
  PillNavItemInput,
} from '../../types'
import { usePluginWorkspaceNavigation } from '../../components/PluginWorkspaceView.navigation'

function makeNavigation(overrides: {
  activeView?: string
  defaultActiveView?: string
  currentPillId?: string
  currentPageSelectorId?: string
  pillNav?: PillNavItemInput[]
  pageSelector?: PageSelectorItemInput[]
  panelIds?: string[]
  generatedPillNav?: PillNavItem[]
  generatedDefaultView?: string
} = {}) {
  const activeView = ref(overrides.activeView)
  const defaultActiveView = ref(overrides.defaultActiveView)
  const currentPillId = ref(overrides.currentPillId)
  const currentPageSelectorId = ref(overrides.currentPageSelectorId)
  const pillNav = ref(overrides.pillNav)
  const pageSelector = ref(overrides.pageSelector)
  const panelIds = ref(overrides.panelIds ?? [])
  const generatedPillNav = ref<PillNavItem[]>(overrides.generatedPillNav ?? [])
  const generatedDefaultView = ref(overrides.generatedDefaultView ?? '')
  const emitted = {
    activeView: [] as string[],
    page: [] as PageSelectorItem[],
    pill: [] as PillNavItem[],
  }

  const navigation = usePluginWorkspaceNavigation({
    activeView: () => activeView.value,
    defaultActiveView: () => defaultActiveView.value,
    currentPillId: () => currentPillId.value,
    currentPageSelectorId: () => currentPageSelectorId.value,
    pillNav: () => pillNav.value,
    pageSelector: () => pageSelector.value,
    panelIds: () => panelIds.value,
    generatedPillNav,
    generatedDefaultView,
    emitActiveView: viewId => emitted.activeView.push(viewId),
    emitPageSelectorSelect: page => emitted.page.push(page),
    emitPillSelect: item => emitted.pill.push(item),
  })

  return { navigation, emitted, activeView, pillNav, generatedPillNav }
}

describe('usePluginWorkspaceNavigation', () => {
  it('derives the initial view from explicit pill nav and syncs pill selection', () => {
    const data = { id: 'data', label: 'Data' }
    const results = { id: 'results', label: 'Results' }
    const { navigation, emitted } = makeNavigation({
      pillNav: [data, results],
      panelIds: ['fallback'],
    })

    expect(navigation.resolvedPillNav.value).toEqual([data, results])
    expect(navigation.resolvedActiveView.value).toBe('data')

    navigation.handlePillSelect(results)

    expect(navigation.resolvedActiveView.value).toBe('results')
    expect(emitted.activeView).toEqual(['results'])
    expect(emitted.pill).toEqual([results])
  })

  it('emits page selector changes while keeping controlled active view stable', () => {
    const overview = { id: 'overview', label: 'Overview' }
    const { navigation, emitted } = makeNavigation({
      activeView: 'controlled',
      pageSelector: [overview],
      generatedDefaultView: 'generated',
    })

    navigation.handlePageSelectorSelect(overview)

    expect(navigation.resolvedActiveView.value).toBe('controlled')
    expect(navigation.resolvedCurrentPageSelectorId.value).toBe('controlled')
    expect(emitted.activeView).toEqual(['overview'])
    expect(emitted.page).toEqual([overview])
  })

  it('uses generated navigation when explicit pill nav is absent', () => {
    const generated = { id: 'design', label: 'Design' }
    const { navigation } = makeNavigation({
      generatedPillNav: [generated],
      generatedDefaultView: 'design',
      pageSelector: ['page-fallback'],
    })

    expect(navigation.resolvedPillNav.value).toEqual([generated])
    expect(navigation.firstConfiguredViewId.value).toBe('design')
    expect(navigation.resolvedCurrentPillId.value).toBe('design')
  })
})