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

export default function RecoverResetScreen() {
  const { email, token } = useLocalSearchParams<{ email?: string; token?: string }>();
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  const [successMessage, setSuccessMessage] = useState('');

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

  const handleSubmit = async () => {
    if (!emailValue || !tokenValue) {
      setError('Sessão inválida. Volta ao início do processo.');
      return;
    }
    if (password.length < 5) {
      setError('A palavra-passe deve ter pelo menos 5 caracteres.');
      return;
    }
    if (password !== confirmPassword) {
      setError('As palavras-passe não coincidem.');
      return;
    }

    setError(null);
    setIsLoading(true);
    try {
      const data = await resetPassword(emailValue, tokenValue, password, confirmPassword);
      if (data.status === 200) {
        setSuccessMessage(data.message || 'Password atualizada com sucesso.');
        setShowSuccessModal(true);
        return;
      }
      setError(data.message || 'Não foi possível atualizar a palavra-passe.');
    } catch {
      setError('Falha ao contactar o servidor. Tenta novamente.');
    } finally {
      setIsLoading(false);
    }
  };

  if (!emailValue || !tokenValue) {
    return (
      <RecoverScreenLayout
        title="Nova palavra-passe"
        subtitle="Não foi possível continuar. Volta ao passo anterior.">
        <Text style={styles.errorText}>Dados em falta.</Text>
        <Pressable style={styles.actionButton} onPress={() => router.replace('/recover' as Href)}>
          <Text style={styles.actionButtonText}>Voltar</Text>
        </Pressable>
      </RecoverScreenLayout>
    );
  }

  return (
    <>
      <RecoverScreenLayout
        title="Nova palavra-passe"
        subtitle="Define a tua nova palavra-passe.">
        <Text style={styles.label}>
          Nova palavra-passe<Text style={styles.required}>*</Text>
        </Text>
        <View style={styles.passwordWrapper}>
          <TextInput
            value={password}
            onChangeText={setPassword}
            placeholder="Palavra-passe"
            placeholderTextColor="#9AA0A6"
            secureTextEntry={!showPassword}
            style={styles.passwordInput}
            editable={!isLoading}
          />
          <Pressable onPress={() => setShowPassword((p) => !p)} hitSlop={8}>
            <Ionicons
              name={showPassword ? 'eye-off-outline' : 'eye-outline'}
              size={20}
              style={styles.eyeIcon}
            />
          </Pressable>
        </View>

        <Text style={styles.label}>
          Confirmar palavra-passe<Text style={styles.required}>*</Text>
        </Text>
        <View style={styles.passwordWrapper}>
          <TextInput
            value={confirmPassword}
            onChangeText={setConfirmPassword}
            placeholder="Confirmar palavra-passe"
            placeholderTextColor="#9AA0A6"
            secureTextEntry={!showConfirmPassword}
            style={styles.passwordInput}
            editable={!isLoading}
          />
          <Pressable onPress={() => setShowConfirmPassword((p) => !p)} hitSlop={8}>
            <Ionicons
              name={showConfirmPassword ? 'eye-off-outline' : 'eye-outline'}
              size={20}
              style={styles.eyeIcon}
            />
          </Pressable>
        </View>

        {!!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}>Guardar palavra-passe</Text>
              <Image source={require('@/assets/icons/seta-up.png')} style={styles.actionButtonIcon} />
            </>
          )}
        </Pressable>

        <Pressable
          onPress={() =>
            router.replace({
              pathname: '/recover/confirm',
              params: { email: emailValue },
            } as Href)
          }
          disabled={isLoading}>
          <Text style={styles.backLink}>Voltar</Text>
        </Pressable>
      </RecoverScreenLayout>

      <Modal visible={showSuccessModal} animationType="fade" transparent>
        <View style={styles.modalOverlay}>
          <View style={styles.modalCard}>
            <View style={styles.modalIconCircle}>
              <Ionicons name="checkmark" size={22} style={styles.modalIcon} />
            </View>
            <Text style={styles.modalTitle}>Palavra-passe atualizada</Text>
            <Text style={styles.modalMessage}>{successMessage}</Text>
            <Pressable
              style={styles.modalCloseButton}
              onPress={() => {
                setShowSuccessModal(false);
                router.replace('/login' as Href);
              }}>
              <Text style={styles.modalCloseText}>Ir para o Login</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
    </>
  );
}