{(pieces || []).map(p => ( {p.emoji} ))}

); }; const ShowCard = ({ show }) => { const isAnimating = animatingId === show.id; const isPoppingIn = popInId === show.id; const hasConfetti = confettiShow === show.id; const [pressed, setPressed] = useState(false); const [deleteConfirm, setDeleteConfirm] = useState(false); return (

{show.poster}

{show.isDemo ? 'Demo · ' : ''}{show.title}

{show.genre} {show.year}

{(show.watchedBy?.length > 0) && (

{(show.watchedBy ?? []).slice(0, 5).map((w, i) => (

{ e.stopPropagation(); if (w.handle) openProfile(w.handle); }} style={{ width: 22, height: 22, borderRadius: '50%', border: '2px solid #1a1a2e', background: w.avatarUrl ? `url(${w.avatarUrl}) center/cover` : `linear-gradient(135deg, ${show.color}, #667eea)`, marginLeft: i > 0 ? -6 : 0, cursor: w.handle ? 'pointer' : 'default', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: '#fff', }}> {!w.avatarUrl && (w.displayName?.[0] || '?')}

))} {(show.watchedBy || []).length === 1 ? `${show.watchedBy[0]?.displayName || 'Someone'} watched` : `${show.watchedBy.length} watched`}

)}

{!show.isDemo && ( )}

); }; return (

{streakBanner && (

🏆

Binge Boss!

You hit a {totalWatched}-show milestone!

)} {groupComplete && (

🎉

Group Binge Complete!

Everyone watched "{groupComplete}"!

)} {/* Header */}

🍿 Binge Buddy

{totalWatched > 0 ? `${totalWatched} show${totalWatched !== 1 ? 's' : ''} conquered` : 'Track your binge journey'}

{/* Members Row */}

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

m.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 20, padding: '4px 12px 4px 4px', cursor: m.handle ? 'pointer' : 'default', flexShrink: 0, }}>

{!m.avatarUrl && (m.displayName?.[0] || '?')}

{m.id === user?.id ? 'You' : (m.displayName || 'Friend')}

))}

{/* Streak Counter */} {totalWatched > 0 && (

🔥

Binge Streak

{currentWeekWatched > 0 ? `${currentWeekWatched} this week` : 'Keep watching!'}

{totalWatched}

)} {/* Tabs */}

{[{ key: 'watching', label: 'Watching', emoji: '📺', count: (watchingShows || []).length }, { key: 'watched', label: 'Watched', emoji: '✅', count: (watchedShows || []).length }, { key: 'activity', label: 'Activity', emoji: '⚡', count: (appData?.activity ?? []).length }].map(t => ( ))}

{/* Scrollable Content */}

{tab === 'watching' && (

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

🎬

All caught up!

Add more shows to your list

) : ( (watchingShows || []).map(show => ) )}

)} {tab === 'watched' && (

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

👁️

Nothing watched yet

Tap the eye icon to mark shows as watched

) : ( (watchedShows || []).map(show => ) )}

)}

{tab === 'activity' && (

{(appData?.activity ?? []).length === 0 ? (

⚡

No activity yet

Watch or add shows to see activity here

) : ( (appData?.activity ?? []).slice(0, 30).map((act, idx) => { const actUser = act?._user ?? {}; const timeAgo = (() => { const diff = Date.now() - (act?._timestamp ?? 0); const mins = Math.floor(diff / 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`; })(); return (

actUser.handle && openProfile(actUser.handle)} style={{ width: 36, height: 36, borderRadius: '50%', flexShrink: 0, background: actUser.profileImageUrl ? `url(${actUser.profileImageUrl}) center/cover` : 'linear-gradient(135deg, #667eea, #f093fb)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#fff', fontWeight: 600, cursor: actUser.handle ? 'pointer' : 'default', }} > {!actUser.profileImageUrl && (actUser.displayName?.[0] || '?')}

actUser.handle && openProfile(actUser.handle)} style={{ fontWeight: 600, cursor: actUser.handle ? 'pointer' : 'default' }} > {actUser.id === user?.id ? 'You' : (actUser.displayName || 'Someone')} {' '} {act.type === 'watched' ? 'watched' : act.type === 'added' ? 'added' : 'updated'} {' '} {act.showEmoji} {act.showTitle}

{timeAgo}

); }) )}

)} {/* Bottom Sheet for Adding */} {showInput && (

setShowInput(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', zIndex: 90, animation: 'slideUp 0.3s ease-out', }}>

e.stopPropagation()} style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: 'linear-gradient(180deg, #1e1e3a, #141428)', borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)', paddingLeft: 20, paddingRight: 20, boxShadow: '0 -8px 40px rgba(0,0,0,0.5)', animation: 'slideUp 0.3s ease-out', }}>

✨ Add a Show

setNewTitle(e.target.value)} placeholder="What are you watching?" autoFocus onKeyDown={e => { if (e.key === 'Enter') addShow(); }} style={{ width: '100%', height: 52, fontSize: 16, padding: '0 16px', borderRadius: 14, border: '1px solid rgba(102,126,234,0.3)', background: 'rgba(255,255,255,0.06)', color: '#fff', outline: 'none', }} />

Genre

{(genres || []).map(g => ( ))}

{newTitle.trim() && (

{GENRE_EMOJIS[newGenre]}

{newTitle}

{newGenre} · {new Date().getFullYear()}

)}

)} {/* FAB */} {!showInput && ( )}

); }