import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";

const Donasiberhasil = ({ navigation }) => {
  const currentDate = new Date().toLocaleDateString("id-ID", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  const donationAmount = 100000;
  const paymentMethod = "Transfer DANA";
  const description = "Pengelolaan Sampah";
  const senderName = "Dina Dwi Anisa";
  const accountName = "Dinas Lingkungan Hidup";
  const transactionId = "DN230512XYZ";

  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <MaterialIcons name="check-circle" size={70} color="#2D572C" />
        <Text style={styles.successText}>Terima Kasih!</Text>
        <Text style={styles.subText}>Donasi Anda Telah Berhasil</Text>

        <View style={styles.separator} />

        {/* Struk Donasi */}
        <View style={styles.row}>
          <Text style={styles.label}>Tanggal</Text>
          <Text style={styles.value}>{currentDate}</Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.label}>ID Transaksi</Text>
          <Text style={styles.value}>{transactionId}</Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.label}>Nama Pengirim</Text>
          <Text style={styles.value}>{senderName}</Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.label}>Akun Tujuan</Text>
          <Text style={styles.value}>{accountName}</Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.label}>Jumlah Donasi</Text>
          <Text style={styles.amount}>
            Rp {donationAmount.toLocaleString("id-ID")}
          </Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.label}>Tujuan Donasi</Text>
          <Text style={styles.value}>{description}</Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.label}>Metode Pembayaran</Text>
          <Text style={styles.value}>{paymentMethod}</Text>
        </View>

        <View style={styles.thankYou}>
          <Text style={styles.thankText}>
            Semoga kebaikan Anda membawa berkah bagi banyak orang. 💚
          </Text>
        </View>

        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate("Home")}
        >
          <Text style={styles.buttonText}>Kembali ke Beranda</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default Donasiberhasil;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F2F2F2",
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  card: {
    backgroundColor: "#fff",
    width: "100%",
    borderRadius: 16,
    padding: 25,
    alignItems: "center",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 5,
  },
  successText: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#2D572C",
    marginTop: 10,
  },
  subText: {
    fontSize: 16,
    color: "#444",
    marginTop: 5,
    marginBottom: 15,
  },
  separator: {
    height: 1,
    width: "100%",
    backgroundColor: "#ccc",
    marginVertical: 20,
  },
  row: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 12,
  },
  label: {
    fontSize: 16,
    color: "#333",
    fontWeight: "500",
  },
  value: {
    fontSize: 16,
    color: "#666",
    textAlign: "right",
    flexShrink: 1,
    marginLeft: 20,
  },
  amount: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#2D572C",
  },
  thankYou: {
    marginTop: 25,
    marginBottom: 20,
    paddingHorizontal: 10,
  },
  thankText: {
    textAlign: "center",
    color: "#555",
    fontSize: 14,
    fontStyle: "italic",
  },
  button: {
    backgroundColor: "#2D572C",
    paddingVertical: 14,
    paddingHorizontal: 30,
    borderRadius: 10,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
});