import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
} from "react-native";
import { Ionicons } from "@expo/vector-icons"; // Import Ionicons for back icon
import { useNavigation } from "@react-navigation/native";

// Sample data for donation history
const donations = [
  {
    id: 1,
    name: "John Doe",
    tujuan: "Edukasi Lingkungan",
    catatan: "-",
    tanggal: "2025-05-19",
    waktu: "14:30",
    nominal: "Rp 500.000",
  },
  {
    id: 2,
    name: "Jane Smith",
    tujuan: "Pengelolaan Sampah",
    catatan: "Donasi untuk pengadaan tempat sampah",
    tanggal: "2025-06-01",
    waktu: "10:00",
    nominal: "Rp 150.000",
  },
  {
    id: 3,
    name: "Mark Wilson",
    tujuan: "Program Pelatihan",
    catatan: "Untuk program pelatihan masyarakat",
    tanggal: "2025-04-15",
    waktu: "16:45",
    nominal: "Rp 300.000",
  },
];

export default function RiwayatDonasiAdmin() {
  const navigation = useNavigation();

  return (
    <ScrollView contentContainerStyle={styles.container}>
      {/* Back Button */}
      <TouchableOpacity
        style={styles.backButton}
        onPress={() => navigation.goBack()} // Go back to previous screen
      >
        <Ionicons name="arrow-back" size={30} color="#000" />
      </TouchableOpacity>

      {/* Title */}
      <Text style={styles.title}>RIWAYAT DONASI</Text>

      {/* Donation History List */}
      <View style={styles.historyBox}>
        {donations.map((donation) => (
          <View key={donation.id} style={styles.donationView}>
            <View style={styles.donationContent}>
              {/* Donation Info */}
              <View style={styles.leftColumn}>
                <Text style={styles.donationName}>{donation.name}</Text>
                <Text style={styles.donationDetail}>
                  Tujuan: {donation.tujuan}
                </Text>
                <Text style={styles.donationDetail}>
                  Catatan: {donation.catatan}
                </Text>
                <Text style={styles.donationDetail}>
                  Tanggal: {donation.tanggal}
                </Text>
                <Text style={styles.donationDetail}>
                  Waktu: {donation.waktu}
                </Text>
              </View>

              {/* Donation Amount */}
              <View style={styles.rightColumn}>
                <Text style={styles.donationAmount}>{donation.nominal}</Text>
              </View>
            </View>
          </View>
        ))}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    padding: 20,
    flex: 1,
    backgroundColor: "#fff",
  },
  backButton: {
    position: "absolute",
    top: 20,
    left: 10,
    zIndex: 1,
    marginTop: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#000",
    marginBottom: 5,
    marginLeft: 30,
    marginTop: 15,
  },
  historyBox: {
    marginTop: 10,
    paddingBottom: 5,
  },
  donationView: {
    backgroundColor: "#fff", // Background color for each donation box
    borderRadius: 20,
    marginVertical: 10,
    padding: 15,
    flexDirection: "row", // Layout of elements horizontally
    justifyContent: "space-between", // Space out left and right columns
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#000",
  },
  donationContent: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
  },
  leftColumn: {
    flex: 1,
  },
  rightColumn: {
    alignItems: "flex-end", // Align right side for donation amount
    flexDirection: "column",
    justifyContent: "center",
  },
  donationName: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#333",
  },
  donationDetail: {
    fontSize: 14,
    color: "#555",
    marginBottom: 5,
  },
  donationAmount: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#4F772D", // Green color for donation amount
  },
});