import React, { useState } from "react";
import { View, Text, StyleSheet, TextInput, Pressable, ActivityIndicator } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Header from "../components/Header";
import { useAuth } from "../contexts/AuthContext";

export default function LoginScreen({ navigation }) {
  const { login } = useAuth();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const onLogin = async () => {
    if (!email.trim() || !password) {
      setError("Please fill in all fields");
      return;
    }
    setError("");
    setLoading(true);
    try {
      await login(email.trim(), password);
      navigation.navigate("Home");
    } catch (err) {
      setError(err.message || "Login failed");
    }
    setLoading(false);
  };

  return (
    <SafeAreaView style={styles.container}>
      <Pressable onPress={() => navigation.goBack()} style={styles.backBtn}>
        <Text style={styles.backText}>← Back</Text>
      </Pressable>

      <Header title="Login" showIcons={false} />

      {error ? <Text style={styles.error}>{error}</Text> : null}

      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        placeholderTextColor="#9ca3af"
        style={styles.input}
        autoCapitalize="none"
        keyboardType="email-address"
      />

      <TextInput
        value={password}
        onChangeText={setPassword}
        placeholder="Password"
        placeholderTextColor="#9ca3af"
        style={styles.input}
        secureTextEntry
      />

      <Pressable style={styles.loginBtn} onPress={onLogin} disabled={loading}>
        {loading ? (
          <ActivityIndicator color="#000" />
        ) : (
          <Text style={styles.loginBtnText}>Log In</Text>
        )}
      </Pressable>

      <Pressable style={styles.passwordResetBtn} onPress={() => navigation.navigate("PasswordReset")}>
        <Text style={styles.passwordResetBtnText}>Reset password</Text>
      </Pressable>

      <Pressable style={styles.SignupBtn} onPress={() => navigation.navigate("SignUp")}>
        <Text style={styles.SignupBtnText}>Sign Up</Text>
      </Pressable>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    paddingTop: 24,
    paddingHorizontal: 16,
  },
  backBtn: {
    marginBottom: 10,
    alignSelf: "flex-start",
  },
  backText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
  error: {
    color: "#e36d6d",
    fontSize: 14,
    marginBottom: 12,
    textAlign: "center",
  },
  input: {
    backgroundColor: "#1f2937",
    color: "#fff",
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 12,
    fontSize: 16,
    marginBottom: 12,
  },
  loginBtn: {
    backgroundColor: "#dbdbdb",
    borderRadius: 10,
    paddingVertical: 12,
    alignItems: "center",
    marginTop: 4,
    marginBottom: 6,
  },
  loginBtnText: {
    color: "#000",
    fontWeight: "700",
    fontSize: 16,
  },
  passwordResetBtn: {
    backgroundColor: "#e36d6d",
    borderRadius: 10,
    paddingVertical: 12,
    alignItems: "center",
    marginTop: 4,
    marginBottom: 6,
  },
  passwordResetBtnText: {
    color: "#000",
    fontWeight: "700",
    fontSize: 16,
  },
  SignupBtn: {
    backgroundColor: "#dbdbdb",
    borderRadius: 10,
    paddingVertical: 12,
    alignItems: "center",
    marginTop: 24,
  },
  SignupBtnText: {
    color: "#000",
    fontWeight: "700",
    fontSize: 16,
  },
});
