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 { ShieldCheck } from "@/lib/icons";
import { api } from "@/lib/api";
import { usePinStore } from "@/lib/pin-store";
import { toast } from "@/lib/toast-store";
import { useColorScheme } from "nativewind";

type Step = "create" | "confirm";

export default function SetPinScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const setHasPin = usePinStore((s) => s.setHasPin);
  const unlock = usePinStore((s) => s.unlock);
  const mounted = useRef(true);

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

  const [step, setStep] = useState<Step>("create");
  const [pin, setPin] = useState("");
  const [confirmPin, setConfirmPin] = useState("");
  const [loading, setLoading] = useState(false);

  const currentPin = step === "create" ? pin : confirmPin;
  const setCurrentPin = step === "create" ? setPin : setConfirmPin;

  useEffect(() => {
    if (currentPin.length === 6 && !loading) {
      if (step === "create") {
        setTimeout(() => {
          setStep("confirm");
          setConfirmPin("");
        }, 200);
      } else {
        handleSave();
      }
    }
  }, [currentPin]);

  const handleSave = async () => {
    if (confirmPin !== pin) {
      toast.error("Mismatch", "PINs do not match");
      setStep("create");
      setPin("");
      setConfirmPin("");
      return;
    }

    setLoading(true);
    try {
      await api.auth.setPin({ body: { pin } });
      setHasPin(true);
      unlock();
      toast.success("PIN Set", "Your security PIN has been saved.");
      nav.go("(tabs)");
    } catch (err: any) {
      toast.error("Failed", err.message || "Could not set PIN");
    } finally {
      if (mounted.current) setLoading(false);
    }
  };

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

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

  const arr = currentPin.split("");
  const iconColor = isDark ? "#f1f5f9" : "#251615";

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

      <View className="items-center pt-12 pb-2">
        <Text variant="small" className="text-muted-foreground">
          {step === "create" ? "Step 1 of 2" : "Step 2 of 2"}
        </Text>
      </View>

      <View className="flex-1 items-center pt-10">
        <Text
          variant="h4"
          className="font-sans-bold text-foreground text-center mb-1"
        >
          {step === "create" ? "Create a PIN" : "Confirm your PIN"}
        </Text>
        <Text variant="muted" className="text-center mb-8 leading-5">
          {step === "create"
            ? "Set a 6-digit PIN to secure your account"
            : "Enter the same PIN again to confirm"}
        </Text>

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

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

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