import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { COLORS } from '../constants/colors';

const TransactionList = ({ transactions }) => {
  if (!transactions || transactions.length === 0) {
    return (
      <View style={styles.container}>
        <Text style={styles.emptyText}>Soňky 10 günde kart hereketleri ýok...</Text>
      </View>
    );
  }

  const groupedTransactions = transactions.reduce((acc, transaction) => {
    const date = new Date(transaction.date).toLocaleDateString('tk', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
    if (!acc[date]) {
      acc[date] = [];
    }
    acc[date].push(transaction);
    return acc;
  }, {});

  const renderTransactionItem = ({ item }) => (
    <View style={styles.transactionItem}>
      <View style={styles.transactionIcon}>
        <Ionicons
          name={item.type === 'credit' ? 'arrow-down' : 'arrow-up'}
          size={20}
          color={item.type === 'credit' ? COLORS.success : COLORS.danger}
        />
      </View>
      <View style={styles.transactionDetails}>
        <Text style={styles.transactionTitle}>{item.description}</Text>
        <Text style={styles.transactionDate}>{item.time ?? '-'}</Text>
      </View>
      <Text
        style={[
          styles.transactionAmount,
          { color: item.type === 'credit' ? COLORS.success : COLORS.textPrimary },
        ]}
      >
        {item.type === 'credit' ? '+' : '-'}
        {item.amount} {item.currency}
      </Text>
    </View>
  );

  const renderTransactionSection = ({ item: date }) => (
    <View>
      <Text style={styles.transactionDateHeader}>{date}</Text>
      <FlatList
        data={groupedTransactions[date]}
        renderItem={renderTransactionItem}
        keyExtractor={(item) => item.id?.toString()}
        scrollEnabled={false}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
      />
    </View>
  );

  return (
    <FlatList
      data={Object.keys(groupedTransactions)}
      renderItem={renderTransactionSection}
      keyExtractor={(date) => date}
      scrollEnabled={false}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  emptyText: {
    textAlign: 'center',
    color: COLORS.textSecondary,
  },
  transactionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
  },
  transactionIcon: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: COLORS.background,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 16,
  },
  transactionDetails: {
    flex: 1,
  },
  transactionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: COLORS.textPrimary,
    marginBottom: 2,
  },
  transactionDate: {
    fontSize: 13,
    color: COLORS.textSecondary,
  },
  transactionAmount: {
    fontSize: 16,
    fontWeight: '700',
  },
  transactionDateHeader: {
    fontSize: 14,
    fontWeight: '600',
    color: COLORS.textSecondary,
    backgroundColor: COLORS.white,
    paddingTop: 16,
    paddingBottom: 8,
    paddingHorizontal: 4,
  },
  separator: {
    height: 1,
    backgroundColor: COLORS.gray[200],
    marginLeft: 60,
  },
});

export default TransactionList;