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

// Mock stores and API so mount doesn't error out
vi.mock('../../../stores/documents.js', () => ({
  useDocumentsStore: () => ({
    listShares: vi.fn().mockResolvedValue([]),
    shareDocument: vi.fn(),
    updateSharePermission: vi.fn(),
    revokeShare: vi.fn(),
  }),
}))

vi.mock('../../../stores/toast.js', () => ({
  useToastStore: () => ({ show: vi.fn() }),
}))

import ShareModal from '../ShareModal.vue'

const globalStubs = {
  AppIcon: true,
}

const testDoc = { id: 'doc-1', original_name: 'test.pdf' }

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

describe('VISUAL-02: ShareModal form baseline (@tailwindcss/forms consistent pattern)', () => {
  it('text input uses consistent ring-2 focus class pattern', async () => {
    const wrapper = mount(ShareModal, {
      props: { doc: testDoc },
      global: { stubs: globalStubs },
    })
    await flushPromises()
    const input = wrapper.find('input[type="text"]')
    expect(input.exists()).toBe(true)
    expect(input.classes()).toContain('focus:ring-2')
    expect(input.classes()).toContain('focus:outline-none')
  })

  it('select uses consistent ring-2 focus class pattern', async () => {
    const wrapper = mount(ShareModal, {
      props: { doc: testDoc },
      global: { stubs: globalStubs },
    })
    await flushPromises()
    const select = wrapper.find('select')
    expect(select.exists()).toBe(true)
    expect(select.classes()).toContain('focus:ring-2')
    expect(select.classes()).toContain('focus:outline-none')
  })
})

describe('RESP-04: ShareModal mobile-safe panel', () => {
  it('panel has max-h-[90vh] class for mobile scroll safety', async () => {
    const wrapper = mount(ShareModal, {
      props: { doc: testDoc },
      global: { stubs: globalStubs },
    })
    await flushPromises()
    const panel = wrapper.find('[data-test="share-modal-panel"]')
    expect(panel.exists()).toBe(true)
    expect(panel.classes()).toContain('max-h-[90vh]')
  })

  it('panel has overflow-y-auto class for mobile scroll', async () => {
    const wrapper = mount(ShareModal, {
      props: { doc: testDoc },
      global: { stubs: globalStubs },
    })
    await flushPromises()
    const panel = wrapper.find('[data-test="share-modal-panel"]')
    expect(panel.classes()).toContain('overflow-y-auto')
  })

  it('panel has mx-4 horizontal margin so it fits within 375px viewport', async () => {
    const wrapper = mount(ShareModal, {
      props: { doc: testDoc },
      global: { stubs: globalStubs },
    })
    await flushPromises()
    const panel = wrapper.find('[data-test="share-modal-panel"]')
    expect(panel.classes()).toContain('mx-4')
  })
})
