// components/Auth.tsx
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useState } from 'react';
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from 'react-native';
import { supabase } from '../app/lib/supabase';

interface AuthProps {
  onLoginSuccess?: () => void;
}

export default function Auth({ onLoginSuccess }: AuthProps) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [isFocused, setIsFocused] = useState<string | null>(null);
  
  // ESTADO PARA OS AVISOS MODERNOS
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const router = useRouter();

  const handleLogin = async () => {
    setErrorMessage(null); // Limpa erros anteriores

    if (!email || !password) {
      setErrorMessage('Preencha todos os campos para continuar.');
      return;
    }

    setLoading(true);
    try {
      const { data: { user }, error: authError } = await supabase.auth.signInWithPassword({ email, password });
      if (authError) throw authError;

      if (user) {
        const { error: profileError } = await supabase
          .from('profiles')
          .select('*')
          .eq('id', user.id)
          .single();

        if (profileError) console.warn("Perfil não encontrado.");
      }
      
      if (onLoginSuccess) {
        onLoginSuccess();
      } else {
        router.replace('/(tabs)/estagios');
      }

    } catch (err: any) {
      // Tradução simples de erro comum
      const msg = err.message === 'Invalid login credentials' 
        ? 'Email ou palavra-passe incorretos.' 
        : 'Ocorreu um erro ao entrar. Tenta novamente.';
      setErrorMessage(msg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      
      {/* AVISO DE ERRO MODERNO */}
      {errorMessage && (
        <View style={styles.errorBanner}>
          <Ionicons name="alert-circle" size={20} color="#EF4444" />
          <Text style={styles.errorText}>{errorMessage}</Text>
        </View>
      )}

      <View style={styles.inputWrapper}>
        <Text style={[styles.label, isFocused === 'email' && { color: '#2390a6' }]}>Email</Text>
        <TextInput
          style={[styles.input, isFocused === 'email' && styles.inputFocused]}
          placeholder="Insira o seu email"
          placeholderTextColor="#94A3B8"
          value={email}
          onChangeText={(val) => {
            setEmail(val);
            if(errorMessage) setErrorMessage(null);
          }}
          onFocus={() => setIsFocused('email')}
          onBlur={() => setIsFocused(null)}
          autoCapitalize="none"
          keyboardType="email-address"
          editable={!loading}
        />
      </View>

      <View style={styles.inputWrapper}>
        <View style={styles.labelRow}>
          <Text style={[styles.label, isFocused === 'pass' && { color: '#2390a6' }]}>Palavra-passe</Text>
        </View>
        <TextInput
          style={[styles.input, isFocused === 'pass' && styles.inputFocused]}
          placeholder="Insira a sua palavra-passe"
          placeholderTextColor="#94A3B8"
          value={password}
          onChangeText={(val) => {
            setPassword(val);
            if(errorMessage) setErrorMessage(null);
          }}
          onFocus={() => setIsFocused('pass')}
          onBlur={() => setIsFocused(null)}
          secureTextEntry
          editable={!loading}
        />
      </View>

      <TouchableOpacity
        activeOpacity={0.8}
        style={[styles.button, loading && styles.buttonDisabled]}
        onPress={handleLogin}
        disabled={loading}
      >
        {loading ? (
          <ActivityIndicator color="#fff" />
        ) : (
          <Text style={styles.buttonText}>ENTRAR</Text>
        )}
      </TouchableOpacity>

      <TouchableOpacity 
        style={styles.forgotButton}
        onPress={() => router.push('/redefenirsenha')}
      >
        <Text style={styles.forgotText}>Esqueceu-se da palavra-passe?</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    marginTop: 10,
  },
  errorBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FEF2F2',
    padding: 16,
    borderRadius: 16,
    marginBottom: 20,
    borderWidth: 1,
    borderColor: '#FEE2E2',
  },
  errorText: {
    color: '#B91C1C',
    fontSize: 14,
    fontWeight: '600',
    marginLeft: 10,
    flex: 1,
  },
  inputWrapper: {
    marginBottom: 20,
  },
  labelRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  label: {
    fontSize: 14,
    fontWeight: '700',
    color: '#475569',
    marginBottom: 10,
    marginLeft: 4,
  },
  input: {
    backgroundColor: '#FBFDFF',
    borderRadius: 18,
    paddingHorizontal: 20,
    paddingVertical: 18,
    fontSize: 16,
    color: '#0F172A',
    borderWidth: 1.5,
    borderColor: '#F1F5F9',
  },
  inputFocused: {
    borderColor: '#2390a6',
    backgroundColor: '#FFFFFF',
  },
  button: {
    backgroundColor: '#dd8707', // A cor que pediste
    borderRadius: 18,
    paddingVertical: 20,
    alignItems: 'center',
    marginTop: 10,
    shadowColor: '#dd8707',
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.3,
    shadowRadius: 10,
    elevation: 6,
  },
  buttonDisabled: {
    backgroundColor: '#E2E8F0',
    elevation: 0,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '800',
    letterSpacing: 1,
  },
  forgotButton: {
    marginTop: 20,
    alignItems: 'center',
  },
  forgotText: {
    color: '#2390a6',
    fontSize: 15,
    fontWeight: '700',
  },
});