'use client'

import { useState, useEffect } from 'react'
import { useStore } from '@/lib/store'
import { BibleVerse } from '@/types'
import { Bookmark } from 'lucide-react'

export function BibleReader() {
  const { currentBook, currentChapter } = useStore()
  const [verses, setVerses] = useState<BibleVerse[]>([])
  const [loading, setLoading] = useState(true)
  const [bookName, setBookName] = useState('')

  useEffect(() => {
    fetchChapter(currentBook, currentChapter)
  }, [currentBook, currentChapter])

  async function fetchChapter(bookId: number, chapterNum: number) {
    setLoading(true)
    try {
      const res = await fetch(`/api/bible/chapter?book=${bookId}&chapter=${chapterNum}`)
      const data = await res.json()

      if (res.ok) {
        setVerses(data.chapter.verses)
        setBookName(data.chapter.bookName)
      }
    } catch (error) {
      console.error('Error fetching chapter:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleVerseClick = async (verseId: string) => {
    const token = localStorage.getItem('authToken')
    if (!token) {
      alert('Trebuie să vă autentificați pentru a marca versete')
      return
    }

    try {
      await fetch('/api/bookmarks', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ verseId })
      })

      alert('Versetul a fost marcat!')
    } catch (error) {
      console.error('Error bookmarking verse:', error)
    }
  }

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    )
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h2 className="text-2xl font-bold mb-4 text-gray-800">
        {bookName} {currentChapter}
      </h2>

      <div className="prose prose-lg max-w-none">
        {verses.map((verse) => (
          <span
            key={verse.id}
            className="verse hover:bg-yellow-100 cursor-pointer inline-block mr-1 mb-1 p-1 rounded transition-colors"
            onClick={() => handleVerseClick(verse.id)}
            title="Click pentru a marca versetul"
          >
            <sup className="text-xs mr-1 font-semibold text-blue-600">
              {verse.verseNum}
            </sup>
            {verse.text}
          </span>
        ))}
      </div>

      <div className="mt-6 flex justify-between items-center">
        <button
          onClick={() => currentChapter > 1 && fetchChapter(currentBook, currentChapter - 1)}
          disabled={currentChapter <= 1}
          className="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 disabled:opacity-50"
        >
          ← Capitolul anterior
        </button>

        <span className="text-gray-600">
          Capitolul {currentChapter}
        </span>

        <button
          onClick={() => fetchChapter(currentBook, currentChapter + 1)}
          className="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
        >
          Capitolul următor →
        </button>
      </div>
    </div>
  )
}