ChatApp/apps/mobile/app/index.tsx

import { auth } from '@chat-app/shared';
import { Redirect } from 'expo-router';
import { useState } from 'react';
import {
  ActivityIndicator,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';

import { useAuth } from '../lib/authContext';
import { env } from '../lib/env';
import { supabase } from '../lib/supabase';
import { colors } from '../theme/colors';

// Phase 1 landing — magic-link login. Signup with invite code is not
// part of this MVP (accounts come from desktop / admin). After a
// successful request the user sees a "Check your inbox" state until
// they tap the email link and Expo Router routes the deep link to
// app/auth/callback.tsx.
export default function Landing() {
  const { session, ready } = useAuth();
  const [email, setEmail] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);

  if (!ready) return null;
  if (session) return <Redirect href="/(app)/chats" />;

  async function handleSubmit() {
    if (!email.includes('@')) {
      setError('Bitte gültige E-Mail eingeben');
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      await auth.loginWithMagicLink(supabase, email.trim(), env.authRedirectUrl);
      setSent(true);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Login fehlgeschlagen');
    } finally {
      setSubmitting(false);
    }
  }

  if (sent) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Netralax</Text>
        <Text style={styles.subtitle}>Check deine Mails</Text>
        <Text style={styles.help}>
          Wir haben dir einen Anmelde-Link an {email} geschickt. Tipp auf den Link, um
          dich anzumelden.
        </Text>
        <Pressable
          style={[styles.button, styles.buttonGhost]}
          onPress={() => {
            setSent(false);
            setEmail('');
          }}
        >
          <Text style={styles.buttonText}>Andere E-Mail verwenden</Text>
        </Pressable>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Netralax</Text>
      <Text style={styles.subtitle}>Mit Magic-Link anmelden</Text>

      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="du@beispiel.de"
        placeholderTextColor={colors.textDim}
        autoCapitalize="none"
        autoCorrect={false}
        keyboardType="email-address"
        textContentType="emailAddress"
        style={styles.input}
        editable={!submitting}
      />

      {error && <Text style={styles.error}>{error}</Text>}

      <Pressable
        style={[styles.button, submitting && styles.buttonDisabled]}
        onPress={handleSubmit}
        disabled={submitting}
      >
        {submitting ? (
          <ActivityIndicator color={colors.text} />
        ) : (
          <Text style={styles.buttonText}>Magic Link senden</Text>
        )}
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.bg,
    padding: 24,
  },
  title: { color: colors.text, fontSize: 32, fontWeight: '700', letterSpacing: 1, marginBottom: 8 },
  subtitle: { color: colors.textMuted, fontSize: 14, marginBottom: 24 },
  help: {
    color: colors.textMuted,
    fontSize: 14,
    textAlign: 'center',
    marginHorizontal: 16,
    marginBottom: 24,
    lineHeight: 20,
  },
  input: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: colors.surface,
    borderColor: colors.border,
    borderWidth: 1,
    borderRadius: 12,
    color: colors.text,
    paddingHorizontal: 16,
    paddingVertical: 14,
    fontSize: 15,
    marginBottom: 12,
  },
  error: { color: colors.danger, fontSize: 13, marginBottom: 12 },
  button: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: colors.accent,
    paddingHorizontal: 24,
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: 'center',
  },
  buttonGhost: { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.border },
  buttonDisabled: { opacity: 0.6 },
  buttonText: { color: colors.text, fontWeight: '600', fontSize: 15 },
});