import { useState } from 'react';
import {
  ActivityIndicator,
  LayoutAnimation,
  Platform,
  Pressable,
  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 { 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' };
}

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;
}) {
  // Priority 1 — auth / connect error
  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>
    );
  }

  // Priority 5 — never connected
  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);

  // Priority 4 — stale: heartbeat missing/expired AND scan is old
  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>
    );
  }

  // Priority 2 + 3 — heartbeat alive (or scan recent enough for pre-migration backend)
  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) {
      // Priority 3 — connected but no new mail for >1h
      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>
      );
    }

    // Priority 2 — live + heartbeat recent + scan recent
    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>
    );
  }

  // Fallback — scan recent, backend without heartbeat field
  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}
      >
        {scannedRelAbs}
      </Text>
    </View>
  );
}

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

const HEADER_ROW = {
  flexDirection: 'row' as const,
  alignItems: 'center' as const,
  paddingHorizontal: 14,
  paddingVertical: 14,
};

const ACTION_BTN_BASE = {
  flex: 1,
  flexDirection: 'row' as const,
  alignItems: 'center' as const,
  justifyContent: 'center' as const,
  paddingVertical: 12,
  borderRadius: 10,
};

export function MailAccountCard({
  account,
  plan,
  expanded,
  onToggle,
  onDisconnect,
  onIntervalChanged,
  onEditSuccess,
  disconnecting,
}: Props) {
  const { t } = useTranslation();
  const [confirmVisible, setConfirmVisible] = useState(false);
  const [editVisible, setEditVisible] = useState(false);
  const { setInterval, updating } = useMailInterval();
  const { icon, color } = resolveProviderIcon(account.provider);

  const isLegend = plan === 'legend';
  const isPaused = account.paused === true;
  const intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];

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

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

  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 */}
        <Pressable onPress={handleToggle} android_ripple={{ color: '#f5f5f5' }}>
          <View style={HEADER_ROW}>
            <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 }}>
              <Text
                style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: isPaused ? '#a3a3a3' : '#0a0a0a' }}
                numberOfLines={1}
              >
                {account.email}
              </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>
        </Pressable>

        {/* Body */}
        {expanded && (
          <View style={{ borderTopWidth: 1, borderTopColor: '#f5f5f5', padding: 14 }}>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                backgroundColor: '#fef2f2',
                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>

            {isLegend ? (
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  backgroundColor: '#f0fdf4',
                  borderRadius: 10,
                  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={{ 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>
            )}

            <View style={{ flexDirection: 'row' }}>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => setEditVisible(true)}
                style={{ ...ACTION_BTN_BASE, backgroundColor: '#f5f5f5', marginRight: 6 }}
              >
                <Ionicons
                  name="key-outline"
                  size={14}
                  color="#525252"
                  style={{ marginRight: 6 }}
                />
                <Text
                  style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: '#525252' }}
                  numberOfLines={1}
                >
                  {t('mail.account_change_password')}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => setConfirmVisible(true)}
                disabled={disconnecting}
                style={{
                  ...ACTION_BTN_BASE,
                  backgroundColor: '#fef2f2',
                  marginLeft: 6,
                  opacity: disconnecting ? 0.6 : 1,
                }}
              >
                {disconnecting ? (
                  <ActivityIndicator size="small" color="#dc2626" />
                ) : (
                  <>
                    <Ionicons
                      name="trash-outline"
                      size={14}
                      color="#dc2626"
                      style={{ marginRight: 6 }}
                    />
                    <Text
                      style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: '#dc2626' }}
                      numberOfLines={1}
                    >
                      {t('mail.disconnect')}
                    </Text>
                  </>
                )}
              </TouchableOpacity>
            </View>
          </View>
        )}
      </View>

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

      <EditMailAccountSheet
        visible={editVisible}
        email={account.email}
        onClose={() => setEditVisible(false)}
        onSuccess={onEditSuccess}
      />
    </>
  );
}