@bettoredge/calcutta 0.3.1 → 0.4.0

package/src/components/CalcuttaAuctionItem.tsx

@@ -17,6 +17,8 @@ export interface CalcuttaAuctionItemComponentProps {
     is_active_item?: boolean;
     is_paused?: boolean;
     itemImage?: { url: string };
+    highest_bidder?: { username?: string; profile_pic?: string; is_me?: boolean };
+    winner?: { username?: string; profile_pic?: string; is_me?: boolean };
 }
 
 const getTimerColor = (secondsLeft: number, theme: any) => {
@@ -36,9 +38,16 @@ export const CalcuttaAuctionItem: React.FC<CalcuttaAuctionItemComponentProps> =
     is_active_item,
     is_paused,
     itemImage,
+    highest_bidder,
+    winner,
 }) => {
     const { theme } = useTheme();
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState(!!is_active_item);
+
+    // Auto-expand when this item becomes active
+    useEffect(() => {
+        if (is_active_item) setExpanded(true);
+    }, [is_active_item]);
 
     // Per-item countdown for live auction
     const [secondsLeft, setSecondsLeft] = useState<number | null>(null);
@@ -66,7 +75,9 @@ export const CalcuttaAuctionItem: React.FC<CalcuttaAuctionItemComponentProps> =
         };
     }, [item.item_deadline, item.status, is_paused]);
 
-    const canBid = (item.status === 'active' || item.status === 'pending') && !is_paused;
+    const canBid = auction_type === 'live'
+        ? item.status === 'active' && is_active_item && !is_paused
+        : (item.status === 'active' || item.status === 'pending') && !is_paused;
     const statusColor = getItemStatusColor(item.status);
     const isSold = item.status === 'sold';
     const isUpcoming = auction_type === 'live' && item.status === 'pending';
@@ -82,30 +93,123 @@ export const CalcuttaAuctionItem: React.FC<CalcuttaAuctionItemComponentProps> =
         return s.toFixed(1);
     };
 
+    // ══════════════════════════════════════
+    // ACTIVE ITEM — hero card, always expanded
+    // ══════════════════════════════════════
+    if (is_active_item && auction_type === 'live') {
+        const timerColor = secondsLeft != null && secondsLeft > 0 ? getTimerColor(secondsLeft, theme) : theme.colors.text.tertiary;
+        const isUrgent = secondsLeft != null && secondsLeft <= 10 && secondsLeft > 0;
+
+        return (
+            <View variant="transparent" style={[styles.activeCard, { backgroundColor: theme.colors.surface.elevated, borderColor: theme.colors.primary.default + '40' }]}>
+                {/* Top bar: item info + timer */}
+                <View variant="transparent" style={styles.activeHeader}>
+                    {(itemImage?.url || item.item_image?.url) ? (
+                        <Image
+                            source={{ uri: itemImage?.url || item.item_image?.url }}
+                            style={[styles.activeImage, { backgroundColor: theme.colors.surface.base }]}
+                            resizeMode="contain"
+                        />
+                    ) : (
+                        <View variant="transparent" style={[styles.activeImage, { backgroundColor: theme.colors.surface.base }]}>
+                            <Ionicons
+                                name={item.item_type === 'team' ? 'people-outline' : 'person-outline'}
+                                size={24}
+                                color={theme.colors.text.tertiary}
+                            />
+                        </View>
+                    )}
+                    <View variant="transparent" style={{ flex: 1, marginLeft: 14 }}>
+                        <Text variant="h3" bold numberOfLines={1}>{item.item_name}</Text>
+                        {item.seed != null && <Text variant="caption" color="tertiary">Seed #{item.seed}</Text>}
+                        {highest_bidder && item.current_bid > 0 && (
+                            <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginTop: 4 }}>
+                                {highest_bidder.profile_pic ? (
+                                    <Image source={{ uri: highest_bidder.profile_pic }} style={{ width: 16, height: 16, borderRadius: 8, marginRight: 5 }} />
+                                ) : (
+                                    <View variant="transparent" style={{ width: 16, height: 16, borderRadius: 8, backgroundColor: highest_bidder.is_me ? '#10B98130' : theme.colors.primary.subtle, alignItems: 'center', justifyContent: 'center', marginRight: 5 }}>
+                                        <Text variant="caption" style={{ fontSize: 8, lineHeight: 11, color: highest_bidder.is_me ? '#10B981' : theme.colors.primary.default }}>
+                                            {(highest_bidder.username || '?').charAt(0).toUpperCase()}
+                                        </Text>
+                                    </View>
+                                )}
+                                <Text variant="caption" style={{ color: highest_bidder.is_me ? '#10B981' : theme.colors.text.secondary, fontSize: 12, lineHeight: 16 }}>
+                                    {highest_bidder.is_me ? 'You' : highest_bidder.username || 'Unknown'}
+                                </Text>
+                                {highest_bidder.is_me && (
+                                    <Ionicons name="checkmark-circle" size={12} color="#10B981" style={{ marginLeft: 3 }} />
+                                )}
+                            </View>
+                        )}
+                    </View>
+                </View>
+
+                {/* Current bid + highest bidder + timer row */}
+                <View variant="transparent" style={styles.activeBidRow}>
+                    <View variant="transparent" style={{ flex: 1 }}>
+                        <Text variant="caption" color="tertiary">Current Bid</Text>
+                        <Text style={[styles.activeBidAmount, { color: theme.colors.text.primary }]}>
+                            {item.current_bid > 0 ? formatCurrency(item.current_bid) : 'No bids yet'}
+                        </Text>
+                    </View>
+                    {secondsLeft != null && secondsLeft > 0 && !is_paused && (
+                        <View variant="transparent" style={[styles.activeTimerBox, { backgroundColor: timerColor + '15', borderColor: timerColor + '30' }]}>
+                            <Ionicons name="timer-outline" size={16} color={timerColor} />
+                            <Text style={[styles.activeTimerText, { color: timerColor }]}>
+                                {formatCountdown(secondsLeft)}
+                            </Text>
+                            {isUrgent && item.current_bid > 0 && (
+                                <Text variant="caption" bold style={{ color: theme.colors.status.error, marginLeft: 6, fontSize: 11, lineHeight: 15 }}>
+                                    Going!
+                                </Text>
+                            )}
+                        </View>
+                    )}
+                </View>
+
+                {/* Bid input — always visible */}
+                {canBid && (
+                    <CalcuttaBidInput
+                        current_bid={item.current_bid}
+                        min_bid={min_bid}
+                        bid_increment={bid_increment}
+                        auction_type={auction_type}
+                        escrow_balance={escrow_balance}
+                        existing_bid_amount={my_bid?.bid_amount}
+                        onSubmit={onPlaceBid}
+                        loading={false}
+                        disabled={is_paused}
+                    />
+                )}
+            </View>
+        );
+    }
+
+    // ══════════════════════════════════════
+    // INACTIVE ITEMS — compact rows
+    // ══════════════════════════════════════
     return (
         <View
             variant="transparent"
             style={[
                 styles.container,
-                { borderColor: theme.colors.border.subtle, opacity: itemOpacity },
-                is_active_item && { borderLeftWidth: 3, borderLeftColor: theme.colors.primary.default },
+                { borderColor: theme.colors.border.subtle, opacity: itemOpacity, backgroundColor: theme.colors.surface.base },
             ]}
         >
             <TouchableOpacity
                 style={styles.row}
-                activeOpacity={0.7}
+                activeOpacity={canBid ? 0.7 : 1}
                 onPress={() => canBid && setExpanded(!expanded)}
                 disabled={!canBid}
             >
-                {/* Item image / fallback */}
                 {(itemImage?.url || item.item_image?.url) ? (
                     <Image
                         source={{ uri: itemImage?.url || item.item_image?.url }}
-                        style={[styles.imageContainer, { backgroundColor: theme.colors.surface.base }]}
+                        style={[styles.imageContainer, { backgroundColor: theme.colors.surface.elevated }]}
                         resizeMode="contain"
                     />
                 ) : (
-                    <View variant="transparent" style={[styles.imageContainer, { backgroundColor: theme.colors.surface.base }]}>
+                    <View variant="transparent" style={[styles.imageContainer, { backgroundColor: theme.colors.surface.elevated }]}>
                         <Ionicons
                             name={item.item_type === 'team' ? 'people-outline' : 'person-outline'}
                             size={16}
@@ -115,94 +219,50 @@ export const CalcuttaAuctionItem: React.FC<CalcuttaAuctionItemComponentProps> =
                 )}
 
                 <View variant="transparent" style={styles.info}>
-                    <View variant="transparent" style={styles.nameRow}>
-                        <Text variant="body" bold numberOfLines={1} style={styles.name}>
-                            {item.item_name}
-                        </Text>
-                        {item.seed != null && (
-                            <Text variant="caption" color="tertiary" style={styles.seed}>
-                                #{item.seed}
-                            </Text>
-                        )}
-                    </View>
+                    <Text variant="body" bold numberOfLines={1}>{item.item_name}{item.seed != null ? ` #${item.seed}` : ''}</Text>
                     <View variant="transparent" style={styles.statusRow}>
                         <View variant="transparent" style={[styles.statusBadge, { backgroundColor: statusColor + '20' }]}>
-                            <Text variant="caption" style={{ color: statusColor, fontSize: 10 }}>
-                                {getStatusLabel(item.status)}
-                            </Text>
+                            <Text variant="caption" style={{ color: statusColor, fontSize: 10, lineHeight: 13 }}>{getStatusLabel(item.status)}</Text>
                         </View>
                         {my_bid && (
                             <View variant="transparent" style={styles.bidStatus}>
-                                <Ionicons
-                                    name={my_bid.bid_status === 'won' ? 'checkmark-circle' : 'ellipse'}
-                                    size={10}
-                                    color={getBidStatusColor(my_bid.bid_status)}
-                                />
-                                <Text variant="caption" style={{ color: getBidStatusColor(my_bid.bid_status), marginLeft: 4, fontSize: 10 }}>
-                                    {getStatusLabel(my_bid.bid_status)}
-                                </Text>
+                                <Ionicons name={my_bid.bid_status === 'won' ? 'checkmark-circle' : 'ellipse'} size={10} color={getBidStatusColor(my_bid.bid_status)} />
+                                <Text variant="caption" style={{ color: getBidStatusColor(my_bid.bid_status), marginLeft: 3, fontSize: 10, lineHeight: 13 }}>{getStatusLabel(my_bid.bid_status)}</Text>
                             </View>
                         )}
-                        {/* Winner info for sold items */}
                         {isSold && item.winning_bid > 0 && (
-                            <Text variant="caption" color="tertiary" style={{ marginLeft: 8, fontSize: 10 }}>
-                                Sold: {formatCurrency(item.winning_bid)}
-                            </Text>
+                            <Text variant="caption" color="tertiary" style={{ marginLeft: 6, fontSize: 10, lineHeight: 13 }}>Sold: {formatCurrency(item.winning_bid)}</Text>
+                        )}
+                        {isSold && winner && (
+                            <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 6 }}>
+                                {winner.profile_pic ? (
+                                    <Image source={{ uri: winner.profile_pic }} style={{ width: 14, height: 14, borderRadius: 7, marginRight: 3 }} />
+                                ) : (
+                                    <View variant="transparent" style={{ width: 14, height: 14, borderRadius: 7, backgroundColor: winner.is_me ? '#10B98130' : theme.colors.primary.subtle, alignItems: 'center', justifyContent: 'center', marginRight: 3 }}>
+                                        <Text variant="caption" style={{ fontSize: 7, lineHeight: 10, color: winner.is_me ? '#10B981' : theme.colors.primary.default }}>
+                                            {(winner.username || '?').charAt(0).toUpperCase()}
+                                        </Text>
+                                    </View>
+                                )}
+                                <Text variant="caption" style={{ fontSize: 10, lineHeight: 13, color: winner.is_me ? '#10B981' : theme.colors.text.tertiary }}>
+                                    {winner.is_me ? 'You' : winner.username || 'Unknown'}
+                                </Text>
+                            </View>
                         )}
                     </View>
                 </View>
 
-                {/* Per-item countdown timer badge (live active item) */}
-                {is_active_item && secondsLeft != null && secondsLeft > 0 && !is_paused && (
-                    <View
-                        variant="transparent"
-                        style={[
-                            styles.timerBadge,
-                            { backgroundColor: getTimerColor(secondsLeft, theme) + '20' },
-                            secondsLeft < 5 && { opacity: Math.abs(Math.sin(Date.now() / 300)) * 0.5 + 0.5 },
-                        ]}
-                    >
-                        <Ionicons name="timer-outline" size={12} color={getTimerColor(secondsLeft, theme)} />
-                        <Text
-                            variant="caption"
-                            bold
-                            style={{ color: getTimerColor(secondsLeft, theme), marginLeft: 3, fontSize: 11 }}
-                        >
-                            {formatCountdown(secondsLeft)}
-                        </Text>
-                    </View>
-                )}
-
-                {/* Going once indicator */}
-                {is_active_item && secondsLeft != null && secondsLeft <= 10 && secondsLeft > 0 && item.current_bid > 0 && !is_paused && (
-                    <Text variant="caption" bold style={{ color: theme.colors.status.error, fontSize: 10, marginLeft: 4 }}>
-                        Going...
-                    </Text>
-                )}
-
-                <View variant="transparent" style={styles.bidInfo}>
-                    <Text variant="caption" color="tertiary">
-                        {auction_type === 'sealed_bid' ? 'Your Bid' : 'Current Bid'}
+                <View variant="transparent" style={styles.rightColumn}>
+                    <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>
+                        {auction_type === 'sealed_bid' ? 'Your Bid' : isSold ? 'Winning Bid' : 'Current Bid'}
                     </Text>
                     <Text variant="body" bold>
                         {auction_type === 'sealed_bid'
-                            ? my_bid
-                                ? formatCurrency(my_bid.bid_amount)
-                                : '-'
-                            : item.current_bid > 0
-                                ? formatCurrency(item.current_bid)
-                                : '-'}
+                            ? my_bid ? formatCurrency(my_bid.bid_amount) : '-'
+                            : (isSold ? item.winning_bid : item.current_bid) > 0 ? formatCurrency(isSold ? item.winning_bid : item.current_bid) : '-'}
                     </Text>
+                    {canBid && <Ionicons name={expanded ? 'chevron-up' : 'chevron-down'} size={14} color={theme.colors.text.tertiary} style={{ marginTop: 2 }} />}
                 </View>
-
-                {canBid && (
-                    <Ionicons
-                        name={expanded ? 'chevron-up' : 'chevron-down'}
-                        size={16}
-                        color={theme.colors.text.tertiary}
-                        style={styles.chevron}
-                    />
-                )}
             </TouchableOpacity>
 
             {expanded && canBid && (
@@ -225,6 +285,54 @@ export const CalcuttaAuctionItem: React.FC<CalcuttaAuctionItemComponentProps> =
 };
 
 const styles = StyleSheet.create({
+    // ── Active item hero card ──
+    activeCard: {
+        marginHorizontal: 12,
+        marginVertical: 8,
+        borderRadius: 16,
+        borderWidth: 1.5,
+        padding: 16,
+    },
+    activeHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    activeImage: {
+        width: 52,
+        height: 52,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    activeBidRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 14,
+        paddingTop: 14,
+        borderTopWidth: 1,
+        borderTopColor: 'rgba(128,128,128,0.15)',
+    },
+    activeBidAmount: {
+        fontSize: 28,
+        lineHeight: 37,
+        fontWeight: '800',
+        marginTop: 2,
+    },
+    activeTimerBox: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 10,
+        borderWidth: 1,
+    },
+    activeTimerText: {
+        fontSize: 20,
+        lineHeight: 26,
+        fontWeight: '800',
+        marginLeft: 6,
+    },
+    // ── Inactive item rows ──
     container: {
         borderBottomWidth: 1,
     },
@@ -234,30 +342,22 @@ const styles = StyleSheet.create({
         padding: 12,
     },
     imageContainer: {
-        height: 32,
-        width: 32,
-        borderRadius: 16,
+        height: 36,
+        width: 36,
+        borderRadius: 8,
         alignItems: 'center',
         justifyContent: 'center',
     },
     info: {
         flex: 1,
         marginLeft: 10,
-    },
-    nameRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    name: {
-        flex: 1,
-    },
-    seed: {
-        marginLeft: 6,
+        marginRight: 10,
     },
     statusRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginTop: 4,
+        flexWrap: 'wrap',
+        marginTop: 3,
     },
     statusBadge: {
         paddingHorizontal: 6,
@@ -267,22 +367,11 @@ const styles = StyleSheet.create({
     bidStatus: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginLeft: 8,
-    },
-    timerBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 6,
         marginLeft: 6,
     },
-    bidInfo: {
+    rightColumn: {
         alignItems: 'flex-end',
-        marginLeft: 10,
-    },
-    chevron: {
-        marginLeft: 8,
+        minWidth: 70,
     },
     bidInputContainer: {
         paddingHorizontal: 12,