import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '@/shared/styles/useTheme';

interface ListItem {
  id: string;
  title: string;
  subtitle?: string;
  value: string | number;
  icon?: string;
  color?: string;
}

interface ListWidgetProps {
  title: string;
  data: ListItem[];
  onItemPress?: (item: ListItem) => void;
  onViewAllPress?: () => void;
  maxItems?: number;
  showValue?: boolean;
  emptyMessage?: string;
}

const ListWidget: React.FC<ListWidgetProps> = ({
  title,
  data,
  onItemPress,
  onViewAllPress,
  maxItems = 5,
  showValue = true,
  emptyMessage = 'No data available',
}) => {
  const { colors, fonts, spacing, shadows } = useTheme();

  const displayData = data.slice(0, maxItems);

  const formatValue = (value: string | number): string => {
    if (typeof value === 'number') {
      return value.toLocaleString();
    }
    return value;
  };

  return (
    <View style={[
      styles.container,
      {
        backgroundColor: colors.surface,
        borderColor: colors.border,
        ...shadows.light,
      }
    ]}>
      <View style={styles.header}>
        <Text style={[styles.title, { color: colors.text, fontFamily: fonts.medium }]}>
          {title}
        </Text>
        {onViewAllPress && data.length > maxItems && (
          <TouchableOpacity onPress={onViewAllPress} style={styles.viewAllButton}>
            <Text style={[styles.viewAllText, { color: colors.primary, fontFamily: fonts.medium }]}>
              View All
            </Text>
            <Icon name="chevron-right" size={16} color={colors.primary} />
          </TouchableOpacity>
        )}
      </View>

      <View style={styles.content}>
        {displayData.length === 0 ? (
          <View style={styles.emptyContainer}>
            <Icon name="inbox" size={32} color={colors.textLight} />
            <Text style={[styles.emptyText, { color: colors.textLight, fontFamily: fonts.regular }]}>
              {emptyMessage}
            </Text>
          </View>
        ) : (
          <ScrollView showsVerticalScrollIndicator={false}>
            {displayData.map((item, index) => (
              <TouchableOpacity
                key={item.id}
                style={[
                  styles.listItem,
                  index === displayData.length - 1 && styles.lastListItem,
                  { borderBottomColor: colors.border }
                ]}
                onPress={() => onItemPress?.(item)}
                disabled={!onItemPress}
              >
                <View style={styles.itemContent}>
                  {item.icon && (
                    <View style={[
                      styles.iconContainer,
                      { backgroundColor: item.color ? `${item.color}20` : `${colors.primary}20` }
                    ]}>
                      <Icon
                        name={item.icon}
                        size={16}
                        color={item.color || colors.primary}
                      />
                    </View>
                  )}
                  
                  <View style={styles.textContainer}>
                    <Text style={[styles.itemTitle, { color: colors.text, fontFamily: fonts.medium }]}>
                      {item.title}
                    </Text>
                    {item.subtitle && (
                      <Text style={[styles.itemSubtitle, { color: colors.textLight, fontFamily: fonts.regular }]}>
                        {item.subtitle}
                      </Text>
                    )}
                  </View>
                </View>

                {showValue && (
                  <View style={styles.valueContainer}>
                    <Text style={[styles.itemValue, { color: colors.text, fontFamily: fonts.bold }]}>
                      {formatValue(item.value)}
                    </Text>
                  </View>
                )}
              </TouchableOpacity>
            ))}
          </ScrollView>
        )}
      </View>

      {data.length > maxItems && !onViewAllPress && (
        <View style={styles.footer}>
          <Text style={[styles.footerText, { color: colors.textLight, fontFamily: fonts.regular }]}>
            +{data.length - maxItems} more items
          </Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderRadius: 12,
    borderWidth: 1,
    padding: 16,
    marginBottom: 12,
    maxHeight: 300,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  title: {
    fontSize: 16,
  },
  viewAllButton: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  viewAllText: {
    fontSize: 12,
    marginRight: 4,
  },
  content: {
    flex: 1,
  },
  emptyContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 32,
  },
  emptyText: {
    fontSize: 14,
    marginTop: 8,
    textAlign: 'center',
  },
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  lastListItem: {
    borderBottomWidth: 0,
  },
  itemContent: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  iconContainer: {
    width: 32,
    height: 32,
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  textContainer: {
    flex: 1,
  },
  itemTitle: {
    fontSize: 14,
    marginBottom: 2,
  },
  itemSubtitle: {
    fontSize: 12,
  },
  valueContainer: {
    marginLeft: 12,
  },
  itemValue: {
    fontSize: 14,
  },
  footer: {
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: '#E5E7EB',
    alignItems: 'center',
  },
  footerText: {
    fontSize: 12,
  },
});

export default ListWidget;
