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
        contentContainerStyle={{ flexGrow: 1, justifyContent: "center", padding: theme.spacing.lg }}
        keyboardShouldPersistTaps="handled"
      >
        <View
          style={{
            backgroundColor: theme.colors.card,
            borderRadius: theme.radius.xl,
            padding: theme.spacing.lg,
            borderWidth: 1,
            borderColor: theme.colors.borderLight,
            ...theme.shadows.md,
            gap: theme.spacing.md,
          }}
        >
          <View style={{ alignItems: "center", marginBottom: theme.spacing.sm }}>
            <View
              style={{
                width: 72,
                height: 72,
                borderRadius: 36,
                backgroundColor: theme.colors.primaryLight,
                alignItems: "center",
                justifyContent: "center",
                marginBottom: theme.spacing.md,
              }}
            >
              <Text style={{ fontSize: 36 }}>🔧</Text>
            </View>
            <Text style={{ ...theme.typography.h1, color: theme.colors.text }}>
              МојМајстор
            </Text>
            <Text selectable style={{ ...theme.typography.body, color: theme.colors.textSecondary, marginTop: theme.spacing.xs }}>
              Најдете мајстор во вашата близина
            </Text>
          </View>

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

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

          <Button
            loading={loading}
            onPress={handleLogin}
            accessibilityLabel="Најави се"
            fullWidth
            size="lg"
          >
            Најави се
          </Button>

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