import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import SettingsView from '@/components/settings/SettingsView.vue'

// Stub every panel — the view only orchestrates tabs and mounts one at a time.
vi.mock('@/components/settings/ApiKeysPanel.vue', () => ({
  default: { name: 'ApiKeysPanel', template: '<div data-test="account-stub" />' },
}))
vi.mock('@/components/settings/NotificationSettingsPanel.vue', () => ({
  default: { name: 'NotificationSettingsPanel', template: '<div data-test="notifications-stub" />' },
}))
vi.mock('@/components/settings/SynapseReactionsPanel.vue', () => ({
  default: { name: 'SynapseReactionsPanel', template: '<div data-test="reactions-stub" />' },
}))
vi.mock('@/components/settings/SynapseTargetsPanel.vue', () => ({
  default: { name: 'SynapseTargetsPanel', template: '<div data-test="targets-stub" />' },
}))
vi.mock('@/components/settings/McpKeysPanel.vue', () => ({
  default: { name: 'McpKeysPanel', template: '<div data-test="mcp-stub" />' },
}))

function panel(wrapper, test) {
  return wrapper.find(`[data-test="${test}"]`)
}

describe('SettingsView sections', () => {
  it('opens Account by default with API keys mounted', () => {
    const wrapper = mount(SettingsView)
    const tabs = wrapper.findAll('[role="tab"]')
    expect(tabs).toHaveLength(4)
    expect(tabs.map(t => t.text())).toEqual(['Account', 'Notifications', 'Synapse', 'MCP'])
    expect(tabs[0].classes()).toContain('tab-active')
    expect(panel(wrapper, 'account-stub').exists()).toBe(true)
    expect(panel(wrapper, 'reactions-stub').exists()).toBe(false)
  })

  it('shows both Synapse panels together on the Synapse tab', async () => {
    const wrapper = mount(SettingsView)
    const synapseTab = wrapper.findAll('[role="tab"]')[2]
    await synapseTab.trigger('click')

    expect(synapseTab.classes()).toContain('tab-active')
    expect(panel(wrapper, 'account-stub').exists()).toBe(false)
    expect(panel(wrapper, 'reactions-stub').exists()).toBe(true)
    expect(panel(wrapper, 'targets-stub').exists()).toBe(true)
  })

  it('mounts MCP keys only on the MCP tab', async () => {
    const wrapper = mount(SettingsView)
    const mcpTab = wrapper.findAll('[role="tab"]')[3]
    await mcpTab.trigger('click')

    expect(panel(wrapper, 'mcp-stub').exists()).toBe(true)
    expect(panel(wrapper, 'account-stub').exists()).toBe(false)
  })
})