import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { useRouter } from "expo-router";
import { useSelector } from "react-redux";
import { RootState } from "@/store/rootReducer";
import Header from "@/components/common/Header";
import CheckCircle from "@/assets/icons/check_circle.svg";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const PaymentConfirmationScreen = () => {
  const router = useRouter();
  const { paymentOrder, due_amount } = useSelector(
    (state: RootState) => state.payments
  );

  const insets = useSafeAreaInsets();

  // Format amount with currency
  const formatAmount = (amount: number | null) => {
    if (!amount) return "₹0";
    return `₹${amount.toLocaleString("en-IN")}`;
  };

  // Format date
  const formatDate = (dateString?: string) => {
    if (!dateString)
      return new Date().toLocaleString("en-IN", {
        day: "numeric",
        month: "long",
        year: "numeric",
        hour: "numeric",
        minute: "2-digit",
        hour12: true,
        weekday: "long",
      });

    return new Date(dateString).toLocaleString("en-IN", {
      day: "numeric",
      month: "long",
      year: "numeric",
      hour: "numeric",
      minute: "2-digit",
      hour12: true,
      weekday: "long",
    });
  };

  return (
    <View style={styles.container}>
      <Header title="Payment Status" />

      <View style={styles.contentFrame}>
        <View style={styles.qrFrame}>
          <View style={styles.paymentStatusContainer}>
            <View style={styles.successIconContainer}>
              <CheckCircle />
            </View>
            <Text style={styles.amountText}>
              {formatAmount(paymentOrder?.amount || due_amount)}
            </Text>

            <View style={styles.statusContainer}>
              <Text style={styles.statusText}>Payment successful</Text>
              <Text style={styles.dateText}>
                {formatDate(paymentOrder?.transaction_date)}
              </Text>
            </View>
          </View>

          <View style={styles.divider} />

          <View style={styles.transactionContainer}>
            <Text style={styles.sectionHeader}>Transaction Details</Text>

            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>Payment mode</Text>
              <Text style={styles.detailValue}>
                {paymentOrder?.payment_mode?.[0] || "UPI"}
              </Text>
            </View>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>Paid to</Text>
              <Text style={styles.detailValue}>
                {paymentOrder?.upi_handle || "randomupiid@vecpay"}
              </Text>
            </View>

            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>Paid by</Text>
              <Text style={styles.detailValue}>
                {paymentOrder?.paid_by_upi_handle || "amar.kesari@vecpay"}
              </Text>
            </View>

            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>Order ID</Text>
              <Text style={styles.detailValue}>
                {paymentOrder?.order_id || "1000516861984940"}
              </Text>
            </View>

            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>Transaction ID</Text>
              <Text style={styles.detailValue}>
                {paymentOrder?.transaction_id ||
                  paymentOrder?.transaction_order_id ||
                  "1000516861984940"}
              </Text>
            </View>
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>RRN</Text>
              <Text style={styles.detailValue}>
                {paymentOrder?.payment_reference_id || "1000516861984940"}
              </Text>
            </View>
          </View>
        </View>
        <TouchableOpacity
          style={[styles.primaryButton, { marginBottom: insets.bottom }]}
          onPress={() => router.replace("/(tabs)/payments")}
        >
          <Text style={styles.buttonText}>OK</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default PaymentConfirmationScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f3f4f6", // Light gray background
  },
  contentFrame: {
    flex: 1,
    paddingHorizontal: 16,
    paddingBottom: 16,
    justifyContent: "space-between",
    marginTop: 8,
  },
  qrFrame: {
    backgroundColor: "#fcfcfc",
    borderRadius: 8,
    padding: 16,
    paddingVertical: 32,
  },
  paymentStatusContainer: {
    alignItems: "center",
  },
  successIconContainer: {
    marginBottom: 16,
    alignItems: "center",
  },
  successIcon: {
    // Icon styling handled by Ionicons
  },
  amountText: {
    fontSize: 20,
    fontWeight: "600",
    color: "#252a34",
    textAlign: "center",
    marginBottom: 16,
  },
  statusContainer: {
    alignItems: "center",
    gap: 4,
  },
  statusText: {
    fontSize: 14,
    color: "#252a34",
    textAlign: "center",
  },
  dateText: {
    fontSize: 14,
    color: "#252a34",
    textAlign: "center",
  },
  divider: {
    height: 1,
    backgroundColor: "#e5e9f0",
    marginVertical: 24,
  },
  transactionContainer: {
    gap: 8,
  },
  sectionHeader: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252a34",
  },
  detailRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    paddingVertical: 2,
  },
  detailLabel: {
    fontSize: 14,
    color: "#252a34",
    flex: 1,
  },
  detailValue: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252a34",
    textAlign: "left",
    flex: 1,
  },
  primaryButton: {
    backgroundColor: "#008761",
    height: 40,
    borderRadius: 4,
    justifyContent: "center",
    alignItems: "center",
  },
  buttonText: {
    color: "#fcfcfc",
    fontSize: 14,
    fontWeight: "500",
  },
});