import { useState } from "react";
import { View, Text, Pressable } from "react-native";
import { Link, router } from "expo-router";
import BaseBackground from "../components/BaseBackground";
import AuthButton from "../components/AuthButton";
import CustomTextInput from "../components/CustomTextInput";
import { AuthService } from "../services";
import { useThemeStore } from "../stores/ThemeStore";

const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const RegisterScreen = () => {
  const { theme } = useThemeStore();
  const [email, setEmail] = useState("");
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleRegister = async () => {
    setError(null);

    if (!email || !userName || !password) {
      setError("Bitte alle Felder ausfüllen");
      return;
    }

    if (!EMAIL_REGEX.test(email)) {
      setError("Bitte eine gültige E-Mail-Adresse eingeben");
      return;
    }

    setIsLoading(true);
    try {
      await AuthService.register({ email, userName, password });
      router.replace("/(tabs)/chat");
    } catch {
      setError("Registrierung fehlgeschlagen. E-Mail bereits vergeben?");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <BaseBackground>
      <View className="flex-1 justify-center items-center p-8">
        <Text
          className="text-3xl font-bold mb-8"
          style={{ color: theme.textPrimary }}
        >
          Registrieren
        </Text>

        {error && (
          <Text
            className="mb-4 text-center"
            style={{ color: theme.rejectButton }}
          >
            {error}
          </Text>
        )}

        <CustomTextInput
          placeholder="E-Mail"
          placeholderTextColor={theme.textMuted}
          text={email}
          onValueChange={setEmail}
          autoCapitalize="none"
          keyboardType="email-address"
          className="w-full rounded-lg p-4 mb-4"
        />

        <CustomTextInput
          placeholder="Benutzername"
          placeholderTextColor={theme.textMuted}
          text={userName}
          onValueChange={setUserName}
          autoCapitalize="none"
          className="w-full rounded-lg p-4 mb-4"
        />

        <CustomTextInput
          placeholder="Passwort"
          placeholderTextColor={theme.textMuted}
          text={password}
          onValueChange={setPassword}
          secureTextEntry
          className="w-full rounded-lg p-4 mb-6"
        />

        <AuthButton
          title="Registrieren"
          onPress={handleRegister}
          isLoading={isLoading}
        />

        <Link href="/login" asChild>
          <Pressable>
            <Text style={{ color: theme.chatBot }}>
              Bereits ein Konto? Anmelden
            </Text>
          </Pressable>
        </Link>
      </View>
    </BaseBackground>
  );
};

export default RegisterScreen;