import React from 'react';
import { StyleSheet, TouchableOpacity, FlatList, ActivityIndicator } from 'react-native';
import { View, Text, useTheme } from '@bettoredge/styles';
import { Ionicons } from '@expo/vector-icons';
import type { CalcuttaTemplateProps } from '@bettoredge/types';
import { useCalcuttaTemplates } from '../hooks/useCalcuttaTemplates';

export interface CalcuttaTemplateSelectorProps {
    selectedTemplateId?: string;
    onSelect: (template: CalcuttaTemplateProps | undefined) => void;
}

export const CalcuttaTemplateSelector: React.FC<CalcuttaTemplateSelectorProps> = ({
    selectedTemplateId,
    onSelect,
}) => {
    const { theme } = useTheme();
    const { loading, templates } = useCalcuttaTemplates();

    if (loading) {
        return (
            <View variant="transparent" style={styles.centered}>
                <ActivityIndicator size="small" color={theme.colors.primary.default} />
            </View>
        );
    }

    if (templates.length === 0) {
        return null;
    }

    return (
        <View variant="transparent" style={styles.container}>
            <Text variant="caption" style={{ color: theme.colors.text.secondary, marginBottom: 8 }}>
                Use a Template (optional)
            </Text>

            {selectedTemplateId && (
                <TouchableOpacity
                    style={[styles.clearButton, { borderColor: theme.colors.border.subtle }]}
                    onPress={() => onSelect(undefined)}
                >
                    <Ionicons name="close-circle-outline" size={16} color={theme.colors.text.secondary} />
                    <Text variant="caption" style={{ color: theme.colors.text.secondary, marginLeft: 4 }}>
                        Clear template
                    </Text>
                </TouchableOpacity>
            )}

            <FlatList
                data={templates}
                horizontal
                showsHorizontalScrollIndicator={false}
                keyExtractor={(item) => item.calcutta_template_id}
                renderItem={({ item }) => {
                    const isSelected = item.calcutta_template_id === selectedTemplateId;
                    return (
                        <TouchableOpacity
                            style={[
                                styles.card,
                                {
                                    borderColor: isSelected ? theme.colors.primary.default : theme.colors.border.subtle,
                                    backgroundColor: isSelected ? theme.colors.primary.subtle : theme.colors.surface.elevated,
                                },
                            ]}
                            activeOpacity={0.7}
                            onPress={() => onSelect(isSelected ? undefined : item)}
                        >
                            <Ionicons
                                name="copy-outline"
                                size={20}
                                color={isSelected ? theme.colors.primary.default : theme.colors.text.tertiary}
                            />
                            <Text
                                variant="body"
                                bold
                                numberOfLines={1}
                                style={{ marginTop: 4 }}
                            >
                                {item.template_name}
                            </Text>
                            {item.sport && (
                                <Text variant="caption" style={{ color: theme.colors.text.secondary }}>
                                    {item.sport}
                                </Text>
                            )}
                            <Text variant="caption" style={{ color: theme.colors.text.tertiary, marginTop: 2 }}>
                                {item.items?.length ?? '?'} items · {item.rounds?.length ?? '?'} rounds
                            </Text>
                        </TouchableOpacity>
                    );
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        marginVertical: 8,
    },
    centered: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 16,
    },
    clearButton: {
        flexDirection: 'row',
        alignItems: 'center',
        alignSelf: 'flex-start',
        paddingHorizontal: 8,
        paddingVertical: 4,
        borderRadius: 12,
        borderWidth: 1,
        marginBottom: 8,
    },
    card: {
        width: 140,
        padding: 12,
        borderRadius: 8,
        borderWidth: 1.5,
        marginRight: 10,
    },
});