import { useState } from "react";
import {
  View,
  Text,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  Alert,
} from "react-native";
import { useRouter } from "expo-router";
import { useMutation, useAction } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Input } from "../../components/ui/input";
import { Button } from "../../components/ui/button";
import { useTheme } from "../../components/theme";
import { useAuth } from "../_layout";

export default function LoginScreen() {
  const theme = useTheme();
  const router = useRouter();
  const { login } = useAuth();
  const loginMutation = useMutation(api.auth.login);
  const hashPassword = useAction(api.auth.hashPassword);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleLogin() {
    if (!email || !password) {
      Alert.alert("Грешка", "Пополнете ги сите полиња");
      return;
    }

    setLoading(true);
    try {
      const passwordHash = await hashPassword({ password });
      const result = await loginMutation({ email, passwordHash });
      await login(result.token, result.user._id);
      router.replace("/(tabs)/(home)");
    } catch (e: any) {
      Alert.alert("Најава неуспешна", "Погрешна е-пошта или лозинка");
    } finally {
      setLoading(false);
    }
  }

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{ flex: 1, backgroundColor: theme.colors.background }}
    >
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        contentContainerStyle={{ padding: theme.spacing.lg, gap: theme.spacing.md }}
        keyboardShouldPersistTaps="handled"
      >
        <View style={{ marginTop: 60, marginBottom: theme.spacing.xl }}>
          <Text style={{ fontSize: 32, fontWeight: "700", color: theme.colors.text }}>
            МојМајстор
          </Text>
          <Text style={{ fontSize: 16, color: theme.colors.textSecondary, marginTop: theme.spacing.sm }}>
            Најдете мајстор во вашата близина
          </Text>
        </View>

        <Input
          placeholder="Е-пошта"
          value={email}
          onChangeText={setEmail}
          autoCapitalize="none"
          keyboardType="email-address"
        />

        <Input
          placeholder="Лозинка"
          value={password}
          onChangeText={setPassword}
          secureTextEntry
        />

        <View style={{ marginTop: theme.spacing.sm }}>
          <Button loading={loading} onPress={handleLogin}>
            Најави се
          </Button>
        </View>

        <View style={{ flexDirection: "row", justifyContent: "center", marginTop: theme.spacing.md }}>
          <Text style={{ color: theme.colors.textSecondary }}>Немате профил? </Text>
          <Text
            style={{ color: theme.colors.primary, fontWeight: "600" }}
            onPress={() => router.push("/(auth)/register")}
          >
            Регистрирајте се
          </Text>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}