import React, { useCallback, useEffect } from 'react';
import {
  View,
  Text,
  SafeAreaView,
  FlatList,
  TouchableOpacity,
} from 'react-native';
// import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Header } from '@components';
import { useAppTheme } from '@theme';
import { getStyles } from './walletScreen.styles';
import { WalletTransaction } from '@interfaces';
import { useAppDispatch, useAppSelector } from '@store';
import { getAllWalletTransactions } from './thunk';
import { useFocusEffect } from '@react-navigation/native';
import { getWalletBalanceThunk } from '../accountScreen';

// const balance = 17496.05;

// const transactions: WalletTransaction[] = [
//   {
//     id: '1',
//     walletId: '',
//     transactionReference: 'TXN-1784543790637-2387',
//     direction: 'OUT',
//     amount: '1408.95',
//     balanceBefore: '18905',
//     balanceAfter: '17496.05',
//     type: 'PAYMENT',
//     referenceId: null,
//     description: null,
//     idempotencyKey: null,
//     createdAt: '2026-07-20T10:36:30.639Z',
//   },
//   {
//     id: '2',
//     walletId: '',
//     transactionReference: 'TXN-1784199810512-8502',
//     direction: 'OUT',
//     amount: '1095',
//     balanceBefore: '20000',
//     balanceAfter: '18905',
//     type: 'PAYMENT',
//     referenceId: null,
//     description: null,
//     idempotencyKey: null,
//     createdAt: '2026-07-16T11:03:30.515Z',
//   },
// ];

const WalletScreen = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const dispatch = useAppDispatch();
  const { walletTransactions } = useAppSelector(state => state.wallet);
  const { wallet } = useAppSelector(state => state.account);

  useFocusEffect(
    useCallback(() => {
      dispatch(getAllWalletTransactions());
      dispatch(getWalletBalanceThunk());
    }, []),
  );

  const renderItem = ({ item }: { item: WalletTransaction }) => {
    const isCredit = item.direction === 'IN';

    return (
      <View style={styles.transactionCard}>
        <View
          style={[
            styles.iconContainer,
            {
              backgroundColor: isCredit ? '#DFF7E4' : '#FFE5E5',
            },
          ]}
        >
          {/* <Icon
            name={isCredit ? 'arrow-bottom-left' : 'arrow-top-right'}
            size={22}
            color={isCredit ? '#18A558' : '#F04438'}
          /> */}
        </View>

        <View style={styles.transactionInfo}>
          <Text style={styles.transactionTitle}>{item.type}</Text>

          <Text style={styles.transactionRef}>{item.transactionReference}</Text>

          <Text style={styles.transactionDate}>
            {new Date(item.createdAt).toLocaleString()}
          </Text>
        </View>

        <View style={styles.amountContainer}>
          <Text
            style={[
              styles.amount,
              {
                color: isCredit ? '#18A558' : '#F04438',
              },
            ]}
          >
            {isCredit ? '+' : '-'}₹{item.amount}
          </Text>

          <Text style={styles.balanceText}>Bal ₹{item.balanceAfter}</Text>
        </View>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <Header title="Wallet" />

      <View style={styles.balanceCard}>
        <Text style={styles.balanceLabel}>Available Balance</Text>

        <Text style={styles.balance}>₹{wallet?.balance.toFixed(2)}</Text>

        <TouchableOpacity style={styles.addMoneyButton}>
          {/* <Icon name="plus" color="#FFF" size={20} /> */}
          <Text style={styles.addMoneyText}>Add Money</Text>
        </TouchableOpacity>
      </View>

      <Text style={styles.sectionTitle}>Recent Transactions</Text>

      <FlatList
        data={walletTransactions}
        keyExtractor={item => item.id}
        renderItem={renderItem}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.listContainer}
        ListEmptyComponent={
          <View style={styles.emptyContainer}>
            {/* <Icon name="wallet-outline" size={70} color="#BDBDBD" /> */}
            <Text style={styles.emptyText}>No Transactions Yet</Text>
          </View>
        }
      />
    </SafeAreaView>
  );
};

export default WalletScreen;