BaaS_Driver_Android_App/app/payments/myPlan.tsx

import Header from "@/components/common/Header";
import ProgressCard from "@/components/common/ProgressCard";
import { RootState } from "@/store/rootReducer";
import { useRouter } from "expo-router";
import React from "react";
import { useTranslation } from "react-i18next";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  RootViewStyleProvider,
  ScrollView,
} from "react-native";
import { useSelector } from "react-redux";

const MyPlanScreen: React.FC = () => {
  const myPlan = useSelector((state: RootState) => state.payments.myPlan);
  const advance_balance = useSelector(
    (state: RootState) => state.payments.advance_balance
  );
  const dueAmount = useSelector(
    (state: RootState) => state.payments.due_amount
  );

  const router = useRouter();

  // Helper function to format currency
  const formatCurrency = (amount?: number | null): string => {
    if (amount == null) return "---";
    return `₹${amount.toLocaleString("en-IN")}`;
  };

  // Helper function to display value or fallback
  const displayValue = (value?: string | number | null): string => {
    if (value == null || value === "") return "---";
    return value.toString();
  };

  // Calculate progress percentage for EMI progress bar
  const getProgressPercentage = (
    firstValue: number,
    secondValue: number
  ): number => {
    if (!firstValue || !secondValue) return 0;
    return (firstValue / secondValue) * 100;
  };
  const { t } = useTranslation();
  return (
    <ScrollView style={styles.container}>
      <Header title={t("payment.my-plan")} showBackButton={true} />

      <View style={styles.contentFrame}>
        {/* Plan Details Card */}
        <View style={styles.card}>
          <Text style={styles.cardTitle}>{t("payment.plan-details")}</Text>
          <View style={styles.divider} />

          <View style={styles.content}>
            {/* Plan Type Row */}
            <View style={styles.row}>
              <Text style={styles.label}>{t("payment.plan-type")}</Text>
              <Text style={styles.value}>
                {displayValue(myPlan?.no_of_emi)}
              </Text>
            </View>

            {/* Total Cost Row */}
            <View style={styles.row}>
              <Text style={styles.label}>{t("payment.total-cost")}</Text>
              <Text style={styles.value}>
                {formatCurrency(myPlan?.total_amount)}
              </Text>
            </View>

            {/* Down Payment Row */}
            <View style={styles.row}>
              <Text style={styles.label}>{t("payment.down-payment")}</Text>
              <Text style={styles.value}>
                {formatCurrency(myPlan?.down_payment)}
              </Text>
            </View>

            {/* Total EMI Row */}
            <View style={styles.row}>
              <Text style={styles.label}>{t("payment.total-emi")}</Text>
              <Text style={styles.value}>
                {formatCurrency(myPlan?.total_emi)}
              </Text>
            </View>
          </View>
        </View>

        {/* Total Amount Due Card */}
        <View style={styles.card}>
          <Text style={styles.centerLabel}>
            {t("payment.total-amount-due")}
          </Text>
          <View style={styles.amountContainer}>
            <Text style={styles.dueAmount}>{formatCurrency(dueAmount)}</Text>
          </View>
        </View>

        <View style={styles.twoColumnContainer}>
          {/* Monthly EMI Card */}
          <View style={styles.halfCard}>
            <Text style={styles.label}>{t("payment.monthly-emi")}</Text>
            <Text style={styles.value}>
              {formatCurrency(myPlan?.emi_amount)}
            </Text>
          </View>

          <View style={styles.halfCard}>
            <Text style={styles.label}>{t("payment.installments-paid")}</Text>
            <View style={styles.installmentRow}>
              <Text style={styles.value}>
                {displayValue(myPlan?.installment_paid)}
              </Text>
              <Text style={styles.installmentTotal}>
                / {displayValue(myPlan?.no_of_emi)}
              </Text>
            </View>
          </View>
        </View>

        <ProgressCard
          title={t("payment.emi-paid-till-now")}
          firstText={formatCurrency(myPlan?.current_amount)}
          secondText={formatCurrency(myPlan?.total_emi)}
          percentage={getProgressPercentage(
            myPlan?.current_amount || 0,
            myPlan?.total_emi || 0
          )}
        />

        <View style={styles.card}>
          <Text style={styles.label}>{t("payment.advance-amount")}</Text>
          <Text style={styles.amount}>{formatCurrency(advance_balance)}</Text>
        </View>

        <TouchableOpacity
          style={styles.payButton}
          onPress={() => router.push("/payments/selectAmount")}
        >
          <Text style={styles.payButtonText}>{t("payment.pay-emi")}</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  amount: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252A34",
    height: 20,
    lineHeight: 20,
  },
  container: {
    flex: 1,
    backgroundColor: "#F3F5F8",
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: "600",
    color: "#252A34",
  },
  contentFrame: {
    flex: 1,
    paddingHorizontal: 16,
    paddingBottom: 16,
    gap: 16,
  },
  card: {
    backgroundColor: "#FCFCFC",
    borderRadius: 8,
    padding: 12,
    gap: 12,
  },
  cardTitle: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252A34",
    height: 20,
  },
  divider: {
    height: 1,
    backgroundColor: "#E5E9F0",
  },
  content: {
    gap: 8,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    height: 20,
  },
  label: {
    fontSize: 14,
    fontWeight: "400",
    color: "#252A34",
  },
  value: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252A34",
  },
  centerLabel: {
    fontSize: 14,
    fontWeight: "400",
    color: "#252A34",
    textAlign: "center",
    height: 20,
  },
  amountContainer: {
    height: 28,
    justifyContent: "center",
    alignItems: "center",
  },
  dueAmount: {
    fontSize: 20,
    fontWeight: "600",
    color: "#252A34",
    textAlign: "center",
  },
  twoColumnContainer: {
    flexDirection: "row",
    gap: 16,
  },
  halfCard: {
    flex: 1,
    backgroundColor: "#FCFCFC",
    borderRadius: 8,
    padding: 12,
    gap: 8,
    height: 72,
  },
  installmentRow: {
    flexDirection: "row",
    alignItems: "flex-end",
    gap: 4,
  },
  installmentTotal: {
    fontSize: 14,
    fontWeight: "500",
    color: "#565F70",
  },
  progressAmountRow: {
    flexDirection: "row",
    alignItems: "flex-end",
    gap: 4,
  },
  progressTotal: {
    fontSize: 14,
    fontWeight: "500",
    color: "#565F70",
  },
  progressBarContainer: {
    width: "100%",
    height: 8,
  },
  progressBarBackground: {
    width: "100%",
    height: 8,
    backgroundColor: "#E5EAF0",
    borderRadius: 10,
    overflow: "hidden",
  },
  progressBarFill: {
    height: "100%",
    backgroundColor: "#4CAF50",
    borderRadius: 10,
  },
  payButton: {
    backgroundColor: "#008761",
    borderRadius: 8,
    paddingVertical: 16,
    alignItems: "center",
    justifyContent: "center",
  },
  payButtonText: {
    fontSize: 16,
    fontWeight: "600",
    color: "#FFFFFF",
  },
});

export default MyPlanScreen;