import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { createPinia, setActivePinia } from 'pinia'

// Mock store module before importing component (W4 — CLAUDE.md unit test requirement)
vi.mock('../../../stores/cloudConnections.js', () => ({
  useCloudConnectionsStore: () => ({
    connections: [],
    loading: false,
    error: null,
    fetchConnections: vi.fn(),
    disconnect: vi.fn(),
    disconnectAll: vi.fn(),
  }),
}))

// Mock api/client.js to avoid HTTP calls
vi.mock('../../../api/client.js', () => ({
  connectWebDav: vi.fn(),
  listCloudConnections: vi.fn(),
  disconnectCloud: vi.fn(),
}))

import SettingsCloudTab from '../SettingsCloudTab.vue'

const globalPlugins = {
  plugins: [createPinia()],
  stubs: {
    // Stub CloudCredentialModal to avoid portal/teleport complexity in tests
    CloudCredentialModal: {
      template: '<div />',
      props: ['show', 'provider'],
    },
  },
}

beforeEach(() => {
  setActivePinia(createPinia())
  vi.clearAllMocks()
})

describe('SettingsCloudTab', () => {
  it('renders all 4 provider rows', () => {
    const wrapper = mount(SettingsCloudTab, { global: globalPlugins })
    expect(wrapper.text()).toContain('Google Drive')
    expect(wrapper.text()).toContain('OneDrive')
    expect(wrapper.text()).toContain('Nextcloud')
    expect(wrapper.text()).toContain('WebDAV')
  })

  it('shows Connect buttons when no connections active', () => {
    const wrapper = mount(SettingsCloudTab, { global: globalPlugins })
    const buttons = wrapper.findAll('button')
    expect(buttons.length).toBeGreaterThan(0)
    // At least some "Connect" buttons should be visible when no connections
    const buttonTexts = buttons.map(b => b.text()).join(' ')
    expect(buttonTexts).toContain('Connect')
  })
})
