import React, { useMemo } from 'react';
import { StyleSheet, FlatList, Image } from 'react-native';
import { View, Text, useTheme } from '@bettoredge/styles';
import { Ionicons } from '@expo/vector-icons';
import type { CalcuttaParticipantProps, PublicPlayerProps } from '@bettoredge/types';
import type { CalcuttaPresence } from '../../hooks/useCalcuttaSocket';
import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';
import { formatCurrency } from '../../helpers/formatting';
import { showResults } from '../../helpers/lifecycleState';

interface SealedBidPlayersTabProps {
    participants: CalcuttaParticipantProps[];
    players: Record<string, PublicPlayerProps>;
    player_id?: string;
    presence: CalcuttaPresence;
    market_type: string;
    lifecycleState: CalcuttaLifecycleState;
    socketConnected?: boolean;
    listHeader?: React.ReactNode;
}

export const SealedBidPlayersTab: React.FC<SealedBidPlayersTabProps> = ({
    participants,
    players,
    player_id,
    presence,
    market_type,
    lifecycleState,
    socketConnected,
    listHeader,
}) => {
    const { theme } = useTheme();
    const isResultsPhase = showResults(lifecycleState);
    const showOnlineStatus = socketConnected && !isResultsPhase;

    const onlineIds = useMemo(
        () => new Set(presence.players.map(p => p.player_id)),
        [presence.players],
    );

    const onlineCount = useMemo(
        () => participants.filter(p => onlineIds.has(p.player_id)).length,
        [participants, onlineIds],
    );

    // Sort by rank/winnings in results phase
    const sortedParticipants = useMemo(() => {
        if (!isResultsPhase) return participants;
        return [...participants].sort((a, b) => {
            if (a.place && b.place) return a.place - b.place;
            if (a.place) return -1;
            if (b.place) return 1;
            return (b.total_winnings || 0) - (a.total_winnings || 0);
        });
    }, [participants, isResultsPhase]);

    if (participants.length === 0) {
        return (
            <View variant="transparent" style={styles.container}>
                <>{listHeader}</>
                <View variant="transparent" style={styles.emptyContainer}>
                    <Ionicons name="people-outline" size={40} color={theme.colors.text.tertiary} />
                    <Text variant="body" color="tertiary" style={{ marginTop: 12 }}>No players yet</Text>
                </View>
            </View>
        );
    }

    return (
        <View variant="transparent" style={styles.container}>
            <FlatList
                data={sortedParticipants}
                keyExtractor={p => p.calcutta_participant_id}
                contentContainerStyle={styles.list}
                ListHeaderComponent={
                    <View variant="transparent">
                        <>{listHeader}</>
                        <View variant="transparent" style={styles.headerRow}>
                            <Text variant="caption" color="secondary">
                                {showOnlineStatus
                                    ? `${onlineCount} of ${participants.length} player${participants.length !== 1 ? 's' : ''} online`
                                    : `${participants.length} player${participants.length !== 1 ? 's' : ''}`
                                }
                            </Text>
                        </View>
                    </View>
                }
                renderItem={({ item: participant, index }) => {
                    const player = players[participant.player_id];
                    const isOnline = onlineIds.has(participant.player_id);
                    const isMe = participant.player_id === player_id;
                    const username = player?.username || player?.show_name || `Player ${participant.player_id.slice(0, 6)}`;
                    const profilePic = player?.profile_pic;

                    return (
                        <View variant="transparent" style={[styles.playerRow, { borderColor: theme.colors.border.subtle }]}>
                            {/* Rank in results phase */}
                            {isResultsPhase && (
                                <View variant="transparent" style={styles.rankCol}>
                                    {(participant.place ?? index + 1) <= 3 ? (
                                        <Ionicons
                                            name="trophy"
                                            size={14}
                                            color={(participant.place ?? index + 1) === 1 ? '#FFD700' : (participant.place ?? index + 1) === 2 ? '#C0C0C0' : '#CD7F32'}
                                        />
                                    ) : (
                                        <Text variant="caption" color="tertiary">{participant.place ?? index + 1}</Text>
                                    )}
                                </View>
                            )}

                            {/* Avatar */}
                            <View variant="transparent" style={styles.avatarWrap}>
                                {profilePic ? (
                                    <Image source={{ uri: profilePic }} style={styles.avatar} />
                                ) : (
                                    <View variant="transparent" style={[styles.avatar, { backgroundColor: theme.colors.primary.subtle }]}>
                                        <Text variant="caption" bold style={{ color: theme.colors.primary.default }}>
                                            {username.charAt(0).toUpperCase()}
                                        </Text>
                                    </View>
                                )}
                                {showOnlineStatus && isOnline && (
                                    <View variant="transparent" style={[styles.onlineDot, { backgroundColor: '#10B981', borderColor: theme.colors.surface.base }]} />
                                )}
                            </View>

                            {/* Name */}
                            <View variant="transparent" style={{ flex: 1 }}>
                                <View variant="transparent" style={{ flexDirection: 'row', alignItems: 'center' }}>
                                    <Text variant="body" bold={isMe} numberOfLines={1}>{username}</Text>
                                    {isMe && (
                                        <View variant="transparent" style={[styles.youBadge, { backgroundColor: theme.colors.primary.subtle }]}>
                                            <Text variant="caption" bold style={{ color: theme.colors.primary.default, fontSize: 9, lineHeight: 12 }}>YOU</Text>
                                        </View>
                                    )}
                                </View>
                                {isResultsPhase && (
                                    <Text variant="caption" color="tertiary" style={{ marginTop: 2 }}>
                                        {participant.items_owned > 0
                                            ? `${participant.items_owned} item${participant.items_owned !== 1 ? 's' : ''} · ${formatCurrency(participant.total_spent, market_type)} spent`
                                            : 'No items'}
                                    </Text>
                                )}
                            </View>

                            {/* Winnings in results phase */}
                            {isResultsPhase && participant.total_winnings > 0 && (
                                <View variant="transparent" style={{ alignItems: 'flex-end' }}>
                                    <Text variant="caption" color="tertiary" style={{ fontSize: 10, lineHeight: 13 }}>Won</Text>
                                    <Text variant="body" bold style={{ color: theme.colors.status.success }}>
                                        {formatCurrency(participant.total_winnings, market_type)}
                                    </Text>
                                </View>
                            )}
                        </View>
                    );
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    emptyContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 40,
    },
    headerRow: {
        paddingHorizontal: 16,
        paddingVertical: 10,
    },
    list: {
        paddingBottom: 40,
    },
    rankCol: {
        width: 28,
        alignItems: 'center',
        marginRight: 4,
    },
    playerRow: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 16,
        paddingVertical: 10,
        borderBottomWidth: 1,
    },
    avatarWrap: {
        marginRight: 12,
        position: 'relative',
    },
    avatar: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
    },
    onlineDot: {
        position: 'absolute',
        bottom: 0,
        right: 0,
        width: 12,
        height: 12,
        borderRadius: 6,
        borderWidth: 2,
    },
    youBadge: {
        paddingHorizontal: 6,
        paddingVertical: 2,
        borderRadius: 6,
        marginLeft: 6,
    },
});