rebreak-monorepo/apps/rebreak-native/components/mail/EditMailAccountSheet.tsx

import { useEffect, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Animated,
  Dimensions,
  Easing,
  KeyboardAvoidingView,
  Modal,
  Platform,
  Pressable,
  Text,
  TextInput,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useMailConnect } from '../../hooks/useMailConnect';
import { useColors } from '../../lib/theme';

const SCREEN_HEIGHT = Dimensions.get('window').height;
const SHEET_HEIGHT = SCREEN_HEIGHT * 0.5;

type Props = {
  visible: boolean;
  email: string;
  onClose: () => void;
  onSuccess: () => void;
};

/**
 * Sheet zum Aktualisieren des App-Passworts eines bereits verbundenen Postfachs.
 * Nutzt POST /api/mail/connect (upsert) — Backend ersetzt verschlüsseltes Passwort.
 */
export function EditMailAccountSheet({ visible, email, onClose, onSuccess }: Props) {
  const { t } = useTranslation();
  const colors = useColors();
  const insets = useSafeAreaInsets();
  const { connect, connecting, error: connectError } = useMailConnect();

  const [password, setPassword] = useState('');
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);

  const translateY = useRef(new Animated.Value(SHEET_HEIGHT)).current;
  const backdropOpacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (visible) {
      setPassword('');
      setPasswordVisible(false);
      setFormError(null);
      translateY.setValue(SHEET_HEIGHT);
      backdropOpacity.setValue(0);
      Animated.parallel([
        Animated.timing(translateY, {
          toValue: 0,
          duration: 280,
          easing: Easing.out(Easing.cubic),
          useNativeDriver: true,
        }),
        Animated.timing(backdropOpacity, {
          toValue: 1,
          duration: 220,
          useNativeDriver: true,
        }),
      ]).start();
    }
  }, [visible, translateY, backdropOpacity]);

  async function handleSave() {
    if (!password.trim()) {
      setFormError(t('mail.form_fields_required'));
      return;
    }
    setFormError(null);
    const result = await connect({ email, password });
    if (result.ok) {
      onClose();
      onSuccess();
    } else {
      setFormError(result.error ?? t('mail.connect_failed'));
    }
  }

  return (
    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
      <Animated.View
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0,0,0,0.4)',
          opacity: backdropOpacity,
        }}
      >
        <Pressable style={{ flex: 1 }} onPress={onClose} />
      </Animated.View>

      <Animated.View
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: 0,
          height: SHEET_HEIGHT,
          backgroundColor: colors.bg,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          transform: [{ translateY }],
        }}
      >
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
          style={{ flex: 1 }}
        >
          {/* Drag-Handle */}
          <View style={{ alignItems: 'center', paddingTop: 8, paddingBottom: 4 }}>
            <View style={{ width: 36, height: 4, borderRadius: 2, backgroundColor: colors.border }} />
          </View>

          {/* Header */}
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              paddingHorizontal: 16,
              paddingTop: 6,
              paddingBottom: 12,
              borderBottomWidth: 1,
              borderBottomColor: colors.border,
            }}
          >
            <Pressable onPress={onClose} hitSlop={10}>
              <Text style={{ fontSize: 16, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
                {t('common.cancel')}
              </Text>
            </Pressable>
            <Text style={{ fontSize: 16, fontFamily: 'Nunito_700Bold', color: colors.text }}>
              {t('mail.edit_account_title')}
            </Text>
            <View style={{ width: 60 }} />
          </View>

          <View style={{ flex: 1, padding: 20, gap: 14 }}>
            <Text
              style={{
                fontSize: 13,
                fontFamily: 'Nunito_400Regular',
                color: colors.textMuted,
                lineHeight: 18,
              }}
            >
              {t('mail.edit_account_subtitle', { email })}
            </Text>

            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                backgroundColor: colors.surfaceElevated,
                borderRadius: 12,
                paddingHorizontal: 14,
                gap: 10,
              }}
            >
              <Ionicons name="lock-closed-outline" size={16} color={colors.textMuted} />
              <TextInput
                value={password}
                onChangeText={(v) => {
                  setPassword(v);
                  setFormError(null);
                }}
                placeholder={t('mail.app_password_placeholder')}
                placeholderTextColor={colors.textMuted}
                secureTextEntry={!passwordVisible}
                autoCapitalize="none"
                autoCorrect={false}
                style={{
                  flex: 1,
                  paddingVertical: 14,
                  fontSize: 15,
                  fontFamily: 'Nunito_400Regular',
                  color: colors.text,
                }}
              />
              <Pressable onPress={() => setPasswordVisible((p) => !p)} hitSlop={8}>
                <Ionicons
                  name={passwordVisible ? 'eye-off-outline' : 'eye-outline'}
                  size={18}
                  color="#737373"
                />
              </Pressable>
            </View>

            {(formError ?? connectError) && (
              <View
                style={{
                  backgroundColor: '#fef2f2',
                  borderRadius: 10,
                  padding: 12,
                  flexDirection: 'row',
                  gap: 8,
                  alignItems: 'flex-start',
                }}
              >
                <Ionicons name="alert-circle" size={16} color="#dc2626" style={{ marginTop: 1 }} />
                <Text
                  style={{
                    flex: 1,
                    fontSize: 12,
                    fontFamily: 'Nunito_400Regular',
                    color: '#dc2626',
                  }}
                >
                  {formError ?? connectError}
                </Text>
              </View>
            )}

            <Pressable
              onPress={handleSave}
              disabled={!password.trim() || connecting}
              style={({ pressed }) => ({
                marginTop: 4,
                opacity: pressed ? 0.85 : 1,
              })}
            >
              <View style={{
                paddingVertical: 14,
                borderRadius: 12,
                backgroundColor: !password.trim() || connecting ? '#bfdbfe' : '#007AFF',
                alignItems: 'center',
              }}>
                {connecting ? (
                  <ActivityIndicator color="#fff" />
                ) : (
                  <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
                    {t('mail.edit_account_save')}
                  </Text>
                )}
              </View>
            </Pressable>

            <View style={{ height: insets.bottom }} />
          </View>
        </KeyboardAvoidingView>
      </Animated.View>
    </Modal>
  );
}