import React from "react";
import { View, Text } from "react-native";
import LottieView from "lottie-react-native";
import { Button } from "~/components/ui/button";
import { router, useLocalSearchParams } from "expo-router";
import { ROUTES } from "~/lib/routes";
import ScreenWrapper from "~/components/ui/ScreenWrapper";
import { useTranslation } from "react-i18next";

export default function AddCashComp() {
  const params = useLocalSearchParams<{
    amount: string; // required
  }>();
  const { t } = useTranslation();

  const handleAddCashAgain = () => {
    router.replace(ROUTES.HOME);
    router.push(ROUTES.ADD_CASH);
  };

  return (
    <ScreenWrapper edges={[]}>
      <View className="flex-1 justify-between w-full">
        {/* Centered success content */}
        <View className="flex-1 items-center justify-center px-5">
          <LottieView
            source={require("../../../assets/lottie/Success.json")}
            autoPlay
            loop={false}
            style={{ width: 260, height: 260 }}
          />
          <View className="h-10" />
          {params.amount && (
            <Text className="text-secondary font-dmsans-bold text-3xl">
              {String(params.amount)}
            </Text>
          )}
          <View className="h-8" />
          <Text className="text-xl px-5 font-regular text-gray-400 font-dmsans text-center">
            {t("addcashcomp.successNote")}
          </Text>
        </View>

        {/* Bottom buttons */}
        <View className="w-full px-5 pb-8">
          <Button
            className="bg-primary rounded-full"
            onPress={handleAddCashAgain}
          >
            <Text className="font-dmsans text-white">
              {t("addcashcomp.addAgainButton")}
            </Text>
          </Button>
          <View className="h-4" />
          <Button
            className="bg-white border border-dashed border-secondary rounded-full"
            onPress={() => router.replace(ROUTES.HOME)}
          >
            <Text className="font-dmsans text-black">
              {t("addcashcomp.goHomeButton")}
            </Text>
          </Button>
        </View>
      </View>
    </ScreenWrapper>
  );
}