'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'

export function BibleReaderApp() {
  const [bookId, setBookId] = useState(1) // Genesis
  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(false)
  const [bookmarks, setBookmarks] = useState<Set<string>>(new Set())

  // Load chapter on navigation
  useEffect(() => {
    loadChapter(bookId, chapter)
  }, [bookId, chapter])

  async function loadChapter(bookId: number, chapterNum: number) {
    setLoading(true)
    try {
      // Try cache first
      const chapterId = `${bookId}-${chapterNum}`
      let data = await getCachedChapter(chapterId)

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

          // Cache it
          if (data) {
            data.id = chapterId
            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={() => setChapter(chapter + 1)}
            onVerseClick={handleVerseClick}
            onSettingsOpen={() => setSettingsOpen(true)}
            hasPrevChapter={chapter > 1}
            hasNextChapter={true} // TODO: Check actual chapter count based on book
          />
        ) : (
          <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>
  )
}