import { withClickTracking } from "../../services/telemetry";
import React, { useState } from "react";
import { ActivityIndicator, Platform, Pressable, Text, TextInput, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useNavigation } from "../../context/NavigationContext";
import { StatusBar } from "expo-status-bar";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import * as Haptics from "expo-haptics";

import AuthService from "../../services/auth.service";
import { useAppConfig } from "../../context/AppConfigContext";
import { getErrorMessage } from "../../utils/error";

export function MfaChallengeScreen() {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const router = useNavigation();
  const { routes } = useAppConfig();

  const [code, setCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [isRecoveryMode, setIsRecoveryMode] = useState(false);

  const handleVerify = async () => {
    // Re-entry guard: a fast double-tap (button + onSubmitEditing)
    // would otherwise re-issue verifyMfa before `setIsLoading(true)`
    // had time to flow through React and disable the submit. Each
    // verify burns a one-shot TOTP attempt server-side; cheaper to
    // gate at the client.
    if (isLoading) {
      return;
    }
    const trimmed = code.trim();
    if (!isRecoveryMode && trimmed.length !== 6) {
      setError("Please enter a 6-digit code");
      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
      return;
    }
    if (isRecoveryMode && trimmed.length === 0) {
      setError("Please enter a recovery code");
      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
      return;
    }

    setIsLoading(true);
    setError("");
    try {
      await AuthService.verifyMfa(trimmed);
      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      router.replace(routes.home);
    } catch (err) {
      setError(getErrorMessage(err, "Invalid code"));
      setCode("");
      await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
    } finally {
      setIsLoading(false);
    }
  };

  const toggleRecoveryMode = () => {
    setIsRecoveryMode(!isRecoveryMode);
    setCode("");
    setError("");
  };

  const inputStyle = {
    borderWidth: 1,
    borderColor: error ? "#EF4444" : isDark ? "#333333" : "#E5E5E5",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: Platform.OS === "ios" ? 12 : 8,
    backgroundColor: isDark ? "#0A0A0A" : "#FAFAFA",
  };

  return (
    <SafeAreaView className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
      <StatusBar style={isDark ? "light" : "dark"} />
      <View className="flex-1 items-center justify-center px-6">
        <View className="w-full max-w-[360px]">
          <View className="items-center mb-6">
            <Ionicons
              name="shield-checkmark-outline"
              size={48}
              color={isDark ? "#FFFFFF" : "#000000"}
            />
          </View>

          <Text
            className="font-sans-bold text-2xl text-center mb-2"
            style={{ color: isDark ? "#FFFFFF" : "#000000" }}
          >
            Two-Factor Authentication
          </Text>

          <Text
            className="font-sans text-sm text-center mb-8"
            style={{ color: isDark ? "#999999" : "#666666", lineHeight: 22 }}
          >
            {isRecoveryMode
              ? "Enter one of your recovery codes"
              : "Enter the 6-digit code from your authenticator app"}
          </Text>

          {error ? (
            <View
              className="rounded-lg p-3 mb-4"
              style={{
                backgroundColor: isDark ? "#1A0000" : "#FEF2F2",
                borderWidth: 1,
                borderColor: isDark ? "#7F1D1D" : "#FECACA",
              }}
            >
              <Text className="font-sans text-sm text-center" style={{ color: "#EF4444" }}>
                {error}
              </Text>
            </View>
          ) : null}

          {isRecoveryMode ? (
            <TextInput
              value={code}
              onChangeText={(text) => {
                setCode(text);
                if (error) {
                  setError("");
                }
              }}
              placeholder="Enter recovery code"
              placeholderTextColor={isDark ? "#999999" : "#666666"}
              className="font-mono text-lg text-center tracking-wide"
              style={{
                ...inputStyle,
                color: isDark ? "#FFFFFF" : "#000000",
              }}
              autoCapitalize="none"
              autoCorrect={false}
              autoFocus
              returnKeyType="done"
              onSubmitEditing={handleVerify}
              accessibilityLabel="Recovery code"
            />
          ) : (
            <TextInput
              value={code}
              onChangeText={(text) => {
                const digits = text.replace(/[^0-9]/g, "").slice(0, 6);
                setCode(digits);
                if (error) {
                  setError("");
                }
              }}
              placeholder="000000"
              placeholderTextColor={isDark ? "#999999" : "#666666"}
              className="font-mono text-center"
              style={{
                ...inputStyle,
                fontSize: 32,
                color: isDark ? "#FFFFFF" : "#000000",
                letterSpacing: 12,
              }}
              keyboardType="number-pad"
              maxLength={6}
              autoFocus
              returnKeyType="done"
              onSubmitEditing={handleVerify}
              accessibilityLabel="Authenticator code"
            />
          )}

          <Pressable
            onPress={withClickTracking("auth.mfa_challenge.verify", handleVerify)}
            disabled={isLoading}
            className="rounded-lg items-center mt-5"
            style={({ pressed }) => ({
              backgroundColor: isDark ? "#FFFFFF" : "#000000",
              paddingVertical: 14,
              opacity: pressed || isLoading ? 0.7 : 1,
            })}
            accessibilityRole="button"
            accessibilityLabel="Verify"
            accessibilityHint="Double tap to verify your code"
          >
            {isLoading ? (
              <ActivityIndicator color={isDark ? "#000000" : "#FFFFFF"} />
            ) : (
              <Text
                className="font-sans-bold text-base"
                style={{ color: isDark ? "#000000" : "#FFFFFF" }}
              >
                Verify
              </Text>
            )}
          </Pressable>

          <Pressable
            onPress={withClickTracking(
              "auth.mfa_challenge.toggle_recovery_mode",
              toggleRecoveryMode
            )}
            className="mt-5 items-center"
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
            accessibilityRole="button"
            accessibilityLabel={isRecoveryMode ? "Use authenticator code" : "Use recovery code"}
          >
            <Text
              className="font-sans text-sm underline"
              style={{ color: isDark ? "#999999" : "#666666" }}
            >
              {isRecoveryMode ? "Use authenticator code" : "Use recovery code"}
            </Text>
          </Pressable>
        </View>
      </View>
    </SafeAreaView>
  );
}

export default MfaChallengeScreen;