diff --git a/app/[locale]/prayers/page.tsx b/app/[locale]/prayers/page.tsx index 9d55f08..d600239 100644 --- a/app/[locale]/prayers/page.tsx +++ b/app/[locale]/prayers/page.tsx @@ -25,6 +25,11 @@ import { useTheme, CircularProgress, Skeleton, + Alert, + Tabs, + Tab, + FormControlLabel, + Switch, } from '@mui/material' import { Favorite, @@ -35,9 +40,13 @@ import { FavoriteBorder, Share, MoreVert, + AutoAwesome, + Edit, + Login, } from '@mui/icons-material' import { useState, useEffect } from 'react' import { useTranslations, useLocale, useFormatter } from 'next-intl' +import { useAuth } from '@/hooks/use-auth' interface PrayerRequest { id: string @@ -56,13 +65,17 @@ export default function PrayersPage() { const t = useTranslations('pages.prayers') const tc = useTranslations('common') const f = useFormatter() + const { user } = useAuth() const [prayers, setPrayers] = useState([]) const [openDialog, setOpenDialog] = useState(false) + const [tabValue, setTabValue] = useState(0) // 0 = Write, 1 = AI Generate const [newPrayer, setNewPrayer] = useState({ title: '', description: '', category: 'personal', }) + const [aiPrompt, setAiPrompt] = useState('') + const [isGenerating, setIsGenerating] = useState(false) const [loading, setLoading] = useState(true) const categories = [ @@ -114,15 +127,53 @@ export default function PrayersPage() { }, 1000) }, [locale]) + const handleGenerateAIPrayer = async () => { + if (!aiPrompt.trim()) return + if (!user) return + + setIsGenerating(true) + try { + const response = await fetch('/api/prayers/generate', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${localStorage.getItem('authToken')}` + }, + body: JSON.stringify({ + prompt: aiPrompt, + category: newPrayer.category, + locale + }), + }) + + if (response.ok) { + const data = await response.json() + setNewPrayer({ + title: data.title || '', + description: data.prayer || '', + category: newPrayer.category + }) + setTabValue(0) // Switch to write tab to review generated prayer + } else { + console.error('Failed to generate prayer') + } + } catch (error) { + console.error('Error generating prayer:', error) + } finally { + setIsGenerating(false) + } + } + const handleSubmitPrayer = async () => { if (!newPrayer.title.trim() || !newPrayer.description.trim()) return + if (!user) return const prayer: PrayerRequest = { id: Date.now().toString(), title: newPrayer.title, description: newPrayer.description, category: newPrayer.category, - author: locale === 'en' ? 'You' : 'Tu', // In real app, get from auth + author: user.name || (locale === 'en' ? 'You' : 'Tu'), timestamp: new Date(), prayerCount: 0, isPrayedFor: false, @@ -130,13 +181,18 @@ export default function PrayersPage() { setPrayers([prayer, ...prayers]) setNewPrayer({ title: '', description: '', category: 'personal' }) + setAiPrompt('') + setTabValue(0) setOpenDialog(false) // In real app, send to API try { await fetch('/api/prayers', { method: 'POST', - headers: { 'Content-Type': 'application/json' }, + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${localStorage.getItem('authToken')}` + }, body: JSON.stringify(prayer), }) } catch (error) { @@ -144,6 +200,14 @@ export default function PrayersPage() { } } + const handleOpenDialog = () => { + if (!user) { + // Could redirect to login or show login modal + return + } + setOpenDialog(true) + } + const handlePrayFor = async (prayerId: string) => { setPrayers(prayers.map(prayer => prayer.id === prayerId @@ -340,20 +404,34 @@ export default function PrayersPage() { {/* Add Prayer FAB */} - setOpenDialog(true)} - > - - + {user ? ( + + + + ) : ( + { + // Could redirect to login page or show login modal + console.log('Please login to add prayers') + }} + > + + + )} {/* Add Prayer Dialog */} setOpenDialog(false)} - maxWidth="sm" + maxWidth="md" fullWidth > @@ -364,40 +442,127 @@ export default function PrayersPage() { - - setNewPrayer({ ...newPrayer, title: e.target.value })} - sx={{ mb: 2, mt: 1 }} - /> - setNewPrayer({ ...newPrayer, category: e.target.value })} - sx={{ mb: 2 }} - > - {categories.map((option) => ( - - {option.label} - - ))} - + {/* Tabs for Write vs AI Generate */} + + setTabValue(newValue)} centered> + } + label={locale === 'en' ? 'Write Prayer' : 'Scrie rugăciune'} + iconPosition="start" + /> + } + label={locale === 'en' ? 'AI Generate' : 'Generează cu AI'} + iconPosition="start" + /> + + - setNewPrayer({ ...newPrayer, description: e.target.value })} - placeholder={t('dialog.placeholder')} - /> + + {/* Write Prayer Tab */} + {tabValue === 0 && ( + + setNewPrayer({ ...newPrayer, title: e.target.value })} + sx={{ mb: 2, mt: 1 }} + /> + + setNewPrayer({ ...newPrayer, category: e.target.value })} + sx={{ mb: 2 }} + > + {categories.map((option) => ( + + {option.label} + + ))} + + + setNewPrayer({ ...newPrayer, description: e.target.value })} + placeholder={t('dialog.placeholder')} + /> + + )} + + {/* AI Generate Prayer Tab */} + {tabValue === 1 && ( + + + {locale === 'en' + ? 'Describe what you\'d like to pray about, and AI will help you create a meaningful prayer.' + : 'Descrie pentru ce ai vrea să te rogi, iar AI-ul te va ajuta să creezi o rugăciune semnificativă.' + } + + + setNewPrayer({ ...newPrayer, category: e.target.value })} + sx={{ mb: 2 }} + > + {categories.map((option) => ( + + {option.label} + + ))} + + + setAiPrompt(e.target.value)} + placeholder={locale === 'en' + ? 'e.g., "Help me find peace during a difficult time at work" or "Guidance for my family\'s health struggles"' + : 'ex. "Ajută-mă să găsesc pace într-o perioadă dificilă la muncă" sau "Îndrumarea pentru problemele de sănătate ale familiei mele"' + } + sx={{ mb: 2 }} + /> + + + + {newPrayer.title && newPrayer.description && ( + + {locale === 'en' + ? 'Prayer generated! Switch to the "Write Prayer" tab to review and edit before submitting.' + : 'Rugăciune generată! Comută la tabul "Scrie rugăciune" pentru a revizui și edita înainte de a trimite.' + } + + )} + + )} +