import { StyleSheet, View, ActivityIndicator, ScrollView } from 'react-native';
import { Header } from '../components/Header';
import { BalanceCard } from '../components/BalanceCard';
import { TransactionForm } from '../components/TransactionForm';
import { TransactionList } from '../components/TransactionList';
import { useTransactions } from '../hooks/useTransactions';
import { calculateBalance } from '../utils/helpers';
import { COLORS } from '../constants/theme';

export default function HomeScreen() {
  const { transactions, loading, addTransaction, deleteTransaction } = useTransactions();
  const balance = calculateBalance(transactions);

  if (loading) {
    return (
      <View style={styles.loading}>
        <ActivityIndicator size="large" color={COLORS.primary} />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Header title="Pengeluaran Kita" />
      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        <BalanceCard balance={balance} />
        <TransactionForm onAdd={addTransaction} />
        <TransactionList
          transactions={transactions}
          onDelete={deleteTransaction}
        />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  content: {
    flex: 1,
  },
  loading: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: COLORS.background,
  },
});