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

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [localError, setLocalError] = useState<string | null>(null);
  const { login, isLoading, error } = useAuth();

  const handleLogin = async () => {
    if (!email.trim() || !password.trim()) {
      setLocalError('Preenche email e palavra-passe.');
      return;
    }

    setLocalError(null);

    try {
      await login(email.trim(), password);
      router.replace('/home' as Href);
    } catch {
      // O erro já é guardado no contexto; evitamos uncaught promise no ecrã.
    }
  };

  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}>Login</Text>
            <Text style={styles.subtitle}>Acede às tuas reservas, documentos e informaçoes de viagem.</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}
        />

        <Text style={styles.label}>
          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}
          />
          <Pressable onPress={() => setShowPassword((prev) => !prev)} hitSlop={8}>
            <Ionicons name={showPassword ? 'eye-off-outline' : 'eye-outline'} size={20} style={styles.eyeIcon} />
          </Pressable>
        </View>

        <Pressable onPress={() => router.push('/recover' as Href)}>
          <Text style={styles.forgot}>Esqueci-me da palavra-passe</Text>
        </Pressable>

        {!!(localError || error) && <Text style={styles.errorText}>{localError || error}</Text>}

        <Pressable style={styles.loginButton} onPress={handleLogin} disabled={isLoading}>
          <Text style={styles.loginButtonText}>Entrar</Text>
          <Image source={require('@/assets/icons/seta-up.png')} style={styles.loginButtonIcon} />
        </Pressable>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}