import React from "react";
import { View, Text } from "react-native";
import { Button } from "~/components/ui/button";
import { SafeAreaView } from "react-native-safe-area-context";
import { router, useLocalSearchParams } from "expo-router";
import { ROUTES } from "~/lib/routes";
import { NotificationIcon } from "~/components/ui/icons";
import { useTranslation } from "react-i18next";

export default function MoneyRequested() {
  const params = useLocalSearchParams<{
    fullName?: string;
    requesteePhoneNumber?: string;
  }>();
  const { t } = useTranslation();

  const handleRequestAgain = () => {
    router.replace(ROUTES.HOME);
    router.push(ROUTES.SEND_OR_REQUEST_MONEY);
  };

  const fullName = (params.fullName || "").toString().trim();
  const description = fullName
    ? t("moneyrequested.descriptionWithName", { fullName })
    : t("moneyrequested.description");

  return (
    <SafeAreaView className="flex-1 bg-white w-full">
      {/* Main content */}
      <View className="flex-1 items-center justify-center px-5">
        <View className="items-center space-y-10 w-full">
          <NotificationIcon />
          <View className="h-2" />
          <Text className="text-primary text-3xl font-dmsans-bold text-center">
            {t("moneyrequested.title")}
          </Text>
          <View className="h-2" />
          <View className="mx-8">
            <Text className="text-xl font-regular text-gray-400 font-dmsans text-center">
              {description}
            </Text>
          </View>
        </View>
      </View>

      {/* Bottom actions */}
      <View className="w-full px-5 pb-8">
        <Button
          className="bg-primary rounded-full"
          onPress={handleRequestAgain}
        >
          <Text className="font-dmsans text-white">
            {t("moneyrequested.requestAgainButton")}
          </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("moneyrequested.goHomeButton")}
          </Text>
        </Button>
      </View>
    </SafeAreaView>
  );
}