@bettoredge/calcutta 0.2.0

package/src/components/sealed/SealedBidInfoTab.tsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, Image, ScrollView, Share } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type {
+    CalcuttaCompetitionProps,
+    CalcuttaRoundProps,
+    CalcuttaPayoutRuleProps,
+    CalcuttaEscrowProps,
+} from '@bettoredge/types';
+import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';
+import { canManageEscrow } from '../../helpers/lifecycleState';
+import { formatCurrency } from '../../helpers/formatting';
+import { CalcuttaEscrow } from '../CalcuttaEscrow';
+
+interface SealedBidInfoTabProps {
+    competition: CalcuttaCompetitionProps;
+    rounds: CalcuttaRoundProps[];
+    payout_rules: CalcuttaPayoutRuleProps[];
+    escrow?: CalcuttaEscrowProps;
+    market_type: string;
+    player_balance?: number;
+    onDepositFunds?: (amount: number) => void;
+    onEscrowUpdate: () => void;
+    lifecycleState: CalcuttaLifecycleState;
+}
+
+export const SealedBidInfoTab: React.FC<SealedBidInfoTabProps> = ({
+    competition,
+    rounds,
+    payout_rules,
+    escrow,
+    market_type,
+    player_balance,
+    onDepositFunds,
+    onEscrowUpdate,
+    lifecycleState,
+}) => {
+    const { theme } = useTheme();
+    const totalPot = Number(competition.total_pot) || 0;
+    const escrowInteractive = canManageEscrow(lifecycleState);
+    const showEscrow = lifecycleState !== 'pending';
+
+    const handleCopyCode = () => {
+        // Copy is handled by the share flow or parent component
+    };
+
+    const handleShare = async () => {
+        try {
+            const msg = competition.competition_code
+                ? `Join my Calcutta auction "${competition.competition_name}"! Code: ${competition.competition_code}`
+                : `Check out the Calcutta auction "${competition.competition_name}" on BettorEdge!`;
+            await Share.share({ message: msg });
+        } catch {}
+    };
+
+    return (
+        <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+            {/* Hero image */}
+            {competition.image?.url ? (
+                <Image source={{ uri: competition.image.url }} 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>
+            )}
+
+            {/* Name + description */}
+            <View variant="transparent" style={styles.section}>
+                <Text variant="h3" bold>{competition.competition_name}</Text>
+                {competition.competition_description ? (
+                    <Text variant="body" color="secondary" style={{ marginTop: 6 }}>{competition.competition_description}</Text>
+                ) : null}
+            </View>
+
+            {/* Payout structure */}
+            {payout_rules.length > 0 && (
+                <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle }]}>
+                    <Text variant="body" bold style={{ marginBottom: 8 }}>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 }]}
+                            >
+                                <Text variant="body" style={{ flex: 1 }}>
+                                    {rule.description || round?.round_name || `Round ${rule.round_number}`}
+                                </Text>
+                                <Text variant="body" bold>{pct}%</Text>
+                                {totalPot > 0 && (
+                                    <Text variant="caption" color="tertiary" style={{ marginLeft: 8, minWidth: 60, textAlign: 'right' }}>
+                                        {formatCurrency(amount, market_type)}
+                                    </Text>
+                                )}
+                            </View>
+                        );
+                    })}
+                </View>
+            )}
+
+            {/* Rules card */}
+            {(competition.min_bid > 0 || competition.bid_increment > 0 || competition.max_escrow || competition.min_spend_pct) && (
+                <View variant="transparent" style={[styles.rulesCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
+                    <Text variant="body" bold style={{ marginBottom: 8 }}>Rules</Text>
+                    {competition.min_bid > 0 && (
+                        <Text variant="caption" color="secondary" style={styles.ruleItem}>
+                            Min Bid: {formatCurrency(competition.min_bid, market_type)}
+                        </Text>
+                    )}
+                    {competition.bid_increment > 0 && (
+                        <Text variant="caption" color="secondary" style={styles.ruleItem}>
+                            Bid Increment: {formatCurrency(competition.bid_increment, market_type)}
+                        </Text>
+                    )}
+                    {competition.max_escrow != null && Number(competition.max_escrow) > 0 && (
+                        <Text variant="caption" color="secondary" style={styles.ruleItem}>
+                            Budget Cap: {formatCurrency(Number(competition.max_escrow), market_type)}
+                        </Text>
+                    )}
+                    {competition.min_spend_pct != null && Number(competition.min_spend_pct) > 0 && (
+                        <Text variant="caption" color="secondary" style={styles.ruleItem}>
+                            Min Spend: {competition.min_spend_pct}% of deposited funds
+                        </Text>
+                    )}
+                </View>
+            )}
+
+            {/* Rounds */}
+            {rounds.length > 0 && (
+                <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle }]}>
+                    <Text variant="body" bold style={{ marginBottom: 8 }}>Rounds</Text>
+                    {rounds.map(r => (
+                        <View key={r.calcutta_round_id} variant="transparent" style={styles.roundRow}>
+                            <Text variant="caption" color="tertiary" style={{ minWidth: 20 }}>{r.round_number}</Text>
+                            <Text variant="body" style={{ marginLeft: 8 }}>{r.round_name}</Text>
+                        </View>
+                    ))}
+                </View>
+            )}
+
+            {/* Competition code */}
+            {competition.competition_code && (
+                <View variant="transparent" style={styles.section}>
+                    <TouchableOpacity
+                        onPress={handleCopyCode}
+                        style={[styles.codeRow, { backgroundColor: theme.colors.primary.subtle }]}
+                        activeOpacity={0.7}
+                    >
+                        <Ionicons name="key-outline" size={14} color={theme.colors.primary.default} />
+                        <Text variant="body" bold style={{ color: theme.colors.primary.default, marginLeft: 6, flex: 1 }}>
+                            {competition.competition_code}
+                        </Text>
+                        <Ionicons name="copy-outline" size={16} color={theme.colors.primary.default} />
+                    </TouchableOpacity>
+                </View>
+            )}
+
+            {/* Share button */}
+            <View variant="transparent" style={styles.section}>
+                <TouchableOpacity
+                    onPress={handleShare}
+                    style={[styles.shareBtn, { borderColor: theme.colors.border.subtle }]}
+                    activeOpacity={0.7}
+                >
+                    <Ionicons name="share-outline" size={16} color={theme.colors.text.secondary} />
+                    <Text variant="caption" bold color="secondary" style={{ marginLeft: 6 }}>Share</Text>
+                </TouchableOpacity>
+            </View>
+
+            {/* Escrow management — hidden in pending, read-only in tournament/completed */}
+            {showEscrow && (
+                <View variant="transparent" style={[styles.section, { borderColor: theme.colors.border.subtle }]}>
+                    <Text variant="body" bold style={{ marginBottom: 8 }}>Escrow</Text>
+                    <CalcuttaEscrow
+                        calcutta_competition_id={competition.calcutta_competition_id}
+                        escrow={escrow}
+                        market_type={market_type}
+                        max_escrow={competition.max_escrow}
+                        player_balance={player_balance}
+                        onDepositFunds={onDepositFunds}
+                        onUpdate={onEscrowUpdate}
+                        readOnly={!escrowInteractive}
+                    />
+                </View>
+            )}
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    content: {
+        paddingBottom: 60,
+    },
+    heroImage: {
+        width: '100%',
+        height: 180,
+    },
+    heroPlaceholder: {
+        width: '100%',
+        height: 120,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    section: {
+        padding: 16,
+        borderTopWidth: 1,
+    },
+    payoutRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 10,
+    },
+    rulesCard: {
+        margin: 16,
+        marginTop: 0,
+        padding: 14,
+        borderRadius: 10,
+        borderWidth: 1,
+    },
+    ruleItem: {
+        marginBottom: 4,
+    },
+    roundRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+    },
+    codeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        borderRadius: 10,
+    },
+    shareBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 10,
+        borderRadius: 10,
+        borderWidth: 1,
+    },
+});

package/src/components/sealed/SealedBidItemCard.tsx

@@ -0,0 +1,385 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, Image } from 'react-native';
+import { View, Text, useTheme } from '@bettoredge/styles';
+import { Ionicons } from '@expo/vector-icons';
+import type { CalcuttaAuctionItemProps, CalcuttaBidProps } from '@bettoredge/types';
+import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';
+import { formatCurrency } from '../../helpers/formatting';
+import { CalcuttaBidInput } from '../CalcuttaBidInput';
+
+interface SealedBidItemCardProps {
+    item: CalcuttaAuctionItemProps;
+    my_bid?: CalcuttaBidProps;
+    min_bid: number;
+    bid_increment: number;
+    escrow_balance: number;
+    market_type: string;
+    player_id?: string;
+    lifecycleState: CalcuttaLifecycleState;
+    itemImage?: { url: string };
+    onPlaceBid: (amount: number) => void;
+    bidLoading: boolean;
+    disabled?: boolean;
+}
+
+const QUICK_AMOUNTS = [5, 10, 25, 50];
+
+export const SealedBidItemCard: React.FC<SealedBidItemCardProps> = ({
+    item,
+    my_bid,
+    min_bid,
+    bid_increment,
+    escrow_balance,
+    market_type,
+    player_id,
+    lifecycleState,
+    itemImage,
+    onPlaceBid,
+    bidLoading,
+    disabled,
+}) => {
+    const { theme } = useTheme();
+    const [expanded, setExpanded] = useState(false);
+
+    const hasBid = my_bid && my_bid.bid_status === 'active';
+    const isSold = item.status === 'sold';
+    const iOwnThis = isSold && item.winning_player_id === player_id;
+    const canBidNow = lifecycleState === 'auctioning' && (item.status === 'active' || item.status === 'pending') && !disabled;
+
+    // Resolve image: prefer fetched team/athlete image, fall back to stored item_image
+    const resolvedImageUrl = itemImage?.url || item.item_image?.url;
+
+    // ============================================
+    // PENDING / SCHEDULED — Browse mode (info only)
+    // ============================================
+    if (lifecycleState === 'pending' || lifecycleState === 'scheduled') {
+        return (
+            <View
+                variant="transparent"
+                style={[
+                    styles.card,
+                    {
+                        backgroundColor: theme.colors.surface.elevated,
+                        borderColor: theme.colors.border.subtle,
+                    },
+                ]}
+            >
+                <View style={styles.row}>
+                    <View variant="transparent" style={[styles.iconWrap, { backgroundColor: theme.colors.surface.base, overflow: 'hidden' }]}>
+                        {resolvedImageUrl ? (
+                            <Image source={{ uri: resolvedImageUrl }} style={styles.itemImage} resizeMode="contain" />
+                        ) : (
+                            <Ionicons
+                                name={item.item_type === 'team' ? 'people-outline' : 'person-outline'}
+                                size={16}
+                                color={theme.colors.text.tertiary}
+                            />
+                        )}
+                    </View>
+                    <View variant="transparent" style={styles.info}>
+                        <View variant="transparent" style={styles.nameRow}>
+                            <Text variant="body" bold numberOfLines={1} style={{ flex: 1 }}>
+                                {item.item_name}
+                            </Text>
+                            {item.seed != null && (
+                                <Text variant="caption" color="tertiary" style={{ marginLeft: 6 }}>
+                                    #{item.seed}
+                                </Text>
+                            )}
+                        </View>
+                        {item.item_type && (
+                            <Text variant="caption" color="tertiary" style={{ marginTop: 2, fontSize: 11 }}>
+                                {item.item_type === 'team' ? 'Team' : 'Player'}
+                            </Text>
+                        )}
+                    </View>
+                </View>
+            </View>
+        );
+    }
+
+    // ============================================
+    // TOURNAMENT / COMPLETED — Results view
+    // ============================================
+    if (lifecycleState === 'tournament' || lifecycleState === 'completed') {
+        const didBid = my_bid != null;
+        return (
+            <View
+                variant="transparent"
+                style={[
+                    styles.card,
+                    {
+                        backgroundColor: theme.colors.surface.elevated,
+                        borderColor: iOwnThis
+                            ? theme.colors.status.success + '80'
+                            : theme.colors.border.subtle,
+                    },
+                    !isSold && { opacity: 0.5 },
+                ]}
+            >
+                <View style={styles.row}>
+                    <View variant="transparent" style={[styles.iconWrap, {
+                        backgroundColor: iOwnThis
+                            ? theme.colors.status.successSubtle
+                            : theme.colors.surface.base,
+                        overflow: 'hidden',
+                    }]}>
+                        {resolvedImageUrl ? (
+                            <Image source={{ uri: resolvedImageUrl }} style={styles.itemImage} resizeMode="contain" />
+                        ) : iOwnThis ? (
+                            <Ionicons name="trophy" size={18} color="#F59E0B" />
+                        ) : isSold ? (
+                            <Ionicons name="close-circle" size={18} color={theme.colors.text.tertiary} />
+                        ) : (
+                            <Ionicons
+                                name={item.item_type === 'team' ? 'people-outline' : 'person-outline'}
+                                size={16}
+                                color={theme.colors.text.tertiary}
+                            />
+                        )}
+                    </View>
+                    <View variant="transparent" style={styles.info}>
+                        <View variant="transparent" style={styles.nameRow}>
+                            <Text variant="body" bold numberOfLines={1} style={{ flex: 1 }}>
+                                {item.item_name}
+                            </Text>
+                            {item.seed != null && (
+                                <Text variant="caption" color="tertiary" style={{ marginLeft: 6 }}>
+                                    #{item.seed}
+                                </Text>
+                            )}
+                        </View>
+                        <View variant="transparent" style={styles.metaRow}>
+                            {iOwnThis && (
+                                <View variant="transparent" style={[styles.wonBadge, { backgroundColor: theme.colors.status.successSubtle }]}>
+                                    <Text variant="caption" bold style={{ color: theme.colors.status.success, fontSize: 10 }}>
+                                        YOU WON
+                                    </Text>
+                                </View>
+                            )}
+                            {isSold && !iOwnThis && didBid && (
+                                <View variant="transparent" style={[styles.wonBadge, { backgroundColor: theme.colors.status.error + '15' }]}>
+                                    <Text variant="caption" bold style={{ color: theme.colors.status.error, fontSize: 10 }}>
+                                        OUTBID
+                                    </Text>
+                                </View>
+                            )}
+                            {!isSold && (
+                                <Text variant="caption" color="tertiary" style={{ fontSize: 10 }}>Unsold</Text>
+                            )}
+                        </View>
+                    </View>
+                    <View variant="transparent" style={styles.bidCol}>
+                        {isSold ? (
+                            <>
+                                <Text variant="caption" color="tertiary" style={{ fontSize: 10 }}>
+                                    {iOwnThis ? 'Paid' : 'Sold for'}
+                                </Text>
+                                <Text variant="body" bold style={{ color: iOwnThis ? theme.colors.status.success : theme.colors.text.primary }}>
+                                    {formatCurrency(item.winning_bid, market_type)}
+                                </Text>
+                            </>
+                        ) : (
+                            <Text variant="caption" color="tertiary">No bids</Text>
+                        )}
+                    </View>
+                </View>
+                {didBid && isSold && !iOwnThis && (
+                    <View variant="transparent" style={[styles.lostBidRow, { borderColor: theme.colors.border.subtle }]}>
+                        <Text variant="caption" color="tertiary">Your bid: {formatCurrency(my_bid!.bid_amount, market_type)}</Text>
+                    </View>
+                )}
+            </View>
+        );
+    }
+
+    // ============================================
+    // AUCTIONING — Active bid UI
+    // ============================================
+    return (
+        <View
+            variant="transparent"
+            style={[
+                styles.card,
+                {
+                    backgroundColor: theme.colors.surface.elevated,
+                    borderColor: hasBid ? theme.colors.status.success + '60' : theme.colors.border.subtle,
+                },
+            ]}
+        >
+            <TouchableOpacity
+                style={styles.row}
+                activeOpacity={0.7}
+                onPress={() => canBidNow && setExpanded(!expanded)}
+                disabled={!canBidNow}
+            >
+                <View variant="transparent" style={[styles.iconWrap, { backgroundColor: theme.colors.surface.base, overflow: 'hidden' }]}>
+                    {resolvedImageUrl ? (
+                        <Image source={{ uri: resolvedImageUrl }} style={styles.itemImage} resizeMode="contain" />
+                    ) : hasBid ? (
+                        <Ionicons name="checkmark-circle" size={18} color={theme.colors.status.success} />
+                    ) : (
+                        <Ionicons
+                            name={item.item_type === 'team' ? 'people-outline' : 'person-outline'}
+                            size={16}
+                            color={theme.colors.text.tertiary}
+                        />
+                    )}
+                </View>
+                <View variant="transparent" style={styles.info}>
+                    <View variant="transparent" style={styles.nameRow}>
+                        <Text variant="body" bold numberOfLines={1} style={{ flex: 1 }}>
+                            {item.item_name}
+                        </Text>
+                        {item.seed != null && (
+                            <Text variant="caption" color="tertiary" style={{ marginLeft: 6 }}>
+                                #{item.seed}
+                            </Text>
+                        )}
+                    </View>
+                    <View variant="transparent" style={styles.metaRow}>
+                        {item.bid_count != null && item.bid_count > 0 && (
+                            <Text variant="caption" color="tertiary" style={{ fontSize: 11 }}>
+                                {item.bid_count} bidder{item.bid_count !== 1 ? 's' : ''}
+                            </Text>
+                        )}
+                    </View>
+                </View>
+                <View variant="transparent" style={styles.bidCol}>
+                    {hasBid ? (
+                        <>
+                            <Text variant="caption" color="tertiary" style={{ fontSize: 10 }}>Your bid</Text>
+                            <Text variant="body" bold style={{ color: theme.colors.status.success }}>
+                                {formatCurrency(my_bid!.bid_amount, market_type)}
+                            </Text>
+                        </>
+                    ) : canBidNow ? (
+                        <View variant="transparent" style={[styles.bidCta, { backgroundColor: theme.colors.primary.subtle }]}>
+                            <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 11 }}>
+                                Place Bid
+                            </Text>
+                        </View>
+                    ) : (
+                        <Text variant="caption" color="tertiary" style={{ fontSize: 11 }}>No bid</Text>
+                    )}
+                </View>
+                {canBidNow && (
+                    <Ionicons
+                        name={expanded ? 'chevron-up' : 'chevron-down'}
+                        size={14}
+                        color={theme.colors.text.tertiary}
+                        style={{ marginLeft: 6 }}
+                    />
+                )}
+            </TouchableOpacity>
+
+            {expanded && canBidNow && (
+                <View variant="transparent" style={[styles.expandedArea, { borderColor: theme.colors.border.subtle }]}>
+                    <View variant="transparent" style={styles.quickRow}>
+                        {QUICK_AMOUNTS.map(amt => (
+                            <TouchableOpacity
+                                key={amt}
+                                style={[styles.quickBtn, { backgroundColor: theme.colors.surface.base, borderColor: theme.colors.border.subtle }]}
+                                onPress={() => onPlaceBid(amt)}
+                                disabled={bidLoading}
+                                activeOpacity={0.7}
+                            >
+                                <Text variant="caption" bold style={{ color: theme.colors.text.primary }}>
+                                    {formatCurrency(amt, market_type)}
+                                </Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+                    <CalcuttaBidInput
+                        current_bid={item.current_bid}
+                        min_bid={min_bid}
+                        bid_increment={bid_increment}
+                        auction_type="sealed_bid"
+                        escrow_balance={escrow_balance}
+                        existing_bid_amount={my_bid?.bid_amount}
+                        onSubmit={onPlaceBid}
+                        loading={bidLoading}
+                        disabled={disabled}
+                    />
+                </View>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    card: {
+        borderWidth: 1,
+        borderRadius: 10,
+        marginHorizontal: 12,
+        marginBottom: 8,
+        overflow: 'hidden',
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+    },
+    iconWrap: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    itemImage: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+    },
+    info: {
+        flex: 1,
+        marginLeft: 10,
+    },
+    nameRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    metaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 2,
+    },
+    wonBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    bidCol: {
+        alignItems: 'flex-end',
+        marginLeft: 10,
+    },
+    bidCta: {
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 6,
+    },
+    lostBidRow: {
+        paddingHorizontal: 12,
+        paddingBottom: 10,
+        borderTopWidth: 1,
+        paddingTop: 8,
+    },
+    expandedArea: {
+        borderTopWidth: 1,
+        paddingHorizontal: 12,
+        paddingBottom: 12,
+    },
+    quickRow: {
+        flexDirection: 'row',
+        paddingTop: 10,
+        gap: 8,
+    },
+    quickBtn: {
+        flex: 1,
+        paddingVertical: 8,
+        borderRadius: 6,
+        borderWidth: 1,
+        alignItems: 'center',
+    },
+});