Amba-Agent-App/app/(root)/auth/forgot.tsx

import * as React from "react";
import { View } from "react-native";
import { Button } from "~/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
import { Text } from "~/components/ui/text";
import {
  ArrowLeftIcon,
  CircleDollarSign,
  LucideEye,
} from "lucide-react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useTranslation } from "react-i18next";
import ModalToast from "~/components/ui/toast";

export default function Forgot() {
  const [value, setValue] = React.useState("phone");
  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);
  };

  React.useEffect(() => {
    return () => {
      if (toastTimeoutRef.current) {
        clearTimeout(toastTimeoutRef.current);
      }
    };
  }, []);
  return (
    <SafeAreaView className="flex-1 bg-background">
      <View className="flex-1 w-full max-w-2xl mx-auto py-10 space-y-10">
        <View className="flex flex-row items-center justify-between w-full px-5">
          <View>
            <Button className="bg-white border border-gray-200 p-2">
              <ArrowLeftIcon color="#1F7A47" size={24} />
            </Button>
          </View>
          <View>
            <Text className="text-xl font-dmsans-medium">
              {t("forgot.headerTitle")}
            </Text>
          </View>

          <View>
            <Button className="bg-white border border-gray-200 hidden">
              <ArrowLeftIcon color="#1F7A47" size={24} />
            </Button>
          </View>
        </View>
      </View>

      <View className="flex items-left px-5 space-y-3 w-full">
        {" "}
        <Text className="text-xl font-dmsans text-primary">
          {t("forgot.title")}
        </Text>
        <Text className="text-sm font-dmsans-light">
          {t("forgot.description")}
        </Text>
      </View>

      <View className="flex-1 justify-center px-5">
        <Tabs
          value={value}
          onValueChange={setValue}
          className="w-full max-w-[400px] mx-auto flex-col gap-1.5"
        >
          <TabsList className="flex-row w-full">
            <TabsTrigger value="phone" className="flex-1">
              <Text className="font-dmsans">{t("forgot.tabsPhone")}</Text>
            </TabsTrigger>
            <TabsTrigger value="email" className="flex-1">
              <Text className="font-dmsans">{t("forgot.tabsEmail")}</Text>
            </TabsTrigger>
          </TabsList>
          <TabsContent value="phone">
            <View className="space-y-3 mt-3">
              <View className="space-y-3">
                <Label className=" text-base font-dmsans-medium">
                  {t("forgot.phoneSelectorLabel")}
                </Label>
                {/* Add a international phone selector here  */}
                <Input
                  aria-aria-labelledby="name"
                  className="font-dmsans"
                  placeholder={t("forgot.phonePlaceholder")}
                />
                <Label className=" text-base font-dmsans-medium">
                  {t("forgot.otpLabel")}
                </Label>
                <Input
                  aria-aria-labelledby="name"
                  className="font-dmsans"
                  placeholder={t("forgot.otpPlaceholder")}
                />
                <Label className=" text-base font-dmsans-medium">
                  {t("forgot.passwordLabel")}
                </Label>
                <View className="flex flex-row justify-between items-center space-x-3">
                  <Input placeholder={t("forgot.passwordPlaceholder")} />
                  <Button className="bg-white border border-gray-300 rounded-md">
                    <LucideEye color="#6B7280" size={20} />
                  </Button>
                </View>
                <Label className=" text-base font-dmsans-medium">
                  {t("forgot.confirmPasswordLabel")}
                </Label>
                <View className="flex flex-row justify-between items-center space-x-3">
                  <Input placeholder="Kka123#12" />
                  <Button className="bg-white border border-gray-300 rounded-md">
                    <LucideEye color="#6B7280" size={20} />
                  </Button>
                </View>
              </View>

              <Button
                className="bg-primary"
                onPress={() =>
                  showToast(
                    t("forgot.toastSuccessTitle"),
                    t("forgot.toastResetSuccess"),
                    "success"
                  )
                }
              >
                <Text className="font-dmsans">{t("forgot.resetButton")}</Text>
              </Button>
              <Button
                className="bg-white border border-gray-800 border-dashed rounded-md"
                onPress={() =>
                  showToast(
                    t("forgot.toastInfoTitle"),
                    t("forgot.toastResendInfo"),
                    "info"
                  )
                }
              >
                <Text className="font-dmsans text-secondary">
                  {t("forgot.resendButton")}
                </Text>
              </Button>
            </View>
          </TabsContent>
          <TabsContent value="email">
            <View className="space-y-3 mt-3">
              <View className="space-y-3">
                <Label className=" text-base font-dmsans-medium">
                  {t("forgot.emailLabel")}
                </Label>

                <Input
                  aria-aria-labelledby="name"
                  className="font-dmsans"
                  placeholder={t("forgot.emailPlaceholder")}
                />
                <Label className=" text-base font-dmsans-medium">
                  {t("forgot.otpLabel")}
                </Label>
                <Input
                  aria-aria-labelledby="name"
                  className="font-dmsans"
                  placeholder="123123"
                />
                <Label className=" text-base font-dmsans-medium">
                  Password
                </Label>
                <View className="flex flex-row justify-between items-center space-x-3">
                  <Input placeholder="Kka123#12" />
                  <Button className="bg-white border border-gray-300 rounded-md">
                    <LucideEye color="#6B7280" size={20} />
                  </Button>
                </View>
                <Label className=" text-base font-dmsans-medium">
                  Confirm Password
                </Label>
                <View className="flex flex-row justify-between items-center space-x-3">
                  <Input placeholder="Kka123#12" />
                  <Button className="bg-white border border-gray-300 rounded-md">
                    <LucideEye color="#6B7280" size={20} />
                  </Button>
                </View>
              </View>
              <Button
                className="bg-primary mt-5"
                onPress={() =>
                  showToast(
                    t("forgot.toastSuccessTitle"),
                    t("forgot.toastResetSuccess"),
                    "success"
                  )
                }
              >
                <Text className="font-dmsans">{t("forgot.resetButton")}</Text>
              </Button>
              <Button
                className="bg-white border border-gray-800 border-dashed rounded-md"
                onPress={() =>
                  showToast(
                    t("forgot.toastInfoTitle"),
                    t("forgot.toastResendInfo"),
                    "info"
                  )
                }
              >
                <Text className="font-dmsans text-secondary">
                  {t("forgot.resendButton")}
                </Text>
              </Button>
            </View>
          </TabsContent>
        </Tabs>
      </View>
      <ModalToast
        visible={toastVisible}
        title={toastTitle}
        description={toastDescription}
        variant={toastVariant}
      />
    </SafeAreaView>
  );
}