// @vitest-environment jsdom
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { defineComponent } from 'vue'
import { flushPromises, mount } from '@vue/test-utils'
import ArcoVue from '@arco-design/web-vue'

const mockUsageStore = vi.hoisted(() => ({
  isLoading: false,
  hasData: true,
  loadSessions: vi.fn(),
}))

const mockProfilesStore = vi.hoisted(() => ({
  activeProfileName: 'default',
  profiles: [{ name: 'default' }],
  fetchProfiles: vi.fn(),
}))

vi.mock('@/stores/hermes/usage', () => ({
  useUsageStore: () => mockUsageStore,
}))

vi.mock('@/stores/hermes/profiles', () => ({
  useProfilesStore: () => mockProfilesStore,
}))

vi.mock('vue-i18n', () => ({
  useI18n: () => ({
    t: (key: string) => key,
  }),
}))

vi.mock('@/components/hermes/usage/StatCards.vue', () => ({
  default: defineComponent({ name: 'StatCards', template: '<section class="stat-cards-stub" />' }),
}))

vi.mock('@/components/hermes/usage/ModelBreakdown.vue', () => ({
  default: defineComponent({ name: 'ModelBreakdown', template: '<section class="model-breakdown-stub" />' }),
}))

vi.mock('@/components/hermes/usage/AgentBreakdown.vue', () => ({
  default: defineComponent({ name: 'AgentBreakdown', template: '<section class="agent-breakdown-stub" />' }),
}))

vi.mock('@/components/hermes/usage/DailyTrend.vue', () => ({
  default: defineComponent({ name: 'DailyTrend', template: '<section class="daily-trend-stub" />' }),
}))

import UsageView from '@/views/hermes/UsageView.vue'

describe('UsageView period selector', () => {
  beforeEach(() => {
    mockUsageStore.isLoading = false
    mockUsageStore.hasData = true
    mockUsageStore.loadSessions.mockReset()
    mockProfilesStore.activeProfileName = 'default'
    mockProfilesStore.profiles = [{ name: 'default' }]
    mockProfilesStore.fetchProfiles.mockReset()
  })

  it('loads the default 30-day period on mount', async () => {
    mount(UsageView, { global: { plugins: [ArcoVue] } })
    await flushPromises()

    expect(mockUsageStore.loadSessions).toHaveBeenCalledWith(30)
  })

  it('lets users switch usage statistics between common dashboard periods', async () => {
    const wrapper = mount(UsageView, { global: { plugins: [ArcoVue] } })

    const periodButtons = wrapper.findAll('.period-option')
    expect(periodButtons.map(button => button.text())).toEqual(['7d', '30d', '90d', '365d'])
    expect(wrapper.find('.period-selector').attributes('role')).toBe('group')

    await periodButtons[0].trigger('click')
    expect(mockUsageStore.loadSessions).toHaveBeenLastCalledWith(7)
    // Arco expresses the button variant through classes, not a data-type attribute.
    expect(periodButtons[0].classes()).toContain('arco-btn-secondary')
    expect(periodButtons[1].classes()).toContain('arco-btn-text')
    expect(periodButtons[0].attributes('aria-pressed')).toBe('true')
    expect(periodButtons[1].attributes('aria-pressed')).toBe('false')

    await wrapper.find('.refresh-button').trigger('click')
    expect(mockUsageStore.loadSessions).toHaveBeenLastCalledWith(7)
  })
})