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

import { useState } from 'react';
import { ActivityIndicator, TouchableOpacity, Text, TextInput, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useMailConnect } from '../../hooks/useMailConnect';
import { useColors } from '../../lib/theme';
import { humanizeMailError } from '../../lib/mailErrors';
import { KeyboardAwareSheet } from '../KeyboardAwareSheet';

const COLLAPSED_HEIGHT = 280;

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 { connect, connecting, error: connectError } = useMailConnect();

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

  function handleClose() {
    setPassword('');
    setPasswordVisible(false);
    setFormError(null);
    onClose();
  }

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

  const header = (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        paddingTop: 6,
        paddingBottom: 12,
        borderBottomWidth: 1,
        borderBottomColor: colors.border,
      }}
    >
      <TouchableOpacity activeOpacity={0.7} onPress={handleClose} hitSlop={8}>
        <Text style={{ fontSize: 15, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
          {t('mail.edit_account_cancel')}
        </Text>
      </TouchableOpacity>
      <Text style={{ fontSize: 16, fontFamily: 'Nunito_700Bold', color: colors.text }}>
        {t('mail.edit_account_title')}
      </Text>
      <View style={{ width: 60 }} />
    </View>
  );

  return (
    <KeyboardAwareSheet
      visible={visible}
      onClose={handleClose}
      collapsedHeight={COLLAPSED_HEIGHT}
      header={header}
    >
      <View style={{ 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,
            }}
          />
          <TouchableOpacity activeOpacity={0.7} onPress={() => setPasswordVisible((p) => !p)} hitSlop={8}>
            <Ionicons
              name={passwordVisible ? 'eye-off-outline' : 'eye-outline'}
              size={18}
              color="#737373"
            />
          </TouchableOpacity>
        </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
                ? formError
                : t(humanizeMailError(connectError))}
            </Text>
          </View>
        )}

        <TouchableOpacity
          activeOpacity={0.85}
          onPress={handleSave}
          disabled={!password.trim() || connecting}
          style={{ marginTop: 4 }}
        >
          <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>
        </TouchableOpacity>
      </View>
    </KeyboardAwareSheet>
  );
}