@bettoredge/calcutta 0.3.1 → 0.4.0

package/src/components/CalcuttaDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView, Image, FlatList, TextInput, Platform } from 'react-native';
 import { View, Text, useTheme } from '@bettoredge/styles';
 import { Ionicons } from '@expo/vector-icons';
@@ -7,16 +7,30 @@ import { useCalcuttaCompetition } from '../hooks/useCalcuttaCompetition';
 import { useCalcuttaPlayers } from '../hooks/useCalcuttaPlayers';
 import { useCalcuttaItemImages } from '../hooks/useCalcuttaItemImages';
 import { formatCurrency, getStatusLabel, resolveItemImageUrl } from '../helpers/formatting';
-import { startSweepstakesCompetition } from '@bettoredge/api';
+import { deriveLifecycleState, canManageEscrow } from '../helpers/lifecycleState';
+import { useCalcuttaEscrow } from '../hooks/useCalcuttaEscrow';
+import { startSweepstakesCompetition, startCalcuttaAuction } from '@bettoredge/api';
+import { CalcuttaActionCard } from './CalcuttaActionCard';
+import { CalcuttaCountdown } from './CalcuttaCountdown';
+import { AuctionInfoChips } from './AuctionInfoChips';
+import { EscrowWidget } from './EscrowWidget';
+import { AuctionCountdownOverlay } from './AuctionCountdownOverlay';
+import { useCalcuttaSocket } from '../hooks/useCalcuttaSocket';
 
 export interface CalcuttaDetailProps {
     calcutta_competition_id: string;
     player_id?: string;
-    onClose: () => void;
+    access_token?: string;
+    device_id?: string;
+    player_username?: string;
+    player_profile_pic?: string;
+    onClose?: () => void;
     onJoin?: () => Promise<void>;
     onLeave?: () => Promise<void>;
     onShare?: () => void;
     onManage?: () => void;
+    player_balance?: number;
+    onDepositFunds?: (amount: number) => void;
 }
 
 const getStatusConfig = (status: string) => {
@@ -38,8 +52,35 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     onLeave,
     onShare,
     onManage,
+    player_balance,
+    onDepositFunds,
+    access_token,
+    device_id,
+    player_username,
+    player_profile_pic,
 }) => {
     const { theme } = useTheme();
+
+    // Countdown overlay state
+    const [showCountdown, setShowCountdown] = useState(false);
+    const [countdownItem, setCountdownItem] = useState<any>(undefined);
+
+    // Socket for presence + auction start detection
+    const handleItemActive = useCallback((data: any) => {
+        // Auction just started — show countdown for ALL connected clients
+        setCountdownItem(data.item);
+        setShowCountdown(true);
+    }, []);
+
+    const { connected: socketConnected, presence, socketState } = useCalcuttaSocket(
+        calcutta_competition_id,
+        access_token,
+        device_id,
+        { username: player_username, profile_pic: player_profile_pic },
+        { onItemActive: handleItemActive },
+    );
+    const onlinePlayers = presence.players;
+    const onlinePlayerIds = useMemo(() => new Set(onlinePlayers.map(p => p.player_id)), [onlinePlayers]);
     const {
         loading,
         competition,
@@ -52,6 +93,9 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
 
     const participantIds = useMemo(() => participants.map(p => p.player_id), [participants]);
     const { players: enrichedPlayers } = useCalcuttaPlayers(participantIds);
+    const { escrow, fetchEscrow } = useCalcuttaEscrow(calcutta_competition_id);
+    const [escrowExpanded, setEscrowExpanded] = useState(false);
+
     const { images: itemImages } = useCalcuttaItemImages(items);
 
     const [joining, setJoining] = useState(false);
@@ -101,6 +145,8 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     const totalPot = Number(competition.total_pot) || 0;
     const canLeave = hasJoined && !isSweepstakes && ['pending', 'scheduled'].includes(competition.status);
     const heroImage = competition.image?.url;
+    const lifecycleState = deriveLifecycleState(competition.status, competition.auction_status, competition.auction_type);
+    const showEscrow = canManageEscrow(lifecycleState, competition.auction_type) && hasJoined;
 
     // Sweepstakes: find the player's assigned item
     const myParticipant = participants.find(p => p.player_id == player_id);
@@ -114,13 +160,15 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
     const sections = [
         { key: 'hero' },
         { key: 'info' },
+        { key: 'action-card' },
+        ...(showEscrow ? [{ key: 'escrow' }] : []),
         { key: 'stats' },
-        { key: 'cta' },
         { key: 'payouts' },
         { key: 'items-header' },
         { key: 'items' },
         { key: 'participants-header' },
         { key: 'participants' },
+        ...(canLeave ? [{ key: 'leave' }] : []),
     ];
 
     const renderSection = ({ item }: { item: { key: string } }) => {
@@ -145,6 +193,17 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                             <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>{competition.competition_name}</Text>
                         {competition.competition_description ? (
@@ -156,6 +215,25 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                                 <Text variant="caption" bold style={{ color: theme.colors.primary.default, marginLeft: 4 }}>{competition.competition_code}</Text>
                             </View>
                         ) : null}
+                        {competition.scheduled_datetime && (
+                            <CalcuttaCountdown
+                                targetDate={competition.scheduled_datetime}
+                                label="Auction starts"
+                            />
+                        )}
+                        {competition.auction_type === 'sealed_bid' && competition.auction_end_datetime && (
+                            <CalcuttaCountdown
+                                targetDate={competition.auction_end_datetime}
+                                label="Bidding closes"
+                            />
+                        )}
+                        <AuctionInfoChips competition={competition} />
+                        {onShare && (
+                            <TouchableOpacity onPress={onShare} style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', marginTop: 10 }}>
+                                <Ionicons name="share-outline" size={14} color={theme.colors.text.tertiary} />
+                                <Text variant="caption" color="tertiary" style={{ marginLeft: 4 }}>Share</Text>
+                            </TouchableOpacity>
+                        )}
                     </View>
                 );
 
@@ -188,132 +266,91 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                     </View>
                 );
 
-            case 'cta':
+            case 'action-card':
                 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>
-                        )}
-
-                        {/* Admin start sweepstakes button */}
-                        {isAdmin && isSweepstakes && competition.status === 'scheduled' && (
-                            <TouchableOpacity
-                                onPress={async () => {
-                                    setStartingComp(true);
-                                    try {
+                    <View variant="transparent" style={{ paddingHorizontal: 16, paddingTop: 4, paddingBottom: 12 }}>
+                        <CalcuttaActionCard
+                            competition={competition}
+                            lifecycleState={lifecycleState}
+                            hasJoined={hasJoined}
+                            escrowBalance={Number(escrow?.escrow_balance ?? 0)}
+                            isAdmin={isAdmin}
+                            onJoin={onJoin ? async () => {
+                                setJoining(true);
+                                try { await onJoin(); await refresh(); fetchEscrow(); } catch {}
+                                setJoining(false);
+                            } : undefined}
+                            onDepositEscrow={undefined}
+                            onManage={onManage}
+                            onStartAuction={isAdmin && competition.status === 'scheduled' ? async () => {
+                                setStartingComp(true);
+                                try {
+                                    if (isSweepstakes) {
                                         await startSweepstakesCompetition(calcutta_competition_id);
                                         await refresh();
-                                    } catch {}
-                                    setStartingComp(false);
-                                }}
-                                disabled={startingComp}
-                                style={[styles.ctaButton, { backgroundColor: '#8B5CF6', opacity: startingComp ? 0.7 : 1 }]}
-                            >
-                                {startingComp ? (
-                                    <ActivityIndicator size="small" color="#FFF" />
-                                ) : (
-                                    <>
-                                        <Ionicons name="play-circle-outline" size={18} color="#FFF" />
-                                        <Text variant="body" bold style={{ color: '#FFF', marginLeft: 8 }}>
-                                            Start Competition{unassignedItemCount > 0 ? ` (${unassignedItemCount} unassigned)` : ''}
-                                        </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" />
+                                    } else {
+                                        await startCalcuttaAuction(calcutta_competition_id);
+                                        // Socket will broadcast CALCUTTA_ITEM_ACTIVE which triggers countdown
+                                        // refresh happens after countdown completes
+                                    }
+                                } catch {}
+                                setStartingComp(false);
+                            } : undefined}
+                            joining={joining}
+                        />
+                        {/* Sweepstakes: show assigned item below action card */}
+                        {isSweepstakes && myAssignedItem && (
+                            <View variant="transparent" style={[styles.assignedItemCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle, marginTop: 10 }]}>
+                                {resolveItemImageUrl(myAssignedItem.item_image) ? (
+                                    <Image source={{ uri: resolveItemImageUrl(myAssignedItem.item_image)! }} style={styles.assignedItemImage} resizeMode="cover" />
                                 ) : (
-                                    <Text variant="body" bold style={{ color: '#FFF' }}>
-                                        {isSweepstakes
-                                            ? (isFree ? 'Join Free — Get a Random Team!' : `Join — ${formatCurrency(entryFee, competition.market_type)}`)
-                                            : (isFree ? 'Join - Free!' : `Join - ${formatCurrency(entryFee, competition.market_type)}`)}
-                                    </Text>
-                                )}
-                            </TouchableOpacity>
-                        )}
-
-                        {/* Already joined badge + assigned item (sweepstakes) + leave */}
-                        {hasJoined && (
-                            <View variant="transparent" style={{ gap: 10 }}>
-                                <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>
-                                {/* Sweepstakes: show assigned item */}
-                                {isSweepstakes && myAssignedItem && (
-                                    <View variant="transparent" style={[styles.assignedItemCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.border.subtle }]}>
-                                        {resolveItemImageUrl(myAssignedItem.item_image) ? (
-                                            <Image
-                                                source={{ uri: resolveItemImageUrl(myAssignedItem.item_image)! }}
-                                                style={styles.assignedItemImage}
-                                                resizeMode="cover"
-                                            />
-                                        ) : (
-                                            <View variant="transparent" style={[styles.assignedItemImage, { backgroundColor: theme.colors.primary.subtle, alignItems: 'center', justifyContent: 'center' }]}>
-                                                <Ionicons name="trophy" size={20} color={theme.colors.primary.default} />
-                                            </View>
-                                        )}
-                                        <View variant="transparent" style={{ flex: 1, marginLeft: 12 }}>
-                                            <Text variant="caption" color="tertiary">Your Team</Text>
-                                            <Text variant="body" bold>{myAssignedItem.item_name}</Text>
-                                            {myAssignedItem.seed != null && (
-                                                <Text variant="caption" color="tertiary">Seed #{myAssignedItem.seed}</Text>
-                                            )}
-                                        </View>
+                                    <View variant="transparent" style={[styles.assignedItemImage, { backgroundColor: theme.colors.primary.subtle, alignItems: 'center', justifyContent: 'center' }]}>
+                                        <Ionicons name="trophy" size={20} color={theme.colors.primary.default} />
                                     </View>
                                 )}
+                                <View variant="transparent" style={{ flex: 1, marginLeft: 12 }}>
+                                    <Text variant="caption" color="tertiary">Your Item</Text>
+                                    <Text variant="body" bold>{myAssignedItem.item_name}</Text>
+                                    {myAssignedItem.seed != null && <Text variant="caption" color="tertiary">Seed #{myAssignedItem.seed}</Text>}
+                                </View>
                             </View>
                         )}
+                    </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>
-                        )}
+            case 'escrow':
+                return (
+                    <View variant="transparent" style={{ paddingHorizontal: 16, paddingBottom: 12 }}>
+                        <EscrowWidget
+                            calcutta_competition_id={calcutta_competition_id}
+                            market_type={competition.market_type}
+                            max_escrow={competition.max_escrow}
+                            player_balance={player_balance}
+                            onUpdate={() => { refresh(); fetchEscrow(); }}
+                            initialExpanded={Number(escrow?.escrow_balance ?? 0) <= 0}
+                        />
+                    </View>
+                );
+
+            case 'leave':
+                return (
+                    <View variant="transparent" style={{ alignItems: 'center', paddingVertical: 16, paddingBottom: 40 }}>
+                        <TouchableOpacity
+                            onPress={async () => {
+                                if (!onLeave) return;
+                                setLeaving(true);
+                                try { await onLeave(); await refresh(); } catch {}
+                                setLeaving(false);
+                            }}
+                            disabled={leaving}
+                            style={{ opacity: leaving ? 0.5 : 1 }}
+                        >
+                            {leaving ? (
+                                <ActivityIndicator size="small" color={theme.colors.status.error} />
+                            ) : (
+                                <Text variant="caption" style={{ color: theme.colors.status.error }}>Leave Competition</Text>
+                            )}
+                        </TouchableOpacity>
                     </View>
                 );
 
@@ -392,6 +429,7 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                                     color: theme.colors.text.primary,
                                     paddingHorizontal: 12,
                                     fontSize: 14,
+                                    lineHeight: 19,
                                     marginBottom: 8,
                                 }}
                                 placeholder="Search by team or owner..."
@@ -442,7 +480,7 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                             {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>}
+                                    {item.seed != null && <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>#{item.seed}</Text>}
                                 </View>
                             ))}
                         </ScrollView>
@@ -452,9 +490,15 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
             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 variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
+                            <Text variant="body" bold>Players ({participants.length})</Text>
+                            {onlinePlayers.length > 0 && (
+                                <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 10, backgroundColor: '#10B98115', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 10 }}>
+                                    <View variant="transparent" style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#10B981', marginRight: 4 }} />
+                                    <Text variant="caption" bold style={{ color: '#10B981' }}>{onlinePlayers.length} online</Text>
+                                </View>
+                            )}
+                        </View>
                     </View>
                 );
 
@@ -473,17 +517,23 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                             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;
+                            const isOnline = onlinePlayerIds.has(p.player_id);
                             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={{ position: 'relative' }}>
+                                        {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>
+                                        )}
+                                        {isOnline && (
+                                            <View variant="transparent" style={{ position: 'absolute', bottom: 0, right: 0, width: 10, height: 10, borderRadius: 5, backgroundColor: '#10B981', borderWidth: 2, borderColor: theme.colors.surface.base }} />
+                                        )}
+                                    </View>
                                     <View variant="transparent" style={{ flex: 1 }}>
                                         <Text variant="body">{username}</Text>
                                         <Text variant="caption" color="tertiary">
@@ -492,7 +542,7 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
                                     </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>
+                                            <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 10, lineHeight: 13 }}>YOU</Text>
                                         </View>
                                     )}
                                 </View>
@@ -506,27 +556,44 @@ export const CalcuttaDetail: React.FC<CalcuttaDetailProps> = ({
         }
     };
 
+    const socketColor = socketState === 'authenticated' ? '#10B981'
+        : socketState === 'connected' ? '#F59E0B'
+        : socketState === 'connecting' ? '#3B82F6'
+        : '#EF4444';
+
     return (
         <View variant="base" style={styles.container}>
-            {/* Header bar — hidden for sweepstakes (title is in the hero) */}
-            {!isSweepstakes && (
-                <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>
-            )}
+            {/* Socket debug bar */}
+            <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 6, backgroundColor: socketColor + '15', borderBottomWidth: 1, borderColor: socketColor + '30' }}>
+                <View variant="transparent" style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: socketColor, marginRight: 6 }} />
+                <Text variant="caption" style={{ color: socketColor }}>
+                    Socket: {socketState} {onlinePlayers.length > 0 ? `· ${onlinePlayers.length} in room` : ''}
+                </Text>
+                {!access_token && <Text variant="caption" style={{ color: '#EF4444', marginLeft: 8 }}>No auth token</Text>}
+            </View>
 
             <FlatList
                 data={sections}
                 keyExtractor={(item) => item.key}
                 renderItem={renderSection}
+                extraData={`${escrowExpanded}-${onlinePlayers.length}`}
                 showsVerticalScrollIndicator={false}
                 style={{ backgroundColor: theme.colors.surface.base }}
                 contentContainerStyle={{ paddingBottom: Platform.OS === 'web' ? 300 : 40 }}
                 keyboardShouldPersistTaps="handled"
             />
+
+            {/* Auction starting countdown overlay */}
+            <AuctionCountdownOverlay
+                visible={showCountdown}
+                competitionName={competition?.competition_name}
+                firstItem={countdownItem}
+                countdownFrom={5}
+                onComplete={() => {
+                    setShowCountdown(false);
+                    refresh();
+                }}
+            />
         </View>
     );
 };

package/src/components/CalcuttaEscrow.tsx

@@ -66,10 +66,25 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
     const hasBalance = player_balance != null;
     const insufficientBalance = hasBalance && action === 'transfer_in' && numericAmount > Number(player_balance);
     const shortfall = insufficientBalance ? numericAmount - Number(player_balance) : 0;
+    const exceedsBudget = action === 'transfer_in' && budgetRemaining !== null && numericAmount > budgetRemaining;
+    const exceedsWithdraw = action === 'transfer_out' && numericAmount > available;
+    const [actionError, setActionError] = useState('');
+
+    const isInvalidAmount = numericAmount <= 0 || exceedsBudget || exceedsWithdraw || (insufficientBalance && !onDepositFunds);
+
+    const getValidationMessage = (): string => {
+        if (numericAmount <= 0) return '';
+        if (exceedsBudget) return `Budget cap: ${formatCurrency(Number(max_escrow), market_type)}. You can deposit up to ${formatCurrency(budgetRemaining ?? 0, market_type)} more.`;
+        if (exceedsWithdraw) return `You only have ${formatCurrency(available, market_type)} available to withdraw.`;
+        if (insufficientBalance && !onDepositFunds) return `Insufficient wallet balance. You have ${formatCurrency(player_balance, market_type)}.`;
+        return '';
+    };
+
+    const validationMessage = getValidationMessage();
 
     const handleAction = async () => {
         if (isNaN(numericAmount) || numericAmount <= 0) return;
-        if (action === 'transfer_in' && budgetRemaining !== null && numericAmount > budgetRemaining) return;
+        setActionError('');
         if (insufficientBalance && onDepositFunds) {
             onDepositFunds(Math.ceil(shortfall * 100) / 100);
             return;
@@ -84,12 +99,22 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
             if (result) {
                 onUpdate(result);
                 setAmount('');
+                setActionError('');
             }
-        } catch {}
+        } catch (e: any) {
+            setActionError(e?.message || 'Transfer failed. Please try again.');
+        }
     };
 
     const handleQuickAmount = (amt: number) => {
-        setAmount(String(amt));
+        // Cap quick amount to budget remaining for deposits
+        if (action === 'transfer_in' && budgetRemaining !== null) {
+            setAmount(String(Math.min(amt, budgetRemaining)));
+        } else if (action === 'transfer_out') {
+            setAmount(String(Math.min(amt, available)));
+        } else {
+            setAmount(String(amt));
+        }
     };
 
     // ============================================
@@ -278,14 +303,14 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                 </View>
                 <TouchableOpacity
                     style={[styles.submitBtn, {
-                        backgroundColor: insufficientBalance
+                        backgroundColor: insufficientBalance && onDepositFunds
                             ? theme.colors.status.error
-                            : (loading || !amount || numericAmount <= 0 || (action === 'transfer_in' && budgetFullyDeposited))
+                            : (loading || isInvalidAmount)
                                 ? theme.colors.surface.elevated
                                 : theme.colors.primary.default,
                     }]}
                     onPress={handleAction}
-                    disabled={loading || !amount || numericAmount <= 0 || (action === 'transfer_in' && budgetFullyDeposited)}
+                    disabled={loading || (isInvalidAmount && !(insufficientBalance && onDepositFunds))}
                     activeOpacity={0.7}
                 >
                     {loading ? (
@@ -295,13 +320,13 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                             <Ionicons
                                 name={action === 'transfer_in' ? 'arrow-down-circle' : 'arrow-up-circle'}
                                 size={20}
-                                color={(!amount || numericAmount <= 0) ? theme.colors.text.tertiary : '#FFFFFF'}
+                                color={isInvalidAmount ? theme.colors.text.tertiary : '#FFFFFF'}
                             />
                             <Text
                                 variant="body"
                                 bold
                                 style={{
-                                    color: (!amount || numericAmount <= 0) ? theme.colors.text.tertiary : '#FFFFFF',
+                                    color: isInvalidAmount ? theme.colors.text.tertiary : '#FFFFFF',
                                     marginLeft: 6,
                                 }}
                             >
@@ -316,8 +341,18 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                 </TouchableOpacity>
             </View>
 
-            {/* Insufficient balance */}
-            {insufficientBalance && (
+            {/* Validation message (budget cap, withdraw limit, etc.) */}
+            {validationMessage ? (
+                <View variant="transparent" style={[styles.warningRow, { backgroundColor: '#D9770615' }]}>
+                    <Ionicons name="information-circle-outline" size={16} color="#D97706" />
+                    <Text variant="caption" style={{ color: '#D97706', marginLeft: 8, flex: 1 }}>
+                        {validationMessage}
+                    </Text>
+                </View>
+            ) : null}
+
+            {/* Insufficient wallet balance */}
+            {insufficientBalance && !validationMessage && (
                 <View variant="transparent" style={[styles.warningRow, { backgroundColor: theme.colors.status.error + '10' }]}>
                     <Ionicons name="warning-outline" size={16} color={theme.colors.status.error} />
                     <Text variant="caption" style={{ color: theme.colors.status.error, marginLeft: 8, flex: 1 }}>
@@ -326,12 +361,12 @@ export const CalcuttaEscrow: React.FC<CalcuttaEscrowComponentProps> = ({
                 </View>
             )}
 
-            {/* Error */}
-            {error && (
+            {/* API error */}
+            {(error || actionError) && (
                 <View variant="transparent" style={[styles.warningRow, { backgroundColor: theme.colors.status.error + '10' }]}>
                     <Ionicons name="alert-circle-outline" size={16} color={theme.colors.status.error} />
                     <Text variant="caption" style={{ color: theme.colors.status.error, marginLeft: 8, flex: 1 }}>
-                        {error}
+                        {actionError || error}
                     </Text>
                 </View>
             )}
@@ -442,6 +477,7 @@ const styles = StyleSheet.create({
     input: {
         flex: 1,
         fontSize: 18,
+        lineHeight: 24,
         height: 48,
         padding: 0,
     },