// @vitest-environment jsdom
import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import { MobileTabBar } from '@/components/mobile/mobile-tab-bar'

let pathname = '/m/products/p1'
vi.mock('next/navigation', () => ({
  usePathname: () => pathname,
}))

function setPathname(p: string) { pathname = p }

describe('MobileTabBar', () => {
  it('toont 3 tabs als activeProductId aanwezig is', () => {
    setPathname('/m/products/p1')
    render(<MobileTabBar activeProductId="p1" />)
    expect(screen.getByLabelText('Backlog')).toBeTruthy()
    expect(screen.getByLabelText('Solo')).toBeTruthy()
    expect(screen.getByLabelText('Settings')).toBeTruthy()
  })

  it('toont alleen Settings als activeProductId null is', () => {
    setPathname('/m/settings')
    render(<MobileTabBar activeProductId={null} />)
    expect(screen.queryByLabelText('Backlog')).toBeNull()
    expect(screen.queryByLabelText('Solo')).toBeNull()
    expect(screen.getByLabelText('Settings')).toBeTruthy()
  })

  it('Backlog-tab is aria-current op /m/products/[id]', () => {
    setPathname('/m/products/p1')
    render(<MobileTabBar activeProductId="p1" />)
    expect(screen.getByLabelText('Backlog').getAttribute('aria-current')).toBe('page')
    expect(screen.getByLabelText('Solo').getAttribute('aria-current')).toBeNull()
  })

  it('Solo-tab is aria-current op /m/products/[id]/solo', () => {
    setPathname('/m/products/p1/solo')
    render(<MobileTabBar activeProductId="p1" />)
    expect(screen.getByLabelText('Solo').getAttribute('aria-current')).toBe('page')
    expect(screen.getByLabelText('Backlog').getAttribute('aria-current')).toBeNull()
  })

  it('Settings-tab is aria-current op /m/settings', () => {
    setPathname('/m/settings')
    render(<MobileTabBar activeProductId="p1" />)
    expect(screen.getByLabelText('Settings').getAttribute('aria-current')).toBe('page')
  })

  it('tap-targets >=44x44 (h-14 = 56px breedtevulling per tab)', () => {
    setPathname('/m/products/p1')
    render(<MobileTabBar activeProductId="p1" />)
    const tab = screen.getByLabelText('Backlog')
    expect(tab.className).toContain('h-14')
    expect(tab.className).toContain('flex-1')
  })
})