BrixCafe/app/screens/auth/SignInScreen.tsx

import { useState } from "react";
import {
  View,
  Text,
  TextInput,
  Pressable,
  StyleSheet,
  Image,
  Alert,
  TouchableOpacity,
} from "react-native";
import { Eye, EyeOff } from "lucide-react-native";
import { router } from "expo-router";
import { signIn } from "../../../firebase/auth"; // Assure-toi que le chemin est correct
import { Link } from "expo-router";



const SignInScreen = () => {
  const [form, setForm] = useState({
    email: "",
    password: "",
    rememberMe: false,
  });

  const [errors, setErrors] = useState({
    email: "",
    password: "",
  });

  const [showPassword, setShowPassword] = useState(false);

  const validateForm = () => {
    let valid = true;
    const newErrors = { email: "", password: "" };

    if (!form.email) {
      newErrors.email = "L'e-mail est requis.";
      valid = false;
    }

    if (!form.password) {
      newErrors.password = "Le mot de passe est requis.";
      valid = false;
    }

    setErrors(newErrors);
    return valid;
  };

  const handleLogin = async () => {
    if (!validateForm()) return;

    try {
      const { user } = await signIn(form.email, form.password); // Destructure to get user
      console.log("Connexion réussie :", user.email);  // Access the email directly
      router.replace("/screens/user/UserHomeScreen"); // You can route based on role later
    } catch (error: any) {
      Alert.alert("Erreur", error.message);  // Display the error message
    }
  };

  return (
    <View style={styles.container}>
      <Pressable onPress={() => router.back()} style={styles.backButton}>
        <Text style={styles.backText}>←</Text>
      </Pressable>

      <Image source={require('../../../assets/images/logo.png')} style={styles.logo}/>

      <Text style={styles.title}>Se connecter</Text>

      <Text style={styles.welcome}>Bienvenue! 👋</Text>

      <View style={styles.form}>
        <View style={styles.inputGroup}>
          <Text style={styles.label}>E-mail</Text>
          <TextInput
            placeholder="Entrez votre adresse e-mail"
            placeholderTextColor="#666"
            style={[styles.input, errors.email && styles.inputError]}
            keyboardType="email-address"
            autoCapitalize="none"
            value={form.email}
            onChangeText={(text) => {
              setForm({ ...form, email: text });
              if (errors.email) setErrors({ ...errors, email: "" });
            }}
          />
          {errors.email ? (
            <Text style={styles.errorText}>{errors.email}</Text>
          ) : null}
        </View>

        <View style={styles.inputGroup}>
          <Text style={styles.label}>Mot de passe</Text>
          <View
            style={[
              styles.passwordContainer,
              errors.password && styles.inputError,
            ]}
          >
            <TextInput
              placeholder="Entrez votre mot de passe"
              placeholderTextColor="#666"
              style={styles.passwordInput}
              secureTextEntry={!showPassword}
              value={form.password}
              onChangeText={(text) => {
                setForm({ ...form, password: text });
                if (errors.password) setErrors({ ...errors, password: "" });
              }}
            />
            <Pressable
              onPress={() => setShowPassword(!showPassword)}
              style={styles.eyeIcon}
            >
              {showPassword ? (
                <EyeOff size={20} color="#666" />
              ) : (
                <Eye size={20} color="#666" />
              )}
            </Pressable>
          </View>
          {errors.password ? (
            <Text style={styles.errorText}>{errors.password}</Text>
          ) : null}
        </View>

        <View style={styles.optionsContainer}>
          <Pressable
            style={styles.rememberMe}
            onPress={() => setForm({ ...form, rememberMe: !form.rememberMe })}
          >
            <View
              style={[
                styles.checkbox,
                form.rememberMe && styles.checkboxChecked,
              ]}
            />
            <Text style={styles.rememberText}>Rester Connecté</Text>
          </Pressable>
            <TouchableOpacity>            
              <Text style={styles.forgotText}>Mot de passe oublié?</Text>
            </TouchableOpacity>
        </View>
      </View>

      <Pressable style={styles.loginButton} onPress={handleLogin}>
        <Text style={styles.loginButtonText}>Connexion</Text>
      </Pressable>

      <View style={styles.signupContainer}>
        <Text style={styles.signupText}>Nouveau ici? </Text>
        <Link href="/screens/auth/SignUpScreen" style={styles.signupLink}>
          <Text style={styles.signupLinkText}>Créer un compte</Text>
        </Link>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
  backButton: {
    marginTop: 2,
    marginBottom: 0,
  },
  backText: {
    fontSize: 40,
    color: "#000",
  },
  logo: {
    width: 100,
    height: 100,
    alignSelf: "center",
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
    marginBottom: 30,
  },
  welcome: {
    fontSize: 28,
    fontWeight: "bold",
    marginBottom: 30,
  },
  form: {
    gap: 20,
  },
  inputGroup: {
    gap: 8,
  },
  label: {
    fontSize: 16,
    fontWeight: "500",
    color: "#333",
  },
  input: {
    backgroundColor: "#f5f5f5",
    padding: 16,
    borderRadius: 8,
    fontSize: 16,
  },
  inputError: {
    borderWidth: 1,
    borderColor: "#ff4444",
  },
  errorText: {
    color: "#ff4444",
    fontSize: 14,
    marginTop: 4,
  },
  passwordContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
    borderRadius: 8,
  },
  passwordInput: {
    flex: 1,
    padding: 16,
    fontSize: 16,
  },
  eyeIcon: {
    padding: 16,
  },
  optionsContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 8,
  },
  rememberMe: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  checkbox: {
    width: 20,
    height: 20,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: "#B17741",
  },
  checkboxChecked: {
    backgroundColor: "#B17741",
  },
  rememberText: {
    color: "#333",
    fontSize: 14,
  },
  forgotPassword: {
    padding: 4,
  },
  forgotText: {
    color: "#B17741",
    fontSize: 14,
    fontWeight: "500",
  },
  loginButton: {
    backgroundColor: "#B17741",
    padding: 16,
    borderRadius: 8,
    marginTop: 30,
  },
  loginButtonText: {
    color: "#fff",
    textAlign: "center",
    fontSize: 16,
    fontWeight: "600",
  },
  signupContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
  },
  signupText: {
    color: "#666",
    fontSize: 14,
  },
  signupLink: {
    padding: 4,
  },
  signupLinkText: {
    color: "#B17741",
    fontSize: 14,
    fontWeight: "500",
  },
});

export default SignInScreen;