import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { mount, VueWrapper } from '@vue/test-utils'
import { nextTick } from 'vue'
import LoginButton from '../LoginButton.vue'
import { authenticateParent, logoutParent } from '../../../stores/auth'

vi.mock('vue-router', () => ({
  useRouter: vi.fn(() => ({ push: vi.fn() })),
}))

// Mock imageCache module
vi.mock('@/common/imageCache', () => ({
  getCachedImageUrl: vi.fn(async (imageId: string) => `blob:mock-url-${imageId}`),
  revokeImageUrl: vi.fn(),
  revokeAllImageUrls: vi.fn(),
}))

// Create real Vue refs for isParentAuthenticated and isParentPersistent using vi.hoisted.
// Real Vue refs are required so Vue templates auto-unwrap them correctly in v-if conditions.
const { isParentAuthenticatedRef, isParentPersistentRef } = vi.hoisted(() => {
  // eslint-disable-next-line @typescript-eslint/no-require-imports
  const { ref } = require('vue')
  return {
    isParentAuthenticatedRef: ref(false),
    isParentPersistentRef: ref(false),
  }
})

vi.mock('../../../stores/auth', () => ({
  authenticateParent: vi.fn(),
  isParentAuthenticated: isParentAuthenticatedRef,
  isParentPersistent: isParentPersistentRef,
  logoutParent: vi.fn(),
  logoutUser: vi.fn(),
  consumePendingReturnUrl: vi.fn(() => null),
  hasPendingReturnUrl: vi.fn(() => false),
  clearPendingReturnUrl: vi.fn(),
}))

global.fetch = vi.fn()

describe('LoginButton', () => {
  let wrapper: VueWrapper<any>

  beforeEach(() => {
    vi.clearAllMocks()
    isParentAuthenticatedRef.value = false
    isParentPersistentRef.value = false
    ;(global.fetch as any).mockResolvedValue({
      ok: true,
      json: async () => ({
        image_id: 'test-image-id',
        first_name: 'John',
        email: 'john@example.com',
      }),
    })
  })

  afterEach(() => {
    if (wrapper) {
      wrapper.unmount()
    }
  })

  describe('Avatar Rendering', () => {
    it('renders avatar with image when image_id is available', async () => {
      wrapper = mount(LoginButton)
      await nextTick()
      // Wait for fetchUserProfile to complete
      await new Promise((resolve) => setTimeout(resolve, 100))

      // Component should be mounted and functional
      expect(wrapper.exists()).toBe(true)
      // Should have attempted to load user profile with credentials
      expect(global.fetch).toHaveBeenCalledWith('/api/user/profile', {
        credentials: 'include',
      })
    })

    it('renders avatar with initial when no image_id', async () => {
      ;(global.fetch as any).mockResolvedValueOnce({
        ok: true,
        json: async () => ({ first_name: 'Jane' }),
      })

      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const avatarText = wrapper.find('.avatar-text')
      expect(avatarText.exists()).toBe(true)
      expect(avatarText.text()).toBe('J')
    })

    it('renders ? when no first_name available', async () => {
      ;(global.fetch as any).mockResolvedValueOnce({
        ok: true,
        json: async () => ({}),
      })

      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const avatarText = wrapper.find('.avatar-text')
      expect(avatarText.exists()).toBe(true)
      expect(avatarText.text()).toBe('?')
    })

    it('shows loading state initially', async () => {
      wrapper = mount(LoginButton)
      const loading = wrapper.find('.avatar-text')
      expect(loading.exists()).toBe(true)
      expect(loading.text()).toBe('...')
    })
  })

  describe('Dropdown Interactions', () => {
    beforeEach(async () => {
      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))
    })

    it('opens dropdown on click when authenticated', async () => {
      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      const dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(true)
    })

    it('closes dropdown on Escape key', async () => {
      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      let dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(true)

      await button.trigger('keydown', { key: 'Escape' })
      await nextTick()

      dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(false)
    })

    it('closes dropdown on outside click', async () => {
      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      let dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(true)

      // Simulate outside click by directly calling the handler
      const outsideClick = new MouseEvent('mousedown', {
        bubbles: true,
        cancelable: true,
      })
      document.dispatchEvent(outsideClick)
      await nextTick()

      dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(false)
    })
  })

  describe('Keyboard Navigation', () => {
    beforeEach(async () => {
      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))
    })

    it('opens dropdown on Enter key', async () => {
      const button = wrapper.find('.avatar-btn')
      await button.trigger('keydown', { key: 'Enter' })
      await nextTick()

      const dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(true)
    })

    it('opens dropdown on Space key', async () => {
      const button = wrapper.find('.avatar-btn')
      await button.trigger('keydown', { key: ' ' })
      await nextTick()

      const dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(true)
    })

    it('navigates menu items with arrow keys', async () => {
      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      const dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(true)

      // First item should be focused
      let menuItems = wrapper.findAll('.menu-item')
      expect(menuItems[0].attributes('aria-selected')).toBe('true')

      // Press down arrow
      await button.trigger('keydown', { key: 'ArrowDown' })
      await nextTick()

      menuItems = wrapper.findAll('.menu-item')
      expect(menuItems[1].attributes('aria-selected')).toBe('true')
    })
  })

  describe('ARIA Attributes', () => {
    it('has correct ARIA attributes', async () => {
      // Note: Due to vi.mock hoisting limitations, isParentAuthenticated
      // value is set when the mock is first created
      wrapper = mount(LoginButton)
      await nextTick()

      const button = wrapper.find('.avatar-btn')
      // Should have ar haspopup regardless of auth state
      expect(button.attributes('aria-haspopup')).toBe('menu')
      expect(button.attributes('aria-expanded')).toBe('false')
      // aria-label will vary based on the initial mock state
      expect(button.attributes('aria-label')).toBeTruthy()
    })

    it('has correct ARIA attributes when authenticated', async () => {
      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const button = wrapper.find('.avatar-btn')
      expect(button.attributes('aria-label')).toBe('Parent menu')
      expect(button.attributes('aria-haspopup')).toBe('menu')
      expect(button.attributes('aria-expanded')).toBe('false')
    })

    it('updates aria-expanded when dropdown opens', async () => {
      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      expect(button.attributes('aria-expanded')).toBe('true')
    })

    it('menu items have correct roles', async () => {
      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      const dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.attributes('role')).toBe('menu')

      const menuItems = wrapper.findAll('.menu-item')
      menuItems.forEach((item) => {
        expect(item.attributes('role')).toBe('menuitem')
      })
    })
  })

  describe('Mode Logic', () => {
    it('button click handler works correctly', async () => {
      // Due to vi.mock limitations with reactivity, we test that
      // click handler is wired up correctly
      wrapper = mount(LoginButton, {
        global: {
          mocks: {
            $router: {
              push: vi.fn(),
            },
          },
        },
      })
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      // Verify button is clickable and doesn't throw
      expect(button.exists()).toBe(true)
    })

    it('dropdown visibility controlled by auth state and open/close', async () => {
      //Test dropdown behavior when authenticated
      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      // Initially closed
      let dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(false)

      // Click to open
      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      dropdown = wrapper.find('.dropdown-menu')
      expect(dropdown.exists()).toBe(true)
    })
  })

  describe('Focus Ring', () => {
    it('shows focus ring on keyboard focus', async () => {
      wrapper = mount(LoginButton)
      await nextTick()

      const button = wrapper.find('.avatar-btn')
      await button.trigger('focus')
      await nextTick()

      // Check for focus ring styles
      expect(button.classes()).toContain('avatar-btn')
    })
  })

  describe('Stub Icons', () => {
    it('renders stub icons for menu items', async () => {
      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      const stubs = wrapper.findAll('.menu-icon-stub')
      expect(stubs.length).toBe(3)
    })
  })

  describe('PIN Modal - checkbox and persistent mode', () => {
    beforeEach(async () => {
      isParentAuthenticatedRef.value = false
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))
    })

    it('checkbox is unchecked by default when modal opens', async () => {
      // Open modal by triggering the open-login event path
      // Mock has-pin response
      ;(global.fetch as any)
        .mockResolvedValueOnce({ ok: true, json: async () => ({ has_pin: true }) })
        .mockResolvedValueOnce({ ok: true, json: async () => ({ valid: true }) })

      const vm = wrapper.vm as any
      await vm.open()
      await nextTick()

      const checkbox = wrapper.find('.stay-checkbox')
      expect(checkbox.exists()).toBe(true)
      expect((checkbox.element as HTMLInputElement).checked).toBe(false)
    })

    it('submitting with checkbox checked calls authenticateParent(true)', async () => {
      const { authenticateParent } = await import('../../../stores/auth')
      ;(global.fetch as any)
        .mockResolvedValueOnce({ ok: true, json: async () => ({ has_pin: true }) })
        .mockResolvedValueOnce({ ok: true, json: async () => ({ valid: true }) })

      const vm = wrapper.vm as any
      await vm.open()
      await nextTick()

      const checkbox = wrapper.find('.stay-checkbox')
      await checkbox.setValue(true)
      await nextTick()

      const pinInput = wrapper.find('.pin-input')
      await pinInput.setValue('1234')
      await wrapper.find('form').trigger('submit')
      await nextTick()

      expect(authenticateParent).toHaveBeenCalledWith(true)
    })

    it('submitting without checking checkbox calls authenticateParent(false)', async () => {
      const { authenticateParent } = await import('../../../stores/auth')
      ;(global.fetch as any)
        .mockResolvedValueOnce({ ok: true, json: async () => ({ has_pin: true }) })
        .mockResolvedValueOnce({ ok: true, json: async () => ({ valid: true }) })

      const vm = wrapper.vm as any
      await vm.open()
      await nextTick()

      const pinInput = wrapper.find('.pin-input')
      await pinInput.setValue('1234')
      await wrapper.find('form').trigger('submit')
      await nextTick()

      expect(authenticateParent).toHaveBeenCalledWith(false)
    })
  })

  describe('Lock badge visibility', () => {
    it('lock badge is hidden when not authenticated', async () => {
      isParentAuthenticatedRef.value = false
      isParentPersistentRef.value = false
      wrapper = mount(LoginButton)
      await nextTick()

      const badge = wrapper.find('.persistent-badge')
      expect(badge.exists()).toBe(false)
    })

    it('lock badge is hidden when authenticated but non-persistent', async () => {
      isParentAuthenticatedRef.value = true
      isParentPersistentRef.value = false
      wrapper = mount(LoginButton)
      await nextTick()

      const badge = wrapper.find('.persistent-badge')
      expect(badge.exists()).toBe(false)
    })

    it('lock badge is visible when authenticated and persistent', async () => {
      isParentAuthenticatedRef.value = true
      isParentPersistentRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()

      const badge = wrapper.find('.persistent-badge')
      expect(badge.exists()).toBe(true)
      expect(badge.text()).toBe('🔒')
    })
  })

  describe('User Email Display', () => {
    it('displays email in dropdown header when available', async () => {
      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      const email = wrapper.find('.dropdown-user-email')
      expect(email.exists()).toBe(true)
      expect(email.text()).toBe('john@example.com')
    })

    it('does not display email element when email is not available', async () => {
      ;(global.fetch as any).mockResolvedValueOnce({
        ok: true,
        json: async () => ({ image_id: 'test-image-id', first_name: 'Jane' }),
      })

      isParentAuthenticatedRef.value = true
      wrapper = mount(LoginButton)
      await nextTick()
      await new Promise((resolve) => setTimeout(resolve, 50))

      const button = wrapper.find('.avatar-btn')
      await button.trigger('click')
      await nextTick()

      const email = wrapper.find('.dropdown-user-email')
      expect(email.exists()).toBe(false)
    })
  })
})