import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render } from '@testing-library/react'
import { screen, fireEvent } from '@testing-library/dom'
import '@testing-library/jest-dom'
import { Navigation } from '../Navigation'

// Mock the UI components
vi.mock('../ui', () => ({
  LogoMark: () => <div data-testid="logo-mark">Logo</div>,
  Magnetic: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
}))

describe('Navigation Component', () => {
  const mockProps = {
    darkMode: false,
    setDarkMode: vi.fn(),
    mobileMenuOpen: false,
    setMobileMenuOpen: vi.fn()
  }

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

  it('renders navigation with logo and brand name', () => {
    render(<Navigation {...mockProps} />)
    
    expect(screen.getByTestId('logo-mark')).toBeInTheDocument()
    expect(screen.getByText('Miracles in Motion')).toBeInTheDocument()
    expect(screen.getByText('Essentials for every student')).toBeInTheDocument()
  })

  it('renders desktop navigation links', () => {
    render(<Navigation {...mockProps} />)
    
    expect(screen.getByLabelText('Read success stories')).toBeInTheDocument()
    expect(screen.getByLabelText('View testimonies')).toBeInTheDocument()
    expect(screen.getByLabelText('Volunteer opportunities')).toBeInTheDocument()
    expect(screen.getByLabelText('Corporate partnerships')).toBeInTheDocument()
    expect(screen.getByLabelText('Request assistance')).toBeInTheDocument()
    expect(screen.getByLabelText('Portal login')).toBeInTheDocument()
  })

  it('toggles dark mode when button is clicked', () => {
    render(<Navigation {...mockProps} />)
    
    const darkModeButtons = screen.getAllByLabelText('Switch to dark mode')
    fireEvent.click(darkModeButtons[0])
    
    expect(mockProps.setDarkMode).toHaveBeenCalledWith(true)
  })

  it('toggles mobile menu when hamburger button is clicked', () => {
    render(<Navigation {...mockProps} />)
    
    const mobileMenuButton = screen.getByLabelText('Open navigation menu')
    fireEvent.click(mobileMenuButton)
    
    expect(mockProps.setMobileMenuOpen).toHaveBeenCalledWith(true)
  })

  it('displays mobile menu when mobileMenuOpen is true', () => {
    render(<Navigation {...mockProps} mobileMenuOpen={true} />)
    
    const storiesLinks = screen.getAllByText('Stories')
    expect(storiesLinks).toHaveLength(2) // One in desktop nav, one in mobile nav
    expect(screen.getByText('Testimonies')).toBeInTheDocument()
    expect(screen.getByText('Volunteers')).toBeInTheDocument()
  })

  it('handles keyboard navigation correctly', () => {
    render(<Navigation {...mockProps} />)
    
    const darkModeButton = screen.getAllByLabelText('Switch to dark mode')[0]
    fireEvent.keyDown(darkModeButton, { key: 'Enter', code: 'Enter' })
    
    expect(mockProps.setDarkMode).toHaveBeenCalledWith(true)
  })

  it('displays correct icon based on dark mode state', () => {
    const { rerender } = render(<Navigation {...mockProps} darkMode={false} />)
    expect(screen.getAllByLabelText('Switch to dark mode')).toHaveLength(2)
    
    rerender(<Navigation {...mockProps} darkMode={true} />)
    expect(screen.getAllByLabelText('Switch to light mode')).toHaveLength(2)
  })
})