import { mount, flushPromises } from '@vue/test-utils'
import { describe, expect, it, vi } from 'vitest'
import { createMemoryHistory, createRouter } from 'vue-router'

import ChatPage from './index.vue'
import { navItems } from '@/app/navigation/nav'

vi.mock('@/pages/chat/composables/useChatView', async () => {
  const { ref } = await import('vue')

  return {
    useChatView: () => ({
      store: {
        conversations: [],
        messages: [],
        currentConversationId: null,
      },
      inputMessage: ref(''),
      isSending: ref(false),
      chatContainer: ref(null),
      inputRef: ref(null),
      isTyping: ref(false),
      fileInputRef: ref(null),
      showEmojiPicker: ref(false),
      chatModels: ref([]),
      selectedModelName: ref(''),
      selectedModel: ref(null),
      isLoadingModels: ref(false),
      conversationsError: ref(''),
      orchestrationStatus: ref('idle'),
      orchestrationInsight: ref({ statusTitle: '', jarvisNote: '', details: [] }),
      activeAgent: ref(''),
      visitedAgents: ref([]),
      orchestrationEventFeed: ref([]),
      systemMeta: ref({
        systemName: '',
        systemVersion: '',
        uptimeSeconds: 0,
        gpuUtilPercent: null,
        gpuName: '',
        gpuMemoryUsedMb: null,
        gpuMemoryTotalMb: null,
        diskUsedGb: 0,
        diskTotalGb: 0,
      }),
      systemTelemetry: ref({
        cpu: { online: false, current: null, series: [] },
        memory: { online: false, current: null, series: [] },
        disk: { online: false, current: null, series: [] },
        gpu: { online: false, current: null, series: [] },
        network: {
          upload: { online: false, current: null, series: [] },
          download: { online: false, current: null, series: [] },
        },
      }),
      sessionTelemetry: ref({
        eventsCount: 0,
        toolCount: 0,
        agentCount: 0,
        activitySeries: [],
      }),
      sendMessage: vi.fn(),
      selectConversation: vi.fn(),
      newConversation: vi.fn(),
      deleteConversation: vi.fn(),
      formatTime: vi.fn(() => ''),
      formatConvDate: vi.fn(() => ''),
      autoResize: vi.fn(),
      handleFileSelect: vi.fn(),
      insertEmoji: vi.fn(),
      openFilePicker: vi.fn(),
    }),
  }
})

describe('Chat topbar shortcuts', () => {
  it('replaces READY/heartbeat with shortcut icon row', async () => {
    const router = createRouter({
      history: createMemoryHistory(),
      routes: navItems.map((item) => ({
        path: item.path,
        name: item.path,
        component: { template: '<div />' },
      })),
    })

    await router.push('/chat')
    await router.isReady()

    const wrapper = mount(ChatPage, {
      global: {
        plugins: [router],
        stubs: {
          TelemetrySparkline: true,
          OrchestrationPanel: true,
          EmojiPicker: true,
          FileMessage: true,
        },
      },
    })

    await flushPromises()

    expect(wrapper.find('.status-text').exists()).toBe(false)
    expect(wrapper.text()).not.toContain('READY')
    expect(wrapper.find('[data-testid="nav-shortcut-row"]').exists()).toBe(true)
  })
})