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

vi.mock('../../../api/client.js', () => ({
  getConnectionConfig: vi.fn().mockResolvedValue({ connection_username: '', server_url: '' }),
  connectWebDav: vi.fn(),
}))

import CloudCredentialModal from '../CloudCredentialModal.vue'

const globalStubs = {
  AppIcon: true,
}

const testProvider = { key: 'webdav', label: 'WebDAV' }

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

describe('RESP-04: CloudCredentialModal mobile-safe panel', () => {
  it('panel has max-h-[90vh] class for mobile scroll safety', () => {
    const wrapper = mount(CloudCredentialModal, {
      props: { show: true, provider: testProvider, existing: null },
      global: { stubs: globalStubs },
    })
    const panel = wrapper.find('[data-test="cloud-credential-modal-panel"]')
    expect(panel.exists()).toBe(true)
    expect(panel.classes()).toContain('max-h-[90vh]')
  })

  it('panel has overflow-y-auto class for mobile scroll', () => {
    const wrapper = mount(CloudCredentialModal, {
      props: { show: true, provider: testProvider, existing: null },
      global: { stubs: globalStubs },
    })
    const panel = wrapper.find('[data-test="cloud-credential-modal-panel"]')
    expect(panel.classes()).toContain('overflow-y-auto')
  })

  it('panel not rendered when show=false', () => {
    const wrapper = mount(CloudCredentialModal, {
      props: { show: false, provider: testProvider, existing: null },
      global: { stubs: globalStubs },
    })
    // When show=false the v-if hides the entire overlay
    const panel = wrapper.find('[data-test="cloud-credential-modal-panel"]')
    expect(panel.exists()).toBe(false)
  })
})