import React from 'react'
import { render, screen, waitFor, fireEvent } from '@testing-library/react'
import { BibleReader } from '@/components/bible/reader'
import { useStore } from '@/lib/store'

// Mock the store
jest.mock('@/lib/store', () => ({
  useStore: jest.fn()
}))

const mockUseStore = useStore as jest.MockedFunction<typeof useStore>

describe('BibleReader', () => {
  beforeEach(() => {
    mockUseStore.mockReturnValue({
      currentBook: 1,
      currentChapter: 1,
      user: null,
      theme: 'light',
      fontSize: 'medium',
      bookmarks: [],
      setUser: jest.fn(),
      setTheme: jest.fn(),
      setFontSize: jest.fn(),
      setCurrentBook: jest.fn(),
      setCurrentChapter: jest.fn(),
      addBookmark: jest.fn(),
      removeBookmark: jest.fn(),
    })

    // Mock localStorage
    Object.defineProperty(window, 'localStorage', {
      value: {
        getItem: jest.fn(),
        setItem: jest.fn(),
        removeItem: jest.fn(),
      },
      writable: true,
    })
  })

  it('renders loading state initially', () => {
    // Mock fetch to delay response
    global.fetch = jest.fn(() => new Promise(() => {}))

    render(<BibleReader />)

    expect(screen.getByText(/Loading/i)).toBeInTheDocument()
  })

  it('renders verses correctly after loading', async () => {
    const mockChapterData = {
      chapter: {
        id: '1',
        bookName: 'Geneza',
        chapterNum: 1,
        verses: [
          { id: '1', verseNum: 1, text: 'La început Dumnezeu a făcut cerurile și pământul.' },
          { id: '2', verseNum: 2, text: 'Pământul era pustiu și gol.' },
        ]
      }
    }

    global.fetch = jest.fn(() =>
      Promise.resolve({
        ok: true,
        json: () => Promise.resolve(mockChapterData),
      })
    ) as jest.Mock

    render(<BibleReader />)

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

    expect(screen.getByText(/La început Dumnezeu a făcut/)).toBeInTheDocument()
    expect(screen.getByText(/Pământul era pustiu și gol/)).toBeInTheDocument()
  })

  it('shows alert when trying to bookmark without authentication', async () => {
    const mockChapterData = {
      chapter: {
        id: '1',
        bookName: 'Geneza',
        chapterNum: 1,
        verses: [
          { id: '1', verseNum: 1, text: 'La început Dumnezeu a făcut cerurile și pământul.' },
        ]
      }
    }

    global.fetch = jest.fn(() =>
      Promise.resolve({
        ok: true,
        json: () => Promise.resolve(mockChapterData),
      })
    ) as jest.Mock

    // Mock alert
    window.alert = jest.fn()

    render(<BibleReader />)

    await waitFor(() => {
      expect(screen.getByText(/La început Dumnezeu a făcut/)).toBeInTheDocument()
    })

    const verse = screen.getByText(/La început Dumnezeu a făcut/)
    fireEvent.click(verse)

    expect(window.alert).toHaveBeenCalledWith('Trebuie să vă autentificați pentru a marca versete')
  })

  it('renders navigation buttons', async () => {
    const mockChapterData = {
      chapter: {
        id: '1',
        bookName: 'Geneza',
        chapterNum: 1,
        verses: []
      }
    }

    global.fetch = jest.fn(() =>
      Promise.resolve({
        ok: true,
        json: () => Promise.resolve(mockChapterData),
      })
    ) as jest.Mock

    render(<BibleReader />)

    await waitFor(() => {
      expect(screen.getByText('← Capitolul anterior')).toBeInTheDocument()
      expect(screen.getByText('Capitolul următor →')).toBeInTheDocument()
    })
  })
})