import { describe, it, expect } from 'vitest'
import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
import NavDrawer from '../../app/components/NavDrawer.vue'

const withAuth = () => {
  registerEndpoint('/api/me', () => ({ id: '1', identifier: 'user', role: 'member' }), { method: 'GET' })
}

describe('NavDrawer', () => {
  it('renders navigation links with correct paths', async () => {
    withAuth()
    await mountSuspended(NavDrawer, {
      props: { modelValue: true },
      attachTo: document.body,
    })
    const links = document.body.querySelectorAll('aside nav a[href]')
    const hrefs = [...links].map(a => a.getAttribute('href'))
    expect(hrefs).toContain('/')
    expect(hrefs).toContain('/account')
    expect(hrefs).toContain('/cameras')
    expect(hrefs).toContain('/poi')
    expect(hrefs).toContain('/members')
    expect(hrefs).toContain('/settings')
    expect(links.length).toBeGreaterThanOrEqual(6)
  })

  it('renders Map and Settings labels', async () => {
    withAuth()
    await mountSuspended(NavDrawer, {
      props: { modelValue: true },
      attachTo: document.body,
    })
    expect(document.body.textContent).toContain('Map')
    expect(document.body.textContent).toContain('Settings')
    expect(document.body.textContent).toContain('Navigation')
  })

  it('emits update:modelValue when close is triggered', async () => {
    withAuth()
    const wrapper = await mountSuspended(NavDrawer, {
      props: { modelValue: true },
      attachTo: document.body,
    })
    expect(document.body.querySelector('aside button[aria-label="Close navigation"]')).toBeTruthy()
    await wrapper.vm.close()
    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
  })

  it('applies active styling for current route', async () => {
    withAuth()
    await mountSuspended(NavDrawer, {
      props: { modelValue: true },
      attachTo: document.body,
    })
    const mapLink = document.body.querySelector('aside nav a[href="/"]')
    expect(mapLink).toBeTruthy()
    expect(mapLink.className).toMatch(/kestrel-accent|border-kestrel-accent/)
  })
})