import React from 'react'
import { render, waitFor } from '@testing-library/react-native'
import My from '../my'

jest.mock('expo-router', () => ({
  useRouter: () => ({
    push: jest.fn(),
    replace: jest.fn(),
  }),
}))

jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
    i18n: { language: 'zh-CN', changeLanguage: jest.fn() },
  }),
}))

jest.mock('@/lib/auth', () => ({
  signOut: jest.fn(),
  useSession: () => ({
    data: {
      user: {
        id: 'test-user-id',
        name: 'Test User',
        username: 'testuser',
        image: null,
      },
    },
  }),
}))

jest.mock('@/hooks/use-user-balance', () => ({
  useUserBalance: () => ({
    balance: 100,
  }),
}))

const mockRefetch = jest.fn()
const mockLoadMore = jest.fn()

jest.mock('@/hooks', () => ({
  useTemplateGenerations: jest.fn(() => ({
    generations: [],
    loading: false,
    loadingMore: false,
    refetch: mockRefetch,
    loadMore: mockLoadMore,
    hasMore: true,
  })),
}))

describe('My Page - Pagination', () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })

  it('should load first page with limit 20 on mount', async () => {
    render(<My />)

    await waitFor(() => {
      expect(mockRefetch).toHaveBeenCalledWith({ page: 1, limit: 20 })
    })
  })

  it('should refresh with limit 20 on pull to refresh', async () => {
    const { useTemplateGenerations } = require('@/hooks')
    const mockOnRefresh = jest.fn()

    useTemplateGenerations.mockReturnValue({
      generations: [{ id: '1', status: 'completed' }],
      loading: false,
      loadingMore: false,
      refetch: mockRefetch,
      loadMore: mockLoadMore,
      hasMore: true,
    })

    render(<My />)

    await waitFor(() => {
      expect(mockRefetch).toHaveBeenCalledWith({ page: 1, limit: 20 })
    })
  })

  it('should call loadMore when scrolling near bottom', async () => {
    const { useTemplateGenerations } = require('@/hooks')

    useTemplateGenerations.mockReturnValue({
      generations: Array(20).fill(null).map((_, i) => ({
        id: `${i}`,
        status: 'completed',
        resultUrl: ['url'],
      })),
      loading: false,
      loadingMore: false,
      refetch: mockRefetch,
      loadMore: mockLoadMore,
      hasMore: true,
    })

    render(<My />)

    await waitFor(() => {
      expect(mockRefetch).toHaveBeenCalledWith({ page: 1, limit: 20 })
    })
  })

  it('should not load more when loadingMore is true', async () => {
    const { useTemplateGenerations } = require('@/hooks')

    useTemplateGenerations.mockReturnValue({
      generations: Array(20).fill(null).map((_, i) => ({
        id: `${i}`,
        status: 'completed'
      })),
      loading: false,
      loadingMore: true,
      refetch: mockRefetch,
      loadMore: mockLoadMore,
      hasMore: true,
    })

    render(<My />)

    await waitFor(() => {
      expect(mockRefetch).toHaveBeenCalledWith({ page: 1, limit: 20 })
    })
  })

  it('should not load more when hasMore is false', async () => {
    const { useTemplateGenerations } = require('@/hooks')

    useTemplateGenerations.mockReturnValue({
      generations: Array(10).fill(null).map((_, i) => ({
        id: `${i}`,
        status: 'completed'
      })),
      loading: false,
      loadingMore: false,
      refetch: mockRefetch,
      loadMore: mockLoadMore,
      hasMore: false,
    })

    render(<My />)

    await waitFor(() => {
      expect(mockRefetch).toHaveBeenCalledWith({ page: 1, limit: 20 })
    })
  })
})