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 LottieView from "lottie-react-native";
import { useAuthWithProfile } from "~/lib/hooks/useAuthWithProfile";
import { showAlert } from "~/lib/utils/alertUtils";
import ModalToast from "~/components/ui/toast";
import { useTranslation } from "react-i18next";
import ScreenWrapper from "~/components/ui/ScreenWrapper";

export default function CashOutComp() {
  const params = useLocalSearchParams<{
    amount: string; // required
    note?: string; // optional
  }>();

  const { wallet } = useAuthWithProfile();
  const { t } = useTranslation();

  const [toastVisible, setToastVisible] = React.useState(false);
  const [toastTitle, setToastTitle] = React.useState("");
  const [toastDescription, setToastDescription] = React.useState<
    string | undefined
  >(undefined);
  const [toastVariant, setToastVariant] = React.useState<
    "success" | "error" | "warning" | "info"
  >("info");
  const toastTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(
    null
  );

  const showToast = (
    title: string,
    description?: string,
    variant: "success" | "error" | "warning" | "info" = "info"
  ) => {
    if (toastTimeoutRef.current) {
      clearTimeout(toastTimeoutRef.current);
    }

    setToastTitle(title);
    setToastDescription(description);
    setToastVariant(variant);
    setToastVisible(true);

    toastTimeoutRef.current = setTimeout(() => {
      setToastVisible(false);
      toastTimeoutRef.current = null;
    }, 2500);
  };

  const handleCashOutAgain = () => {
    const balance = wallet?.balance;
    if (balance === undefined) {
      showToast(
        t("cashoutcomp.toastErrorTitle"),
        t("cashoutcomp.toastNoBalance"),
        "error"
      );
      return;
    }
    if (balance < 1000) {
      showToast(
        t("cashoutcomp.toastErrorTitle"),
        t("cashoutcomp.toastMinError"),
        "error"
      );
      return;
    }

    router.replace(ROUTES.HOME);
    router.push(ROUTES.CASH_OUT);
  };

  const note =
    params.note && String(params.note).trim().length > 0
      ? String(params.note)
      : t("cashoutcomp.successNote");

  return (
    <ScreenWrapper edges={[]}>
      {/* Main content */}
      <View className="flex-1 items-center justify-center px-5">
        <View className="items-center">
          <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">
            {note}
          </Text>
        </View>
      </View>

      {/* Bottom actions */}
      <View className="w-full px-5 pb-6">
        <Button
          className="bg-primary rounded-full"
          onPress={handleCashOutAgain}
        >
          <Text className="font-dmsans text-white">
            {t("cashoutcomp.cashOutAgainButton")}
          </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("cashoutcomp.goHomeButton")}
          </Text>
        </Button>
      </View>

      <ModalToast
        visible={toastVisible}
        title={toastTitle}
        description={toastDescription}
        variant={toastVariant}
      />
    </ScreenWrapper>
  );
}