import React from 'react';
import { StyleSheet, TouchableOpacity, Image } from 'react-native';
import { View, Text, useTheme } from '@bettoredge/styles';
import { Ionicons } from '@expo/vector-icons';
import type { CalcuttaCompetitionProps, CalcuttaParticipantProps } from '@bettoredge/types';
import { formatCurrency, getStatusLabel } from '../helpers/formatting';

export interface CalcuttaCardProps {
    competition: CalcuttaCompetitionProps;
    participant?: CalcuttaParticipantProps;
    onSelect: (competition: CalcuttaCompetitionProps) => void;
}

export const CalcuttaCard: React.FC<CalcuttaCardProps> = ({
    competition,
    participant,
    onSelect,
}) => {
    const { theme } = useTheme();

    const statusLabel = getStatusLabel(competition.status);
    const auctionLabel = competition.auction_type === 'sweepstakes'
        ? 'Sweepstakes'
        : competition.auction_type === 'live' ? 'Live Auction' : 'Sealed Bid';
    const isSweepstakes = competition.auction_type === 'sweepstakes';
    const participantCount = competition.participants?.length ?? 0;

    return (
        <TouchableOpacity
            style={[styles.row, { borderColor: theme.colors.border.subtle }]}
            activeOpacity={0.7}
            onPress={() => onSelect(competition)}
        >
            {competition.image?.url ? (
                <Image
                    source={{ uri: competition.image.url }}
                    style={[styles.image, { backgroundColor: theme.colors.surface.base }]}
                    resizeMode="cover"
                />
            ) : (
                <View
                    variant="transparent"
                    style={[styles.image, styles.imageFallback, { backgroundColor: theme.colors.surface.base }]}
                >
                    <Ionicons name="trophy-outline" size={18} color={theme.colors.text.tertiary} />
                </View>
            )}

            <View variant="transparent" style={styles.info}>
                <Text variant="body" bold numberOfLines={1}>
                    {competition.competition_name}
                </Text>
                <View variant="transparent" style={styles.meta}>
                    <Text variant="caption" color="tertiary">
                        {statusLabel}
                    </Text>
                    <Text variant="caption" color="tertiary"> {'\u00B7'} </Text>
                    <Text variant="caption" color="tertiary">
                        {auctionLabel}
                    </Text>
                </View>
                <View variant="transparent" style={styles.meta}>
                    {isSweepstakes ? (
                        <Text variant="caption" color="secondary">
                            {competition.rounds?.filter(r => r.prize_description).length ?? 0} Prizes
                        </Text>
                    ) : (
                        <Text variant="caption" color="secondary">
                            Pot: {formatCurrency(competition.total_pot, competition.market_type)}
                        </Text>
                    )}
                    <Text variant="caption" color="tertiary"> {'\u00B7'} </Text>
                    <Text variant="caption" color="secondary">
                        {participantCount} participant{participantCount !== 1 ? 's' : ''}
                    </Text>
                </View>
            </View>

            {participant && (
                <View variant="transparent" style={styles.participantInfo}>
                    <Text variant="caption" color="secondary">
                        {participant.items_owned} item{participant.items_owned !== 1 ? 's' : ''}
                    </Text>
                    <Text
                        variant="caption"
                        style={{
                            color: participant.total_winnings > 0
                                ? theme.colors.status.success
                                : theme.colors.text.secondary,
                            marginTop: 2,
                        }}
                    >
                        {formatCurrency(participant.total_winnings, competition.market_type)}
                    </Text>
                </View>
            )}

            <Ionicons
                name="chevron-forward"
                size={16}
                color={theme.colors.text.tertiary}
                style={styles.chevron}
            />
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 12,
        borderBottomWidth: 1,
    },
    image: {
        height: 36,
        width: 36,
        borderRadius: 8,
    },
    imageFallback: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    info: {
        flex: 1,
        marginLeft: 10,
    },
    meta: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 2,
    },
    participantInfo: {
        marginHorizontal: 10,
        alignItems: 'flex-end',
    },
    chevron: {
        marginLeft: 4,
    },
});