import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { render } from '@testing-library/react-native'
import React from 'react'
import { buildTestQueryClient } from '../../../__utils__/query_client'
import { ChatProvider } from '../../../contexts/chat_context'
import type { PersonResource } from '../../../types/resources/person'
import type { SystemMessageResource } from '../../../utils/system_messages'
import { SystemMessage } from '../system_message'

jest.mock('@react-navigation/native', () => ({
  useNavigation: () => ({ navigate: jest.fn() }),
}))
jest.mock('../../../hooks/use_animated_message_background_color', () => ({
  useAnimatedMessageBackgroundColor: () => ({
    animatedBackgroundColor: {},
    handleMessagePressIn: jest.fn(),
    handleMessagePressOut: jest.fn(),
  }),
}))

const author = { id: 1, type: 'Person', name: 'Wes', avatar: null } as unknown as PersonResource

const systemMessage = (overrides: Partial<SystemMessageResource>): SystemMessageResource =>
  ({
    type: 'Message',
    id: '01',
    text: null,
    html: '',
    createdAt: '2026-02-03T14:18:00',
    deletedAt: null,
    textEditedAt: null,
    mine: false,
    attachments: [],
    author,
    reactionCounts: [],
    replyCount: 0,
    replyRootId: null,
    messageType: 'user_joined',
    personIdsForSystemEvent: null,
    systemTextParts: null,
    ...overrides,
  }) as SystemMessageResource

let queryClient: QueryClient

const Wrapper = ({ children }: { children: React.ReactNode }) => (
  <QueryClientProvider client={queryClient}>
    <ChatProvider
      value={{
        token: {
          access_token: '',
          created_at: 0,
          expires_in: 0,
          scope: '',
          refresh_token: '',
          token_type: '',
        },
        onUnauthorizedResponse: () => {},
        theme: { theme: { colors: { interaction: 'rgb(0, 0, 255)' } } },
      }}
    >
      {children}
    </ChatProvider>
  </QueryClientProvider>
)

const renderSystemMessage = (message: SystemMessageResource) =>
  render(<SystemMessage message={message} conversationId={1} conversationDisabled={false} />, {
    wrapper: Wrapper,
  })

beforeEach(() => {
  jest.useFakeTimers({ now: new Date(2026, 5, 15, 12, 0) })
  queryClient = buildTestQueryClient()
})

afterEach(() => {
  queryClient.clear()
  jest.useRealTimers()
})

describe('SystemMessage', () => {
  it('renders actor messages as their text followed by the local date and time', () => {
    const view = renderSystemMessage(
      systemMessage({
        messageType: 'conversation_archived',
        systemTextFormat: 'actor',
        text: 'This conversation was archived by Wes',
      })
    )

    expect(view.getByText('This conversation was archived by Wes on Feb 3 at 2:18pm')).toBeTruthy()
  })

  it('builds people messages from their names', () => {
    const view = renderSystemMessage(
      systemMessage({
        systemTextFormat: 'people',
        systemTextParts: { names: ['Ann', 'Bo'], overflowCount: 0, action: 'joined' },
        personIdsForSystemEvent: [1, 2],
      })
    )

    expect(view.getByText('Ann and Bo joined')).toBeTruthy()
  })
})