// src/components/chat/__tests__/message-item.test.tsx
import { render, screen, fireEvent } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { MessageItem } from '../message-item'
import { createTestMessage } from '@/__tests__/utils/test-utils'

describe('MessageItem', () => {
  // Group: Rendering
  describe('rendering', () => {
    it('renders message content correctly', () => {
      const message = createTestMessage({ content: 'Hello World' })
      render(<MessageItem message={message} />)
      expect(screen.getByText('Hello World')).toBeInTheDocument()
    })

    it('renders author name', () => {
      const message = createTestMessage({
        user: { displayName: 'Test User' }
      })
      render(<MessageItem message={message} />)
      expect(screen.getByText('Test User')).toBeInTheDocument()
    })

    it('shows edited indicator when message is edited', () => {
      const message = createTestMessage({ isEdited: true })
      render(<MessageItem message={message} />)
      expect(screen.getByText(/edited/i)).toBeInTheDocument()
    })
  })

  // Group: Interactions
  describe('interactions', () => {
    it('calls onReact when reaction button is clicked', async () => {
      const user = userEvent.setup()
      const onReact = jest.fn()
      const message = createTestMessage()
      render(<MessageItem message={message} onReact={onReact} />)

      await user.click(screen.getByRole('button', { name: /react/i }))
      expect(onReact).toHaveBeenCalledWith(message.id, expect.any(String))
    })

    it('enters edit mode when edit button is clicked', async () => {
      const user = userEvent.setup()
      const message = createTestMessage()
      render(<MessageItem message={message} canEdit={true} />)

      await user.click(screen.getByRole('button', { name: /edit/i }))
      expect(screen.getByRole('textbox')).toHaveValue(message.content)
    })
  })

  // Group: Edge Cases
  describe('edge cases', () => {
    it('handles empty content gracefully', () => {
      const message = createTestMessage({ content: '' })
      render(<MessageItem message={message} />)
      expect(screen.getByTestId('message-item')).toBeInTheDocument()
    })

    it('handles very long content with truncation', () => {
      const longContent = 'a'.repeat(10000)
      const message = createTestMessage({ content: longContent })
      render(<MessageItem message={message} />)
      expect(screen.getByTestId('message-content')).toBeInTheDocument()
    })

    it('handles special characters in content', () => {
      const message = createTestMessage({ content: '<script>alert("xss")</script>' })
      render(<MessageItem message={message} />)
      expect(screen.queryByRole('script')).not.toBeInTheDocument()
    })
  })

  // Group: Accessibility
  describe('accessibility', () => {
    it('has correct ARIA attributes', () => {
      const message = createTestMessage()
      render(<MessageItem message={message} />)
      expect(screen.getByRole('article')).toHaveAttribute('aria-label')
    })

    it('is keyboard navigable', async () => {
      const user = userEvent.setup()
      const message = createTestMessage()
      render(<MessageItem message={message} />)

      await user.tab()
      expect(screen.getByTestId('message-item')).toHaveFocus()
    })
  })
})

// src/hooks/__tests__/use-messages.test.ts
import { renderHook, act, waitFor } from '@testing-library/react'
import { useMessages } from '../use-messages'
import { useMessageStore } from '@/stores/message-store'

// Mock the store
jest.mock('@/stores/message-store')

describe('useMessages', () => {
  const mockStore = {
    messagesByChannel: {},
    fetchMessages: jest.fn(),
    sendMessage: jest.fn(),
    isLoading: false,
    error: null,
  }

  beforeEach(() => {
    jest.clearAllMocks()
    ;(useMessageStore as unknown as jest.Mock).mockReturnValue(mockStore)
  })

  describe('initialization', () => {
    it('returns empty array when no channel selected', () => {
      const { result } = renderHook(() => useMessages(null))
      expect(result.current.messages).toEqual([])
    })

    it('fetches messages when channel ID is provided', async () => {
      mockStore.fetchMessages.mockResolvedValue([])
      const { result } = renderHook(() => useMessages('channel-1'))

      await waitFor(() => {
        expect(mockStore.fetchMessages).toHaveBeenCalledWith('channel-1')
      })
    })
  })

  describe('sendMessage', () => {
    it('calls store sendMessage with correct parameters', async () => {
      mockStore.sendMessage.mockResolvedValue({ id: 'msg-1' })
      const { result } = renderHook(() => useMessages('channel-1'))

      await act(async () => {
        await result.current.sendMessage('Hello World')
      })

      expect(mockStore.sendMessage).toHaveBeenCalledWith('channel-1', 'Hello World')
    })

    it('returns the sent message', async () => {
      const sentMessage = { id: 'msg-1', content: 'Hello' }
      mockStore.sendMessage.mockResolvedValue(sentMessage)
      const { result } = renderHook(() => useMessages('channel-1'))

      let returnedMessage
      await act(async () => {
        returnedMessage = await result.current.sendMessage('Hello')
      })

      expect(returnedMessage).toEqual(sentMessage)
    })

    it('handles send failure gracefully', async () => {
      mockStore.sendMessage.mockRejectedValue(new Error('Network error'))
      const { result } = renderHook(() => useMessages('channel-1'))

      await expect(result.current.sendMessage('Hello')).rejects.toThrow('Network error')
    })
  })

  describe('loading state', () => {
    it('reflects loading state from store', () => {
      mockStore.isLoading = true
      const { result } = renderHook(() => useMessages('channel-1'))
      expect(result.current.isLoading).toBe(true)
    })
  })

  describe('error handling', () => {
    it('exposes store errors', () => {
      mockStore.error = 'Failed to fetch'
      const { result } = renderHook(() => useMessages('channel-1'))
      expect(result.current.error).toBe('Failed to fetch')
    })
  })
})

// src/stores/__tests__/message-store.test.ts
import { act } from '@testing-library/react'
import { useMessageStore, MessageStore } from '../message-store'

describe('MessageStore', () => {
  beforeEach(() => {
    // Reset store to initial state
    act(() => {
      useMessageStore.getState().reset()
    })
  })

  describe('initial state', () => {
    it('has empty messagesByChannel', () => {
      const state = useMessageStore.getState()
      expect(state.messagesByChannel).toEqual({})
    })

    it('has null currentChannelId', () => {
      const state = useMessageStore.getState()
      expect(state.currentChannelId).toBeNull()
    })

    it('has isLoading set to false', () => {
      const state = useMessageStore.getState()
      expect(state.isLoading).toBe(false)
    })
  })

  describe('setMessages', () => {
    it('sets messages for a channel', () => {
      const messages = [
        { id: 'msg-1', content: 'Hello' },
        { id: 'msg-2', content: 'World' },
      ]

      act(() => {
        useMessageStore.getState().setMessages('channel-1', messages)
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1']).toEqual(messages)
    })

    it('does not affect other channels', () => {
      const existingMessages = [{ id: 'msg-0', content: 'Existing' }]
      const newMessages = [{ id: 'msg-1', content: 'New' }]

      act(() => {
        useMessageStore.getState().setMessages('channel-1', existingMessages)
        useMessageStore.getState().setMessages('channel-2', newMessages)
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1']).toEqual(existingMessages)
      expect(state.messagesByChannel['channel-2']).toEqual(newMessages)
    })
  })

  describe('addMessage', () => {
    it('adds message to existing channel', () => {
      const existingMessage = { id: 'msg-1', content: 'Existing' }
      const newMessage = { id: 'msg-2', content: 'New' }

      act(() => {
        useMessageStore.getState().setMessages('channel-1', [existingMessage])
        useMessageStore.getState().addMessage('channel-1', newMessage)
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1']).toHaveLength(2)
      expect(state.messagesByChannel['channel-1'][1]).toEqual(newMessage)
    })

    it('creates channel array if not exists', () => {
      const newMessage = { id: 'msg-1', content: 'New' }

      act(() => {
        useMessageStore.getState().addMessage('new-channel', newMessage)
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['new-channel']).toEqual([newMessage])
    })

    it('prevents duplicate messages', () => {
      const message = { id: 'msg-1', content: 'Hello' }

      act(() => {
        useMessageStore.getState().addMessage('channel-1', message)
        useMessageStore.getState().addMessage('channel-1', message)
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1']).toHaveLength(1)
    })
  })

  describe('updateMessage', () => {
    it('updates existing message', () => {
      const message = { id: 'msg-1', content: 'Original' }

      act(() => {
        useMessageStore.getState().setMessages('channel-1', [message])
        useMessageStore.getState().updateMessage('channel-1', 'msg-1', {
          content: 'Updated',
        })
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1'][0].content).toBe('Updated')
    })

    it('preserves other message properties', () => {
      const message = { id: 'msg-1', content: 'Original', userId: 'user-1' }

      act(() => {
        useMessageStore.getState().setMessages('channel-1', [message])
        useMessageStore.getState().updateMessage('channel-1', 'msg-1', {
          content: 'Updated',
        })
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1'][0].userId).toBe('user-1')
    })

    it('handles non-existent message gracefully', () => {
      act(() => {
        useMessageStore.getState().setMessages('channel-1', [])
        useMessageStore.getState().updateMessage('channel-1', 'non-existent', {
          content: 'Updated',
        })
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1']).toEqual([])
    })
  })

  describe('deleteMessage', () => {
    it('removes message from channel', () => {
      const messages = [
        { id: 'msg-1', content: 'First' },
        { id: 'msg-2', content: 'Second' },
      ]

      act(() => {
        useMessageStore.getState().setMessages('channel-1', messages)
        useMessageStore.getState().deleteMessage('channel-1', 'msg-1')
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1']).toHaveLength(1)
      expect(state.messagesByChannel['channel-1'][0].id).toBe('msg-2')
    })
  })

  describe('addReaction', () => {
    it('adds reaction to message', () => {
      const message = { id: 'msg-1', content: 'Hello', reactions: [] }
      const reaction = { emoji: '👍', count: 1, users: ['user-1'], hasReacted: true }

      act(() => {
        useMessageStore.getState().setMessages('channel-1', [message])
        useMessageStore.getState().addReaction('channel-1', 'msg-1', reaction)
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel['channel-1'][0].reactions).toContainEqual(reaction)
    })
  })

  describe('reset', () => {
    it('resets store to initial state', () => {
      act(() => {
        useMessageStore.getState().setMessages('channel-1', [{ id: 'msg-1' }])
        useMessageStore.getState().setCurrentChannel('channel-1')
        useMessageStore.getState().reset()
      })

      const state = useMessageStore.getState()
      expect(state.messagesByChannel).toEqual({})
      expect(state.currentChannelId).toBeNull()
    })
  })
})

// src/lib/__tests__/utils.test.ts
import { cn, formatDate, truncate, sanitizeHtml } from '../utils'

describe('cn (classnames)', () => {
  it('merges class names', () => {
    expect(cn('foo', 'bar')).toBe('foo bar')
  })

  it('handles conditional classes', () => {
    expect(cn('foo', false && 'bar', 'baz')).toBe('foo baz')
  })

  it('handles undefined values', () => {
    expect(cn('foo', undefined, 'bar')).toBe('foo bar')
  })

  it('merges Tailwind classes correctly', () => {
    expect(cn('px-4', 'px-6')).toBe('px-6')
  })

  it('handles arrays', () => {
    expect(cn(['foo', 'bar'])).toBe('foo bar')
  })
})

describe('formatDate', () => {
  it('formats date with default format', () => {
    const date = new Date('2026-02-03T12:00:00Z')
    expect(formatDate(date)).toMatch(/Feb.*2026/)
  })

  it('handles ISO string input', () => {
    const result = formatDate('2026-02-03T12:00:00Z')
    expect(result).toBeTruthy()
  })

  it('handles timestamp input', () => {
    const result = formatDate(1738584000000)
    expect(result).toBeTruthy()
  })

  it('returns "Invalid Date" for invalid input', () => {
    expect(formatDate('not-a-date')).toBe('Invalid Date')
  })
})

describe('truncate', () => {
  it('truncates long strings', () => {
    expect(truncate('Hello World', 5)).toBe('Hello...')
  })

  it('does not truncate short strings', () => {
    expect(truncate('Hi', 10)).toBe('Hi')
  })

  it('handles exact length', () => {
    expect(truncate('Hello', 5)).toBe('Hello')
  })

  it('handles empty string', () => {
    expect(truncate('', 5)).toBe('')
  })

  it('uses custom suffix', () => {
    expect(truncate('Hello World', 5, '---')).toBe('Hello---')
  })
})

describe('sanitizeHtml', () => {
  it('removes script tags', () => {
    expect(sanitizeHtml('<script>alert("xss")</script>')).not.toContain('script')
  })

  it('preserves allowed tags', () => {
    expect(sanitizeHtml('<p>Hello</p>')).toContain('<p>')
  })

  it('removes onclick attributes', () => {
    expect(sanitizeHtml('<div onclick="alert()">Click</div>')).not.toContain('onclick')
  })

  it('handles nested dangerous content', () => {
    const input = '<div><script>evil()</script><p>Safe</p></div>'
    const result = sanitizeHtml(input)
    expect(result).not.toContain('script')
    expect(result).toContain('Safe')
  })
})

// src/app/api/__tests__/messages.test.ts
import { NextRequest } from 'next/server'
import { GET, POST, DELETE } from '../messages/route'

// Mock dependencies
jest.mock('@/lib/apollo-server', () => ({
  executeQuery: jest.fn(),
  executeMutation: jest.fn(),
}))

jest.mock('@/services/auth/auth-service', () => ({
  validateToken: jest.fn(),
}))

import { executeQuery, executeMutation } from '@/lib/apollo-server'
import { validateToken } from '@/services/auth/auth-service'

describe('/api/messages', () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })

  describe('GET', () => {
    it('returns messages for channel', async () => {
      const messages = [{ id: 'msg-1', content: 'Hello' }]
      ;(validateToken as jest.Mock).mockResolvedValue({ userId: 'user-1' })
      ;(executeQuery as jest.Mock).mockResolvedValue({ data: { messages } })

      const request = new NextRequest('http://localhost/api/messages?channelId=ch-1')
      const response = await GET(request)
      const data = await response.json()

      expect(response.status).toBe(200)
      expect(data.messages).toEqual(messages)
    })

    it('returns 400 when channelId is missing', async () => {
      ;(validateToken as jest.Mock).mockResolvedValue({ userId: 'user-1' })

      const request = new NextRequest('http://localhost/api/messages')
      const response = await GET(request)

      expect(response.status).toBe(400)
    })

    it('returns 401 when not authenticated', async () => {
      ;(validateToken as jest.Mock).mockResolvedValue(null)

      const request = new NextRequest('http://localhost/api/messages?channelId=ch-1')
      const response = await GET(request)

      expect(response.status).toBe(401)
    })

    it('handles pagination parameters', async () => {
      ;(validateToken as jest.Mock).mockResolvedValue({ userId: 'user-1' })
      ;(executeQuery as jest.Mock).mockResolvedValue({ data: { messages: [] } })

      const request = new NextRequest(
        'http://localhost/api/messages?channelId=ch-1&limit=10&offset=20'
      )
      await GET(request)

      expect(executeQuery).toHaveBeenCalledWith(
        expect.any(String),
        expect.objectContaining({ limit: 10, offset: 20 })
      )
    })
  })

  describe('POST', () => {
    it('creates a new message', async () => {
      const newMessage = { id: 'msg-1', content: 'New message' }
      ;(validateToken as jest.Mock).mockResolvedValue({ userId: 'user-1' })
      ;(executeMutation as jest.Mock).mockResolvedValue({ data: { message: newMessage } })

      const request = new NextRequest('http://localhost/api/messages', {
        method: 'POST',
        body: JSON.stringify({ channelId: 'ch-1', content: 'New message' }),
      })
      const response = await POST(request)
      const data = await response.json()

      expect(response.status).toBe(201)
      expect(data.message).toEqual(newMessage)
    })

    it('returns 400 for empty content', async () => {
      ;(validateToken as jest.Mock).mockResolvedValue({ userId: 'user-1' })

      const request = new NextRequest('http://localhost/api/messages', {
        method: 'POST',
        body: JSON.stringify({ channelId: 'ch-1', content: '' }),
      })
      const response = await POST(request)

      expect(response.status).toBe(400)
    })

    it('returns 400 for missing channelId', async () => {
      ;(validateToken as jest.Mock).mockResolvedValue({ userId: 'user-1' })

      const request = new NextRequest('http://localhost/api/messages', {
        method: 'POST',
        body: JSON.stringify({ content: 'Hello' }),
      })
      const response = await POST(request)

      expect(response.status).toBe(400)
    })
  })

  describe('DELETE', () => {
    it('deletes a message', async () => {
      ;(validateToken as jest.Mock).mockResolvedValue({ userId: 'user-1' })
      ;(executeMutation as jest.Mock).mockResolvedValue({ data: { success: true } })

      const request = new NextRequest('http://localhost/api/messages?id=msg-1', {
        method: 'DELETE',
      })
      const response = await DELETE(request)

      expect(response.status).toBe(200)
    })

    it('returns 403 when user does not own message', async () => {
      ;(validateToken as jest.Mock).mockResolvedValue({ userId: 'user-1' })
      ;(executeMutation as jest.Mock).mockRejectedValue(new Error('Forbidden'))

      const request = new NextRequest('http://localhost/api/messages?id=msg-1', {
        method: 'DELETE',
      })
      const response = await DELETE(request)

      expect(response.status).toBe(403)
    })
  })
})

// src/__tests__/integration/chat-complete-flow.test.tsx
import React from 'react'
import { render, screen, waitFor, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { useMessageStore } from '@/stores/message-store'
import { useChannelStore } from '@/stores/channel-store'
import { ChatPage } from '@/app/chat/page'
import { TestProviders } from '../utils/test-utils'

// Setup MSW for API mocking
import { setupServer } from 'msw/node'
import { handlers } from '../mocks/handlers'

const server = setupServer(...handlers)

beforeAll(() => server.listen())
afterEach(() => {
  server.resetHandlers()
  useMessageStore.getState().reset()
  useChannelStore.getState().resetChannelStore()
})
afterAll(() => server.close())

describe('Chat Page Integration', () => {
  describe('Channel Selection Flow', () => {
    it('loads and displays channels on mount', async () => {
      render(<ChatPage />, { wrapper: TestProviders })

      await waitFor(() => {
        expect(screen.getByText('general')).toBeInTheDocument()
        expect(screen.getByText('random')).toBeInTheDocument()
      })
    })

    it('loads messages when channel is selected', async () => {
      const user = userEvent.setup()
      render(<ChatPage />, { wrapper: TestProviders })

      await waitFor(() => {
        expect(screen.getByText('general')).toBeInTheDocument()
      })

      await user.click(screen.getByText('general'))

      await waitFor(() => {
        expect(screen.getByText('Welcome to the channel!')).toBeInTheDocument()
      })
    })

    it('updates URL when channel is selected', async () => {
      const user = userEvent.setup()
      render(<ChatPage />, { wrapper: TestProviders })

      await user.click(await screen.findByText('general'))

      await waitFor(() => {
        expect(window.location.pathname).toContain('/chat/general')
      })
    })
  })

  describe('Message Sending Flow', () => {
    it('sends message and displays it in the list', async () => {
      const user = userEvent.setup()
      render(<ChatPage />, { wrapper: TestProviders })

      // Select a channel
      await user.click(await screen.findByText('general'))

      // Type and send message
      const input = await screen.findByPlaceholderText(/type a message/i)
      await user.type(input, 'Hello from integration test!')
      await user.click(screen.getByRole('button', { name: /send/i }))

      // Verify message appears
      await waitFor(() => {
        expect(screen.getByText('Hello from integration test!')).toBeInTheDocument()
      })
    })

    it('clears input after sending', async () => {
      const user = userEvent.setup()
      render(<ChatPage />, { wrapper: TestProviders })

      await user.click(await screen.findByText('general'))

      const input = await screen.findByPlaceholderText(/type a message/i)
      await user.type(input, 'Test message')
      await user.click(screen.getByRole('button', { name: /send/i }))

      await waitFor(() => {
        expect(input).toHaveValue('')
      })
    })

    it('shows sending indicator', async () => {
      const user = userEvent.setup()
      render(<ChatPage />, { wrapper: TestProviders })

      await user.click(await screen.findByText('general'))

      const input = await screen.findByPlaceholderText(/type a message/i)
      await user.type(input, 'Test message')

      // Don't await the click to catch the sending state
      user.click(screen.getByRole('button', { name: /send/i }))

      // Check for sending indicator (may be brief)
      // Implementation depends on UI design
    })
  })

  describe('Reactions Flow', () => {
    it('adds reaction to message', async () => {
      const user = userEvent.setup()
      render(<ChatPage />, { wrapper: TestProviders })

      await user.click(await screen.findByText('general'))

      await waitFor(() => {
        expect(screen.getByText('Welcome to the channel!')).toBeInTheDocument()
      })

      // Find and click reaction button
      const messageItem = screen.getByText('Welcome to the channel!').closest('[data-testid="message-item"]')
      const reactionButton = within(messageItem!).getByRole('button', { name: /react/i })
      await user.click(reactionButton)

      // Select emoji
      await user.click(screen.getByText('👍'))

      // Verify reaction appears
      await waitFor(() => {
        expect(within(messageItem!).getByText('👍')).toBeInTheDocument()
      })
    })
  })

  describe('Channel Switching with Message Persistence', () => {
    it('preserves messages when switching channels', async () => {
      const user = userEvent.setup()
      render(<ChatPage />, { wrapper: TestProviders })

      // Go to general, send message
      await user.click(await screen.findByText('general'))
      const input = await screen.findByPlaceholderText(/type a message/i)
      await user.type(input, 'Message in general')
      await user.click(screen.getByRole('button', { name: /send/i }))

      await waitFor(() => {
        expect(screen.getByText('Message in general')).toBeInTheDocument()
      })

      // Switch to random
      await user.click(screen.getByText('random'))

      await waitFor(() => {
        expect(screen.queryByText('Message in general')).not.toBeInTheDocument()
      })

      // Switch back to general
      await user.click(screen.getByText('general'))

      await waitFor(() => {
        expect(screen.getByText('Message in general')).toBeInTheDocument()
      })
    })
  })
})

// src/__tests__/integration/auth-flow.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { SignInPage } from '@/app/auth/signin/page'
import { ProtectedPage } from '@/app/chat/page'
import { AuthProvider } from '@/contexts/auth-context'
import { setupServer } from 'msw/node'
import { http, HttpResponse } from 'msw'

const server = setupServer(
  http.post('/api/auth/signin', async ({ request }) => {
    const body = await request.json()
    if (body.email === '[email protected]') {
      return HttpResponse.json({
        user: { id: 'user-1', email: '[email protected]' },
        token: 'valid-token',
      })
    }
    return HttpResponse.json({ error: 'Invalid credentials' }, { status: 401 })
  })
)

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

describe('Authentication Flow', () => {
  describe('Sign In', () => {
    it('successfully signs in with valid credentials', async () => {
      const user = userEvent.setup()
      render(
        <AuthProvider>
          <SignInPage />
        </AuthProvider>
      )

      await user.type(screen.getByLabelText(/email/i), '[email protected]')
      await user.type(screen.getByLabelText(/password/i), 'password123')
      await user.click(screen.getByRole('button', { name: /sign in/i }))

      await waitFor(() => {
        expect(window.location.pathname).toBe('/chat')
      })
    })

    it('shows error for invalid credentials', async () => {
      const user = userEvent.setup()
      render(
        <AuthProvider>
          <SignInPage />
        </AuthProvider>
      )

      await user.type(screen.getByLabelText(/email/i), '[email protected]')
      await user.type(screen.getByLabelText(/password/i), 'wrongpassword')
      await user.click(screen.getByRole('button', { name: /sign in/i }))

      await waitFor(() => {
        expect(screen.getByText(/invalid credentials/i)).toBeInTheDocument()
      })
    })

    it('validates required fields', async () => {
      const user = userEvent.setup()
      render(
        <AuthProvider>
          <SignInPage />
        </AuthProvider>
      )

      await user.click(screen.getByRole('button', { name: /sign in/i }))

      await waitFor(() => {
        expect(screen.getByText(/email is required/i)).toBeInTheDocument()
        expect(screen.getByText(/password is required/i)).toBeInTheDocument()
      })
    })
  })

  describe('Protected Routes', () => {
    it('redirects to login when not authenticated', async () => {
      render(
        <AuthProvider initialUser={null}>
          <ProtectedPage />
        </AuthProvider>
      )

      await waitFor(() => {
        expect(window.location.pathname).toBe('/auth/signin')
      })
    })

    it('allows access when authenticated', async () => {
      render(
        <AuthProvider initialUser={{ id: 'user-1', email: '[email protected]' }}>
          <ProtectedPage />
        </AuthProvider>
      )

      await waitFor(() => {
        expect(screen.getByTestId('chat-page')).toBeInTheDocument()
      })
    })
  })

  describe('Session Persistence', () => {
    it('restores session from storage', async () => {
      localStorage.setItem('auth-token', 'valid-token')

      render(
        <AuthProvider>
          <ProtectedPage />
        </AuthProvider>
      )

      await waitFor(() => {
        expect(screen.getByTestId('chat-page')).toBeInTheDocument()
      })
    })
  })
})

// src/graphql/__tests__/operations.integration.test.ts
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
import { setupServer } from 'msw/node'
import { graphql, HttpResponse } from 'msw'
import { GET_CHANNELS, GET_MESSAGES, SEND_MESSAGE, CREATE_CHANNEL } from '../queries'

const server = setupServer(
  graphql.query('GetChannels', () => {
    return HttpResponse.json({
      data: {
        channels: [
          { id: 'ch-1', name: 'general' },
          { id: 'ch-2', name: 'random' },
        ],
      },
    })
  }),
  graphql.query('GetMessages', ({ variables }) => {
    return HttpResponse.json({
      data: {
        messages: [{ id: 'msg-1', content: 'Hello', channelId: variables.channelId }],
      },
    })
  }),
  graphql.mutation('SendMessage', ({ variables }) => {
    return HttpResponse.json({
      data: {
        sendMessage: {
          id: 'msg-new',
          content: variables.content,
          channelId: variables.channelId,
        },
      },
    })
  })
)

let client: ApolloClient<any>

beforeAll(() => {
  server.listen()
  client = new ApolloClient({
    link: new HttpLink({ uri: 'http://localhost/graphql' }),
    cache: new InMemoryCache(),
  })
})

afterEach(() => {
  server.resetHandlers()
  client.clearStore()
})

afterAll(() => server.close())

describe('GraphQL Operations', () => {
  describe('Queries', () => {
    it('fetches channels', async () => {
      const { data } = await client.query({ query: GET_CHANNELS })

      expect(data.channels).toHaveLength(2)
      expect(data.channels[0].name).toBe('general')
    })

    it('fetches messages with variables', async () => {
      const { data } = await client.query({
        query: GET_MESSAGES,
        variables: { channelId: 'ch-1', limit: 50 },
      })

      expect(data.messages).toHaveLength(1)
      expect(data.messages[0].channelId).toBe('ch-1')
    })

    it('handles query errors', async () => {
      server.use(
        graphql.query('GetChannels', () => {
          return HttpResponse.json({
            errors: [{ message: 'Database error' }],
          })
        })
      )

      await expect(client.query({ query: GET_CHANNELS })).rejects.toThrow()
    })
  })

  describe('Mutations', () => {
    it('sends message', async () => {
      const { data } = await client.mutate({
        mutation: SEND_MESSAGE,
        variables: { channelId: 'ch-1', content: 'Test message' },
      })

      expect(data.sendMessage.content).toBe('Test message')
    })

    it('updates cache after mutation', async () => {
      // First fetch messages
      await client.query({
        query: GET_MESSAGES,
        variables: { channelId: 'ch-1' },
      })

      // Send new message with cache update
      await client.mutate({
        mutation: SEND_MESSAGE,
        variables: { channelId: 'ch-1', content: 'New message' },
        update: (cache, { data }) => {
          const existing = cache.readQuery({
            query: GET_MESSAGES,
            variables: { channelId: 'ch-1' },
          })
          cache.writeQuery({
            query: GET_MESSAGES,
            variables: { channelId: 'ch-1' },
            data: {
              messages: [...(existing?.messages || []), data.sendMessage],
            },
          })
        },
      })

      // Verify cache was updated
      const cached = client.readQuery({
        query: GET_MESSAGES,
        variables: { channelId: 'ch-1' },
      })

      expect(cached.messages).toHaveLength(2)
    })
  })
})

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [
    ['html', { outputFolder: 'playwright-report' }],
    ['list'],
    ['junit', { outputFile: 'test-results/e2e-results.xml' }],
    ...(process.env.CI ? [['github'] as const] : []),
  ],
  use: {
    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'on-first-retry',
    viewport: { width: 1280, height: 720 },
    actionTimeout: 10000,
    navigationTimeout: 30000,
  },
  timeout: 60000,
  expect: {
    timeout: 10000,
  },
  projects: [
    // Setup project
    {
      name: 'setup',
      testMatch: /.*\.setup\.ts/,
    },
    // Desktop browsers
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
      dependencies: ['setup'],
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
      dependencies: ['setup'],
    },
    // Mobile viewports
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 5'] },
      dependencies: ['setup'],
    },
    {
      name: 'mobile-safari',
      use: { ...devices['iPhone 12'] },
      dependencies: ['setup'],
    },
    // Tablet
    {
      name: 'tablet',
      use: { ...devices['iPad (gen 7)'] },
      dependencies: ['setup'],
    },
  ],
  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 120000,
  },
  outputDir: 'test-results/',
})

// e2e/auth.spec.ts
import { test, expect } from '@playwright/test'

const TEST_USER = {
  email: '[email protected]',
  password: 'password123',
}

test.describe('Authentication', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/')
    await page.evaluate(() => {
      localStorage.clear()
      sessionStorage.clear()
    })
  })

  test('complete login flow', async ({ page }) => {
    await page.goto('/login')

    // Fill login form
    await page.fill('[data-testid="email-input"]', TEST_USER.email)
    await page.fill('[data-testid="password-input"]', TEST_USER.password)

    // Submit and wait for navigation
    await page.click('[data-testid="login-button"]')
    await page.waitForURL('**/chat**', { timeout: 10000 })

    // Verify logged in state
    await expect(page.locator('[data-testid="user-avatar"]')).toBeVisible()
  })

  test('logout flow', async ({ page }) => {
    // Login first
    await page.goto('/login')
    await page.fill('[data-testid="email-input"]', TEST_USER.email)
    await page.fill('[data-testid="password-input"]', TEST_USER.password)
    await page.click('[data-testid="login-button"]')
    await page.waitForURL('**/chat**')

    // Logout
    await page.click('[data-testid="user-menu"]')
    await page.click('[data-testid="logout-button"]')

    // Verify logged out
    await page.waitForURL('**/login**')
    await expect(page.locator('[data-testid="login-form"]')).toBeVisible()
  })

  test('session persistence', async ({ page, context }) => {
    // Login
    await page.goto('/login')
    await page.fill('[data-testid="email-input"]', TEST_USER.email)
    await page.fill('[data-testid="password-input"]', TEST_USER.password)
    await page.click('[data-testid="login-button"]')
    await page.waitForURL('**/chat**')

    // Open new tab
    const newPage = await context.newPage()
    await newPage.goto('/chat')

    // Should be logged in
    await expect(newPage.locator('[data-testid="user-avatar"]')).toBeVisible()
  })

  test('protected route redirect', async ({ page }) => {
    await page.goto('/chat')

    // Should redirect to login
    await page.waitForURL('**/login**')
    await expect(page.locator('[data-testid="login-form"]')).toBeVisible()
  })
})

// e2e/messaging.spec.ts
import { test, expect } from '@playwright/test'

test.describe('Messaging', () => {
  test.beforeEach(async ({ page }) => {
    // Login using auth state
    await page.goto('/chat')
    await page.waitForLoadState('networkidle')
  })

  test('send text message', async ({ page }) => {
    // Select channel
    await page.click('[data-testid="channel-general"]')

    // Type and send message
    const messageInput = page.locator('[data-testid="message-input"]')
    await messageInput.fill('Hello from E2E test!')
    await page.click('[data-testid="send-button"]')

    // Verify message appears
    await expect(page.locator('text=Hello from E2E test!')).toBeVisible()
  })

  test('send message with keyboard shortcut', async ({ page }) => {
    await page.click('[data-testid="channel-general"]')

    const messageInput = page.locator('[data-testid="message-input"]')
    await messageInput.fill('Sent with Enter key')
    await messageInput.press('Enter')

    await expect(page.locator('text=Sent with Enter key')).toBeVisible()
  })

  test('edit message', async ({ page }) => {
    await page.click('[data-testid="channel-general"]')

    // Send message
    const messageInput = page.locator('[data-testid="message-input"]')
    await messageInput.fill('Original message')
    await page.click('[data-testid="send-button"]')

    // Wait for message to appear
    const message = page.locator('text=Original message')
    await expect(message).toBeVisible()

    // Hover and click edit
    await message.hover()
    await page.click('[data-testid="edit-message-button"]')

    // Edit content
    const editInput = page.locator('[data-testid="edit-input"]')
    await editInput.clear()
    await editInput.fill('Edited message')
    await editInput.press('Enter')

    // Verify edit
    await expect(page.locator('text=Edited message')).toBeVisible()
    await expect(page.locator('text=(edited)')).toBeVisible()
  })

  test('delete message', async ({ page }) => {
    await page.click('[data-testid="channel-general"]')

    // Send message
    const messageInput = page.locator('[data-testid="message-input"]')
    await messageInput.fill('Message to delete')
    await page.click('[data-testid="send-button"]')

    const message = page.locator('text=Message to delete')
    await expect(message).toBeVisible()

    // Delete
    await message.hover()
    await page.click('[data-testid="delete-message-button"]')
    await page.click('[data-testid="confirm-delete"]')

    // Verify deleted
    await expect(message).not.toBeVisible()
  })

  test('add reaction', async ({ page }) => {
    await page.click('[data-testid="channel-general"]')

    // Find existing message or send one
    const messageInput = page.locator('[data-testid="message-input"]')
    await messageInput.fill('Message to react to')
    await page.click('[data-testid="send-button"]')

    const message = page.locator('text=Message to react to')
    await message.hover()

    // Add reaction
    await page.click('[data-testid="add-reaction-button"]')
    await page.click('text=👍')

    // Verify reaction
    await expect(page.locator('[data-testid="reaction-👍"]')).toBeVisible()
  })

  test('thread reply', async ({ page }) => {
    await page.click('[data-testid="channel-general"]')

    // Send parent message
    const messageInput = page.locator('[data-testid="message-input"]')
    await messageInput.fill('Parent message')
    await page.click('[data-testid="send-button"]')

    const parentMessage = page.locator('text=Parent message')
    await parentMessage.hover()

    // Open thread
    await page.click('[data-testid="reply-in-thread"]')

    // Send reply
    const threadInput = page.locator('[data-testid="thread-input"]')
    await threadInput.fill('Thread reply')
    await page.click('[data-testid="send-thread-reply"]')

    // Verify reply
    await expect(page.locator('text=Thread reply')).toBeVisible()
    await expect(page.locator('text=1 reply')).toBeVisible()
  })
})