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 { Stack } from "expo-router";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { Keypad } from "@/components/Keypad";
import { api } from "@/lib/api";
import { usePinStore } from "@/lib/pin-store";
import { useAuthStore } from "@/lib/auth-store";
import { toast } from "@/lib/toast-store";

const LOCKOUT_THRESHOLD = 5;

export default function PinLockScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const unlock = usePinStore((s) => s.unlock);
  const user = useAuthStore((s) => s.user);
  const mounted = useRef(true);

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

  const [pin, setPin] = useState("");
  const [loading, setLoading] = useState(false);
  const [attempts, setAttempts] = useState(0);

  const handleVerify = useCallback(
    async (value: string) => {
      if (loading || value.length < 6) return;
      setLoading(true);
      try {
        await api.auth.verifyPin({ query: { pin: value } });
        unlock();
        nav.go("(tabs)");
      } catch (err: any) {
        const next = attempts + 1;
        setAttempts(next);
        setPin("");
        if (next >= LOCKOUT_THRESHOLD) {
          toast.error("Locked Out", "Too many failed attempts. Sign in again.");
          useAuthStore.getState().logout();
          nav.go("login");
        } else {
          toast.error(
            "Wrong PIN",
            `${LOCKOUT_THRESHOLD - next} attempt${LOCKOUT_THRESHOLD - next > 1 ? "s" : ""} remaining`,
          );
        }
      } finally {
        if (mounted.current) setLoading(false);
      }
    },
    [attempts, loading, nav, unlock],
  );

  useEffect(() => {
    if (pin.length === 6) handleVerify(pin);
  }, [pin]);

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

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

  const initials = user
    ? `${user.firstName?.[0] ?? ""}${user.lastName?.[0] ?? ""}`
    : "";

  const arr = pin.split("");

  return (
    <ScreenWrapper className="bg-background" withSafeArea={false}>
      <Stack.Screen options={{ headerShown: false }} />
      <View className="flex-1">
        <View className="flex-1 items-center pt-16">
          <View className="items-center mb-6">
            <View className="h-20 w-20 rounded-full bg-primary items-center justify-center mb-4">
              <Text className="text-white text-2xl top-1 font-sans-bold">
                {initials}
              </Text>
            </View>
            <Text variant="h4" className="font-sans-bold text-foreground">
              {user?.firstName ?? "User"}
            </Text>
            r
          </View>

          <Text variant="muted" className="text-center mb-8 px-4">
            Enter your PIN to unlock
          </Text>

          <View className="flex-row justify-center" style={{ gap: 12 }}>
            {[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"
                }`}
              >
                <View
                  className={`w-[10px] h-[10px] rounded-full ${
                    arr[i] ? "bg-primary" : "bg-border"
                  }`}
                />
              </View>
            ))}
          </View>

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

          {!loading && (
            <Pressable onPress={() => nav.go("forgot-pin")}>
              <Text className="text-primary font-sans-bold text-sm pt-6">
                Forgot PIN?
              </Text>
            </Pressable>
          )}
        </View>

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