root
325 lines
14 KiB
TypeScript
325 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useAuth } from "@/lib/AuthContext";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
Bot, ShoppingBag, MessageCircle, Wallet,
|
|
Flame, Sparkles, Star, ChevronRight,
|
|
BookOpen, MapPin, Crown, Zap, TrendingUp,
|
|
Gift, Trophy,
|
|
} from "lucide-react";
|
|
import { DAILY_VERSE, generateAIResponse } from "@/lib/ai";
|
|
import PremiumBadge from "@/components/PremiumBadge";
|
|
|
|
export default function HomePage() {
|
|
const { user, token, loading, streak, xp, refreshStreak, refreshXp, refreshUser } = useAuth();
|
|
const router = useRouter();
|
|
const [verse] = useState(DAILY_VERSE[Math.floor(Math.random() * DAILY_VERSE.length)]);
|
|
const [claiming, setClaiming] = useState(false);
|
|
const [claimResult, setClaimResult] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!loading && !token) router.push("/login");
|
|
}, [loading, token, router]);
|
|
|
|
// Refresh streak/XP data every 60 seconds
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
const interval = setInterval(() => {
|
|
refreshStreak();
|
|
refreshXp();
|
|
}, 60000);
|
|
return () => clearInterval(interval);
|
|
}, [token, refreshStreak, refreshXp]);
|
|
|
|
const handleClaimReward = async () => {
|
|
if (!token || claiming) return;
|
|
setClaiming(true);
|
|
setClaimResult(null);
|
|
try {
|
|
const res = await fetch("/api/gamification/streak", {
|
|
method: "POST",
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setClaimResult(
|
|
`Claimed! +${data.reward} FLH, +${data.xpGain} XP${
|
|
data.newLevel ? ` — Level Up! You're now level ${data.newLevel}! 🎉` : ""
|
|
}`
|
|
);
|
|
refreshStreak();
|
|
refreshXp();
|
|
refreshUser(); // update FLH balance
|
|
} else if (res.status === 409) {
|
|
setClaimResult("Already claimed today!");
|
|
} else {
|
|
const err = await res.json();
|
|
setClaimResult(err.error || "Failed to claim");
|
|
}
|
|
} catch {
|
|
setClaimResult("Network error — try again");
|
|
} finally {
|
|
setClaiming(false);
|
|
setTimeout(() => setClaimResult(null), 5000);
|
|
}
|
|
};
|
|
|
|
if (loading) return <LoadingScreen />;
|
|
if (!user) return null;
|
|
|
|
const isPremium = user.isPremium || user.isPro;
|
|
const isPro = user.isPro;
|
|
const currentStreak = streak?.currentStreak ?? 0;
|
|
const canClaim = streak?.canClaim ?? false;
|
|
const todayReward = streak?.todayReward ?? 0;
|
|
const level = xp?.level ?? 1;
|
|
const currentXp = xp?.xp ?? 0;
|
|
const xpToNext = xp?.xpToNext ?? 100;
|
|
const xpPercent = xpToNext > 0 ? Math.min(Math.round((currentXp / xpToNext) * 100), 100) : 0;
|
|
|
|
return (
|
|
<div className="min-h-dvh bg-[#0a0a0f] pb-24">
|
|
{/* Header */}
|
|
<div className="px-4 pt-6 pb-4">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<div className="flex-1">
|
|
<h1 className="text-xl font-bold text-white flex items-center gap-2">
|
|
Assalamualaikum, {user.name.split(" ")[0]} ☪️
|
|
{/* Level Badge */}
|
|
<div className="flex items-center gap-1 bg-gradient-to-r from-purple-900/40 to-purple-800/20 border border-purple-700/30 rounded-full px-2.5 py-0.5">
|
|
<Trophy size={12} className="text-purple-400" />
|
|
<span className="text-xs font-bold text-purple-300">Lv.{level}</span>
|
|
</div>
|
|
{user.isPro && <PremiumBadge tier="pro" size="sm" />}
|
|
{user.isPremium && !user.isPro && <PremiumBadge tier="premium" size="sm" />}
|
|
</h1>
|
|
<p className="text-xs text-gray-500 mt-0.5">
|
|
{new Date().toLocaleDateString("en-MY", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
|
|
</p>
|
|
</div>
|
|
{/* Streak */}
|
|
<div className={`flex items-center gap-1.5 rounded-xl px-3 py-2 ${
|
|
currentStreak > 0
|
|
? "bg-gradient-to-r from-orange-900/40 to-orange-800/20 border border-orange-700/30"
|
|
: "bg-gray-900/40 border border-gray-800/30"
|
|
}`}>
|
|
<Flame size={16} className={currentStreak > 0 ? "text-orange-400 flame" : "text-gray-600"} />
|
|
<span className={`text-sm font-bold ${currentStreak > 0 ? "text-orange-300" : "text-gray-500"}`}>
|
|
{currentStreak}
|
|
</span>
|
|
<span className="text-xs text-gray-500">day</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* XP Progress Bar */}
|
|
<div className="mt-2">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-xs text-gray-500">XP Progress</span>
|
|
<span className="text-xs text-gray-500">{currentXp} / {xpToNext} XP</span>
|
|
</div>
|
|
<div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-purple-500 to-amber-400 rounded-full transition-all duration-500"
|
|
style={{ width: `${xpPercent}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Premium banner */}
|
|
{!isPremium && (
|
|
<Link href="/upgrade"
|
|
className="mt-3 flex items-center justify-between glass-gold rounded-2xl px-4 py-3.5 active:opacity-80 transition min-h-[44px]">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-[#D4AF37]/20 flex items-center justify-center">
|
|
<Sparkles size={16} className="text-[#D4AF37]" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-[#D4AF37]">Go Premium</p>
|
|
<p className="text-xs text-gray-500">Unlock unlimited AI & more</p>
|
|
</div>
|
|
</div>
|
|
<ChevronRight size={16} className="text-[#D4AF37]" />
|
|
</Link>
|
|
)}
|
|
|
|
{/* Pro badge */}
|
|
{isPro && (
|
|
<div className="mt-3 flex items-center gap-2 bg-purple-900/20 border border-purple-500/30 rounded-2xl px-4 py-3 min-h-[44px]">
|
|
<Crown size={16} className="text-purple-400" />
|
|
<span className="text-sm font-medium text-purple-300">Pro Member — Unlimited Everything</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* FLH Earning Rate - shown for premium/pro */}
|
|
{(isPremium || isPro) && (
|
|
<div className="mt-2 flex items-center gap-2 bg-gradient-to-r from-[#D4AF37]/10 to-purple-900/10 border border-[#D4AF37]/20 rounded-2xl px-4 py-3 min-h-[44px]">
|
|
<TrendingUp size={14} className="text-[#D4AF37]" />
|
|
<span className="text-xs font-semibold text-[#D4AF37]">2x Earning Active</span>
|
|
<span className="text-xs text-gray-500">— Earn double FLH on marketplace sales</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Daily Verse */}
|
|
<div className="mx-4 mb-5 bg-gradient-to-br from-emerald-900/20 to-[#111118] border border-emerald-800/30 rounded-2xl p-5">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<BookOpen size={14} className="text-emerald-400" />
|
|
<span className="text-xs font-medium text-emerald-400">Daily Verse</span>
|
|
</div>
|
|
<p className="text-lg text-center font-arabic text-emerald-100 mb-3" dir="rtl">
|
|
{verse.arabic}
|
|
</p>
|
|
<p className="text-sm text-gray-400 text-center italic">
|
|
“{verse.translation}”
|
|
</p>
|
|
<p className="text-xs text-gray-600 text-center mt-2">— {verse.reference}</p>
|
|
</div>
|
|
|
|
{/* Streak Reward Card */}
|
|
<div className="mx-4 mb-5">
|
|
<div className={`bg-gradient-to-br ${
|
|
canClaim
|
|
? "from-orange-900/20 to-amber-900/10 border-orange-700/30"
|
|
: "from-gray-900/30 to-gray-800/10 border-gray-800/30"
|
|
} border rounded-2xl p-5`}>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-9 h-9 rounded-xl ${canClaim ? "bg-orange-900/40" : "bg-gray-800/40"} flex items-center justify-center`}>
|
|
<Gift size={18} className={canClaim ? "text-orange-400" : "text-gray-600"} />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-white">Daily Reward</h3>
|
|
<p className="text-xs text-gray-500">
|
|
{canClaim
|
|
? `Claim your streak reward — +${todayReward} FLH`
|
|
: "Reward claimed — come back tomorrow!"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-lg font-bold text-orange-400">{todayReward.toLocaleString()}</p>
|
|
<p className="text-[10px] text-gray-600">FLH reward</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Claim button */}
|
|
{canClaim ? (
|
|
<button
|
|
onClick={handleClaimReward}
|
|
disabled={claiming}
|
|
className="w-full py-3.5 bg-gradient-to-r from-orange-600 to-amber-600 hover:from-orange-500 hover:to-amber-500 disabled:opacity-50 text-white text-sm font-semibold rounded-xl active:scale-[0.98] transition-all min-h-[44px]"
|
|
>
|
|
{claiming ? "Claiming..." : "🔥 Claim Streak Reward"}
|
|
</button>
|
|
) : (
|
|
<div className="w-full py-3.5 bg-gray-800/50 text-gray-500 text-sm font-medium rounded-xl text-center min-h-[44px] flex items-center justify-center">
|
|
✅ Claimed
|
|
</div>
|
|
)}
|
|
|
|
{/* Claim result toast */}
|
|
{claimResult && (
|
|
<div className="mt-2 text-xs text-center font-medium text-orange-300 animate-pulse">
|
|
{claimResult}
|
|
</div>
|
|
)}
|
|
|
|
{/* XP hint */}
|
|
<p className="text-xs text-gray-700 text-center mt-3">
|
|
+{Math.min(10 + currentStreak * 2, 100)} XP also awarded on claim
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="px-4 mb-5">
|
|
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Quick Actions</h2>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<QuickAction href="/nur" icon={Bot} label="Nur AI" color="bg-amber-900/30 text-amber-300" />
|
|
<QuickAction href="/souq" icon={ShoppingBag} label="Souq" color="bg-[#D4AF37]/15 text-[#D4AF37]" />
|
|
<QuickAction href="/halal-monitor" icon={MapPin} label="Halal Monitor" color="bg-emerald-900/30 text-emerald-300" />
|
|
<QuickAction href="/wallet" icon={Wallet} label="Wallet" color="bg-blue-900/30 text-blue-300" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Row */}
|
|
<div className="mx-4 mb-5">
|
|
<div className="flex gap-3">
|
|
<StatCard label="FLH Balance" value={user.flhBalance.toLocaleString()} icon={Zap} color="text-[#D4AF37]" />
|
|
<StatCard label="AI Today" value={`${user.dailyMsgCount}/10`} icon={Bot} color="text-amber-400" />
|
|
<StatCard label="Tier" value={isPro ? "Pro" : isPremium ? "Premium" : "Free"} icon={Crown}
|
|
color={isPro ? "text-purple-400" : isPremium ? "text-[#D4AF37]" : "text-gray-500"} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Activity Feed */}
|
|
<div className="px-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Activity</h2>
|
|
<Link href="/forum" className="text-xs text-[#D4AF37] min-h-[44px] inline-flex items-center">View all</Link>
|
|
</div>
|
|
<div className="bg-[#111118] border border-gray-800/60 rounded-2xl p-5 text-center">
|
|
<MessageCircle size={24} className="mx-auto text-gray-700 mb-2" />
|
|
<p className="text-sm text-gray-500">No recent activity</p>
|
|
<p className="text-xs text-gray-700 mt-1">Start a conversation with Nur AI</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Premium upsell at bottom for free users */}
|
|
{!isPremium && (
|
|
<div className="mx-4 mt-5 bg-gradient-to-r from-[#D4AF37]/10 to-purple-900/10 border border-[#D4AF37]/20 rounded-2xl p-5 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-24 h-24 bg-[#D4AF37]/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl" />
|
|
<div className="flex items-start gap-3 relative">
|
|
<div className="w-10 h-10 rounded-2xl bg-[#D4AF37]/15 flex items-center justify-center shrink-0">
|
|
<Star size={20} className="text-[#D4AF37]" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold text-white text-sm flex items-center gap-2">
|
|
Unlock Your Full Potential
|
|
<PremiumBadge tier="free" size="sm" />
|
|
</h3>
|
|
<p className="text-xs text-gray-500 mt-1">Premium gives you unlimited AI, halal monitor, <strong className="text-gray-400">2x FLH earning</strong>, and marketplace access.</p>
|
|
<Link href="/upgrade"
|
|
className="inline-block mt-3 text-xs font-semibold text-[#D4AF37] border border-[#D4AF37]/40 rounded-full px-6 py-3 active:bg-[#D4AF37]/10 transition hover:shadow-[0_0_12px_rgba(212,175,55,0.3)] min-h-[44px] leading-tight">
|
|
See Plans
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function QuickAction({ href, icon: Icon, label, color }: { href: string; icon: any; label: string; color: string }) {
|
|
return (
|
|
<Link href={href} className="flex flex-col items-center gap-1.5 active:scale-95 transition">
|
|
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center ${color} bg-opacity-20`}>
|
|
<Icon size={22} />
|
|
</div>
|
|
<span className="text-xs text-gray-500 font-medium">{label}</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function StatCard({ label, value, icon: Icon, color }: { label: string; value: string; icon: any; color: string }) {
|
|
return (
|
|
<div className="flex-1 bg-[#111118] border border-gray-800/60 rounded-2xl p-3 text-center">
|
|
<Icon size={16} className={`mx-auto mb-1 ${color}`} />
|
|
<p className="text-sm font-bold text-white">{value}</p>
|
|
<p className="text-[10px] text-gray-600 mt-0.5">{label}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LoadingScreen() {
|
|
return (
|
|
<div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
|
|
<div className="w-8 h-8 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
|
|
</div>
|
|
);
|
|
}
|