import { ComponentType, FC, useCallback, useEffect, useMemo, useRef, useState } from "react"
// eslint-disable-next-line no-restricted-imports
import { TextInput, TextStyle, View, ViewStyle } from "react-native"
import { useFocusEffect } from "@react-navigation/native"

import { Button } from "@/components/Button"
import { PressableIcon } from "@/components/Icon"
import { Screen } from "@/components/Screen"
import { Text } from "@/components/Text"
import { TextField, type TextFieldAccessoryProps } from "@/components/TextField"
import { useAuth } from "@/context/AuthContext"
import type { AppStackScreenProps } from "@/navigators/navigationTypes"
import { useAppTheme } from "@/theme/context"
import type { ThemedStyle } from "@/theme/types"
import { s } from "@/utils/responsive"

interface ForgotPasswordScreenProps extends AppStackScreenProps<"ForgotPassword"> {}

export const ForgotPasswordScreen: FC<ForgotPasswordScreenProps> = ({ navigation }) => {
  const emailInput = useRef<TextInput>(null)
  const verificationCodeInput = useRef<TextInput>(null)
  const newPasswordInput = useRef<TextInput>(null)

  const [email, setEmail] = useState("")
  const [verificationCode, setVerificationCode] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [isPasswordHidden, setIsPasswordHidden] = useState(true)
  const [resendCountdown, setResendCountdown] = useState(0)

  const {
    forgotPasswordStep,
    pendingEmail,
    isLoading,
    error,
    forgotPassword,
    resendForgotPasswordCode,
    resetPassword,
    resetForgotPasswordStep,
    clearError,
  } = useAuth()

  const {
    themed,
    theme: { colors },
  } = useAppTheme()

  // Email validation
  const emailError = useMemo(() => {
    if (!email || email.length === 0) return ""
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return "Please enter a valid email"
    return ""
  }, [email])

  // New password validation - requires uppercase, lowercase, number, and special character
  const newPasswordError = useMemo(() => {
    if (!newPassword || newPassword.length === 0) return ""
    if (newPassword.length < 8) return "Password must be at least 8 characters"
    if (!/[A-Z]/.test(newPassword)) return "Password must contain an uppercase letter"
    if (!/[a-z]/.test(newPassword)) return "Password must contain a lowercase letter"
    if (!/[0-9]/.test(newPassword)) return "Password must contain a number"
    if (!/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(newPassword))
      return "Password must contain a special character"
    return ""
  }, [newPassword])

  // Countdown timer for resend button
  useEffect(() => {
    if (resendCountdown > 0) {
      const timer = setTimeout(() => setResendCountdown(resendCountdown - 1), 1000)
      return () => clearTimeout(timer)
    }
    return undefined
  }, [resendCountdown])

  // Clear error when screen comes into focus
  useFocusEffect(
    useCallback(() => {
      clearError()
    }, [clearError]),
  )

  // Clear error when inputs change (not when error changes)
  const prevInputsRef = useRef({ email, verificationCode, newPassword })
  useEffect(() => {
    const prev = prevInputsRef.current
    // Only clear error if one of the input fields actually changed
    if (
      prev.email !== email ||
      prev.verificationCode !== verificationCode ||
      prev.newPassword !== newPassword
    ) {
      if (error) clearError()
      prevInputsRef.current = { email, verificationCode, newPassword }
    }
  }, [email, verificationCode, newPassword, error, clearError])

  // Handle forgot password (step 1)
  const handleForgotPassword = useCallback(async () => {
    if (!email || emailError) return

    const success = await forgotPassword(email)
    if (success) {
      setResendCountdown(60)
    }
  }, [email, emailError, forgotPassword])

  // Handle reset password (step 2)
  const handleResetPassword = useCallback(async () => {
    if (!verificationCode || verificationCode.length !== 6 || !newPassword || newPasswordError)
      return

    const success = await resetPassword(verificationCode, newPassword)
    if (success) {
      // Reset state and navigate back to login
      resetForgotPasswordStep()
      navigation.navigate("Login")
    }
  }, [
    verificationCode,
    newPassword,
    newPasswordError,
    resetPassword,
    resetForgotPasswordStep,
    navigation,
  ])

  // Handle resend code
  const handleResendCode = useCallback(async () => {
    if (resendCountdown > 0) return

    const success = await resendForgotPasswordCode()
    if (success) {
      setResendCountdown(60)
    }
  }, [resendCountdown, resendForgotPasswordCode])

  // Handle back to email step
  const handleBackToEmail = useCallback(() => {
    resetForgotPasswordStep()
    setVerificationCode("")
    setNewPassword("")
  }, [resetForgotPasswordStep])

  // Navigate to login
  const handleGoToLogin = useCallback(() => {
    resetForgotPasswordStep()
    navigation.navigate("Login")
  }, [navigation, resetForgotPasswordStep])

  // Password visibility toggle
  const PasswordRightAccessory: ComponentType<TextFieldAccessoryProps> = useMemo(
    () =>
      function PasswordRightAccessory(props: TextFieldAccessoryProps) {
        return (
          <PressableIcon
            icon={isPasswordHidden ? "view" : "hidden"}
            color={colors.palette.neutral800}
            containerStyle={props.style}
            size={s(20)}
            onPress={() => setIsPasswordHidden(!isPasswordHidden)}
          />
        )
      },
    [isPasswordHidden, colors.palette.neutral800],
  )

  // Render email step (step 1)
  const renderEmailStep = () => (
    <>
      <Text
        testID="forgot-password-heading"
        text="Forgot Password"
        preset="heading"
        style={themed($title)}
      />
      <Text
        text="Enter your email address and we'll send you a verification code"
        preset="subheading"
        style={themed($subtitle)}
      />

      {error ? <Text text={error} size="sm" style={themed($errorText)} /> : null}

      <TextField
        ref={emailInput}
        value={email}
        onChangeText={setEmail}
        containerStyle={themed($textField)}
        autoCapitalize="none"
        autoComplete="email"
        autoCorrect={false}
        keyboardType="email-address"
        label="Email"
        placeholder="Enter your email"
        helper={emailError}
        status={emailError ? "error" : undefined}
        onSubmitEditing={handleForgotPassword}
      />

      <Button
        testID="send-code-button"
        text="Send Verification Code"
        style={themed($button)}
        preset="reversed"
        onPress={handleForgotPassword}
        disabled={isLoading || !email || !!emailError}
        loading={isLoading}
      />

      <View style={themed($loginLinkContainer)}>
        <Text text="Remember your password? " size="sm" />
        <Button testID="go-to-login-button" text="Log In" preset="link" onPress={handleGoToLogin} />
      </View>
    </>
  )

  // Render reset step (step 2)
  const renderResetStep = () => (
    <>
      <Text
        testID="reset-password-heading"
        text="Reset Password"
        preset="heading"
        style={themed($title)}
      />
      <Text
        text={`We've sent a verification code to ${pendingEmail}`}
        preset="subheading"
        style={themed($subtitle)}
      />

      {error ? <Text text={error} size="sm" style={themed($errorText)} /> : null}

      <TextField
        ref={verificationCodeInput}
        value={verificationCode}
        onChangeText={(text) => setVerificationCode(text.replace(/[^0-9]/g, "").slice(0, 6))}
        containerStyle={themed($textField)}
        autoCapitalize="none"
        autoComplete="one-time-code"
        autoCorrect={false}
        keyboardType="number-pad"
        label="Verification Code"
        placeholder="Enter 6-digit code"
        maxLength={6}
        onSubmitEditing={() => newPasswordInput.current?.focus()}
      />

      <TextField
        ref={newPasswordInput}
        value={newPassword}
        onChangeText={setNewPassword}
        containerStyle={themed($textField)}
        autoCapitalize="none"
        autoComplete="password-new"
        autoCorrect={false}
        secureTextEntry={isPasswordHidden}
        label="New Password"
        placeholder="Enter your new password"
        helper={newPasswordError}
        status={newPasswordError ? "error" : undefined}
        onSubmitEditing={handleResetPassword}
        RightAccessory={PasswordRightAccessory}
      />

      <Button
        testID="reset-password-button"
        text="Reset Password"
        style={themed($button)}
        preset="reversed"
        onPress={handleResetPassword}
        disabled={isLoading || verificationCode.length !== 6 || !newPassword || !!newPasswordError}
        loading={isLoading}
      />

      <View style={themed($resendContainer)}>
        <Text text="Didn't receive the code? " size="sm" />
        <Button
          testID="resend-button"
          text={resendCountdown > 0 ? `Resend in ${resendCountdown}s` : "Resend Code"}
          preset="link"
          onPress={handleResendCode}
          disabled={isLoading || resendCountdown > 0}
        />
      </View>

      <Button
        testID="back-button"
        text="Back"
        preset="default"
        style={themed($backButton)}
        onPress={handleBackToEmail}
        disabled={isLoading}
      />
    </>
  )

  return (
    <Screen
      preset="auto"
      contentContainerStyle={themed($screenContentContainer)}
      safeAreaEdges={["top", "bottom"]}
    >
      {forgotPasswordStep === "email" ? renderEmailStep() : renderResetStep()}
    </Screen>
  )
}

const $screenContentContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  paddingVertical: spacing.xxl,
  paddingHorizontal: spacing.lg,
})

const $title: ThemedStyle<TextStyle> = ({ spacing }) => ({
  marginBottom: spacing.sm,
})

const $subtitle: ThemedStyle<TextStyle> = ({ spacing }) => ({
  marginBottom: spacing.lg,
})

const $errorText: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
  color: colors.error,
  marginBottom: spacing.md,
})

const $textField: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  marginBottom: spacing.lg,
})

const $button: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  marginTop: spacing.xs,
})

const $loginLinkContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  flexDirection: "row",
  alignItems: "center",
  justifyContent: "center",
  marginTop: spacing.xl,
})

const $resendContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  flexDirection: "row",
  alignItems: "center",
  justifyContent: "center",
  marginTop: spacing.lg,
})

const $backButton: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  marginTop: spacing.lg,
})