import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Alert,
  ActivityIndicator,
  SafeAreaView,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import { useRouter } from 'expo-router';
import { usuariosService } from '../../src/lib/supabase';
import { Colors } from '../../src/components/common/theme';
import { useColorScheme } from '../../src/hooks/use-color-scheme';
import { Lock, Mail } from 'lucide-react-native';
import { Input } from '../../src/components/common/input';
import { Button } from '../../src/components/common/button';

export default function LoginScreen() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [palavraPasse, setPalavraPasse] = useState('');
  const [idUsuario, setIdUsuario] = useState('');
  const [usuario, setUsuario] = useState('');
  const [loading, setLoading] = useState(false);

  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? 'dark' : 'light';
  const primary = Colors[theme].primary;

  const handleLogin = async () => {
    // Validação dos campos
    if (!email || !palavraPasse || !idUsuario || !usuario) {
      Alert.alert('Erro', 'Por favor, preencha todos os campos');
      return;
    }

    // Validação de email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      Alert.alert('Erro', 'Email inválido');
      return;
    }

    setLoading(true);

    try {
      // login no Supabase
      const { data, error } = await usuariosService.login(email, palavraPasse);

      if (error) {
        Alert.alert('Erro', 'Email ou palavra passe incorretos');
        return;
      }

      if (data) {
        Alert.alert('Sucesso', `Bem-vindo, ${(data as any).usuario || 'usuário'}!`);
        // quando o login é bem‑sucedido, vai para a página inicial
        router.replace('/inicio');
      }
    } catch (err) {
      Alert.alert('Erro', 'Erro ao conectar ao servidor');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <SafeAreaView style={[styles.safe, { backgroundColor: Colors[theme].background }]}>
      <KeyboardAvoidingView
        style={[styles.container, { backgroundColor: Colors[theme].background }]}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <Text style={[styles.title, { color: primary } ]}>Fluxup</Text>
        <Text style={[styles.subtitle, { color: Colors[theme].textMuted } ]}>Entre na sua conta</Text>

        {/* Campo de Email */}
        <View style={[styles.inputContainer, { backgroundColor: Colors[theme].card, borderColor: Colors[theme].border }] }>
          <Mail size={20} color={Colors[theme].icon} style={styles.icon} />
          <Input
            placeholder="Email"
            value={email}
            onChangeText={setEmail}
            keyboardType="email-address"
            editable={!loading}
            style={styles.input}
          />
        </View>

        {/* Campo de Palavra Passe */}
        <View style={[styles.inputContainer, { backgroundColor: Colors[theme].card, borderColor: Colors[theme].border }] }>
          <Lock size={20} color={Colors[theme].icon} style={styles.icon} />
          <Input
            placeholder="Palavra Passe"
            value={palavraPasse}
            onChangeText={setPalavraPasse}
            secureTextEntry
            editable={!loading}
            style={styles.input}
          />
        </View>

        {/* Campo de ID Usuário */}
        <Input
          placeholder="ID Usuário"
          value={idUsuario}
          onChangeText={setIdUsuario}
          editable={!loading}
        />

        {/* Campo de Usuário */}
        <Input
          placeholder="Usuário"
          value={usuario}
          onChangeText={setUsuario}
          editable={!loading}
        />

        {/* Botão de Login */}
        <Button
          title="Entrar"
          onPress={handleLogin}
          isLoading={loading}
          disabled={loading}
          variant="primary"
          size="lg"
          containerStyle={styles.button}
          textStyle={styles.buttonText}
        />

        <View style={styles.footerLinks}>
          {/* Botão de Registo */}
          <TouchableOpacity onPress={() => router.push('/registo')}>
            <Text style={[styles.linkText, { color: primary }]}> 
              Não tem conta? <Text style={[styles.linkBold, { color: primary } ]}>Registe-se</Text>
            </Text>
          </TouchableOpacity>

          {/* Botão de Esqueci Palavra Passe */}
          <TouchableOpacity
            onPress={() => router.push('/esqueciPalavraPasse')}
          >
            <Text style={[styles.linkText, { color: primary }]}>Esqueci a palavra‑passe</Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    marginBottom: 24,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
    marginBottom: 15,
    paddingHorizontal: 10,
  },
  icon: {
    marginRight: 10,
  },
  input: {
    flex: 1,
    height: 50,
    fontSize: 16,
  },
  button: {
    width: '100%',
    height: 50,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
    marginBottom: 20,
  },
  buttonDisabled: {
    backgroundColor: '#ccc',
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
  linkText: {
    fontSize: 14,
    marginTop: 10,
    textAlign: 'center',
  },
  linkBold: {
    fontWeight: 'bold',
  },
  footerLinks: {
    marginTop: 10,
  },
});