import { Ionicons } from '@expo/vector-icons';
import { router, type Href } from 'expo-router';
import React, { useState } from 'react';
import {
  Image,
  ImageBackground,
  KeyboardAvoidingView,
  Modal,
  Platform,
  Pressable,
  ScrollView,
  Text,
  TextInput,
  View,
  StatusBar,
} from 'react-native';
import styles from '@/styles/screens/auth/recover.styles';


export default function Recover() {
  const [email, setEmail] = useState('');
  const [localError, setLocalError] = useState<string | null>(null);
  const [showSuccessModal, setShowSuccessModal] = useState(false);

  const handleRecover = () => {
    if (!email.trim()) {
      setLocalError('Indica o teu email para continuar.');
      return;
    }

    setLocalError(null);
    setShowSuccessModal(true);
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}>
      <StatusBar barStyle="light-content" />
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
        bounces={false}>
      <ImageBackground
        source={require('@/assets/images/banner-login.png')}
        style={styles.hero}
        imageStyle={styles.heroImage}>
        <View style={styles.overlay} />
        <View style={styles.heroContent}>
          <Image source={require('@/assets/icons/logotipo-branco.png')} style={styles.logo} resizeMode="contain" />
          <Text style={styles.title}>Repor palavra-passe</Text>
          <Text style={styles.subtitle}>Indica o teu email para receberes o link de recuperacao.</Text>
        </View>
      </ImageBackground>

      <View style={styles.formCard}>
        <Text style={styles.label}>
          Email<Text style={styles.required}>*</Text>
        </Text>
        <TextInput
          value={email}
          onChangeText={setEmail}
          placeholder="hello@domain.pt"
          placeholderTextColor="#9AA0A6"
          autoCapitalize="none"
          keyboardType="email-address"
          style={styles.input}
        />

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

        <Pressable style={styles.actionButton} onPress={handleRecover}>
          <Text style={styles.actionButtonText}>Recuperar Palavra-passe</Text>
          <Image source={require('@/assets/icons/seta-up.png')} style={styles.actionButtonIcon} />
        </Pressable>

        <Pressable onPress={() => router.replace('/login' as Href)}>
          <Text style={styles.backLink}>Voltar ao Login</Text>
        </Pressable>
      </View>
      </ScrollView>

      <Modal visible={showSuccessModal} animationType="fade" transparent>
        <View style={styles.modalOverlay}>
          <View style={styles.modalCard}>
            <View style={styles.modalIconCircle}>
              <Ionicons name="mail-open-outline" size={22} style={styles.modalIcon} />
            </View>
            <Text style={styles.modalTitle}>Verifica o teu email</Text>
            <Text style={styles.modalMessage}>Enviamos-te as instrucoes para recuperares a palavra-passe.</Text>
            <Pressable
              style={styles.modalCloseButton}
              onPress={() => {
                setShowSuccessModal(false);
                router.replace('/login' as Href);
              }}>
              <Text style={styles.modalCloseText}>Ok</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
    </KeyboardAvoidingView>
  );
}