@bettoredge/calcutta 0.2.0

package/src/components/CalcuttaDetail.tsx

@@ -0,0 +1,377 @@
+import React, { useState, useMemo } from 'react';
+import { StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Image, FlatList } 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 { formatCurrency, getStatusLabel } from '../helpers/formatting';
+
+export interface CalcuttaDetailProps {
+    calcutta_competition_id: string;
+    player_id?: string;
+    onClose: () => void;
+    onJoin?: () => Promise<void>;
+    onLeave?: () => Promise<void>;
+    onShare?: () => void;
+    onManage?: () => void;
+}
+
+const getStatusConfig = (status: string) => {
+    switch (status) {
+        case 'pending': return { label: 'Pending', color: '#F59E0B', bg: '#F59E0B15' };
+        case 'scheduled': return { label: 'Open to Join', color: '#3B82F6', bg: '#3B82F615' };
+        case 'auction_open': return { label: 'Auction Live', color: '#10B981', bg: '#10B98115' };
+        case 'inprogress': return { label: 'In Progress', color: '#8B5CF6', bg: '#8B5CF615' };
+        case 'closed': return { label: 'Completed', color: '#6B7280', bg: '#6B728015' };
+        default: return { label: status, color: '#6B7280', bg: '#6B728015' };
+    }
+};
+
+export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
+    calcutta_competition_id,
+    player_id,
+    onClose,
+    onJoin,
+    onLeave,
+    onShare,
+    onManage,
+}) => {
+    const { theme } = useTheme();
+    const {
+        loading,
+        competition,
+        rounds,
+        items,
+        participants,
+        payout_rules,
+        refresh,
+    } = useCalcuttaCompetition(calcutta_competition_id);
+
+    const participantIds = useMemo(() => participants.map(p => p.player_id), [participants]);
+    const { players: enrichedPlayers } = useCalcuttaPlayers(participantIds);
+
+    const [joining, setJoining] = useState(false);
+    const [leaving, setLeaving] = useState(false);
+
+    if (loading && !competition) {
+        return (
+            <View variant="transparent" style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color={theme.colors.primary.default} />
+            </View>
+        );
+    }
+
+    if (!competition) {
+        return (
+            <View variant="transparent" style={styles.loadingContainer}>
+                <Text variant="body" color="secondary">Competition not found</Text>
+            </View>
+        );
+    }
+
+    const statusConfig = getStatusConfig(competition.status);
+    const isAdmin = player_id != null && player_id == competition.admin_id;
+    const hasJoined = participants.some(p => p.player_id == player_id);
+    const entryFee = Number(competition.entry_fee) || 0;
+    const isFree = entryFee === 0;
+    const isJoinable = ['scheduled', 'auction_open'].includes(competition.status);
+    const totalPot = Number(competition.total_pot) || 0;
+    const canLeave = hasJoined && ['pending', 'scheduled'].includes(competition.status);
+    const heroImage = competition.image?.url;
+
+    const sections = [
+        { key: 'hero' },
+        { key: 'info' },
+        { key: 'stats' },
+        { key: 'cta' },
+        { key: 'payouts' },
+        { key: 'items-header' },
+        { key: 'items' },
+        { key: 'participants-header' },
+        { key: 'participants' },
+    ];
+
+    const renderSection = ({ item }: { item: { key: string } }) => {
+        switch (item.key) {
+            case 'hero':
+                return heroImage ? (
+                    <Image source={{ uri: heroImage }} style={styles.heroImage} resizeMode="cover" />
+                ) : (
+                    <View variant="transparent" style={[styles.heroPlaceholder, { backgroundColor: theme.colors.surface.elevated }]}>
+                        <Ionicons name="hammer-outline" size={48} color={theme.colors.text.tertiary} />
+                    </View>
+                );
+
+            case 'info':
+                return (
+                    <View variant="transparent" style={styles.infoSection}>
+                        <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 6 }}>
+                            <View variant="transparent" style={[styles.statusBadge, { backgroundColor: statusConfig.bg }]}>
+                                <View variant="transparent" style={[styles.statusDot, { backgroundColor: statusConfig.color }]} />
+                                <Text variant="caption" bold style={{ color: statusConfig.color }}>{statusConfig.label}</Text>
+                            </View>
+                            <Text variant="caption" color="tertiary" style={{ marginLeft: 8 }}>
+                                {competition.auction_type === 'live' ? 'Live Auction' : 'Sealed Bid'}
+                            </Text>
+                        </View>
+                        <Text variant="h3" bold>{competition.competition_name}</Text>
+                        {competition.competition_description ? (
+                            <Text variant="body" color="secondary" style={{ marginTop: 4 }}>{competition.competition_description}</Text>
+                        ) : null}
+                        {competition.competition_code ? (
+                            <View variant="transparent" style={[styles.codeChip, { backgroundColor: theme.colors.primary.subtle }]}>
+                                <Ionicons name="key-outline" size={12} color={theme.colors.primary.default} />
+                                <Text variant="caption" bold style={{ color: theme.colors.primary.default, marginLeft: 4 }}>{competition.competition_code}</Text>
+                            </View>
+                        ) : null}
+                    </View>
+                );
+
+            case 'stats':
+                return (
+                    <View variant="transparent" style={[styles.statsGrid, { borderColor: theme.colors.border.subtle }]}>
+                        <View variant="transparent" style={styles.statBox}>
+                            <Text variant="caption" color="tertiary">Entry Fee</Text>
+                            <Text variant="body" bold>{isFree ? 'FREE' : formatCurrency(entryFee, competition.market_type)}</Text>
+                        </View>
+                        <View variant="transparent" style={[styles.statBox, { borderLeftWidth: 1, borderColor: theme.colors.border.subtle }]}>
+                            <Text variant="caption" color="tertiary">Pot</Text>
+                            <Text variant="body" bold>{formatCurrency(totalPot, competition.market_type)}</Text>
+                        </View>
+                        <View variant="transparent" style={[styles.statBox, { borderLeftWidth: 1, borderColor: theme.colors.border.subtle }]}>
+                            <Text variant="caption" color="tertiary">Players</Text>
+                            <Text variant="body" bold>{participants.length}{competition.max_participants > 0 ? `/${competition.max_participants}` : ''}</Text>
+                        </View>
+                        <View variant="transparent" style={[styles.statBox, { borderLeftWidth: 1, borderColor: theme.colors.border.subtle }]}>
+                            <Text variant="caption" color="tertiary">Items</Text>
+                            <Text variant="body" bold>{items.length}</Text>
+                        </View>
+                    </View>
+                );
+
+            case 'cta':
+                return (
+                    <View variant="transparent" style={styles.ctaSection}>
+                        {/* Admin manage button */}
+                        {isAdmin && onManage && ['pending', 'scheduled'].includes(competition.status) && (
+                            <TouchableOpacity onPress={onManage} style={[styles.ctaButton, { backgroundColor: theme.colors.primary.default }]}>
+                                <Ionicons name="settings-outline" size={18} color="#FFF" />
+                                <Text variant="body" bold style={{ color: '#FFF', marginLeft: 8 }}>Manage Competition</Text>
+                            </TouchableOpacity>
+                        )}
+
+                        {/* Join button */}
+                        {isJoinable && !hasJoined && onJoin && (
+                            <TouchableOpacity
+                                onPress={async () => {
+                                    setJoining(true);
+                                    try {
+                                        await onJoin();
+                                        await refresh();
+                                    } catch {}
+                                    setJoining(false);
+                                }}
+                                disabled={joining}
+                                style={[styles.ctaButton, { backgroundColor: '#10B981', opacity: joining ? 0.7 : 1 }]}
+                            >
+                                {joining ? (
+                                    <ActivityIndicator size="small" color="#FFF" />
+                                ) : (
+                                    <Text variant="body" bold style={{ color: '#FFF' }}>
+                                        {isFree ? 'Join - Free!' : `Join - ${formatCurrency(entryFee, competition.market_type)}`}
+                                    </Text>
+                                )}
+                            </TouchableOpacity>
+                        )}
+
+                        {/* Already joined badge + leave */}
+                        {hasJoined && (
+                            <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                                <View variant="transparent" style={[styles.joinedBadge, { flex: 1, backgroundColor: '#10B98115' }]}>
+                                    <Ionicons name="checkmark-circle" size={16} color="#10B981" />
+                                    <Text variant="caption" bold style={{ color: '#10B981', marginLeft: 6 }}>You're in!</Text>
+                                </View>
+                                {onLeave && canLeave && (
+                                    <TouchableOpacity
+                                        onPress={async () => {
+                                            setLeaving(true);
+                                            try {
+                                                await onLeave();
+                                                await refresh();
+                                            } catch {}
+                                            setLeaving(false);
+                                        }}
+                                        disabled={leaving}
+                                        style={[styles.ctaButtonOutline, { borderColor: theme.colors.status.error, paddingHorizontal: 16, opacity: leaving ? 0.7 : 1 }]}
+                                    >
+                                        {leaving ? (
+                                            <ActivityIndicator size="small" color={theme.colors.status.error} />
+                                        ) : (
+                                            <Text variant="caption" bold style={{ color: theme.colors.status.error }}>Leave</Text>
+                                        )}
+                                    </TouchableOpacity>
+                                )}
+                            </View>
+                        )}
+
+                        {/* Share button */}
+                        {onShare && (
+                            <TouchableOpacity onPress={onShare} style={[styles.ctaButtonOutline, { borderColor: theme.colors.border.subtle }]}>
+                                <Ionicons name="share-outline" size={16} color={theme.colors.text.secondary} />
+                                <Text variant="caption" bold color="secondary" style={{ marginLeft: 6 }}>Share</Text>
+                            </TouchableOpacity>
+                        )}
+                    </View>
+                );
+
+            case 'payouts':
+                if (payout_rules.length === 0) return null;
+                return (
+                    <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle }]}>
+                        <Text variant="body" bold style={styles.sectionTitle}>Payout Structure</Text>
+                        {payout_rules.map((rule, i) => {
+                            const round = rounds.find(r => r.round_number === rule.round_number);
+                            const pct = Number(rule.payout_pct);
+                            const amount = totalPot > 0 ? (pct / 100) * totalPot : 0;
+                            return (
+                                <View key={rule.calcutta_payout_rule_id || `rule-${i}`} variant="transparent" style={[styles.payoutRow, i < payout_rules.length - 1 && { borderBottomWidth: 1, borderColor: theme.colors.border.subtle }]}>
+                                    <View variant="transparent" style={{ flex: 1 }}>
+                                        <Text variant="body">{rule.description || round?.round_name || `Round ${rule.round_number}`}</Text>
+                                    </View>
+                                    <Text variant="body" bold>{pct}%</Text>
+                                    {totalPot > 0 && (
+                                        <Text variant="caption" color="tertiary" style={{ marginLeft: 8, minWidth: 60, textAlign: 'right' }}>
+                                            {formatCurrency(amount, competition.market_type)}
+                                        </Text>
+                                    )}
+                                </View>
+                            );
+                        })}
+                    </View>
+                );
+
+            case 'items-header':
+                if (items.length === 0) return null;
+                return (
+                    <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle, paddingBottom: 0 }]}>
+                        <Text variant="body" bold style={styles.sectionTitle}>Auction Items ({items.length})</Text>
+                    </View>
+                );
+
+            case 'items':
+                if (items.length === 0) return null;
+                return (
+                    <View variant="transparent" style={{ paddingHorizontal: 16 }}>
+                        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                            {items.map(item => (
+                                <View key={item.calcutta_auction_item_id} variant="transparent" style={[styles.itemChip, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                                    <Text variant="caption" bold numberOfLines={1}>{item.item_name}</Text>
+                                    {item.seed != null && <Text variant="caption" color="tertiary" style={{ fontSize: 10 }}>#{item.seed}</Text>}
+                                </View>
+                            ))}
+                        </ScrollView>
+                    </View>
+                );
+
+            case 'participants-header':
+                return (
+                    <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle, paddingBottom: 0 }]}>
+                        <Text variant="body" bold style={styles.sectionTitle}>
+                            Players ({participants.length})
+                        </Text>
+                    </View>
+                );
+
+            case 'participants':
+                if (participants.length === 0) {
+                    return (
+                        <View variant="transparent" style={{ padding: 20, alignItems: 'center' }}>
+                            <Ionicons name="people-outline" size={32} color={theme.colors.text.tertiary} />
+                            <Text variant="caption" color="tertiary" style={{ marginTop: 8 }}>No players yet. Share the code to invite friends!</Text>
+                        </View>
+                    );
+                }
+                return (
+                    <View variant="transparent" style={{ paddingHorizontal: 16, paddingBottom: 40 }}>
+                        {participants.map((p, i) => {
+                            const enriched = enrichedPlayers[p.player_id];
+                            const username = enriched?.username || enriched?.show_name || `Player ${p.player_id.slice(0, 6)}`;
+                            const profilePic = enriched?.profile_pic;
+                            return (
+                                <View key={p.calcutta_participant_id} variant="transparent" style={[styles.participantRow, i < participants.length - 1 && { borderBottomWidth: 1, borderColor: theme.colors.border.subtle }]}>
+                                    {profilePic ? (
+                                        <Image source={{ uri: profilePic }} style={[styles.avatarCircle, { overflow: 'hidden' }]} />
+                                    ) : (
+                                        <View variant="transparent" style={[styles.avatarCircle, { backgroundColor: theme.colors.primary.subtle }]}>
+                                            <Text variant="caption" bold style={{ color: theme.colors.primary.default }}>
+                                                {username.charAt(0).toUpperCase()}
+                                            </Text>
+                                        </View>
+                                    )}
+                                    <View variant="transparent" style={{ flex: 1 }}>
+                                        <Text variant="body">{username}</Text>
+                                        <Text variant="caption" color="tertiary">
+                                            {p.items_owned > 0 ? `${p.items_owned} items \u00B7 ${formatCurrency(p.total_spent, competition.market_type)} spent` : 'Joined'}
+                                        </Text>
+                                    </View>
+                                    {p.player_id == player_id && (
+                                        <View variant="transparent" style={[styles.youBadge, { backgroundColor: theme.colors.primary.subtle }]}>
+                                            <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 10 }}>YOU</Text>
+                                        </View>
+                                    )}
+                                </View>
+                            );
+                        })}
+                    </View>
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <View variant="transparent" style={styles.container}>
+            {/* Header bar */}
+            <View variant="transparent" style={[styles.headerBar, { borderColor: theme.colors.border.subtle }]}>
+                <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                    <Ionicons name="arrow-back" size={24} color={theme.colors.text.primary} />
+                </TouchableOpacity>
+                <Text variant="body" bold style={{ flex: 1, marginLeft: 12 }} numberOfLines={1}>{competition.competition_name}</Text>
+            </View>
+
+            <FlatList
+                data={sections}
+                keyExtractor={(item) => item.key}
+                renderItem={renderSection}
+                showsVerticalScrollIndicator={false}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    loadingContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 40 },
+    headerBar: { flexDirection: 'row', alignItems: 'center', padding: 12, borderBottomWidth: 1 },
+    heroImage: { width: '100%', height: 180 },
+    heroPlaceholder: { width: '100%', height: 140, alignItems: 'center', justifyContent: 'center' },
+    infoSection: { padding: 16 },
+    statusBadge: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12 },
+    statusDot: { width: 6, height: 6, borderRadius: 3, marginRight: 6 },
+    codeChip: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', paddingHorizontal: 10, paddingVertical: 5, borderRadius: 12, marginTop: 10 },
+    statsGrid: { flexDirection: 'row', borderTopWidth: 1, borderBottomWidth: 1 },
+    statBox: { flex: 1, alignItems: 'center', paddingVertical: 12 },
+    ctaSection: { padding: 16, gap: 10 },
+    ctaButton: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 14, borderRadius: 10 },
+    ctaButtonOutline: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 10, borderRadius: 10, borderWidth: 1 },
+    joinedBadge: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 10, borderRadius: 10 },
+    section: { padding: 16, borderTopWidth: 1 },
+    sectionTitle: { marginBottom: 10 },
+    payoutRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10 },
+    itemChip: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8, borderWidth: 1, marginRight: 8, minWidth: 80, alignItems: 'center' },
+    participantRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10 },
+    avatarCircle: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', marginRight: 10 },
+    youBadge: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: 8 },
+});