import { View, Text, StyleSheet, ScrollView } from "react-native";
import { Ionicons } from "@expo/vector-icons";

export default function HistoryScreen() {
  const transactions = [
    {
      id: 1,
      title: "Gaji Bulanan",
      amount: "Rp 5.000.000",
      type: "income",
      date: "12 April 2026",
      icon: "wallet",
    },
    {
      id: 2,
      title: "Makan Siang",
      amount: "Rp 50.000",
      type: "expense",
      date: "13 April 2026",
      icon: "restaurant",
    },
    {
      id: 3,
      title: "Transport",
      amount: "Rp 20.000",
      type: "expense",
      date: "14 April 2026",
      icon: "car",
    },
    {
      id: 4,
      title: "Freelance Project",
      amount: "Rp 1.500.000",
      type: "income",
      date: "15 April 2026",
      icon: "briefcase",
    },
  ];

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Riwayat Transaksi</Text>
      <Text style={styles.subtitle}>
        Semua pemasukan dan pengeluaran kamu
      </Text>

      {transactions.map((item) => (
        <View key={item.id} style={styles.card}>
          <View style={styles.leftSection}>
            <View
              style={[
                styles.iconContainer,
                item.type === "income"
                  ? styles.incomeBg
                  : styles.expenseBg,
              ]}
            >
              <Ionicons
                name={item.icon as any}
                size={22}
                color={item.type === "income" ? "#16A34A" : "#DC2626"}
              />
            </View>

            <View>
              <Text style={styles.transactionTitle}>{item.title}</Text>
              <Text style={styles.transactionDate}>{item.date}</Text>
            </View>
          </View>

          <Text
            style={[
              styles.amount,
              item.type === "income"
                ? styles.incomeText
                : styles.expenseText,
            ]}
          >
            {item.type === "income" ? "+" : "-"} {item.amount}
          </Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F7FA",
    padding: 20,
    paddingTop: 55,
  },

  title: {
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 6,
  },

  subtitle: {
    fontSize: 15,
    color: "#666",
    marginBottom: 28,
  },

  card: {
    backgroundColor: "#FFFFFF",
    borderRadius: 18,
    padding: 18,
    marginBottom: 16,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 6,
    elevation: 3,
  },

  leftSection: {
    flexDirection: "row",
    alignItems: "center",
    gap: 14,
  },

  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 14,
    justifyContent: "center",
    alignItems: "center",
  },

  incomeBg: {
    backgroundColor: "#DCFCE7",
  },

  expenseBg: {
    backgroundColor: "#FEE2E2",
  },

  transactionTitle: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 4,
  },

  transactionDate: {
    fontSize: 13,
    color: "#777",
  },

  amount: {
    fontSize: 15,
    fontWeight: "700",
  },

  incomeText: {
    color: "#16A34A",
  },

  expenseText: {
    color: "#DC2626",
  },
});