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

const KonfirmasiPembayaran = ({ navigation }) => {
  const [paymentMethod, setPaymentMethod] = useState("Transfer DANA");
  const [donationAmount, setDonationAmount] = useState(100000);
  const [description, setDescription] = useState("Pengelolaan Sampah");
  const [senderName, setSenderName] = useState("Dina Dwi Anisa");
  const [accountName, setAccountName] = useState("Akun Donor XYZ");

  const currentDate = new Date();
  const formattedDate = currentDate.toLocaleDateString("id-ID", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
  const formattedTime = currentDate.toLocaleTimeString("id-ID", {
    hour: "2-digit",
    minute: "2-digit",
  });

  return (
    <ScrollView style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Ionicons name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.title}>KONFIRMASI PEMBAYARAN</Text>
      </View>

      {/* Receipt */}
      <View style={styles.receiptCard}>
        <ReceiptRow label="Nama Pengirim" value={senderName} />
        <ReceiptRow
          label="Tanggal"
          value={`${formattedDate} - ${formattedTime}`}
        />
        <ReceiptRow
          label="Jumlah Donasi"
          value={`Rp ${donationAmount.toLocaleString()}`}
          isHighlight
        />
        <ReceiptRow label="Tujuan Donasi" value={description} />
        <ReceiptRow label="Metode Pembayaran" value={paymentMethod} />
      </View>

      {/* Confirm Button */}
      <TouchableOpacity
        style={styles.confirmButton}
        onPress={() => navigation.navigate("DonasiVerifikasi")}
      >
        <Text style={styles.confirmButtonText}>Konfirmasi Pembayaran</Text>
      </TouchableOpacity>

      {/* Note */}
      <View style={styles.termsSection}>
        <Text style={styles.termsText}>
          Pastikan Anda telah melakukan pembayaran sesuai dengan detail di atas.
          Setelah melakukan pembayaran, kami akan segera memverifikasi dan
          memproses donasi Anda.
        </Text>
      </View>
    </ScrollView>
  );
};

// Custom row component
const ReceiptRow = ({ label, value, isHighlight }) => (
  <View style={styles.receiptItem}>
    <Text style={[styles.receiptLabel, isHighlight && styles.highlightLabel]}>
      {label}
    </Text>
    <Text style={[styles.receiptValue, isHighlight && styles.highlightValue]}>
      {value}
    </Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FAFAFA",
    padding: 20,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
    marginBottom: 20,
    marginTop: 30,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#333",
  },
  receiptCard: {
    backgroundColor: "#fff",
    padding: 20,
    borderRadius: 10,
    elevation: 2,
    marginBottom: 25,
  },
  receiptItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 8,
    borderBottomWidth: 0.5,
    borderBottomColor: "#E0E0E0",
  },
  receiptLabel: {
    fontSize: 15,
    color: "#444",
  },
  receiptValue: {
    fontSize: 15,
    fontWeight: "600",
    color: "#222",
    textAlign: "right",
    maxWidth: "60%",
  },
  highlightLabel: {
    fontWeight: "bold",
  },
  highlightValue: {
    color: "#2D572C",
    fontSize: 16,
  },
  confirmButton: {
    backgroundColor: "#2D572C",
    paddingVertical: 15,
    borderRadius: 10,
    alignItems: "center",
    marginBottom: 15,
  },
  confirmButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
  termsSection: {
    paddingHorizontal: 10,
  },
  termsText: {
    fontSize: 14,
    color: "#666",
    textAlign: "center",
  },
});

export default KonfirmasiPembayaran;