353 lines
15 KiB
TypeScript
353 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Clock from './Clock';
|
|
|
|
interface Prayer {
|
|
id: string;
|
|
userId: string;
|
|
date: string;
|
|
text: string;
|
|
prayFor?: string;
|
|
answered?: boolean;
|
|
answerDetails?: string;
|
|
prayFrequency?: number; // 1-7 times per week
|
|
lastPrayedFor?: string; // ISO date string
|
|
}
|
|
|
|
interface HomePageProps {
|
|
prayers: Prayer[];
|
|
todayCount: number;
|
|
onStartPraying: () => void;
|
|
onSelectPrayer: (prayer: Prayer) => void;
|
|
userName?: string;
|
|
}
|
|
|
|
export default function HomePage({ prayers, todayCount, onStartPraying, onSelectPrayer, userName }: HomePageProps) {
|
|
const today = new Date().toISOString().split('T')[0];
|
|
const todayPrayers = prayers.filter(p => p.date === today);
|
|
const recentPrayers = prayers.slice(0, 5);
|
|
const totalPrayers = prayers.length;
|
|
const uniqueDays = new Set(prayers.map(p => p.date)).size;
|
|
const answeredPrayers = prayers.filter(p => p.answered).length;
|
|
|
|
// Get greeting based on time of day
|
|
const getGreeting = () => {
|
|
const hour = new Date().getHours();
|
|
if (hour < 12) return 'Good morning';
|
|
if (hour < 18) return 'Good afternoon';
|
|
return 'Good evening';
|
|
};
|
|
|
|
// Get first name from display name or email
|
|
const getFirstName = () => {
|
|
if (!userName) return 'friend';
|
|
// If it's an email, get the part before @
|
|
if (userName.includes('@')) {
|
|
return userName.split('@')[0];
|
|
}
|
|
// If it's a full name, get first name
|
|
return userName.split(' ')[0];
|
|
};
|
|
|
|
// Count active prayer requests (not answered)
|
|
const activePrayerCount = prayers.filter(p => !p.answered).length;
|
|
|
|
// Count how many active prayers were prayed for today
|
|
const prayedTodayCount = prayers.filter(p => !p.answered && p.lastPrayedFor === today).length;
|
|
|
|
// Calculate actual streak - consecutive days with prayers
|
|
const calculateStreak = () => {
|
|
if (prayers.length === 0) return 0;
|
|
|
|
// Get all dates where user either created a prayer OR marked something as prayed for
|
|
const activityDates = new Set<string>();
|
|
prayers.forEach(p => {
|
|
activityDates.add(p.date); // Date prayer was created
|
|
if (p.lastPrayedFor) {
|
|
activityDates.add(p.lastPrayedFor); // Date marked as prayed for
|
|
}
|
|
});
|
|
|
|
const sortedDates = Array.from(activityDates).sort().reverse();
|
|
let streak = 0;
|
|
let checkDate = new Date(today);
|
|
|
|
for (let i = 0; i < 365; i++) {
|
|
const dateStr = checkDate.toISOString().split('T')[0];
|
|
if (sortedDates.includes(dateStr)) {
|
|
streak++;
|
|
} else if (i === 0) {
|
|
// If today has no activity, streak is broken
|
|
break;
|
|
} else {
|
|
break;
|
|
}
|
|
checkDate.setDate(checkDate.getDate() - 1);
|
|
}
|
|
|
|
return streak;
|
|
};
|
|
|
|
const streak = calculateStreak();
|
|
|
|
// Calculate more stats
|
|
const avgPrayerLength = totalPrayers > 0
|
|
? Math.round(prayers.reduce((sum, p) => sum + p.text.length, 0) / totalPrayers)
|
|
: 0;
|
|
|
|
const answeredPercentage = totalPrayers > 0
|
|
? Math.round((answeredPrayers / totalPrayers) * 100)
|
|
: 0;
|
|
|
|
// Get most prayed for person/topic based on lastPrayedFor clicks
|
|
const prayerForCounts: Record<string, number> = {};
|
|
prayers.forEach(p => {
|
|
if (p.prayFor && p.lastPrayedFor) {
|
|
prayerForCounts[p.prayFor] = (prayerForCounts[p.prayFor] || 0) + 1;
|
|
}
|
|
});
|
|
const mostPrayedFor = Object.entries(prayerForCounts).sort((a, b) => b[1] - a[1])[0];
|
|
|
|
// Recent answered prayers
|
|
const recentAnswered = prayers.filter(p => p.answered).slice(0, 3);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 px-4 pb-32">
|
|
<div className="pt-24">
|
|
{/* Animated Background Elements */}
|
|
<div className="fixed inset-0 -z-10">
|
|
<div className="absolute top-20 right-10 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl"></div>
|
|
<div className="absolute bottom-20 left-10 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
{/* Clock */}
|
|
<div className="max-w-md mx-auto mb-12">
|
|
<div className="text-center">
|
|
<Clock />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Header with Personalized Greeting */}
|
|
<div className="max-w-md mx-auto mb-12">
|
|
<h1 className="text-4xl font-bold text-white mb-3">
|
|
{getGreeting()}, {getFirstName()}!
|
|
</h1>
|
|
{activePrayerCount > 0 ? (
|
|
<div className="text-lg text-slate-300">
|
|
<p>
|
|
You have <span className="font-bold text-blue-400">{activePrayerCount}</span> {activePrayerCount === 1 ? 'thing' : 'things'} that need prayer today.
|
|
</p>
|
|
{prayedTodayCount > 0 && (
|
|
<p className="mt-1">
|
|
You've prayed for <span className="font-bold text-green-400">{prayedTodayCount}</span> of them! 🙏
|
|
</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="text-lg text-slate-300">
|
|
All caught up! Start a new prayer to keep your journey going.
|
|
</p>
|
|
)}
|
|
<p className="text-slate-400 mt-2">
|
|
{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="max-w-md mx-auto mb-12">
|
|
{/* Today's Prayers - Featured */}
|
|
<div className="mb-4 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl p-6 shadow-xl border border-blue-500/20 backdrop-blur-lg">
|
|
<div className="flex items-end justify-between">
|
|
<div>
|
|
<div className="text-blue-200 text-sm font-semibold mb-2">Today's Prayers</div>
|
|
<div className="text-5xl font-bold text-white">{todayCount}</div>
|
|
</div>
|
|
<div className="text-4xl opacity-30">📿</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Stats Grid */}
|
|
<div className="grid grid-cols-2 gap-4 mb-8">
|
|
{/* Total Prayers */}
|
|
<div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
|
|
<div className="text-slate-400 text-xs font-semibold mb-2">Total Prayers</div>
|
|
<div className="text-3xl font-bold text-white">{totalPrayers}</div>
|
|
<div className="text-xs text-slate-500 mt-2">All time</div>
|
|
</div>
|
|
|
|
{/* Days Prayed */}
|
|
<div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
|
|
<div className="text-slate-400 text-xs font-semibold mb-2">Days Prayed</div>
|
|
<div className="text-3xl font-bold text-white">{uniqueDays}</div>
|
|
<div className="text-xs text-slate-500 mt-2">Consistent</div>
|
|
</div>
|
|
|
|
{/* Answered Prayers */}
|
|
<div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
|
|
<div className="text-slate-400 text-xs font-semibold mb-2">✅ Answered</div>
|
|
<div className="text-3xl font-bold text-green-400">{answeredPrayers}</div>
|
|
<div className="text-xs text-slate-500 mt-2">{answeredPercentage}% answered</div>
|
|
</div>
|
|
|
|
{/* Streak */}
|
|
<div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
|
|
<div className="text-slate-400 text-xs font-semibold mb-2">🔥 Streak</div>
|
|
<div className="text-3xl font-bold text-orange-400">{streak}</div>
|
|
<div className="text-xs text-slate-500 mt-2">consecutive days</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Secondary Stats */}
|
|
<div className="grid grid-cols-2 gap-4 mb-8">
|
|
{/* Avg Prayer Length */}
|
|
<div className="bg-purple-900/20 backdrop-blur-xl rounded-xl p-4 border border-purple-500/30">
|
|
<div className="text-purple-300 text-xs font-semibold mb-2">📊 Avg Length</div>
|
|
<div className="text-2xl font-bold text-purple-200">{avgPrayerLength}</div>
|
|
<div className="text-xs text-purple-400 mt-2">characters</div>
|
|
</div>
|
|
|
|
{/* Most Prayed For */}
|
|
<div className="bg-pink-900/20 backdrop-blur-xl rounded-xl p-4 border border-pink-500/30">
|
|
<div className="text-pink-300 text-xs font-semibold mb-2">💝 Most Prayed For</div>
|
|
{mostPrayedFor ? (
|
|
<>
|
|
<div className="text-sm font-bold text-pink-200 line-clamp-1">{mostPrayedFor[0]}</div>
|
|
<div className="text-xs text-pink-400 mt-2">{mostPrayedFor[1]} times</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="text-sm font-bold text-pink-200">Start praying!</div>
|
|
<div className="text-xs text-pink-400 mt-2">Click "Mark Prayed" to build your prayer focus</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="max-w-md mx-auto mb-12">
|
|
<button
|
|
onClick={onStartPraying}
|
|
className="w-full bg-gradient-to-r from-blue-600 via-blue-500 to-purple-600 hover:from-blue-700 hover:via-blue-600 hover:to-purple-700 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg hover:shadow-2xl transform hover:scale-105 border border-blue-400/30 flex items-center justify-center gap-2"
|
|
>
|
|
<span className="text-xl">✍️</span>
|
|
<span>Start New Prayer</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Things to Pray For - Active Requests */}
|
|
{(() => {
|
|
const pendingPrayers = prayers.filter(p => !p.answered);
|
|
if (pendingPrayers.length > 0) {
|
|
return (
|
|
<div className="max-w-md mx-auto mb-12">
|
|
<h2 className="text-lg font-bold text-amber-400 mb-4 flex items-center gap-2">
|
|
<span>🙏</span> Things to Pray For
|
|
</h2>
|
|
<div className="bg-amber-900/20 backdrop-blur-xl rounded-xl p-5 border border-amber-500/30 hover:border-amber-400/50 transition-all">
|
|
<div className="text-3xl font-bold text-amber-300 mb-2">{pendingPrayers.length}</div>
|
|
<div className="text-sm text-amber-200 mb-4">active prayer requests</div>
|
|
<button
|
|
onClick={() => {
|
|
const fakeEvent = { target: { value: 'praying' } } as any;
|
|
// Navigate to praying tab by triggering parent
|
|
}}
|
|
className="text-xs font-semibold text-amber-300 hover:text-amber-200 transition-colors flex items-center gap-1 group"
|
|
>
|
|
<span>View All</span>
|
|
<span className="group-hover:translate-x-1 transition-transform">→</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
})()}
|
|
|
|
{/* Recent Prayers */}
|
|
{recentPrayers.length > 0 && (
|
|
<div className="max-w-md mx-auto mb-12">
|
|
<h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
|
<span>📖</span> Recent Prayers
|
|
</h2>
|
|
<div className="space-y-3">
|
|
{recentPrayers.map((prayer, idx) => (
|
|
<button
|
|
key={prayer.id}
|
|
onClick={() => onSelectPrayer(prayer)}
|
|
className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-1"
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="text-2xl">{prayer.answered ? '✅' : '📝'}</div>
|
|
<div className="flex-1 min-w-0">
|
|
{prayer.prayFor && (
|
|
<div className="text-xs font-bold text-blue-400 mb-1 uppercase tracking-wider">
|
|
🙏 {prayer.prayFor}
|
|
</div>
|
|
)}
|
|
<p className="text-sm text-slate-300 line-clamp-2 group-hover:text-slate-200">{prayer.text}</p>
|
|
<div className="text-xs text-slate-500 mt-2 flex items-center justify-between">
|
|
<span>{new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
|
|
<span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">Click to edit →</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Recent Answered Prayers */}
|
|
{recentAnswered.length > 0 && (
|
|
<div className="max-w-md mx-auto mb-12">
|
|
<h2 className="text-lg font-bold text-green-400 mb-4 flex items-center gap-2">
|
|
<span>✨</span> Recently Answered
|
|
</h2>
|
|
<div className="space-y-3">
|
|
{recentAnswered.map((prayer) => (
|
|
<div
|
|
key={prayer.id}
|
|
className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 hover:border-green-400/50 transition-all"
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="text-2xl">✅</div>
|
|
<div className="flex-1 min-w-0">
|
|
{prayer.prayFor && (
|
|
<div className="text-xs font-bold text-green-300 mb-1 uppercase tracking-wider">
|
|
🙏 {prayer.prayFor}
|
|
</div>
|
|
)}
|
|
<p className="text-sm text-slate-300 line-clamp-2">{prayer.text}</p>
|
|
{prayer.answerDetails && (
|
|
<p className="text-xs text-green-400 mt-2 italic">
|
|
💬 "{prayer.answerDetails.substring(0, 60)}..."
|
|
</p>
|
|
)}
|
|
<div className="text-xs text-slate-500 mt-2">
|
|
{new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{prayers.length === 0 && (
|
|
<div className="max-w-md mx-auto text-center py-12">
|
|
<div className="text-6xl mb-4 animate-bounce">🙏</div>
|
|
<p className="text-white font-semibold mb-2">Start Your Prayer Journey</p>
|
|
<p className="text-slate-400 mb-6">
|
|
Create your first prayer entry and begin tracking your spiritual journey.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|