import { useState } from 'react';
import {
  ActivityIndicator,
  LayoutAnimation,
  Linking,
  Modal,
  Platform,
  TouchableOpacity,
  Text,
  UIManager,
  View,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { ConfirmAlert } from '../ConfirmAlert';
import { EditMailAccountSheet } from './EditMailAccountSheet';
import { EditMailTitleSheet } from './EditMailTitleSheet';
import { useMailInterval } from '../../hooks/useMailInterval';
import type { MailAccount } from '../../hooks/useMailStatus';

if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

type Props = {
  account: MailAccount;
  plan: 'free' | 'pro' | 'legend';
  expanded: boolean;
  onToggle: () => void;
  onDisconnect: (id: string) => Promise<void>;
  onIntervalChanged: () => void;
  onEditSuccess: () => void;
  disconnecting?: boolean;
};

function PausedBadge({ t }: { t: (k: string) => string }) {
  return (
    <View
      style={{
        paddingHorizontal: 6,
        paddingVertical: 2,
        borderRadius: 5,
        backgroundColor: 'rgba(115,115,115,0.1)',
        alignSelf: 'flex-start',
        marginTop: 3,
      }}
    >
      <Text style={{ fontSize: 10, color: '#737373', fontFamily: 'Nunito_600SemiBold' }}>
        {t('plan_limit.mail_account_paused')}
      </Text>
    </View>
  );
}

function resolveProviderIcon(provider: string): {
  icon: React.ComponentProps<typeof Ionicons>['name'];
  color: string;
} {
  const p = provider.toLowerCase();
  if (p.includes('gmail') || p.includes('google')) return { icon: 'mail', color: '#EA4335' };
  if (p.includes('icloud') || p.includes('apple')) return { icon: 'cloud', color: '#007AFF' };
  if (p.includes('outlook') || p.includes('hotmail') || p.includes('microsoft'))
    return { icon: 'mail-open', color: '#0078D4' };
  if (p.includes('yahoo')) return { icon: 'at', color: '#7C3AED' };
  if (p.includes('gmx') || p.includes('web.de'))
    return { icon: 'mail-unread', color: '#E87A22' };
  return { icon: 'server', color: '#737373' };
}

function isOAuthProvider(provider: string): boolean {
  return provider === 'outlook_oauth';
}

const STALE_THRESHOLD_MS = 5 * 60 * 1_000;
const IDLE_HEARTBEAT_STALE_MS = STALE_THRESHOLD_MS;
const NO_NEW_MAIL_THRESHOLD_MS = 60 * 60_000;

function formatRelativeAbsolute(ts: Date): string {
  const min = Math.floor((Date.now() - ts.getTime()) / 60_000);
  const todayStr = new Date().toDateString();
  const yesterdayStr = new Date(Date.now() - 86_400_000).toDateString();

  const hh = ts.getHours().toString().padStart(2, '0');
  const mm = ts.getMinutes().toString().padStart(2, '0');

  let dayLabel: string;
  if (ts.toDateString() === todayStr) dayLabel = 'heute';
  else if (ts.toDateString() === yesterdayStr) dayLabel = 'gestern';
  else dayLabel = ts.toLocaleDateString('de', { day: '2-digit', month: '2-digit' });

  let rel: string;
  if (min < 1) rel = 'gerade eben';
  else if (min < 60) rel = `vor ${min} min`;
  else if (min < 1440) rel = `vor ${Math.floor(min / 60)}h`;
  else rel = `vor ${Math.floor(min / 1440)}d`;

  return `${rel} (${dayLabel} ${hh}:${mm})`;
}

function idleHeartbeatAlive(lastIdleHeartbeatAt: string | null | undefined): boolean {
  if (!lastIdleHeartbeatAt) return false;
  return Date.now() - new Date(lastIdleHeartbeatAt).getTime() < IDLE_HEARTBEAT_STALE_MS;
}

function StatusBadgeRow({
  account,
  isLegend,
  t,
}: {
  account: MailAccount;
  isLegend: boolean;
  t: (k: string, opts?: Record<string, string | number>) => string;
}) {
  if (account.lastConnectError) {
    const isAuthError =
      account.lastConnectError.toLowerCase().includes('invalid credentials') ||
      account.lastConnectError.toLowerCase().includes('authentication failed');
    const errorLabel = isAuthError ? t('mail.status_auth_error') : t('mail.status_connect_error');
    const since = account.lastConnectErrorAt
      ? formatRelativeAbsolute(new Date(account.lastConnectErrorAt))
      : null;
    return (
      <View style={{ marginTop: 3 }}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <Ionicons name="lock-closed" size={11} color="#dc2626" style={{ marginRight: 4 }} />
          <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
            {errorLabel}
          </Text>
          <Text
            style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginLeft: 4 }}
          >
            · {t('mail.status_error_tap_hint')}
          </Text>
        </View>
        {since ? (
          <Text
            style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
          >
            {since}
          </Text>
        ) : null}
      </View>
    );
  }

  if (!account.lastScannedAt) {
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
        <View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#a3a3a3', marginRight: 5 }} />
        <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#a3a3a3' }}>
          {t('mail.status_waiting_first_connect')}
        </Text>
      </View>
    );
  }

  const heartbeatAlive = idleHeartbeatAlive(account.lastIdleHeartbeatAt);
  const lastScannedTs = new Date(account.lastScannedAt);
  const scannedAgo = Date.now() - lastScannedTs.getTime();
  const scannedRelAbs = formatRelativeAbsolute(lastScannedTs);

  if (!heartbeatAlive && scannedAgo > STALE_THRESHOLD_MS) {
    return (
      <View style={{ marginTop: 3 }}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View
            style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#d97706', marginRight: 5 }}
          />
          <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#d97706' }}>
            {t('mail.status_stale')}
          </Text>
        </View>
        <Text
          style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
          numberOfLines={1}
        >
          {t('mail.status_stale_last_scan', { rel: scannedRelAbs })}
        </Text>
      </View>
    );
  }

  if (heartbeatAlive) {
    const heartbeatTs = new Date(account.lastIdleHeartbeatAt!);
    const heartbeatMin = Math.floor((Date.now() - heartbeatTs.getTime()) / 60_000);
    const idleSince = heartbeatMin < 1 ? 'gerade eben' : `${heartbeatMin} min`;

    if (scannedAgo > NO_NEW_MAIL_THRESHOLD_MS) {
      return (
        <View style={{ marginTop: 3 }}>
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <View
              style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
            />
            <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
              {isLegend ? t('mail.live') : t('mail.account_active')}
            </Text>
          </View>
          <Text
            style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
            numberOfLines={1}
          >
            {t('mail.status_live_no_new_mail', { rel: scannedRelAbs })}
          </Text>
        </View>
      );
    }

    return (
      <View style={{ marginTop: 3 }}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View
            style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
          />
          <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
            {isLegend ? t('mail.live') : t('mail.account_active')}
          </Text>
        </View>
        <Text
          style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
          numberOfLines={1}
        >
          {t('mail.status_live_idle', { rel: idleSince })}
        </Text>
      </View>
    );
  }

  return (
    <View style={{ marginTop: 3 }}>
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <View
          style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
        />
        <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
          {isLegend ? t('mail.live') : t('mail.account_active')}
        </Text>
      </View>
      <Text
        style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
        numberOfLines={1}
      >
        {formatRelativeAbsolute(new Date(account.lastScannedAt!))}
      </Text>
    </View>
  );
}

const INTERVAL_OPTIONS_BY_PLAN: Record<'free' | 'pro' | 'legend', number[]> = {
  free: [4],
  pro: [1, 4, 8],
  legend: [1, 4, 8],
};

function maskEmail(email: string): string {
  const [local, domain] = email.split('@');
  if (!local || !domain) return email;
  if (local.length <= 3) return `${local[0]}***@${domain}`;
  return `${local.slice(0, 3)}***@${domain}`;
}

function domainFromEmail(email: string): string {
  return email.split('@')[1] ?? email;
}

function SettingsRow({
  icon,
  label,
  value,
  onPress,
  destructive,
}: {
  icon: React.ComponentProps<typeof Ionicons>['name'];
  label: string;
  value?: string;
  onPress?: () => void;
  destructive?: boolean;
}) {
  const color = destructive ? '#dc2626' : '#0a0a0a';
  const Wrapper = onPress ? TouchableOpacity : View;
  const wrapperProps = onPress
    ? { activeOpacity: 0.7, onPress }
    : {};

  return (
    <Wrapper
      {...wrapperProps}
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 12,
        paddingHorizontal: 14,
        borderTopWidth: 1,
        borderTopColor: '#f5f5f5',
      }}
    >
      <Ionicons name={icon} size={16} color={destructive ? '#dc2626' : '#737373'} style={{ marginRight: 12, width: 20 }} />
      <Text
        style={{
          flex: 1,
          fontSize: 14,
          fontFamily: 'Nunito_600SemiBold',
          color,
        }}
      >
        {label}
      </Text>
      {value !== undefined && (
        <Text
          style={{
            fontSize: 13,
            fontFamily: 'Nunito_400Regular',
            color: '#a3a3a3',
            marginRight: onPress ? 4 : 0,
          }}
          numberOfLines={1}
        >
          {value}
        </Text>
      )}
      {onPress && !destructive && (
        <Ionicons name="chevron-forward" size={14} color="#d4d4d4" />
      )}
    </Wrapper>
  );
}

function OAuthDisconnectHintModal({
  visible,
  onClose,
  t,
}: {
  visible: boolean;
  onClose: () => void;
  t: (key: string) => string;
}) {
  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
      <TouchableOpacity
        activeOpacity={1}
        onPress={onClose}
        style={{
          flex: 1,
          backgroundColor: 'rgba(0,0,0,0.35)',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 24,
        }}
      >
        <TouchableOpacity activeOpacity={1} onPress={() => {}} style={{ width: '88%', maxWidth: 340 }}>
          <View
            style={{
              backgroundColor: '#fff',
              borderRadius: 22,
              padding: 22,
              gap: 14,
              shadowColor: '#000',
              shadowOffset: { width: 0, height: 8 },
              shadowOpacity: 0.18,
              shadowRadius: 24,
              elevation: 16,
            }}
          >
            <View
              style={{
                width: 52,
                height: 52,
                borderRadius: 26,
                backgroundColor: '#16a34a',
                alignItems: 'center',
                justifyContent: 'center',
                alignSelf: 'center',
              }}
            >
              <Ionicons name="checkmark" size={28} color="#fff" />
            </View>

            <Text
              style={{
                fontSize: 17,
                fontFamily: 'Nunito_700Bold',
                color: '#0a0a0a',
                textAlign: 'center',
              }}
            >
              {t('mail.oauth.disconnect_hint_title')}
            </Text>

            <Text
              style={{
                fontSize: 13,
                fontFamily: 'Nunito_400Regular',
                color: '#525252',
                lineHeight: 19,
                textAlign: 'center',
              }}
            >
              {t('mail.oauth.disconnect_hint_body')}
            </Text>

            <View style={{ flexDirection: 'row', gap: 10 }}>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => Linking.openURL('https://account.microsoft.com/consent').catch(() => {})}
                style={{
                  flex: 1,
                  paddingVertical: 10,
                  borderRadius: 10,
                  backgroundColor: '#eff6ff',
                  borderWidth: 1,
                  borderColor: '#bfdbfe',
                  alignItems: 'center',
                }}
              >
                <Text style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: '#007AFF' }}>
                  {t('mail.oauth.disconnect_hint_open_ms')}
                </Text>
              </TouchableOpacity>

              <TouchableOpacity
                activeOpacity={0.7}
                onPress={onClose}
                style={{
                  flex: 1,
                  paddingVertical: 10,
                  borderRadius: 10,
                  backgroundColor: '#f5f5f5',
                  alignItems: 'center',
                }}
              >
                <Text style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: '#0a0a0a' }}>
                  OK
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
}

export function MailAccountCard({
  account,
  plan,
  expanded,
  onToggle,
  onDisconnect,
  onIntervalChanged,
  onEditSuccess,
  disconnecting,
}: Props) {
  const { t } = useTranslation();
  const [confirmVisible, setConfirmVisible] = useState(false);
  const [editPasswordVisible, setEditPasswordVisible] = useState(false);
  const [editTitleVisible, setEditTitleVisible] = useState(false);
  const [oauthDisconnectHintVisible, setOauthDisconnectHintVisible] = useState(false);
  const [localTitle, setLocalTitle] = useState<string | null>(account.title ?? null);
  const { setInterval, updating } = useMailInterval();
  const { icon, color } = resolveProviderIcon(account.provider);

  const isOAuth = isOAuthProvider(account.provider);
  const isLegend = plan === 'legend';
  const isPaused = account.paused === true;
  const intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];

  const displayTitle = localTitle ?? domainFromEmail(account.email);
  const subEmail = maskEmail(account.email);

  function handleToggle() {
    if (account.lastConnectError) {
      setEditPasswordVisible(true);
      return;
    }
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    onToggle();
  }

  async function handleSetInterval(value: number) {
    const res = await setInterval(account.id, value);
    if (res.ok) onIntervalChanged();
  }

  function handleTitleSaved(newTitle: string | null) {
    setLocalTitle(newTitle);
    onEditSuccess();
  }

  return (
    <>
      <View
        style={{
          backgroundColor: isPaused ? '#fafafa' : '#fff',
          borderRadius: 16,
          borderWidth: 1,
          borderColor: account.lastConnectError ? '#fecaca' : isPaused ? '#d4d4d4' : '#e5e5e5',
          overflow: 'hidden',
          opacity: isPaused ? 0.75 : 1,
        }}
      >
        {/* Header — always visible, tap to expand settings */}
        <TouchableOpacity onPress={handleToggle} activeOpacity={0.85}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              paddingHorizontal: 14,
              paddingVertical: 14,
            }}
          >
            <View
              style={{
                width: 40,
                height: 40,
                borderRadius: 10,
                backgroundColor: color + '18',
                alignItems: 'center',
                justifyContent: 'center',
                marginRight: 12,
              }}
            >
              <Ionicons name={icon} size={19} color={color} />
            </View>

            <View style={{ flex: 1, minWidth: 0, marginRight: 8 }}>
              {/* Title — prominent */}
              <Text
                style={{
                  fontSize: 15,
                  fontFamily: 'Nunito_700Bold',
                  color: isPaused ? '#a3a3a3' : '#0a0a0a',
                }}
                numberOfLines={1}
              >
                {displayTitle}
              </Text>
              {/* Email — small sub-label */}
              <Text
                style={{
                  fontSize: 11,
                  fontFamily: 'Nunito_400Regular',
                  color: '#a3a3a3',
                  marginTop: 1,
                }}
                numberOfLines={1}
              >
                {subEmail}
              </Text>
              {isPaused
                ? <PausedBadge t={t} />
                : <StatusBadgeRow account={account} isLegend={isLegend} t={t} />
              }
            </View>

            <Ionicons
              name={expanded ? 'chevron-up' : 'chevron-down'}
              size={18}
              color="#a3a3a3"
            />
          </View>
        </TouchableOpacity>

        {/* Collapsible: Settings section */}
        {expanded && (
          <View style={{ borderTopWidth: 1, borderTopColor: '#f5f5f5' }}>
            {/* Stats banner */}
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                backgroundColor: '#fef2f2',
                marginHorizontal: 14,
                marginTop: 14,
                borderRadius: 12,
                paddingHorizontal: 14,
                paddingVertical: 12,
                marginBottom: 12,
              }}
            >
              <Ionicons name="shield-checkmark" size={20} color="#dc2626" style={{ marginRight: 10 }} />
              <View style={{ flex: 1 }}>
                <Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
                  {t('mail.account_stat_blocked')}
                </Text>
                <Text
                  style={{
                    fontSize: 22,
                    fontFamily: 'Nunito_800ExtraBold',
                    color: '#dc2626',
                    marginTop: 1,
                  }}
                >
                  {account.totalBlocked.toLocaleString()}
                </Text>
              </View>
              <Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#737373' }}>
                {t('mail.account_of_scanned', {
                  scanned: account.totalScanned.toLocaleString(),
                })}
              </Text>
            </View>

            {/* Scan interval (non-legend) */}
            {isLegend ? (
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  backgroundColor: '#f0fdf4',
                  borderRadius: 10,
                  marginHorizontal: 14,
                  paddingHorizontal: 12,
                  paddingVertical: 10,
                  marginBottom: 12,
                }}
              >
                <Ionicons name="flash" size={14} color="#16a34a" style={{ marginRight: 8 }} />
                <Text
                  style={{
                    flex: 1,
                    fontSize: 12,
                    fontFamily: 'Nunito_600SemiBold',
                    color: '#16a34a',
                  }}
                >
                  {t('mail.realtime_desc')}
                </Text>
              </View>
            ) : (
              <View style={{ marginHorizontal: 14, marginBottom: 12 }}>
                <Text
                  style={{
                    fontSize: 11,
                    fontFamily: 'Nunito_600SemiBold',
                    color: '#737373',
                    textTransform: 'uppercase',
                    letterSpacing: 0.6,
                    marginBottom: 6,
                  }}
                >
                  {t('mail.scan_interval_label')}
                </Text>
                <View style={{ flexDirection: 'row' }}>
                  {intervalOptions.map((opt, idx) => {
                    const active = account.scanInterval === opt;
                    const disabled = plan === 'free' || updating === account.id;
                    return (
                      <TouchableOpacity
                        key={opt}
                        activeOpacity={0.7}
                        disabled={disabled}
                        onPress={() => handleSetInterval(opt)}
                        style={{
                          flex: 1,
                          paddingVertical: 9,
                          borderRadius: 10,
                          alignItems: 'center',
                          backgroundColor: active ? '#007AFF' : '#f5f5f5',
                          marginLeft: idx === 0 ? 0 : 6,
                          opacity: disabled && !active ? 0.5 : 1,
                        }}
                      >
                        <Text
                          style={{
                            fontSize: 13,
                            fontFamily: 'Nunito_700Bold',
                            color: active ? '#fff' : '#525252',
                          }}
                        >
                          {opt}h
                        </Text>
                      </TouchableOpacity>
                    );
                  })}
                </View>
                {plan === 'free' && (
                  <Text
                    style={{
                      fontSize: 10,
                      fontFamily: 'Nunito_400Regular',
                      color: '#a3a3a3',
                      marginTop: 6,
                    }}
                  >
                    {t('mail.free_scan_interval_hint')}
                  </Text>
                )}
              </View>
            )}

            {/* Settings separator label */}
            <View
              style={{
                paddingHorizontal: 14,
                paddingBottom: 4,
                borderTopWidth: 1,
                borderTopColor: '#f5f5f5',
                paddingTop: 10,
              }}
            >
              <Text
                style={{
                  fontSize: 11,
                  fontFamily: 'Nunito_700Bold',
                  color: '#a3a3a3',
                  textTransform: 'uppercase',
                  letterSpacing: 0.6,
                }}
              >
                {t('mail.settings_section_label')}
              </Text>
            </View>

            {/* Settings rows */}
            <SettingsRow
              icon="pencil-outline"
              label={t('mail.row_title')}
              value={localTitle ?? '—'}
              onPress={() => setEditTitleVisible(true)}
            />

            <SettingsRow
              icon="mail-outline"
              label={t('mail.row_email')}
              value={account.email}
            />

            {!isOAuth && (
              <SettingsRow
                icon="key-outline"
                label={t('mail.row_password')}
                value="••••••••"
                onPress={() => setEditPasswordVisible(true)}
              />
            )}

            <TouchableOpacity
              activeOpacity={0.7}
              onPress={() => setConfirmVisible(true)}
              disabled={disconnecting}
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                paddingVertical: 12,
                paddingHorizontal: 14,
                borderTopWidth: 1,
                borderTopColor: '#f5f5f5',
                opacity: disconnecting ? 0.5 : 1,
              }}
            >
              {disconnecting ? (
                <ActivityIndicator size="small" color="#dc2626" style={{ marginRight: 12, width: 20 }} />
              ) : (
                <Ionicons name="trash-outline" size={16} color="#dc2626" style={{ marginRight: 12, width: 20 }} />
              )}
              <Text
                style={{
                  flex: 1,
                  fontSize: 14,
                  fontFamily: 'Nunito_600SemiBold',
                  color: '#dc2626',
                }}
              >
                {t('mail.row_disconnect')}
              </Text>
            </TouchableOpacity>
          </View>
        )}
      </View>

      <ConfirmAlert
        visible={confirmVisible}
        title={t('mail.disconnect_confirm_title')}
        message={t('mail.disconnect_confirm_body', { email: account.email })}
        confirmLabel={t('mail.account_disconnect_confirm_btn')}
        destructive
        icon="trash"
        iconColor="#FF3B30"
        onConfirm={async () => {
          setConfirmVisible(false);
          await onDisconnect(account.id);
          if (isOAuth) setOauthDisconnectHintVisible(true);
        }}
        onCancel={() => setConfirmVisible(false)}
      />

      <OAuthDisconnectHintModal
        visible={oauthDisconnectHintVisible}
        onClose={() => setOauthDisconnectHintVisible(false)}
        t={t}
      />

      {!isOAuth && (
        <EditMailAccountSheet
          visible={editPasswordVisible}
          email={account.email}
          onClose={() => setEditPasswordVisible(false)}
          onSuccess={onEditSuccess}
        />
      )}

      <EditMailTitleSheet
        visible={editTitleVisible}
        connectionId={account.id}
        currentTitle={localTitle}
        onClose={() => setEditTitleVisible(false)}
        onSuccess={handleTitleSaved}
      />
    </>
  );
}