394 lines
17 KiB
TypeScript
394 lines
17 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Clock from './Clock';
|
|
import { HandHeart, CheckCircle2, PenSquare, BookOpen, Sparkles, Flame, BarChart3, MessageSquare } from 'lucide-react';
|
|
|
|
const getLocalISODate = () => {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
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
|
|
prayedDates?: string[]; // Array of dates when prayed for
|
|
}
|
|
|
|
interface HomePageProps {
|
|
prayers: Prayer[];
|
|
onStartPraying: () => void;
|
|
onSelectPrayer: (prayer: Prayer) => void;
|
|
onGoToPraying: () => void;
|
|
onGoToAnswered: () => void;
|
|
onGoToJournal: () => void;
|
|
onGoToReflections: () => void;
|
|
userName?: string;
|
|
mostPrayedFor?: string;
|
|
}
|
|
|
|
export default function HomePage({ prayers, onStartPraying, onSelectPrayer, onGoToPraying, onGoToAnswered, onGoToJournal, onGoToReflections, userName, mostPrayedFor }: HomePageProps) {
|
|
const today = getLocalISODate();
|
|
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;
|
|
|
|
const prayedTodayDetails = prayers
|
|
.map(prayer => {
|
|
const dates = prayer.prayedDates && prayer.prayedDates.length > 0
|
|
? prayer.prayedDates
|
|
: prayer.lastPrayedFor
|
|
? [prayer.lastPrayedFor]
|
|
: [];
|
|
|
|
const todayOccurrences = dates.filter(d => d === today).length;
|
|
if (todayOccurrences === 0) return null;
|
|
|
|
return {
|
|
id: prayer.id,
|
|
title: prayer.prayFor || prayer.text || 'Prayer',
|
|
count: todayOccurrences,
|
|
};
|
|
})
|
|
.filter(Boolean) as { id: string; title: string; count: number }[];
|
|
|
|
const todaysUniquePrayers = prayedTodayDetails.length;
|
|
const todaysTotalTaps = prayedTodayDetails.reduce((sum, item) => sum + item.count, 0);
|
|
const topTodayPrayers = [...prayedTodayDetails]
|
|
.sort((a, b) => b.count - a.count || a.title.localeCompare(b.title))
|
|
.slice(0, 3);
|
|
|
|
// 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 => {
|
|
if (p.answered) return false;
|
|
const dates = p.prayedDates && p.prayedDates.length > 0
|
|
? p.prayedDates
|
|
: p.lastPrayedFor
|
|
? [p.lastPrayedFor]
|
|
: [];
|
|
return dates.some(d => d === 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
|
|
|
|
// Add all prayed dates from the array
|
|
if (p.prayedDates && p.prayedDates.length > 0) {
|
|
p.prayedDates.forEach((date: string) => activityDates.add(date));
|
|
} else if (p.lastPrayedFor) {
|
|
// Backward compatibility
|
|
activityDates.add(p.lastPrayedFor);
|
|
}
|
|
});
|
|
|
|
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;
|
|
|
|
// 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>
|
|
|
|
{/* Header with Personalized Greeting */}
|
|
<div className="max-w-md mx-auto mb-8 text-center">
|
|
<img src="/icon-192x192.png" alt="Haver icon" className="w-12 h-12 mx-auto mb-3 rounded" />
|
|
<h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent 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 inline-flex items-center gap-2">
|
|
<HandHeart className="w-5 h-5 text-green-400" /> 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-4 text-sm">
|
|
{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
|
|
</p>
|
|
{/* Clock - Below Date */}
|
|
<div className="mt-3 flex justify-center">
|
|
<div className="scale-75">
|
|
<Clock />
|
|
</div>
|
|
</div>
|
|
</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-start justify-between">
|
|
<div>
|
|
<div className="text-blue-200 text-sm font-semibold mb-1">Today's Prayers</div>
|
|
<div className="text-5xl font-bold text-white">{todaysUniquePrayers}</div>
|
|
<div className="text-sm text-blue-100/80">unique prayed items</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-xs text-blue-100/70">Total taps</div>
|
|
<div className="text-2xl font-semibold text-white">{todaysTotalTaps}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{topTodayPrayers.length > 0 ? (
|
|
<div className="mt-4 space-y-2">
|
|
{topTodayPrayers.map(item => (
|
|
<div key={item.id} className="flex items-center justify-between bg-white/5 border border-white/10 rounded-lg px-3 py-2">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<HandHeart className="w-4 h-4 text-blue-100" />
|
|
<div className="text-sm text-white truncate" title={item.title}>{item.title}</div>
|
|
</div>
|
|
<div className="text-xs text-blue-100/80 whitespace-nowrap">{item.count} {item.count === 1 ? 'tap' : 'taps'}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="mt-4 text-sm text-blue-100/80 flex items-center gap-2">
|
|
<HandHeart className="w-4 h-4" /> Mark a prayer as prayed to see it here.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Things to Pray For - Active Requests */}
|
|
{(() => {
|
|
const pendingPrayers = prayers.filter(p => !p.answered);
|
|
if (pendingPrayers.length > 0) {
|
|
return (
|
|
<button
|
|
onClick={onGoToPraying}
|
|
className="w-full text-left mb-4 bg-amber-900/20 backdrop-blur-xl rounded-2xl p-6 border border-amber-500/30 hover:border-amber-400/50 transition-all focus:outline-none focus:ring-2 focus:ring-amber-300 focus:ring-offset-2 focus:ring-offset-slate-900"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<div className="text-amber-200 text-sm font-semibold mb-1 flex items-center gap-2">
|
|
<HandHeart className="w-4 h-4" /> Things to Pray For
|
|
</div>
|
|
<div className="text-4xl font-bold text-amber-200">{pendingPrayers.length}</div>
|
|
<div className="text-sm text-amber-200/80">active prayer requests</div>
|
|
</div>
|
|
<div className="text-xs font-semibold text-amber-200/90 flex items-center gap-1">
|
|
<span>Tap to review</span>
|
|
<span>→</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|
|
return null;
|
|
})()}
|
|
|
|
{/* Main Stats Grid */}
|
|
<div className="grid grid-cols-2 gap-4 mb-8">
|
|
{/* Total Prayers */}
|
|
<button
|
|
onClick={onGoToReflections}
|
|
className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
|
|
>
|
|
<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 className="text-[11px] text-blue-300 mt-1 flex items-center gap-1">Go to Reflections →</div>
|
|
</button>
|
|
|
|
{/* Days Prayed */}
|
|
<button
|
|
onClick={onGoToJournal}
|
|
className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
|
|
>
|
|
<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 className="text-[11px] text-blue-300 mt-1 flex items-center gap-1">Open Journal →</div>
|
|
</button>
|
|
|
|
{/* Answered Prayers */}
|
|
<button
|
|
onClick={onGoToAnswered}
|
|
className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
|
|
>
|
|
<div className="text-slate-400 text-xs font-semibold mb-2 inline-flex items-center gap-1.5"><CheckCircle2 className="w-4 h-4" /> 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 className="text-[11px] text-green-300 mt-1 flex items-center gap-1">See answers →</div>
|
|
</button>
|
|
|
|
{/* 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 inline-flex items-center gap-1.5"><Flame className="w-4 h-4" /> 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 inline-flex items-center gap-1.5"><BarChart3 className="w-4 h-4" /> 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 inline-flex items-center gap-1.5"><HandHeart className="w-4 h-4" /> 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"
|
|
>
|
|
<PenSquare className="w-5 h-5" />
|
|
<span>Start New Prayer</span>
|
|
</button>
|
|
</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">
|
|
<Sparkles className="w-5 h-5" /> 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">
|
|
<CheckCircle2 className="w-6 h-6 text-green-400" />
|
|
<div className="flex-1 min-w-0">
|
|
{prayer.prayFor && (
|
|
<div className="text-xs font-bold text-green-300 mb-1 uppercase tracking-wider inline-flex items-center gap-1.5">
|
|
<HandHeart className="w-3.5 h-3.5" /> {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 inline-flex items-center gap-1.5">
|
|
<MessageSquare className="w-4 h-4" /> "{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">
|
|
<Sparkles className="w-12 h-12 mb-4 text-blue-400 animate-pulse mx-auto" />
|
|
<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>
|
|
);
|
|
}
|