import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { View, Text, useTheme } from '@bettoredge/styles';
import { Ionicons } from '@expo/vector-icons';
import type { CalcuttaLifecycleState } from '../../helpers/lifecycleState';

export type SealedBidTab =
    | 'items'
    | 'my_bids'
    | 'players'
    | 'info'
    | 'my_items'
    | 'results'
    | 'leaderboard';

interface TabDef {
    key: SealedBidTab;
    label: string;
    icon: keyof typeof Ionicons.glyphMap;
    count?: number;
}

interface SealedBidTabBarProps {
    activeTab: SealedBidTab;
    onTabChange: (tab: SealedBidTab) => void;
    itemCount: number;
    myBidCount: number;
    playerCount: number;
    lifecycleState: CalcuttaLifecycleState;
}

function getTabsForState(
    state: CalcuttaLifecycleState,
    itemCount: number,
    myBidCount: number,
    playerCount: number,
): TabDef[] {
    switch (state) {
        case 'pending':
        case 'scheduled':
            return [
                { key: 'items', label: 'Items', icon: 'list-outline', count: itemCount },
                { key: 'players', label: 'Players', icon: 'people-outline', count: playerCount },
                { key: 'info', label: 'Info', icon: 'information-circle-outline' },
            ];
        case 'auctioning':
            return [
                { key: 'items', label: 'Items', icon: 'list-outline', count: itemCount },
                { key: 'my_bids', label: 'My Bids', icon: 'pricetag-outline', count: myBidCount },
                { key: 'players', label: 'Players', icon: 'people-outline', count: playerCount },
                { key: 'info', label: 'Info', icon: 'information-circle-outline' },
            ];
        case 'tournament':
        case 'completed':
            return [
                { key: 'my_items', label: 'My Items', icon: 'ribbon-outline', count: myBidCount },
                { key: 'results', label: 'Results', icon: 'trophy-outline' },
                { key: 'leaderboard', label: 'Leaderboard', icon: 'podium-outline' },
                { key: 'info', label: 'Info', icon: 'information-circle-outline' },
            ];
    }
}

export const SealedBidTabBar: React.FC<SealedBidTabBarProps> = ({
    activeTab,
    onTabChange,
    itemCount,
    myBidCount,
    playerCount,
    lifecycleState,
}) => {
    const { theme } = useTheme();

    const tabs = getTabsForState(lifecycleState, itemCount, myBidCount, playerCount);

    return (
        <View variant="transparent" style={[styles.container, { borderColor: theme.colors.border.subtle }]}>
            {tabs.map((tab) => {
                const isActive = activeTab === tab.key;
                return (
                    <TouchableOpacity
                        key={tab.key}
                        style={styles.tab}
                        onPress={() => onTabChange(tab.key)}
                        activeOpacity={0.7}
                    >
                        <View variant="transparent" style={styles.tabContent}>
                            <Ionicons
                                name={tab.icon}
                                size={16}
                                color={isActive ? theme.colors.primary.default : theme.colors.text.tertiary}
                            />
                            <Text
                                variant="caption"
                                bold={isActive}
                                style={{
                                    color: isActive ? theme.colors.primary.default : theme.colors.text.tertiary,
                                    marginLeft: 4,
                                    fontSize: 11,
                                    lineHeight: 15,
                                }}
                            >
                                {tab.label}
                            </Text>
                            {tab.count != null && tab.count > 0 && (
                                <View
                                    variant="transparent"
                                    style={[
                                        styles.badge,
                                        {
                                            backgroundColor: isActive
                                                ? theme.colors.primary.default
                                                : theme.colors.surface.elevated,
                                        },
                                    ]}
                                >
                                    <Text
                                        variant="caption"
                                        style={{
                                            color: isActive ? '#FFFFFF' : theme.colors.text.tertiary,
                                            fontSize: 9,
                                            lineHeight: 12,
                                        }}
                                    >
                                        {tab.count}
                                    </Text>
                                </View>
                            )}
                        </View>
                        {isActive && (
                            <View
                                variant="transparent"
                                style={[styles.indicator, { backgroundColor: theme.colors.primary.default }]}
                            />
                        )}
                    </TouchableOpacity>
                );
            })}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        borderBottomWidth: 1,
    },
    tab: {
        flex: 1,
        alignItems: 'center',
        paddingVertical: 10,
    },
    tabContent: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    badge: {
        minWidth: 16,
        height: 16,
        borderRadius: 8,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 4,
        paddingHorizontal: 4,
    },
    indicator: {
        position: 'absolute',
        bottom: 0,
        left: '15%',
        right: '15%',
        height: 2,
        borderRadius: 1,
    },
});