// Components
import { VMonthPicker } from '../VMonthPicker'

// Utilities
import { render, screen, userEvent } from '@test'
import { commands } from 'vitest/browser'
import { ref } from 'vue'

describe('VMonthPicker', () => {
  it('should select a month and emit the correct model value', async () => {
    const model = ref<string | null>(null)

    render(() => (
      <VMonthPicker
        v-model={ model.value }
        color="primary"
      />
    ))

    // Should render 12 month buttons inside the months grid
    const monthButtons = screen.getByCSS('.v-month-picker__months-content')
      .querySelectorAll('.v-btn')
    expect(monthButtons).toHaveLength(12)

    // Click the first month (January)
    await userEvent.click(monthButtons[0])
    // Model should be in YYYY-MM format, ending with -01 for January
    expect(model.value).toMatch(/-01$/)

    // Click a different month (June, index 5)
    await userEvent.click(monthButtons[5])
    expect(model.value).toMatch(/-06$/)

    // Click previous year arrow
    const controls = screen.getByCSS('.v-month-picker__controls')
    const prevBtn = controls.querySelector('.v-btn')!
    const currentYear = parseInt(model.value!.split('-')[0], 10)
    await userEvent.click(prevBtn)
    await commands.waitStable('.v-month-picker__months-content')

    // After navigating to prev year and re-selecting, year should decrease
    // The month buttons are re-rendered for the new year
    const newMonthButtons = screen.getByCSS('.v-month-picker__months-content')
      .querySelectorAll('.v-btn')
    await userEvent.click(newMonthButtons[5])

    await expect.poll(() => model.value).toBe(`${currentYear - 1}-06`)
  })

  it('should toggle to year view and back when selecting a year', async () => {
    const model = ref<string | null>('2024-03')

    render(() => (
      <VMonthPicker v-model={ model.value } />
    ))

    // Initially shows months view
    screen.getByCSS('.v-month-picker__months')

    // Click the year button in controls to toggle to years view
    const controls = screen.getByCSS('.v-month-picker__controls')
    const yearBtn = controls.querySelectorAll('.v-btn')[1] // middle button is year toggle
    await userEvent.click(yearBtn)

    // Now shows years view
    screen.getByCSS('.v-date-picker-years')

    // Click a year
    const yearButtons = screen.getByCSS('.v-date-picker-years__content')
      .querySelectorAll('.v-btn')
    // Find and click a year button (they should contain year text)
    const targetYear = Array.from(yearButtons).find(
      btn => btn.textContent?.trim() === '2026'
    )
    expect(targetYear).toBeTruthy()
    await userEvent.click(targetYear!)

    // Switches back to months view after selecting a year
    await screen.findByCSS('.v-month-picker__months')

    // Now select a month to confirm the year stuck
    const monthButtons = screen.getByCSS('.v-month-picker__months-content')
      .querySelectorAll('.v-btn')
    await userEvent.click(monthButtons[8]) // September

    expect(model.value).toBe('2026-09')
  })

  it('should support range selection', async () => {
    const model = ref<string[]>([])

    render(() => (
      <VMonthPicker
        v-model={ model.value }
        multiple="range"
        color="primary"
      />
    ))

    const monthButtons = screen.getByCSS('.v-month-picker__months-content')
      .querySelectorAll('.v-btn')

    await userEvent.click(monthButtons[2]) // March
    expect(model.value).toHaveLength(1)
    expect(model.value[0]).toMatch(/-03$/)

    await userEvent.click(monthButtons[6]) // July
    expect(model.value).toHaveLength(2)
    expect(model.value[0]).toMatch(/-03$/)
    expect(model.value[1]).toMatch(/-07$/)

    const monthDivs = screen.getByCSS('.v-month-picker__months-content')
      .querySelectorAll('.v-month-picker__month')
    expect(monthDivs[3].classList.contains('v-month-picker__month--range-middle')).toBe(true) // Apr
    expect(monthDivs[4].classList.contains('v-month-picker__month--range-middle')).toBe(true) // May
    expect(monthDivs[5].classList.contains('v-month-picker__month--range-middle')).toBe(true) // Jun
    expect(monthDivs[2].classList.contains('v-month-picker__month--range-start')).toBe(true) // Mar
    expect(monthDivs[6].classList.contains('v-month-picker__month--range-end')).toBe(true) // Jul
  })

  it('should support multiple selection', async () => {
    const model = ref<string[]>([])

    render(() => (
      <VMonthPicker
        v-model={ model.value }
        multiple
        color="primary"
      />
    ))

    const monthButtons = screen.getByCSS('.v-month-picker__months-content')
      .querySelectorAll('.v-btn')

    await userEvent.click(monthButtons[0]) // January
    expect(model.value).toHaveLength(1)

    await userEvent.click(monthButtons[2]) // March
    expect(model.value).toHaveLength(2)

    await userEvent.click(monthButtons[5]) // June
    expect(model.value).toHaveLength(3)

    await userEvent.click(monthButtons[0]) // January (deselect)
    expect(model.value).toHaveLength(2)
  })
})
