import React from "react";
import { View, Text, ScrollView, Share } 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 { SuccessIconNewCard } from "~/components/ui/icons";
import ScreenWrapper from "~/components/ui/ScreenWrapper";
import ModalToast from "~/components/ui/toast";
import { useTranslation } from "react-i18next";

export default function CardAddedComp() {
  const params = useLocalSearchParams<{
    message?: string;
    cardName?: string;
    cardNumber?: string;
  }>();
  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 handleAddAnother = () => {
    // Navigate to add card page
    router.replace(ROUTES.ADD_CARD);
  };

  const handleGoToCards = () => {
    // Navigate to list cards page
    router.replace(ROUTES.LIST_CARD);
  };

  const handleShare = async () => {
    try {
      const shareMessage = params.message
        ? t("cardaddedcomp.shareMessageWithParam", {
            message: params.message,
          })
        : t("cardaddedcomp.shareMessageDefault");

      const result = await Share.share({
        message: shareMessage,
        title: t("cardaddedcomp.shareTitle"),
      });

      if (result.action === Share.sharedAction) {
        // Content was shared
        console.log("Content shared successfully");
      } else if (result.action === Share.dismissedAction) {
        // Share dialog was dismissed
        console.log("Share dialog dismissed");
      }
    } catch (error) {
      console.error("Error sharing:", error);
      showToast(
        t("cardaddedcomp.toastErrorTitle"),
        t("cardaddedcomp.toastShareError"),
        "error"
      );
    }
  };

  return (
    <ScreenWrapper edges={[]}>
      <View className="flex-1 w-full justify-between">
        {/* Center content */}
        <View className="flex-1 justify-center items-center px-5">
          <SuccessIconNewCard />
          <View className="h-10" />
          <Text className="text-primary text-3xl">
            {t("cardaddedcomp.title")}
          </Text>
          <View className="h-4" />
          <View className="mx-8">
            <Text className="text-xl font-regular text-gray-400 font-dmsans text-center">
              {t("cardaddedcomp.description")}
            </Text>
          </View>
        </View>

        {/* Bottom buttons */}
        <View className="w-full px-5 pb-8">
          <Button
            className="bg-primary rounded-full"
            onPress={handleAddAnother}
          >
            <Text className="font-dmsans text-white">
              {t("cardaddedcomp.addButton")}
            </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("cardaddedcomp.goHomeButton")}
            </Text>
          </Button>
        </View>
      </View>
      <ModalToast
        visible={toastVisible}
        title={toastTitle}
        description={toastDescription}
        variant={toastVariant}
      />
    </ScreenWrapper>
  );
}