import React from 'react'
import { renderWithProviders, userEvent, screen } from '@/__tests__/utils/test-helpers'
import FAQ from './faq'

jest.mock('lucide-react', () => ({
  ChevronDown: ({ className }: any) => <span data-testid="chevron-icon" className={className} />,
}))

describe('FAQ Component', () => {
  it('should render FAQ section with heading', () => {
    renderWithProviders(<FAQ />)
    expect(screen.getByText('Frequently Asked Questions')).toBeInTheDocument()
  })

  it('should display description text', () => {
    renderWithProviders(<FAQ />)
    expect(screen.getByText(/find answers to common questions/i)).toBeInTheDocument()
  })

  it('should render all default FAQ items', () => {
    renderWithProviders(<FAQ />)
    expect(screen.getByText(/how do i upload my portfolio/i)).toBeInTheDocument()
    expect(screen.getByText(/what file formats are supported/i)).toBeInTheDocument()
    expect(screen.getByText(/can i use a custom domain/i)).toBeInTheDocument()
  })

  it('should allow expanding FAQ item', async () => {
    renderWithProviders(<FAQ />)
    const firstButton = screen.getAllByRole('button')[0]

    expect(firstButton).toHaveAttribute('aria-expanded', 'false')

    await userEvent.click(firstButton)

    expect(firstButton).toHaveAttribute('aria-expanded', 'true')
  })

  it('should display answer when FAQ item is expanded', async () => {
    renderWithProviders(<FAQ />)
    const firstButton = screen.getAllByRole('button')[0]

    expect(screen.queryByText(/navigate to your dashboard and click/i)).not.toBeInTheDocument()

    await userEvent.click(firstButton)

    expect(screen.getByText(/navigate to your dashboard and click/i)).toBeInTheDocument()
  })

  it('should collapse FAQ item when clicked again', async () => {
    renderWithProviders(<FAQ />)
    const firstButton = screen.getAllByRole('button')[0]

    await userEvent.click(firstButton)
    expect(firstButton).toHaveAttribute('aria-expanded', 'true')

    await userEvent.click(firstButton)
    expect(firstButton).toHaveAttribute('aria-expanded', 'false')
  })

  it.skip('should allow multiple FAQ items to be open', async () => {
    renderWithProviders(<FAQ />)
    const buttons = screen.getAllByRole('button')

    await userEvent.click(buttons[0])
    await userEvent.click(buttons[1])

    expect(buttons[0]).toHaveAttribute('aria-expanded', 'true')
    expect(buttons[1]).toHaveAttribute('aria-expanded', 'true')
  })

  it.skip('should toggle FAQ item individually', async () => {
    renderWithProviders(<FAQ />)
    const buttons = screen.getAllByRole('button')

    await userEvent.click(buttons[0])
    expect(buttons[0]).toHaveAttribute('aria-expanded', 'true')
    expect(buttons[1]).toHaveAttribute('aria-expanded', 'false')

    await userEvent.click(buttons[1])
    expect(buttons[0]).toHaveAttribute('aria-expanded', 'true')
    expect(buttons[1]).toHaveAttribute('aria-expanded', 'true')

    await userEvent.click(buttons[0])
    expect(buttons[0]).toHaveAttribute('aria-expanded', 'false')
    expect(buttons[1]).toHaveAttribute('aria-expanded', 'true')
  })

  it('should display support contact link', () => {
    renderWithProviders(<FAQ />)
    const supportLink = screen.getByRole('link', { name: /contact our support team/i })
    expect(supportLink).toHaveAttribute('href', 'mailto:support@portfoliohost.com')
  })

  it('should have proper ARIA attributes', () => {
    renderWithProviders(<FAQ />)
    const buttons = screen.getAllByRole('button')
    buttons.forEach((button) => {
      expect(button).toHaveAttribute('aria-expanded')
      expect(button).toHaveAttribute('aria-controls')
    })
  })

  it('should use custom FAQ items', () => {
    const customItems = [
      {
        id: 'custom-1',
        question: 'Custom question?',
        answer: 'Custom answer here',
      },
    ]
    renderWithProviders(<FAQ items={customItems} />)
    expect(screen.getByText('Custom question?')).toBeInTheDocument()
  })

  it('should display custom answer when expanded', async () => {
    const customItems = [
      {
        id: 'custom-1',
        question: 'Custom question?',
        answer: 'Custom answer here',
      },
    ]
    renderWithProviders(<FAQ items={customItems} />)
    const button = screen.getByRole('button', { name: /custom question/i })

    await userEvent.click(button)

    expect(screen.getByText('Custom answer here')).toBeInTheDocument()
  })

  it('should handle keyboard navigation', async () => {
    renderWithProviders(<FAQ />)
    const firstButton = screen.getAllByRole('button')[0]

    firstButton.focus()
    expect(document.activeElement).toBe(firstButton)

    await userEvent.keyboard('{Enter}')
    expect(firstButton).toHaveAttribute('aria-expanded', 'true')
  })

  it('should render correct number of FAQ items', () => {
    renderWithProviders(<FAQ />)
    const buttons = screen.getAllByRole('button')
    // 6 default FAQ items + 1 support link button = 7 total buttons
    expect(buttons.length).toBeGreaterThanOrEqual(6)
  })

  it('should have proper styling classes', () => {
    const { container } = renderWithProviders(<FAQ />)
    const section = container.querySelector('section')
    expect(section).toHaveClass('py-16', 'md:py-24')
  })
})