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

import { useState } from 'react';
import {
  ActivityIndicator,
  Linking,
  ScrollView,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useMailConnect, detectProvider, type MailProvider } from '../../hooks/useMailConnect';
import { humanizeMailError } from '../../lib/mailErrors';
import { useColors } from '../../lib/theme';
import { FormSheet } from '../FormSheet';
import { SheetFieldStack } from '../SheetFieldStack';

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

type ProviderConfig = {
  id: MailProvider;
  labelKey: string;
  icon: React.ComponentProps<typeof Ionicons>['name'];
  color: string;
  guideKey: string;
  guideUrl: string;
  disabled?: boolean;
  disabledLabelKey?: string;
};

const PROVIDERS: ProviderConfig[] = [
  {
    id: 'gmail',
    labelKey: 'mail.provider_gmail',
    icon: 'mail',
    color: '#EA4335',
    guideKey: 'mail.app_password_guide_gmail',
    guideUrl: 'https://myaccount.google.com/apppasswords',
  },
  {
    id: 'icloud',
    labelKey: 'mail.provider_icloud',
    icon: 'cloud',
    color: '#007AFF',
    guideKey: 'mail.app_password_guide_icloud',
    guideUrl: 'https://appleid.apple.com/account/manage',
  },
  {
    id: 'outlook',
    labelKey: 'mail.provider_outlook',
    icon: 'mail-open',
    color: '#0078D4',
    guideKey: 'mail.app_password_guide_outlook',
    guideUrl: 'https://account.microsoft.com/security',
    disabled: true,
    disabledLabelKey: 'mail.provider_outlook_disabled_badge',
  },
  {
    id: 'yahoo',
    labelKey: 'mail.provider_yahoo',
    icon: 'at',
    color: '#7C3AED',
    guideKey: 'mail.app_password_guide_yahoo',
    guideUrl: 'https://login.yahoo.com/account/security',
  },
  {
    id: 'gmx',
    labelKey: 'mail.provider_gmx',
    icon: 'mail-unread',
    color: '#E87A22',
    guideKey: 'mail.app_password_guide_gmx',
    guideUrl: 'https://www.gmx.net/mail/security',
  },
  {
    id: 'other',
    labelKey: 'mail.provider_other',
    icon: 'server',
    color: '#737373',
    guideKey: 'mail.app_password_guide_other',
    guideUrl: '',
  },
];

/**
 * Bottom-Sheet zum Verbinden eines Postfachs.
 *
 * Zwei Ansichten im selben Sheet (kein Navigations-Header):
 *  1. Provider-Grid (6 Tiles) — Schließen via Swipe/Backdrop
 *  2. Formular: Email + App-Passwort als SheetFieldStack,
 *     dann Datenschutz-Hinweis + Connect-Button
 */
export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
  const { t } = useTranslation();
  const colors = useColors();
  const { connect, connecting, error: connectError } = useMailConnect();

  const [view, setView] = useState<'grid' | 'form'>('grid');
  const [selectedProvider, setSelectedProvider] = useState<ProviderConfig | null>(null);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);
  const [fieldsComplete, setFieldsComplete] = useState(false);

  function handleClose() {
    setView('grid');
    setSelectedProvider(null);
    setEmail('');
    setPassword('');
    setPasswordVisible(false);
    setFormError(null);
    setFieldsComplete(false);
    onClose();
  }

  function handleProviderSelect(provider: ProviderConfig) {
    setSelectedProvider(provider);
    setEmail('');
    setPassword('');
    setFormError(null);
    setFieldsComplete(false);
    setView('form');
  }

  async function handleConnect() {
    setFormError(null);
    const result = await connect({ email: email.trim(), password });
    if (result.ok) {
      handleClose();
      onSuccess();
    } else {
      setFormError(t(humanizeMailError(result.error)));
    }
  }

  const sheetTitle =
    view === 'form' && selectedProvider
      ? t(selectedProvider.labelKey)
      : t('mail.connect_sheet_title');

  return (
    <FormSheet
      visible={visible}
      onClose={handleClose}
      title={sheetTitle}
      initialHeightPct={0.75}
      growWithKeyboard
    >
      {view === 'grid' ? (
        <ProviderGrid providers={PROVIDERS} onSelect={handleProviderSelect} t={t} />
      ) : (
        <SheetFieldStack
          fields={[
            {
              key: 'email',
              label: t('mail.form_email_label'),
              placeholder: t('mail.form_email_placeholder'),
              value: email,
              onChangeText: (v) => { setEmail(v); setFormError(null); },
              keyboardType: 'email-address',
              autoCapitalize: 'none',
              autoCorrect: false,
              validate: (v) =>
                v.trim().length === 0 ? t('mail.form_fields_required') : undefined,
            },
            {
              key: 'password',
              label: t('mail.form_password_label'),
              placeholder: t('mail.form_password_placeholder'),
              value: password,
              onChangeText: (v) => { setPassword(v); setFormError(null); },
              secureTextEntry: !passwordVisible,
              autoCapitalize: 'none',
              autoCorrect: false,
              validate: (v) =>
                v.trim().length === 0 ? t('mail.form_fields_required') : undefined,
              suffix: (
                <TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() => setPasswordVisible((p) => !p)}
                  hitSlop={8}
                >
                  <Ionicons
                    name={passwordVisible ? 'eye-off-outline' : 'eye-outline'}
                    size={20}
                    color="#a3a3a3"
                  />
                </TouchableOpacity>
              ),
            },
          ]}
          intro={
            <View style={{ gap: 10 }}>
              {/* App-Password-Guide — provider-spezifisch, nicht für 'other' */}
              {selectedProvider && selectedProvider.id !== 'other' && (
                <View
                  style={{
                    flexDirection: 'row',
                    gap: 10,
                    padding: 12,
                    backgroundColor: '#f0f7ff',
                    borderRadius: 12,
                    borderWidth: 1,
                    borderColor: '#bfdbfe',
                  }}
                >
                  <Ionicons
                    name="information-circle"
                    size={18}
                    color="#1d4ed8"
                    style={{ marginTop: 1 }}
                  />
                  <View style={{ flex: 1, gap: 4 }}>
                    <Text
                      style={{ fontSize: 12, fontFamily: 'Nunito_600SemiBold', color: '#1e3a8a' }}
                    >
                      {t('mail.app_password_required_title')}
                    </Text>
                    <Text
                      style={{
                        fontSize: 12,
                        fontFamily: 'Nunito_400Regular',
                        color: '#1d4ed8',
                        lineHeight: 17,
                      }}
                    >
                      {t(selectedProvider.guideKey)}
                    </Text>
                    {selectedProvider.guideUrl.length > 0 && (
                      <TouchableOpacity
                        activeOpacity={0.7}
                        onPress={() => Linking.openURL(selectedProvider.guideUrl)}
                      >
                        <Text
                          style={{
                            fontSize: 12,
                            fontFamily: 'Nunito_600SemiBold',
                            color: '#007AFF',
                            marginTop: 2,
                          }}
                        >
                          {t('mail.app_password_open_link')} →
                        </Text>
                      </TouchableOpacity>
                    )}
                  </View>
                </View>
              )}

              {/* Datenschutz-Zusicherung — immer sichtbar */}
              <View
                style={{
                  flexDirection: 'row',
                  gap: 8,
                  padding: 12,
                  backgroundColor: '#f0fdf4',
                  borderRadius: 12,
                  borderWidth: 1,
                  borderColor: '#bbf7d0',
                }}
              >
                <Ionicons name="shield-checkmark" size={16} color="#16a34a" style={{ marginTop: 1 }} />
                <Text
                  style={{
                    flex: 1,
                    fontSize: 12,
                    fontFamily: 'Nunito_400Regular',
                    color: '#166534',
                    lineHeight: 17,
                  }}
                >
                  {t('mail.form_privacy_note')}
                </Text>
              </View>
            </View>
          }
          onComplete={() => setFieldsComplete(true)}
        >
          {/* Fehler */}
          {(formError ?? (connectError ? t(humanizeMailError(connectError)) : null)) && (
            <Text
              style={{
                fontSize: 13,
                fontFamily: 'Nunito_400Regular',
                color: '#dc2626',
                marginBottom: 10,
              }}
            >
              {formError ?? t(humanizeMailError(connectError))}
            </Text>
          )}

          {/* Connect-Button */}
          <TouchableOpacity
            activeOpacity={0.85}
            onPress={handleConnect}
            disabled={connecting}
            style={{ marginTop: 4, marginBottom: 12 }}
          >
            <View
              style={{
                backgroundColor: connecting ? '#d4d4d4' : '#007AFF',
                borderRadius: 14,
                paddingVertical: 14,
                alignItems: 'center',
              }}
            >
              {connecting ? (
                <ActivityIndicator color="#fff" />
              ) : (
                <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
                  {t('mail.form_connect_btn')}
                </Text>
              )}
            </View>
          </TouchableOpacity>
        </SheetFieldStack>
      )}
    </FormSheet>
  );
}

// ---------------------------------------------------------------------------
// Sub-View: Provider-Grid
// ---------------------------------------------------------------------------

function ProviderGrid({
  providers,
  onSelect,
  t,
}: {
  providers: ProviderConfig[];
  onSelect: (p: ProviderConfig) => void;
  t: (key: string) => string;
}) {
  const colors = useColors();
  return (
    <ScrollView
      style={{ flex: 1 }}
      contentContainerStyle={{ padding: 20, gap: 12 }}
      showsVerticalScrollIndicator={false}
    >
      <Text
        style={{
          fontSize: 13,
          fontFamily: 'Nunito_400Regular',
          color: colors.textMuted,
          marginBottom: 4,
          lineHeight: 18,
        }}
      >
        {t('mail.connect_sheet_subtitle')}
      </Text>

      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
        {providers.map((p) => (
          <TouchableOpacity
            key={p.id}
            onPress={p.disabled ? undefined : () => onSelect(p)}
            activeOpacity={p.disabled ? 1 : 0.7}
            disabled={p.disabled}
            style={{ width: '47%', opacity: p.disabled ? 0.45 : 1 }}
          >
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 10,
                backgroundColor: colors.surface,
                borderWidth: 1,
                borderColor: colors.border,
                borderRadius: 14,
                padding: 14,
              }}
            >
              <View
                style={{
                  width: 36,
                  height: 36,
                  borderRadius: 10,
                  backgroundColor: p.color + '18',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Ionicons name={p.icon} size={18} color={p.color} />
              </View>
              <View style={{ flex: 1 }}>
                <Text
                  style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: colors.text }}
                  numberOfLines={1}
                >
                  {t(p.labelKey)}
                </Text>
                {p.disabled && p.disabledLabelKey && (
                  <Text
                    style={{
                      fontSize: 10,
                      fontFamily: 'Nunito_600SemiBold',
                      color: '#737373',
                      marginTop: 2,
                    }}
                    numberOfLines={1}
                  >
                    {t(p.disabledLabelKey)}
                  </Text>
                )}
              </View>
              {!p.disabled && (
                <Ionicons name="chevron-forward" size={14} color={colors.border} />
              )}
            </View>
          </TouchableOpacity>
        ))}
      </View>
    </ScrollView>
  );
}