Yaltopia-Tickets-App/app/otp.tsx

import React, { useState, useEffect, useCallback, useRef } from "react";
import { View, ActivityIndicator, Pressable } from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { Text } from "@/components/ui/text";
import { useLocalSearchParams, Stack } from "expo-router";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { StandardHeader } from "@/components/StandardHeader";
import { Keypad } from "@/components/Keypad";
import { api } from "@/lib/api";
import { useAuthStore } from "@/lib/auth-store";
import { usePinStore } from "@/lib/pin-store";
import { toast } from "@/lib/toast-store";

export default function OtpScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const { phone, verificationId, expiresInSeconds } = useLocalSearchParams<{
    phone: string;
    verificationId: string;
    expiresInSeconds?: string;
  }>();
  const setAuth = useAuthStore((state) => state.setAuth);
  const mounted = useRef(true);

  useEffect(() => {
    return () => { mounted.current = false; };
  }, []);

  const [code, setCode] = useState("");
  const [loading, setLoading] = useState(false);
  const [timer, setTimer] = useState(
    expiresInSeconds ? parseInt(expiresInSeconds, 10) : 60,
  );

  const formatTime = (seconds: number) => {
    if (seconds > 60) {
      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;
      return `${mins}:${secs < 10 ? "0" : ""}${secs}`;
    }
    return `${seconds}s`;
  };

  useEffect(() => {
    let interval: any;
    if (timer > 0) {
      interval = setInterval(() => setTimer((t) => t - 1), 1000);
    }
    return () => clearInterval(interval);
  }, [timer]);

  useEffect(() => {
    if (code.length === 6 && !loading) handleVerify();
  }, [code]);

  const handleVerify = async () => {
    setLoading(true);
    try {
      const response = await api.auth.verifyOtp({
        body: {
          phone: phone as string,
          code,
          verificationId: verificationId as string,
        },
      });

      setAuth(
        response.user,
        response.accessToken,
        response.refreshToken,
        [],
      );
      toast.success("Welcome!", "Login successful.");
      if (response.is_pin_set !== false) usePinStore.getState().unlock();
      nav.go(response.is_pin_set === false ? "set-pin" : "(tabs)");
    } catch (err: any) {
      setCode("");
      toast.error("Verification Failed", err.message || "Invalid or expired code");
    } finally {
      if (mounted.current) setLoading(false);
    }
  };

  const handleResend = async () => {
    setLoading(true);
    try {
      const response = await api.auth.resendOtp({
        body: { phone: phone as string },
      });
      toast.success("OTP Sent", response.message || "A new verification code has been sent.");
      if (response.expiresInSeconds) setTimer(response.expiresInSeconds);
      else setTimer(60);
    } catch (err: any) {
      const errMsg = err.message || "Failed to resend code";
      toast.error("Wait", errMsg);
      const match = errMsg.match(/wait (\d+) seconds/i);
      if (match?.[1]) setTimer(parseInt(match[1], 10));
    } finally {
      if (mounted.current) setLoading(false);
    }
  };

  const handlePress = useCallback((key: string) => {
    setCode((prev) => (prev + key).slice(0, 6));
  }, []);

  const handleDelete = useCallback(() => {
    setCode((prev) => prev.slice(0, -1));
  }, []);

  const arr = code.split("");

  return (
    <ScreenWrapper className="bg-background" withSafeArea={false}>
      <Stack.Screen options={{ headerShown: false }} />
      <StandardHeader title="Verification" showBack />

      <View className="flex-1 items-center px-6 pt-8">
        <Text variant="h4" className="font-sans-bold text-foreground text-center mb-2">
          Verify your number
        </Text>
        <Text variant="muted" className="text-center text-sm mb-8">
          Enter the 6-digit code we sent to{"\n"}
          <Text className="text-foreground font-sans-bold">{phone}</Text>
        </Text>

        <View className="flex-row justify-center gap-3 mb-6">
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <View
              key={i}
              className={`w-[52px] h-[52px] rounded-xl items-center justify-center border ${
                arr[i] ? "border-primary bg-primary/10" : "border-border bg-card"
              }`}
            >
              <Text
                className={`text-xl font-sans-bold ${
                  arr[i] ? "text-primary" : "text-foreground"
                }`}
              >
                {arr[i] ?? ""}
              </Text>
            </View>
          ))}
        </View>

        {loading && <ActivityIndicator color="#E46212" size="small" />}

        <View className="items-center mt-4">
          {timer > 0 ? (
            <Text variant="muted" className="text-sm">
              Resend code in{" "}
              <Text className="text-primary font-sans-bold">
                {formatTime(timer)}
              </Text>
            </Text>
          ) : (
            <Pressable onPress={handleResend}>
              <Text className="text-primary font-sans-bold">
                Resend Verification Code
              </Text>
            </Pressable>
          )}
        </View>
      </View>

      <Keypad onPress={handlePress} onDelete={handleDelete} disabled={loading} />
    </ScreenWrapper>
  );
}