import { useRouter } from 'expo-router';
import {
  Alert,
  Image,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Auth from '../components/Auth';
import { supabase } from './lib/supabase';

export default function LoginScreen() {
  const router = useRouter();

  const handleLoginSuccess = async () => {
    try {
      const {
        data: { user },
        error: userError,
      } = await supabase.auth.getUser();

      if (userError || !user) {
        Alert.alert('Erro', 'Utilizador não autenticado');
        return;
      }

      const { data, error } = await supabase
        .from('profiles')
        .select('tipo')
        .eq('id', user.id)
        .maybeSingle();

      if (error) {
        Alert.alert('Erro', error.message);
        return;
      }

      if (!data) {
        Alert.alert('Erro', 'Perfil não encontrado');
        return;
      }

      if (data.tipo === 'professor') {
        router.replace('/Professor/ProfessorHome');
      } else if (data.tipo === 'aluno') {
        router.replace('/Aluno/AlunoHome');
      } else {
        Alert.alert('Erro', 'Tipo de conta inválido');
      }

    } catch (err) {
      Alert.alert('Erro', 'Ocorreu um erro inesperado no login');
    }
  };

  return (
    <View style={styles.mainContainer}>
      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <ScrollView
          contentContainerStyle={styles.scrollContainer}
          keyboardShouldPersistTaps="handled"
          showsVerticalScrollIndicator={false}
        >
          <View style={styles.content}>
            <View style={styles.header}>
              
              {/* Logo Ajustado e Aproximado */}
              <View style={styles.logoContainer}>
                <Image 
                  source={require('../assets/images/logo_s/texto.png')} 
                  style={styles.logoImage}
                  resizeMode="contain"
                />
              </View>

              <Text style={styles.title}>
                Estágios<Text style={styles.titlePlus}>+</Text>
              </Text>
              <Text style={styles.subtitle}>
                Escola Profissional de Vila do Conde
              </Text>
            </View>

            <View style={styles.authWrapper}>
              <Auth onLoginSuccess={handleLoginSuccess} />
            </View>
          </View>
          
          <View style={styles.footer}>
            <Text style={styles.footerText}>Versão 2.1.0</Text>
            <View style={styles.footerDivider} />
            <Text style={styles.footerText}>© 2026 EPVC</Text>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </View>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  scrollContainer: {
    flexGrow: 1,
    paddingHorizontal: 32,
    paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) + 40 : 60,
    paddingBottom: 30,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    marginBottom: 40,
  },
  header: {
    alignItems: 'center',
    marginBottom: 20, // Reduzi para o bloco de texto ficar mais perto do Auth
  },
  logoContainer: {
    width: 420,   
    height: 220,  
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: -60, // MARGEM NEGATIVA: Aproxima o texto da imagem ao máximo
  },
  logoImage: {
    width: '100%',
    height: '100%',
  },
  title: {
    fontSize: 36,
    fontWeight: '900',
    color: '#2390a6',
    letterSpacing: -1.5,
  },
  titlePlus: {
    color: '#eb9800',
  },
  subtitle: {
    fontSize: 16,
    color: '#64748B',
    textAlign: 'center',
    marginTop: 2, // Reduzi para o subtítulo ficar colado ao título principal
    fontWeight: '500',
    lineHeight: 24,
    maxWidth: 280,
  },
  authWrapper: {
    width: '100%',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 'auto',
    paddingTop: 20,
  },
  footerText: {
    fontSize: 13,
    color: '#94A3B8',
    fontWeight: '600',
  },
  footerDivider: {
    width: 4,
    height: 4,
    backgroundColor: '#E2E8F0',
    borderRadius: 2,
    marginHorizontal: 10,
  },
});