import { TimezoneSelector } from '@/components/Timezone/TimezoneSelector'
import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'

describe('TimezoneSelector', () => {
  const mockOnChange = jest.fn()

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

  it('renders with initial timezone value', () => {
    renderWithProviders(
      <TimezoneSelector
        referenceDate={new Date()}
        value="America/New_York"
        onChange={mockOnChange}
      />
    )

    const button = screen.getByRole('button')
    expect(button).toBeInTheDocument()
    expect(button).toHaveTextContent(/UTC[-−][45]/i) // New York offset
  })

  it('opens popover when button is clicked', async () => {
    renderWithProviders(
      <TimezoneSelector
        referenceDate={new Date()}
        value="Europe/Paris"
        onChange={mockOnChange}
      />
    )

    const button = screen.getByRole('button')
    fireEvent.click(button)

    await waitFor(() => {
      expect(screen.getByRole('combobox')).toBeInTheDocument()
    })
  })

  it('calls onChange when a new timezone is selected', async () => {
    renderWithProviders(
      <TimezoneSelector
        referenceDate={new Date()}
        value="Europe/Paris"
        onChange={mockOnChange}
      />
    )

    const button = screen.getByRole('button')
    fireEvent.click(button)

    await waitFor(() => {
      expect(screen.getByRole('combobox')).toBeInTheDocument()
    })

    const autocomplete = screen.getByRole('combobox')
    fireEvent.change(autocomplete, { target: { value: 'Los Angeles' } })

    // Find and click the Los Angeles option
    const option = await screen.findByText(/Los Angeles/i)
    fireEvent.click(option)

    expect(mockOnChange).toHaveBeenCalledWith('America/Los_Angeles')
  })

  it('closes popover after timezone selection', async () => {
    renderWithProviders(
      <TimezoneSelector
        referenceDate={new Date()}
        value="Europe/Paris"
        onChange={mockOnChange}
      />
    )

    const button = screen.getByRole('button')
    fireEvent.click(button)

    await waitFor(() => {
      expect(screen.getByRole('combobox')).toBeInTheDocument()
    })

    const autocomplete = screen.getByRole('combobox')
    fireEvent.change(autocomplete, { target: { value: 'Tokyo' } })

    const option = await screen.findByText(/Tokyo/i)
    fireEvent.click(option)

    await waitFor(() => {
      expect(screen.queryByRole('combobox')).not.toBeInTheDocument()
    })
  })

  it('displays timezones with half-hour offsets correctly', () => {
    renderWithProviders(
      <TimezoneSelector
        referenceDate={new Date()}
        value="Asia/Kolkata"
        onChange={mockOnChange}
      />
    )

    const button = screen.getByRole('button')
    expect(button).toHaveTextContent('UTC+5:30') // India offset
  })

  it('shows correct offset for Europe/Paris depending on daylight saving time', () => {
    // Summer date (DST on)
    const summerDate = new Date('2025-07-15T12:00:00Z')
    renderWithProviders(
      <TimezoneSelector
        value="Europe/Paris"
        onChange={mockOnChange}
        referenceDate={summerDate}
      />
    )
    let button = screen.getByRole('button')
    expect(button).toHaveTextContent(/UTC\+2\b/)
    cleanup()
    // Rerender with a winter date (DST off)
    const winterDate = new Date('2025-01-15T12:00:00Z')
    renderWithProviders(
      <TimezoneSelector
        value="Europe/Paris"
        onChange={mockOnChange}
        referenceDate={winterDate}
      />
    )
    button = screen.getByRole('button')
    expect(button).toHaveTextContent(/UTC\+1\b/)
  })
})