import { RecoverScreenLayout } from '@/assets/components/auth/RecoverScreenLayout';
import { LoadingSpinner } from '@/assets/components/LoadingSpinner';
import { confirmRecoveryToken } from '@/assets/services/passwordRecovery';
import styles from '@/styles/screens/auth/recover.styles';
import { router, type Href, useLocalSearchParams } from 'expo-router';
import { useState } from 'react';
import { Image, Pressable, Text, TextInput } from 'react-native';

export default function RecoverConfirmScreen() {
  const { email, message } = useLocalSearchParams<{ email?: string; message?: string }>();
  const [token, setToken] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const emailValue = typeof email === 'string' ? email : '';

  const handleTokenChange = (text: string) => {
    setToken(text.replace(/\D/g, '').slice(0, 6));
  };

  const handleSubmit = async () => {
    if (!emailValue) {
      setError('Sessão inválida. Volta ao início do processo.');
      return;
    }
    if (token.length !== 6) {
      setError('Introduz o código de 6 dígitos recebido por email.');
      return;
    }

    setError(null);
    setIsLoading(true);
    try {
      const data = await confirmRecoveryToken(emailValue, token);
      if (data.status === 200) {
        router.push({
          pathname: '/recover/reset',
          params: { email: emailValue, token },
        } as Href);
        return;
      }
      setError(data.message || 'Código inválido ou expirado.');
    } catch {
      setError('Falha ao contactar o servidor. Tenta novamente.');
    } finally {
      setIsLoading(false);
    }
  };

  if (!emailValue) {
    return (
      <RecoverScreenLayout
        title="Código de verificação"
        subtitle="Não foi possível continuar. Volta ao passo anterior.">
        <Text style={styles.errorText}>Email em falta.</Text>
        <Pressable style={styles.actionButton} onPress={() => router.replace('/recover' as Href)}>
          <Text style={styles.actionButtonText}>Voltar</Text>
        </Pressable>
      </RecoverScreenLayout>
    );
  }

  return (
    <RecoverScreenLayout
      title="Código de verificação"
      subtitle={
        message
          ? message
          : `Introduz o código de 6 dígitos enviado para ${emailValue}.`
      }>
      <Text style={styles.label}>
        Código<Text style={styles.required}>*</Text>
      </Text>
      <TextInput
        value={token}
        onChangeText={handleTokenChange}
        placeholder="000000"
        placeholderTextColor="#9AA0A6"
        keyboardType="number-pad"
        maxLength={6}
        style={[styles.input, { letterSpacing: 8, textAlign: 'center', fontSize: 22 }]}
        editable={!isLoading}
      />

      {!!error && <Text style={styles.errorText}>{error}</Text>}

      <Pressable
        style={[styles.actionButton, isLoading && styles.actionButtonDisabled]}
        onPress={handleSubmit}
        disabled={isLoading}>
        {isLoading ? (
          <LoadingSpinner size="small" />
        ) : (
          <>
            <Text style={styles.actionButtonText}>Validar código</Text>
            <Image source={require('@/assets/icons/seta-up.png')} style={styles.actionButtonIcon} />
          </>
        )}
      </Pressable>

      <Pressable onPress={() => router.replace('/recover' as Href)} disabled={isLoading}>
        <Text style={styles.backLink}>Voltar</Text>
      </Pressable>
    </RecoverScreenLayout>
  );
}