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 } from '@bettoredge/types';
import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';

interface SealedBidHeaderProps {
    competition: CalcuttaCompetitionProps;
    isAdmin: boolean;
    onClose?: () => void;
    onManage?: () => void;
    lifecycleState: CalcuttaLifecycleState;
    auctionExpired?: boolean;
}

function getStateBadge(state: CalcuttaLifecycleState): { label: string; color: string; bg: string } {
    switch (state) {
        case 'pending':
            return { label: 'Coming Soon', color: '#F59E0B', bg: '#F59E0B15' };
        case 'scheduled':
            return { label: 'Open to Join', color: '#3B82F6', bg: '#3B82F615' };
        case 'auctioning':
            return { label: 'Live', color: '#10B981', bg: '#10B98115' };
        case 'tournament':
            return { label: 'In Progress', color: '#8B5CF6', bg: '#8B5CF615' };
        case 'completed':
            return { label: 'Completed', color: '#6B7280', bg: '#6B728015' };
    }
}

export const SealedBidHeader: React.FC<SealedBidHeaderProps> = ({
    competition,
    isAdmin,
    onManage,
    lifecycleState,
    auctionExpired,
}) => {
    const { theme } = useTheme();
    const badge = (auctionExpired && lifecycleState === 'auctioning')
        ? { label: 'Closing...', color: '#F59E0B', bg: '#F59E0B15' }
        : getStateBadge(lifecycleState);

    return (
        <View variant="transparent" style={[styles.container, { borderColor: theme.colors.border.subtle }]}>
            {competition.image?.url ? (
                <Image source={{ uri: competition.image.url }} style={styles.thumb} />
            ) : (
                <View variant="transparent" style={[styles.thumb, { backgroundColor: theme.colors.surface.elevated }]}>
                    <Ionicons name="hammer-outline" size={20} color={theme.colors.text.tertiary} />
                </View>
            )}

            <View variant="transparent" style={styles.titleWrap}>
                <Text variant="body" bold numberOfLines={1}>{competition.competition_name}</Text>
                <View variant="transparent" style={styles.badgeRow}>
                    <View variant="transparent" style={[styles.badge, { backgroundColor: theme.colors.primary.subtle }]}>
                        <Text variant="caption" style={{ color: theme.colors.primary.default, fontSize: 10, lineHeight: 13 }}>Sealed Bid</Text>
                    </View>
                    <View variant="transparent" style={[styles.badge, { backgroundColor: badge.bg, marginLeft: 4 }]}>
                        <Text variant="caption" style={{ color: badge.color, fontSize: 10, lineHeight: 13 }}>{badge.label}</Text>
                    </View>
                </View>
            </View>

            {isAdmin && onManage && (
                <TouchableOpacity
                    onPress={onManage}
                    style={[styles.gearBtn, { backgroundColor: theme.colors.surface.elevated }]}
                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
                >
                    <Ionicons name="settings-outline" size={18} color={theme.colors.text.secondary} />
                </TouchableOpacity>
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 14,
        paddingVertical: 10,
        borderBottomWidth: 1,
    },
    thumb: {
        width: 44,
        height: 44,
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
        marginRight: 10,
    },
    titleWrap: {
        flex: 1,
    },
    badgeRow: {
        flexDirection: 'row',
        marginTop: 2,
    },
    badge: {
        paddingHorizontal: 6,
        paddingVertical: 2,
        borderRadius: 4,
    },
    gearBtn: {
        width: 32,
        height: 32,
        borderRadius: 16,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 8,
    },
});