biblical-guide.com/components/bible/bible-reader-app.tsx

'use client'
import { useState, useEffect } from 'react'
import { Box } from '@mui/material'
import { BibleChapter, BibleVerse } from '@/types'
import { getCachedChapter, cacheChapter } from '@/lib/cache-manager'
import { SearchNavigator } from './search-navigator'
import { ReadingView } from './reading-view'
import { VersDetailsPanel } from './verse-details-panel'
import { ReadingSettings } from './reading-settings'

interface BookInfo {
  id: string // UUID
  orderNum: number
  bookKey: string
  name: string
  chapterCount: number
}

export function BibleReaderApp() {
  const [bookId, setBookId] = useState(1) // Genesis (numeric ID from search)
  const [chapter, setChapter] = useState(1)
  const [currentChapter, setCurrentChapter] = useState<BibleChapter | null>(null)
  const [selectedVerse, setSelectedVerse] = useState<BibleVerse | null>(null)
  const [detailsPanelOpen, setDetailsPanelOpen] = useState(false)
  const [settingsOpen, setSettingsOpen] = useState(false)
  const [loading, setLoading] = useState(true)
  const [bookmarks, setBookmarks] = useState<Set<string>>(new Set())
  const [books, setBooks] = useState<BookInfo[]>([])
  const [versionId, setVersionId] = useState<string>('')

  // Load books on mount
  useEffect(() => {
    loadBooks()
  }, [])

  // Load chapter when bookId or chapter changes
  useEffect(() => {
    if (books.length > 0) {
      loadChapter(bookId, chapter)
    }
  }, [bookId, chapter, books])

  async function loadBooks() {
    try {
      const response = await fetch('/api/bible/books')
      if (response.ok) {
        const json = await response.json()
        if (json.success && json.books) {
          const bookMap: BookInfo[] = json.books.map((book: any) => ({
            id: book.id,
            orderNum: book.orderNum,
            bookKey: book.bookKey,
            name: book.name,
            chapterCount: book.chapters.length
          }))
          setBooks(bookMap)
          setVersionId(json.version.id)
        }
      }
    } catch (error) {
      console.error('Error loading books:', error)
    }
  }

  async function loadChapter(numericBookId: number, chapterNum: number) {
    setLoading(true)
    try {
      // Find the book by orderNum
      const book = books.find(b => b.orderNum === numericBookId)
      if (!book) {
        console.error('Book not found for orderNum:', numericBookId)
        setCurrentChapter(null)
        return
      }

      // Try cache first
      const chapterId = `${book.id}-${chapterNum}`
      let data = await getCachedChapter(chapterId)

      // If not cached, fetch from API
      if (!data) {
        const response = await fetch(`/api/bible/chapter?book=${book.id}&chapter=${chapterNum}`)
        if (response.ok) {
          const json = await response.json()
          data = json.chapter

          // Cache it
          if (data) {
            data.id = chapterId
            data.bookId = numericBookId // Keep numeric ID for consistency
            data.chapter = chapterNum
            await cacheChapter(data)
          }
        } else {
          console.error('Failed to load chapter:', response.status)
        }
      }

      setCurrentChapter(data)
    } catch (error) {
      console.error('Error loading chapter:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleVerseClick = (verseId: string) => {
    const verse = currentChapter?.verses.find(v => v.id === verseId)
    if (verse) {
      setSelectedVerse(verse)
      setDetailsPanelOpen(true)
    }
  }

  const handleToggleBookmark = () => {
    if (!selectedVerse) return
    const newBookmarks = new Set(bookmarks)
    if (newBookmarks.has(selectedVerse.id)) {
      newBookmarks.delete(selectedVerse.id)
    } else {
      newBookmarks.add(selectedVerse.id)
    }
    setBookmarks(newBookmarks)
    // TODO: Sync to backend in Phase 2
    console.log('Bookmarks updated:', Array.from(newBookmarks))
  }

  const handleAddNote = (note: string) => {
    if (!selectedVerse) return
    // TODO: Save note to backend in Phase 2
    console.log(`Note for verse ${selectedVerse.id}:`, note)
  }

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
      {/* Header with search */}
      <Box
        sx={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 50,
          p: 2,
          bgcolor: 'background.paper',
          boxShadow: 1
        }}
      >
        <SearchNavigator
          onNavigate={(newBookId, newChapter) => {
            setBookId(newBookId)
            setChapter(newChapter)
          }}
        />
      </Box>

      {/* Reading area */}
      <Box sx={{ flex: 1, mt: '80px', overflow: 'auto' }}>
        {currentChapter ? (
          <ReadingView
            chapter={currentChapter}
            loading={loading}
            onPrevChapter={() => chapter > 1 && setChapter(chapter - 1)}
            onNextChapter={() => {
              const book = books.find(b => b.orderNum === bookId)
              if (book && chapter < book.chapterCount) {
                setChapter(chapter + 1)
              }
            }}
            onVerseClick={handleVerseClick}
            onSettingsOpen={() => setSettingsOpen(true)}
            hasPrevChapter={chapter > 1}
            hasNextChapter={(() => {
              const book = books.find(b => b.orderNum === bookId)
              return book ? chapter < book.chapterCount : false
            })()}
          />
        ) : (
          <Box sx={{ p: 4, textAlign: 'center' }}>
            {loading ? 'Loading Bible reader...' : 'Failed to load chapter. Please try again.'}
          </Box>
        )}
      </Box>

      {/* Details panel */}
      <VersDetailsPanel
        verse={selectedVerse}
        isOpen={detailsPanelOpen}
        onClose={() => setDetailsPanelOpen(false)}
        isBookmarked={selectedVerse ? bookmarks.has(selectedVerse.id) : false}
        onToggleBookmark={handleToggleBookmark}
        onAddNote={handleAddNote}
      />

      {/* Settings panel */}
      {settingsOpen && (
        <ReadingSettings onClose={() => setSettingsOpen(false)} />
      )}
    </Box>
  )
}