biblical-guide.com/components/prayer/prayer-wall.tsx

'use client'

import { useEffect, useState } from 'react'
import { Heart, Send } from 'lucide-react'

interface Prayer {
  id: string
  content: string
  isAnonymous: boolean
  prayerCount: number
  createdAt: string
  user?: { name: string }
}

export function PrayerWall() {
  const [prayers, setPrayers] = useState<Prayer[]>([])
  const [newPrayer, setNewPrayer] = useState('')
  const [isAnonymous, setIsAnonymous] = useState(true)
  const [loading, setLoading] = useState(false)
  const [isConnected, setIsConnected] = useState(false)

  useEffect(() => {
    fetchPrayers()
    // Note: WebSocket functionality is simplified for this implementation
    // In a full production app, you would implement proper Socket.IO integration
    setIsConnected(true)
  }, [])

  const fetchPrayers = async () => {
    try {
      const res = await fetch('/api/prayers')
      const data = await res.json()
      setPrayers(data.prayers || [])
    } catch (error) {
      console.error('Error fetching prayers:', error)
    }
  }

  const handleSubmitPrayer = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!newPrayer.trim() || loading) return

    setLoading(true)
    try {
      const token = localStorage.getItem('authToken')
      const headers: any = { 'Content-Type': 'application/json' }
      if (token) {
        headers['Authorization'] = `Bearer ${token}`
      }

      const res = await fetch('/api/prayers', {
        method: 'POST',
        headers,
        body: JSON.stringify({
          content: newPrayer,
          isAnonymous
        })
      })

      const data = await res.json()
      if (res.ok) {
        setPrayers(prev => [data.prayer, ...prev])
        setNewPrayer('')

        // Simulate real-time update for other users (in production, this would be via WebSocket)
        setTimeout(() => {
          fetchPrayers()
        }, 1000)
      }
    } catch (error) {
      console.error('Error submitting prayer:', error)
    } finally {
      setLoading(false)
    }
  }

  const handlePrayFor = async (prayerId: string) => {
    try {
      // Update local state optimistically
      setPrayers(prev => prev.map(prayer =>
        prayer.id === prayerId
          ? { ...prayer, prayerCount: prayer.prayerCount + 1 }
          : prayer
      ))

      // In a full implementation, this would send a WebSocket event
      // For now, we'll just simulate the prayer count update
      console.log(`Praying for prayer ${prayerId}`)

      // Refresh prayers to get accurate count from server
      setTimeout(() => {
        fetchPrayers()
      }, 500)
    } catch (error) {
      console.error('Error praying for request:', error)
      // Revert optimistic update on error
      fetchPrayers()
    }
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold text-gray-800">Peretele de Rugăciuni</h2>
        <div className="flex items-center space-x-2">
          <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}></div>
          <span className="text-sm text-gray-600">
            {isConnected ? 'Conectat' : 'Deconectat'}
          </span>
        </div>
      </div>

      <form onSubmit={handleSubmitPrayer} className="space-y-4 mb-8">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Cererea ta de rugăciune
          </label>
          <textarea
            value={newPrayer}
            onChange={(e) => setNewPrayer(e.target.value)}
            placeholder="Împărtășește-ți cererea de rugăciune cu comunitatea..."
            className="w-full p-3 border border-gray-300 rounded-lg resize-none h-24 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
            required
            minLength={10}
          />
        </div>

        <div className="flex items-center space-x-2">
          <input
            type="checkbox"
            id="anonymous"
            checked={isAnonymous}
            onChange={(e) => setIsAnonymous(e.target.checked)}
            className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
          />
          <label htmlFor="anonymous" className="text-sm text-gray-700">
            Postează anonim
          </label>
        </div>

        <button
          type="submit"
          disabled={loading || newPrayer.trim().length < 10}
          className="flex items-center space-x-2 px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <Send className="w-4 h-4" />
          <span>{loading ? 'Se trimite...' : 'Trimite Cererea'}</span>
        </button>
      </form>

      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-700">Cereri de Rugăciune</h3>

        {prayers.length === 0 ? (
          <div className="text-center text-gray-500 py-8">
            <p>Nu există încă cereri de rugăciune.</p>
            <p className="text-sm mt-1">Fii primul care împărtășește o cerere!</p>
          </div>
        ) : (
          prayers.map((prayer) => (
            <div key={prayer.id} className="bg-gray-50 p-4 rounded-lg border hover:bg-gray-100 transition-colors">
              <p className="text-gray-800 mb-3">{prayer.content}</p>

              <div className="flex items-center justify-between text-sm">
                <div className="flex items-center space-x-4">
                  <span className="text-gray-500">
                    {prayer.isAnonymous ? 'Anonim' : prayer.user?.name || 'Utilizator'}
                  </span>
                  <span className="text-gray-400">
                    {new Date(prayer.createdAt).toLocaleDateString('ro-RO')}
                  </span>
                </div>

                <button
                  onClick={() => handlePrayFor(prayer.id)}
                  className="flex items-center space-x-2 px-3 py-1 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors"
                >
                  <Heart className="w-4 h-4" />
                  <span>{prayer.prayerCount} rugăciuni</span>
                </button>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}