@bettoredge/calcutta 0.4.0 → 0.4.2

package/src/components/CalcuttaResults.tsx

@@ -0,0 +1,461 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { StyleSheet, ScrollView, TouchableOpacity, Image, FlatList, Platform, useWindowDimensions } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaParticipantProps } from '@bettoredge/types';
+import { useCalcuttaCompetition } from '../hooks/useCalcuttaCompetition';
+import { useCalcuttaPlayers } from '../hooks/useCalcuttaPlayers';
+import { useCalcuttaItemImages } from '../hooks/useCalcuttaItemImages';
+import { useCalcuttaResults } from '../hooks/useCalcuttaResults';
+import { useCalcuttaSocket } from '../hooks/useCalcuttaSocket';
+import { formatCurrency, getStatusLabel, resolveItemImageUrl } from '../helpers/formatting';
+
+export interface CalcuttaResultsProps {
+    calcutta_competition_id: string;
+    player_id?: string;
+    access_token?: string;
+    device_id?: string;
+    player_username?: string;
+    player_profile_pic?: string;
+    onManage?: () => void;
+    onShare?: () => void;
+}
+
+export const CalcuttaResults: React.FC<CalcuttaResultsProps> = ({
+    calcutta_competition_id,
+    player_id,
+    access_token,
+    device_id,
+    player_username,
+    player_profile_pic,
+    onManage,
+    onShare,
+}) => {
+    const { theme } = useTheme();
+    const { width: windowWidth } = useWindowDimensions();
+    const [containerWidth, setContainerWidth] = useState(0);
+    const measuredWidth = containerWidth || windowWidth;
+    const isDesktop = Platform.OS === 'web' && measuredWidth >= 700;
+
+    const {
+        loading,
+        competition,
+        rounds,
+        items,
+        participants,
+        payout_rules,
+        item_results,
+        refresh,
+    } = useCalcuttaCompetition(calcutta_competition_id);
+
+    const participantIds = useMemo(() => participants.map(p => p.player_id), [participants]);
+    const { players: enrichedPlayers } = useCalcuttaPlayers(participantIds);
+    const { images: itemImages } = useCalcuttaItemImages(items);
+    const { roundSummaries } = useCalcuttaResults(rounds, items, item_results, payout_rules);
+
+    const { presence, socketState } = useCalcuttaSocket(
+        calcutta_competition_id,
+        access_token,
+        device_id,
+        { username: player_username, profile_pic: player_profile_pic },
+    );
+
+    // Derived data
+    const isAdmin = player_id != null && competition?.admin_id == player_id;
+    const myItems = useMemo(() =>
+        items.filter(i => i.winning_player_id == player_id).sort((a, b) => Number(b.winning_bid || 0) - Number(a.winning_bid || 0)),
+        [items, player_id]
+    );
+    const totalPot = useMemo(() =>
+        items.filter(i => i.status === 'sold').reduce((sum, i) => sum + Number(i.winning_bid || 0), 0) || Number(competition?.total_pot) || 0,
+        [items, competition?.total_pot]
+    );
+    const myTotalSpent = useMemo(() => myItems.reduce((sum, i) => sum + Number(i.winning_bid || 0), 0), [myItems]);
+    const myTotalEarned = useMemo(() => {
+        if (!player_id) return 0;
+        return item_results
+            .filter(r => {
+                const item = items.find(i => i.calcutta_auction_item_id === r.calcutta_auction_item_id);
+                return item?.winning_player_id == player_id;
+            })
+            .reduce((sum, r) => sum + Number(r.payout_earned || 0), 0);
+    }, [item_results, items, player_id]);
+
+    const statusLabel = competition?.status === 'closed' ? 'Completed'
+        : competition?.status === 'inprogress' ? 'In Progress'
+        : 'Auction Closed';
+    const statusColor = competition?.status === 'closed' ? '#6B7280'
+        : competition?.status === 'inprogress' ? '#8B5CF6'
+        : '#F59E0B';
+
+    // Sorted leaderboard
+    const leaderboard = useMemo(() =>
+        [...participants].sort((a, b) => {
+            if (a.place && b.place) return a.place - b.place;
+            if (a.place) return -1;
+            if (b.place) return 1;
+            return Number(b.total_winnings) - Number(a.total_winnings);
+        }),
+        [participants]
+    );
+
+    // Expandable rounds
+    const [expandedRound, setExpandedRound] = useState<number | null>(null);
+
+    // Item search
+    const [itemSearch, setItemSearch] = useState('');
+    const filteredItems = useMemo(() => {
+        if (!itemSearch.trim()) return items;
+        const q = itemSearch.toLowerCase();
+        return items.filter(i => {
+            if (i.item_name.toLowerCase().includes(q)) return true;
+            if (i.winning_player_id) {
+                const owner = enrichedPlayers[i.winning_player_id];
+                if ((owner?.username || '').toLowerCase().includes(q)) return true;
+            }
+            return false;
+        });
+    }, [items, itemSearch, enrichedPlayers]);
+
+    if (loading && !competition) {
+        return (
+            <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.base, alignItems: 'center', justifyContent: 'center' }]}>
+                <Text variant="body" color="secondary">Loading...</Text>
+            </View>
+        );
+    }
+
+    if (!competition) {
+        return (
+            <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.base, alignItems: 'center', justifyContent: 'center' }]}>
+                <Text variant="body" color="secondary">Competition not found</Text>
+            </View>
+        );
+    }
+
+    const marketType = competition.market_type;
+    const isSweepstakes = competition.auction_type === 'sweepstakes';
+
+    // ═══ RENDER HELPERS ═══
+
+    const renderHeader = () => (
+        <View variant="transparent" style={{ paddingHorizontal: 16, paddingVertical: 12 }}>
+            <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: statusColor + '20', paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12 }}>
+                    <View variant="transparent" style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: statusColor, marginRight: 6 }} />
+                    <Text variant="caption" bold style={{ color: statusColor, fontSize: 11, lineHeight: 15 }}>{statusLabel}</Text>
+                </View>
+                <Text variant="caption" color="tertiary" style={{ marginLeft: 8 }}>
+                    {isSweepstakes ? 'Sweepstakes' : competition.auction_type === 'live' ? 'Live Auction' : 'Sealed Bid'}
+                </Text>
+                <View variant="transparent" style={{ flex: 1 }} />
+                {isAdmin && onManage && (
+                    <TouchableOpacity
+                        onPress={onManage}
+                        style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.surface.elevated, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 8, borderWidth: 1, borderColor: theme.colors.border.subtle }}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="settings-outline" size={14} color={theme.colors.text.secondary} />
+                        <Text variant="caption" color="secondary" style={{ marginLeft: 4 }}>Manage</Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+            <Text variant="h3" bold style={{ marginTop: 8 }}>{competition.competition_name}</Text>
+            {competition.competition_description ? (
+                <Text variant="caption" color="secondary" style={{ marginTop: 4 }}>{competition.competition_description}</Text>
+            ) : null}
+        </View>
+    );
+
+    const renderMyItems = () => {
+        if (myItems.length === 0) return null;
+        return (
+            <View variant="transparent" style={{ paddingHorizontal: 16 }}>
+                <Text variant="caption" bold color="tertiary" style={styles.sectionLabel}>
+                    Your Items ({myItems.length})
+                </Text>
+                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
+                    {myItems.map(mi => {
+                        const imgUrl = resolveItemImageUrl(mi.item_image) || itemImages[mi.item_id]?.url;
+                        const isEliminated = mi.status === 'eliminated';
+                        return (
+                            <View key={mi.calcutta_auction_item_id} variant="transparent" style={{
+                                backgroundColor: theme.colors.surface.elevated, borderColor: isEliminated ? theme.colors.status.error + '40' : theme.colors.border.subtle,
+                                borderWidth: 1, borderRadius: 10, padding: 10, alignItems: 'center', width: 110, opacity: isEliminated ? 0.6 : 1,
+                            }}>
+                                {imgUrl ? (
+                                    <Image source={{ uri: imgUrl }} style={{ width: 40, height: 40, borderRadius: 8, marginBottom: 6 }} resizeMode="cover" />
+                                ) : (
+                                    <Ionicons name="trophy" size={24} color={isEliminated ? theme.colors.text.tertiary : theme.colors.primary.default} style={{ marginBottom: 6 }} />
+                                )}
+                                <Text variant="caption" bold numberOfLines={2} style={{ textAlign: 'center', fontSize: 12, lineHeight: 16 }}>{mi.item_name}</Text>
+                                {mi.seed != null && <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>#{mi.seed}</Text>}
+                                {Number(mi.winning_bid) > 0 && !isSweepstakes && (
+                                    <Text variant="caption" bold style={{ color: '#10B981', marginTop: 2, fontSize: 11, lineHeight: 15 }}>{formatCurrency(mi.winning_bid, marketType)}</Text>
+                                )}
+                                {isEliminated && (
+                                    <Text variant="caption" style={{ color: theme.colors.status.error, fontSize: 9, lineHeight: 12, marginTop: 2 }}>Eliminated</Text>
+                                )}
+                            </View>
+                        );
+                    })}
+                </ScrollView>
+            </View>
+        );
+    };
+
+    const renderPotKPIs = () => (
+        <View variant="transparent" style={{ flexDirection: 'row', paddingHorizontal: 16, paddingVertical: 8, gap: 10 }}>
+            {!isSweepstakes && (
+                <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>Pot</Text>
+                    <Text variant="h3" bold style={{ color: '#F59E0B' }}>{formatCurrency(totalPot, marketType)}</Text>
+                </View>
+            )}
+            {!isSweepstakes && myTotalSpent > 0 && (
+                <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>You Spent</Text>
+                    <Text variant="h3" bold>{formatCurrency(myTotalSpent, marketType)}</Text>
+                </View>
+            )}
+            {myTotalEarned > 0 && (
+                <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>You Earned</Text>
+                    <Text variant="h3" bold style={{ color: '#10B981' }}>{formatCurrency(myTotalEarned, marketType)}</Text>
+                </View>
+            )}
+            <View variant="transparent" style={[styles.kpiCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>Players</Text>
+                <Text variant="h3" bold>{participants.length}</Text>
+            </View>
+        </View>
+    );
+
+    const renderRounds = () => {
+        if (roundSummaries.length === 0) return null;
+        const sortedRounds = [...roundSummaries].sort((a, b) => a.round.round_number - b.round.round_number);
+        return (
+            <View variant="transparent" style={{ paddingHorizontal: 16 }}>
+                <Text variant="caption" bold color="tertiary" style={styles.sectionLabel}>Rounds</Text>
+                {sortedRounds.map(rs => {
+                    const isExpanded = expandedRound === rs.round.round_number;
+                    const isClosed = rs.round.status === 'closed';
+                    return (
+                        <TouchableOpacity
+                            key={rs.round.calcutta_round_id}
+                            style={[styles.roundCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}
+                            onPress={() => setExpandedRound(isExpanded ? null : rs.round.round_number)}
+                            activeOpacity={0.7}
+                        >
+                            <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                <Ionicons name={isClosed ? 'checkmark-circle' : 'ellipse-outline'} size={16} color={isClosed ? '#10B981' : theme.colors.text.tertiary} />
+                                <Text variant="body" bold style={{ flex: 1, marginLeft: 8 }}>{rs.round.round_name}</Text>
+                                {rs.payout_rule && (
+                                    <Text variant="caption" bold style={{ color: '#F59E0B' }}>{rs.payout_rule.payout_pct}%</Text>
+                                )}
+                                {rs.total_payout > 0 && (
+                                    <Text variant="caption" bold style={{ color: '#10B981', marginLeft: 8 }}>{formatCurrency(rs.total_payout, marketType)}</Text>
+                                )}
+                                <Ionicons name={isExpanded ? 'chevron-up' : 'chevron-down'} size={14} color={theme.colors.text.tertiary} style={{ marginLeft: 8 }} />
+                            </View>
+                            {!isExpanded && isClosed && (
+                                <Text variant="caption" color="tertiary" style={{ marginTop: 4, fontSize: 11, lineHeight: 15 }}>
+                                    {rs.advanced_items.length} advanced · {rs.eliminated_items.length} eliminated
+                                </Text>
+                            )}
+                            {isExpanded && (
+                                <View variant="transparent" style={{ marginTop: 10 }}>
+                                    {rs.advanced_items.length > 0 && (
+                                        <>
+                                            <Text variant="caption" bold style={{ color: '#10B981', marginBottom: 4, fontSize: 10, lineHeight: 13 }}>ADVANCED ({rs.advanced_items.length})</Text>
+                                            {rs.advanced_items.map(item => {
+                                                const isMe = item.winning_player_id == player_id;
+                                                return (
+                                                    <View key={item.calcutta_auction_item_id} variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 3 }}>
+                                                        <Ionicons name="checkmark-circle" size={12} color="#10B981" />
+                                                        <Text variant="caption" style={{ marginLeft: 6, flex: 1 }}>{item.item_name}</Text>
+                                                        {isMe && <Text variant="caption" bold style={{ color: '#10B981', fontSize: 10, lineHeight: 13 }}>YOU</Text>}
+                                                    </View>
+                                                );
+                                            })}
+                                        </>
+                                    )}
+                                    {rs.eliminated_items.length > 0 && (
+                                        <>
+                                            <Text variant="caption" bold style={{ color: theme.colors.status.error, marginTop: 8, marginBottom: 4, fontSize: 10, lineHeight: 13 }}>ELIMINATED ({rs.eliminated_items.length})</Text>
+                                            {rs.eliminated_items.map(item => {
+                                                const isMe = item.winning_player_id == player_id;
+                                                return (
+                                                    <View key={item.calcutta_auction_item_id} variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 3, opacity: 0.6 }}>
+                                                        <Ionicons name="close-circle" size={12} color={theme.colors.status.error} />
+                                                        <Text variant="caption" style={{ marginLeft: 6, flex: 1 }}>{item.item_name}</Text>
+                                                        {isMe && <Text variant="caption" bold style={{ color: theme.colors.status.error, fontSize: 10, lineHeight: 13 }}>YOU</Text>}
+                                                    </View>
+                                                );
+                                            })}
+                                        </>
+                                    )}
+                                    {rs.prize_description && (
+                                        <View variant="transparent" style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center' }}>
+                                            <Ionicons name="gift" size={14} color="#8B5CF6" />
+                                            <Text variant="caption" style={{ marginLeft: 6, color: '#8B5CF6' }}>{rs.prize_description}</Text>
+                                        </View>
+                                    )}
+                                </View>
+                            )}
+                        </TouchableOpacity>
+                    );
+                })}
+            </View>
+        );
+    };
+
+    const renderLeaderboard = () => (
+        <View variant="transparent" style={{ paddingHorizontal: 16 }}>
+            <Text variant="caption" bold color="tertiary" style={styles.sectionLabel}>Leaderboard</Text>
+            {leaderboard.map((p, i) => {
+                const profile = enrichedPlayers[p.player_id];
+                const username = profile?.username || profile?.show_name || `Player`;
+                const profilePic = profile?.profile_pic;
+                const isMe = p.player_id == player_id;
+                const medals = ['🥇', '🥈', '🥉'];
+                return (
+                    <View key={p.calcutta_participant_id} variant="transparent" style={[styles.leaderRow, { borderColor: theme.colors.border.subtle }]}>
+                        <Text style={{ width: 28, textAlign: 'center', fontSize: 14, lineHeight: 19 }}>{i < 3 ? medals[i] : `${i + 1}`}</Text>
+                        {profilePic ? (
+                            <Image source={{ uri: profilePic }} style={{ width: 28, height: 28, borderRadius: 14 }} />
+                        ) : (
+                            <View variant="transparent" style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: isMe ? '#10B98120' : theme.colors.primary.subtle, alignItems: 'center', justifyContent: 'center' }}>
+                                <Text variant="caption" bold style={{ fontSize: 12, lineHeight: 16, color: isMe ? '#10B981' : theme.colors.primary.default }}>{username.charAt(0).toUpperCase()}</Text>
+                            </View>
+                        )}
+                        <View variant="transparent" style={{ flex: 1, marginLeft: 8 }}>
+                            <Text variant="body" bold={isMe} style={isMe ? { color: '#10B981' } : undefined}>{isMe ? 'You' : username}</Text>
+                            <Text variant="caption" color="tertiary">{p.items_owned} item{p.items_owned !== 1 ? 's' : ''}</Text>
+                        </View>
+                        {Number(p.total_winnings) > 0 && (
+                            <Text variant="caption" bold style={{ color: '#10B981' }}>{formatCurrency(p.total_winnings, marketType)}</Text>
+                        )}
+                    </View>
+                );
+            })}
+        </View>
+    );
+
+    const renderAllItems = () => (
+        <View variant="transparent" style={{ paddingHorizontal: 16, paddingBottom: 40 }}>
+            <Text variant="caption" bold color="tertiary" style={styles.sectionLabel}>All Items ({items.length})</Text>
+            {filteredItems.map(item => {
+                const imgUrl = resolveItemImageUrl(item.item_image) || itemImages[item.item_id]?.url;
+                const owner = item.winning_player_id ? enrichedPlayers[item.winning_player_id] : undefined;
+                const ownerName = owner?.username || owner?.show_name;
+                const isMe = item.winning_player_id == player_id;
+                return (
+                    <View key={item.calcutta_auction_item_id} variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderColor: theme.colors.border.subtle }}>
+                        {imgUrl ? (
+                            <Image source={{ uri: imgUrl }} style={{ width: 28, height: 28, borderRadius: 6 }} resizeMode="cover" />
+                        ) : (
+                            <View variant="transparent" style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: theme.colors.surface.elevated, alignItems: 'center', justifyContent: 'center' }}>
+                                <Ionicons name="trophy-outline" size={14} color={theme.colors.text.tertiary} />
+                            </View>
+                        )}
+                        <View variant="transparent" style={{ marginLeft: 8, flex: 1 }}>
+                            <Text variant="body">{item.item_name}</Text>
+                            <Text variant="caption" color="tertiary">
+                                {ownerName ? (isMe ? 'You' : ownerName) : 'Unowned'}
+                                {item.status === 'eliminated' ? ' · Eliminated' : item.status === 'sold' ? '' : ` · ${getStatusLabel(item.status)}`}
+                            </Text>
+                        </View>
+                        {Number(item.winning_bid) > 0 && !isSweepstakes && (
+                            <Text variant="caption" bold>{formatCurrency(item.winning_bid, marketType)}</Text>
+                        )}
+                        {isMe && <Text variant="caption" bold style={{ color: '#10B981', marginLeft: 6, fontSize: 10, lineHeight: 13 }}>YOU</Text>}
+                    </View>
+                );
+            })}
+        </View>
+    );
+
+    // ═══ RENDER ═══
+
+    return (
+        <View variant="transparent" style={[styles.container, { backgroundColor: theme.colors.surface.base }]} onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}>
+            {isDesktop ? (
+                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ padding: 12, paddingBottom: 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled">
+                    {renderHeader()}
+                    {renderMyItems()}
+                    {renderPotKPIs()}
+
+                    <View variant="transparent" style={{ flexDirection: 'row', gap: 12, marginTop: 12, paddingHorizontal: 4 }}>
+                        {/* Left: Rounds */}
+                        <View variant="transparent" style={[styles.panel, { flex: 3, backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                            <ScrollView nestedScrollEnabled showsVerticalScrollIndicator={false}>
+                                {renderRounds()}
+                            </ScrollView>
+                        </View>
+
+                        {/* Right: Leaderboard */}
+                        <View variant="transparent" style={[styles.panel, { flex: 2, backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                            <ScrollView nestedScrollEnabled showsVerticalScrollIndicator={false}>
+                                {renderLeaderboard()}
+                            </ScrollView>
+                        </View>
+                    </View>
+
+                    <View variant="transparent" style={[styles.panel, { marginTop: 12, marginHorizontal: 4, backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                        <ScrollView nestedScrollEnabled showsVerticalScrollIndicator={false} style={{ maxHeight: 400 }}>
+                            {renderAllItems()}
+                        </ScrollView>
+                    </View>
+                </ScrollView>
+            ) : (
+                <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface.base }} contentContainerStyle={{ paddingBottom: Platform.OS === 'web' ? 300 : 40, backgroundColor: theme.colors.surface.base }} keyboardShouldPersistTaps="handled">
+                    {renderHeader()}
+                    {renderMyItems()}
+                    {renderPotKPIs()}
+                    {renderRounds()}
+                    {renderLeaderboard()}
+                    {renderAllItems()}
+                </ScrollView>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    sectionLabel: {
+        textTransform: 'uppercase',
+        letterSpacing: 1,
+        fontSize: 10,
+        lineHeight: 13,
+        marginBottom: 8,
+        marginTop: 16,
+    },
+    kpiCard: {
+        flex: 1,
+        borderRadius: 10,
+        padding: 10,
+        alignItems: 'center',
+        borderWidth: 1,
+    },
+    roundCard: {
+        borderRadius: 10,
+        borderWidth: 1,
+        padding: 12,
+        marginBottom: 8,
+    },
+    leaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8,
+        borderBottomWidth: 1,
+    },
+    panel: {
+        borderRadius: 12,
+        borderWidth: 1,
+        padding: 8,
+    },
+});