import React, { useState } from "react";
import { StyleSheet, View, Text, Image, ImageSourcePropType, Platform } from "react-native";
import { Button, Input } from "@rn-vui/themed";
import { useAuthStore } from "@/stores/auth";
import { Link } from "expo-router";
import { Mail, Lock } from "lucide-react-native";
import { GoogleLoginButton } from "@/components/GoogleLoginButton";
import { AppleLoginButton } from "@/components/AppleLoginButton";
import { useThemeColor } from "@/hooks/useThemeColor";
import { useColorScheme } from "@/hooks/useColorScheme";

export default function Auth() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const login = useAuthStore((state) => state.login);
  const authLoading = useAuthStore((state) => state.loading);
  const performOAuth = useAuthStore((state) => state.performOAuth);
  const signInWithApple = useAuthStore((state) => state.signInWithApple);

  // Theme-aware colors
  const backgroundColor = useThemeColor({ light: "#f5f5f5", dark: "#111827" }, "background");
  const textColor = useThemeColor({ light: "#333", dark: "#f9fafb" }, "text");
  const subtitleColor = useThemeColor({ light: "#666", dark: "#9ca3af" }, "text");
  const separatorColor = useThemeColor({ light: "#ddd", dark: "#374151" }, "text");
  const linkColor = useThemeColor({ light: "#3b82f6", dark: "#60a5fa" }, "text");

  const dark = useColorScheme() === "dark";

  const logo = dark
    ? require("@/assets/images/logo_white.png")
    : require("@/assets/images/logo.png");

  return (
    <View style={[styles.container, { backgroundColor }]}>
      <Image source={logo} style={styles.logo} />
      <Text style={[styles.title, { color: textColor }]}>Connexion XTablo</Text>
      <Text style={[styles.subtitle, { color: subtitleColor }]}>Connectez-vous à votre compte</Text>
      <View style={[styles.verticallySpaced, styles.mt10]}>
        <Input
          label="Adresse email"
          leftIcon={<Mail size={20} color="#666" />}
          onChangeText={(text) => setEmail(text)}
          value={email}
          placeholder="jean@dupont.com"
          autoCapitalize={"none"}
        />
      </View>
      <View style={styles.verticallySpaced}>
        <Input
          label="Mot de passe"
          leftIcon={<Lock size={20} color="#666" />}
          onChangeText={(text) => setPassword(text)}
          value={password}
          secureTextEntry={true}
          placeholder="Mot de passe"
          autoCapitalize={"none"}
        />
      </View>
      <View style={[styles.verticallySpaced, styles.mt20]}>
        <Button
          title="Se connecter"
          disabled={authLoading}
          onPress={() => login(email, password)}
          buttonStyle={styles.button}
          titleStyle={styles.buttonTitle}
        />
      </View>
      <View style={styles.separatorContainer}>
        <View style={[styles.separator, { backgroundColor: separatorColor }]} />
        <Text style={[styles.separatorText, { color: subtitleColor }]}>ou</Text>
        <View style={[styles.separator, { backgroundColor: separatorColor }]} />
      </View>
      <View style={styles.verticallySpaced}>
        <GoogleLoginButton onPress={() => performOAuth("google")} />
      </View>

      {Platform.OS === "ios" && (
        <View style={[styles.verticallySpaced, styles.mt5]}>
          <AppleLoginButton onPress={() => signInWithApple()} />
        </View>
      )}
      <View style={styles.linkContainer}>
        <Text style={[styles.linkText, { color: subtitleColor }]}>Pas encore de compte ? </Text>
        <Link href="/signup" style={[styles.link, { color: linkColor }]}>
          S'inscrire
        </Link>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 16,
  },
  logo: {
    width: 80,
    height: 80,
    alignSelf: "center",
    marginBottom: 8,
    borderRadius: 40,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
    marginBottom: 3,
  },
  subtitle: {
    fontSize: 14,
    textAlign: "center",
    marginBottom: 16,
  },
  verticallySpaced: {
    paddingTop: 2,
    paddingBottom: 2,
    alignSelf: "stretch",
  },
  mt20: {
    marginTop: 12,
  },
  mt40: {
    marginTop: 40, // Increased top margin for the first input
  },
  mt10: {
    marginTop: 6,
  },
  mt5: {
    marginTop: 3,
  },
  button: {
    paddingVertical: 12,
    borderRadius: 8, // Rounded corners
    backgroundColor: "#007bff", // Added background color for consistency
  },
  buttonTitle: {
    fontWeight: "bold",
    color: "#fff", // Ensure text is visible on colored button
  },
  separatorContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginVertical: 12,
  },
  separator: {
    flex: 1,
    height: 1,
  },
  separatorText: {
    marginHorizontal: 15,
    fontSize: 14,
  },
  linkContainer: {
    flexDirection: "row",
    justifyContent: "center",
    marginTop: 12,
  },
  linkText: {},
  link: {
    fontWeight: "bold",
  },
});
