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

import FolderDeleteModal from '../FolderDeleteModal.vue'

const globalStubs = {
  AppIcon: true,
}

const testFolder = { id: 'f1', name: 'Projects', doc_count: 3 }

describe('RESP-04: FolderDeleteModal mobile-safe panel', () => {
  it('panel has max-h-[90vh] class for mobile scroll safety', () => {
    const wrapper = mount(FolderDeleteModal, {
      props: { folder: testFolder },
      global: { stubs: globalStubs },
    })
    const panel = wrapper.find('[data-test="folder-delete-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(FolderDeleteModal, {
      props: { folder: testFolder },
      global: { stubs: globalStubs },
    })
    const panel = wrapper.find('[data-test="folder-delete-modal-panel"]')
    expect(panel.classes()).toContain('overflow-y-auto')
  })

  it('panel has mx-4 horizontal margin so it fits within 375px viewport', () => {
    const wrapper = mount(FolderDeleteModal, {
      props: { folder: testFolder },
      global: { stubs: globalStubs },
    })
    const panel = wrapper.find('[data-test="folder-delete-modal-panel"]')
    expect(panel.classes()).toContain('mx-4')
  })

  it('confirm and cancel buttons are accessible (text, role)', () => {
    const wrapper = mount(FolderDeleteModal, {
      props: { folder: testFolder },
      global: { stubs: globalStubs },
    })
    expect(wrapper.text()).toContain('Keep folder')
    expect(wrapper.text()).toContain('Delete folder and documents')
  })
})
