{isGenerating ? 'Generating...' : "Today's Flex"} {userSubmittedToday && DONE ✓}

{todayChallenge.emoji}

{todayChallenge.title}

{todayChallenge.desc}

Next challenge in {countdown}

{!userSubmittedToday && activeChallenge && ( )} {!userSubmittedToday && activeChallenge && pickAndUploadVideo && ( )}

Recent Flexes {(todaySubmissions || []).length} today

{(todaySubmissions || []).length === 0 ? (

🏋️

No flexes yet today. Be the first!

) : ( (todaySubmissions || []).slice(0, 5).map((sub, idx) => renderSubmissionCard(sub, idx)) )}

🔥 Group Progress {(todaySubmissions || []).length}/{(memberList || []).length} completed

{(memberList || []).map(m => { const completed = (todaySubmissions || []).some(s => s?.userId === m.id); return (

m.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: completed ? `${colors.success}20` : colors.surfaceLight, border: `1px solid ${completed ? colors.success : colors.border}`, borderRadius: 20, cursor: m.handle ? 'pointer' : 'default', }}>

{!m.avatarUrl && '👤'}

{m.displayName || 'Member'} {completed && ✅}

); })}

); const renderSubmissionCard = (sub, idx) => { const reactions = sub?.reactions || {}; const totalReactions = Object.values(reactions || {}).reduce((sum, arr) => sum + (arr?.length || 0), 0); return (

sub?.userHandle && openProfile(sub.userHandle)} style={{ width: 36, height: 36, borderRadius: '50%', background: sub?.userAvatar ? `url(${sub.userAvatar}) center/cover` : `linear-gradient(135deg, ${colors.primary}, ${colors.accent})`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: sub?.userHandle ? 'pointer' : 'default', flexShrink: 0, }}> {!sub?.userAvatar && 👤}

{sub?.userName || 'Unknown'}

{sub?.challenge || todayChallenge.title}

{sub?.createdAt ? (() => { const mins = Math.floor((Date.now() - sub.createdAt) / 60000); if (mins < 1) return 'just now'; if (mins < 60) return mins + 'm ago'; const hrs = Math.floor(mins / 60); if (hrs < 24) return hrs + 'h ago'; return Math.floor(hrs / 24) + 'd ago'; })() : ''}

{sub?.mediaUrl && (

{sub?.mediaType === 'video' ? (

)} {sub?.caption && (

{sub?.userName}{' '}{sub.caption}

)}

{Object.entries(reactions || {}).map(([emoji, users]) => ( ))} {sub?.mediaUrl && ( )}

{reactingTo === sub?.id && (

{(REACTION_EMOJIS || []).map((emoji, i) => ( ))}

)}

); }; const renderFeedView = () => (

Flex Feed

{(submissions || []).length} total flexes

{(submissions || []).length === 0 ? (

💪

No flexes yet. Submit the first one!

) : ( (submissions || []).slice(0, 30).map((sub, idx) => renderSubmissionCard(sub, idx)) )}

); const renderGloryBoard = () => { const myRank = getUserRank(); return (

🏆

Glory Board

Who flexes the hardest?

{(leaderboard || []).length === 0 ? (

🥇

Complete challenges to appear here!

) : ( (leaderboard || []).map((entry, idx) => { const rank = idx + 1; const isMe = entry.userId === user?.id; const medalColors = [colors.gold, colors.silver, colors.bronze]; const medalEmojis = ['👑', '🥈', '🥉']; return (

entry.handle && openProfile(entry.handle)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, marginBottom: 8, borderRadius: 14, background: isMe ? `linear-gradient(135deg, ${colors.primaryGlow}, ${colors.accentGlow})` : colors.surface, border: isMe ? `2px solid ${colors.primary}` : `1px solid ${colors.border}`, cursor: entry.handle ? 'pointer' : 'default', animation: isMe && gloryHighlight ? 'pulse 0.6s ease-in-out 3' : `scaleIn 0.3s ease-out ${idx * 0.05}s both`, position: 'relative', overflow: 'hidden', }} > {isMe && rank <= 3 && (

)}

{rank <= 3 ? medalEmojis[rank - 1] : rank}

{!entry.avatar && 👤}

{entry.name}{isMe ? ' (You)' : ''}

{entry.count} flex{entry.count !== 1 ? 'es' : ''} completed

{entry.count}

); }) )} {(memberList || []).length > 1 && (

Group Members ({(memberList || []).length})

{(memberList || []).map(m => (

m.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: colors.surfaceLight, borderRadius: 20, cursor: m.handle ? 'pointer' : 'default' }}>

{!m.avatarUrl && '👤'}

{m.displayName || 'Member'}

))}

)}

); }; React.useEffect(() => { if (view === 'glory') { setGloryHighlight(true); const t = setTimeout(() => setGloryHighlight(false), 2000); return () => clearTimeout(t); } }, [view]); const navItems = [ { id: 'challenge', emoji: '⚡', label: 'Today' }, { id: 'feed', emoji: '📱', label: 'Feed' }, { id: 'glory', emoji: '🏆', label: 'Glory' }, ]; return (

{/* Header */}

💪

Daily Flex

{/* Content */} {view === 'challenge' && renderChallengeView()} {view === 'feed' && renderFeedView()} {view === 'glory' && renderGloryBoard()} {/* Bottom Nav */}

{(navItems || []).map(item => ( ))}

{/* Submit Form Bottom Sheet */} {showSubmitForm && (

{ setShowSubmitForm(false); setPendingMedia(null); setCaption(''); }} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.7)' }} />

Submit Your Flex 💪

{todayChallenge.title}

{pendingMedia && (

{pendingMediaType === 'video' ? (

)} setCaption(e.target.value)} placeholder="Add a caption... (optional)" style={{ width: '100%', height: 48, fontSize: 16, padding: '0 14px', borderRadius: 12, border: `1px solid ${colors.border}`, background: colors.surfaceLight, color: colors.text, fontFamily: font, boxSizing: 'border-box', marginBottom: 14, outline: 'none', }} onFocus={(e) => e.currentTarget.style.borderColor = colors.primary} onBlur={(e) => e.currentTarget.style.borderColor = colors.border} />

)} {/* FLEX COMPLETE Celebration */} {showFlexComplete && (

💪

FLEX COMPLETE!

You crushed it! 🔥

)} {/* Confetti */} {(confettiParticles || []).length > 0 && (

{(confettiParticles || []).map(p => (

{p.emoji}

))}

)} {/* Stamp/Toast */} {showStamp && (

{showStamp}

)}

); }