import { Link } from 'expo-router';
import { useState } from 'react';
import { KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, View } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useAuth } from '@/context/AuthContext';

export default function RegisterScreen() {
  const { signUp } = useAuth();
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [info, setInfo] = useState<string | null>(null);

  return (
    <SafeAreaView className="flex-1 bg-slate-50">
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        className="flex-1"
      >
        <ScrollView
          keyboardShouldPersistTaps="handled"
          contentContainerClassName="flex-grow px-6 py-8"
        >
          <View className="mb-8">
            <Text className="text-3xl font-bold text-slate-900">Inscription</Text>
            <Text className="mt-2 text-base text-slate-600">
              Créez votre accès professionnel
            </Text>
          </View>

          {error ? (
            <Text className="mb-3 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">
              {error}
            </Text>
          ) : null}
          {info ? (
            <Text className="mb-3 rounded-lg bg-emerald-50 px-3 py-2 text-sm text-emerald-800">
              {info}
            </Text>
          ) : null}

          <TextInput
            label="Prénom"
            mode="outlined"
            value={firstName}
            onChangeText={setFirstName}
            autoComplete="given-name"
            className="mb-3"
            style={{ backgroundColor: '#fff' }}
          />
          <TextInput
            label="Nom"
            mode="outlined"
            value={lastName}
            onChangeText={setLastName}
            autoComplete="family-name"
            className="mb-3"
            style={{ backgroundColor: '#fff' }}
          />
          <TextInput
            label="E-mail"
            mode="outlined"
            value={email}
            onChangeText={setEmail}
            autoCapitalize="none"
            keyboardType="email-address"
            autoComplete="email"
            className="mb-3"
            style={{ backgroundColor: '#fff' }}
          />
          <TextInput
            label="Mot de passe"
            mode="outlined"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
            autoComplete="new-password"
            className="mb-6"
            style={{ backgroundColor: '#fff' }}
          />

          <Button
            mode="contained"
            onPress={async () => {
              setError(null);
              setInfo(null);
              setLoading(true);
              const r = await signUp({
                email: email.trim(),
                password,
                firstName: firstName.trim(),
                lastName: lastName.trim(),
              });
              setLoading(false);
              if (r.error) {
                setError(r.error);
                return;
              }
              setInfo(
                'Si la confirmation e-mail est activée sur votre projet Supabase, vérifiez votre boîte avant de vous connecter.',
              );
            }}
            loading={loading}
            disabled={loading}
            buttonColor="#1D4ED8"
            textColor="#ffffff"
            style={{ borderRadius: 10, paddingVertical: 4 }}
          >
            S&apos;inscrire
          </Button>

          <View className="mt-8 items-center">
            <Link href="/auth/login" asChild>
              <Pressable className="py-2">
                <Text className="font-semibold text-primary">Retour à la connexion</Text>
              </Pressable>
            </Link>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}