import { useState } from 'react';
import {
  ActivityIndicator,
  Linking,
  ScrollView,
  Switch,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import * as WebBrowser from 'expo-web-browser';
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 { apiFetch } from '../../lib/api';
import { useColors } from '../../lib/theme';
import { FormSheet } from '../FormSheet';
import { SheetFieldStack } from '../SheetFieldStack';
import { useMailConnectDraft } from '../../stores/mailConnectDraft';

const CONSENT_VERSION = 'art9-mail-v1-2026-05-13';
const PRIVACY_URL = 'https://rebreak.org/datenschutz';

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;
  authMethod?: 'imap' | 'oauth_microsoft';
};

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',
    authMethod: 'oauth_microsoft',
  },
  {
    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.
 *
 * Drei Ansichten im selben Sheet (kein Navigations-Header):
 *  1. Consent-Screen (Art. 9 DSGVO) — MUSS zuerst bestätigt werden
 *  2. Provider-Grid (6 Tiles) — nach Consent-Bestätigung freigeschaltet
 *  3. Formular: Email + App-Passwort als SheetFieldStack
 */
export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
  const { t } = useTranslation();
  const colors = useColors();
  const { connect, connecting, error: connectError } = useMailConnect();

  const {
    view,
    consentGiven,
    selectedProvider,
    email,
    title,
    pendingOAuthConnectionId,
    setView,
    setConsentGiven,
    setSelectedProvider,
    setEmail,
    setTitle,
    setPendingOAuthConnectionId,
    reset: resetDraft,
  } = useMailConnectDraft();

  const [password, setPassword] = useState('');
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);
  const [fieldsComplete, setFieldsComplete] = useState(false);
  const [oauthRunning, setOauthRunning] = useState(false);
  const [oauthError, setOauthError] = useState<string | null>(null);

  function handleClose() {
    resetDraft();
    setPassword('');
    setPasswordVisible(false);
    setFormError(null);
    setFieldsComplete(false);
    setOauthRunning(false);
    setOauthError(null);
    onClose();
  }

  function defaultTitleForProvider(provider: ProviderConfig | null): string {
    if (!provider) return '';
    const labelMap: Record<string, string> = {
      gmail: 'Mein Gmail',
      icloud: 'Mein iCloud',
      outlook: 'Mein Outlook',
      yahoo: 'Mein Yahoo',
      gmx: 'Mein GMX',
      other: '',
    };
    return labelMap[provider.id] ?? '';
  }

  function handleConsentNext() {
    setView('grid');
  }

  function handleProviderSelect(provider: ProviderConfig) {
    setSelectedProvider(provider);
    setEmail('');
    setPassword('');
    setTitle(defaultTitleForProvider(provider));
    setFormError(null);
    setFieldsComplete(false);
    setOauthError(null);
    if (provider.authMethod === 'oauth_microsoft') {
      setView('oauth_warning');
    } else {
      setView('form');
    }
  }

  async function handleOAuthStart() {
    setOauthRunning(true);
    setOauthError(null);
    setView('oauth_pending');
    try {
      const { authorizationUrl } = await apiFetch<{ authorizationUrl: string }>(
        '/api/mail/oauth/microsoft/init',
        { method: 'POST', body: email.trim() ? { email: email.trim() } : {} }
      );

      try {
        await WebBrowser.dismissAuthSession();
      } catch {}

      const result = await WebBrowser.openAuthSessionAsync(
        authorizationUrl,
        'rebreak://auth/mail-oauth-callback'
      );

      console.log('[oauth] WebBrowser result.type=', result.type);
      if (result.type !== 'success') {
        setOauthError(t('mail.oauth.error_aborted'));
        setView('oauth_warning');
        setOauthRunning(false);
        return;
      }

      console.log('[oauth] result.url=', (result as any).url);
      const url = new URL((result as any).url);
      const code = url.searchParams.get('code');
      const state = url.searchParams.get('state');
      const msError = url.searchParams.get('error');
      const msErrorDescription = url.searchParams.get('error_description');
      console.log('[oauth] code?=', !!code, 'state?=', !!state, 'msError=', msError, 'desc=', msErrorDescription);

      if (msError) {
        // Microsoft hat einen expliziten Error im Redirect zurückgegeben (z.B.
        // access_denied wenn User Consent abbricht, invalid_redirect_uri wenn
        // Azure-App-Config nicht stimmt). Zeig dem User den echten Grund.
        setOauthError(`Microsoft: ${msError}${msErrorDescription ? ` — ${msErrorDescription}` : ''}`);
        setView('oauth_warning');
        setOauthRunning(false);
        return;
      }

      if (!code || !state) {
        setOauthError(t('mail.oauth.error_no_code'));
        setView('oauth_warning');
        setOauthRunning(false);
        return;
      }

      const conn = await apiFetch<{ connectionId: string; email: string; provider: string; title: null }>(
        '/api/mail/oauth/microsoft/callback',
        { method: 'POST', body: { code, state } }
      );

      setPendingOAuthConnectionId(conn.connectionId);
      setOauthRunning(false);
      handleClose();
      onSuccess();
    } catch (e: any) {
      // Den echten Backend-Fehler sichtbar machen statt nur generischen Text
      // (apiFetch wirft `Error("API <status>: <body>")` — Status + Body landen
      // dann sowohl in Metro-Logs als auch im UI-Banner).
      const detail = (e?.message ?? String(e)) || 'unknown';
      console.log('[oauth] callback API call failed — error=', detail);
      setOauthError(`${t('mail.oauth.error_callback_failed')}\n${detail}`);
      setView('oauth_warning');
      setOauthRunning(false);
    }
  }

  async function handleConnect() {
    setFormError(null);

    try {
      await apiFetch('/api/mail-connections/consent', {
        method: 'POST',
        body: { consentVersion: CONSENT_VERSION },
      });
    } catch {
      // Backend macht Consent atomar beim Connect-Endpoint — Fehler hier ignorieren.
    }

    const result = await connect({ email: email.trim(), password });
    if (result.ok) {
      if (title.trim()) {
        try {
          const connections = await apiFetch<{ id: string; email: string }[]>('/api/mail-connections');
          const match = connections.find((c) => c.email === email.trim());
          if (match) {
            await apiFetch(`/api/mail-connections/${match.id}`, {
              method: 'PATCH',
              body: { title: title.trim() },
            });
          }
        } catch {
          // Title-PATCH ist best-effort — Connection selbst ist OK
        }
      }
      handleClose();
      onSuccess();
    } else if (result.error?.includes('412') || result.error?.includes('consent_required')) {
      setView('consent');
      setConsentGiven(false);
    } else {
      setFormError(t(humanizeMailError(result.error)));
    }
  }

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

  return (
    <FormSheet
      visible={visible}
      onClose={handleClose}
      title={sheetTitle}
      initialHeightPct={0.75}
      growWithKeyboard
    >
      {view === 'consent' ? (
        <ConsentStep
          consentGiven={consentGiven}
          onToggleConsent={setConsentGiven}
          onNext={handleConsentNext}
          t={t}
          colors={colors}
        />
      ) : view === 'grid' ? (
        <ProviderGrid providers={PROVIDERS} onSelect={handleProviderSelect} t={t} />
      ) : view === 'oauth_warning' ? (
        <OAuthWarningStep
          error={oauthError}
          onContinue={handleOAuthStart}
          onCancel={() => setView('grid')}
          t={t}
          colors={colors}
        />
      ) : view === 'oauth_pending' ? (
        <OAuthPendingStep t={t} colors={colors} />
      ) : (
        <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: 'title',
              label: t('mail.title_label'),
              placeholder: t('mail.title_placeholder'),
              value: title,
              onChangeText: setTitle,
              autoCapitalize: 'sentences',
              autoCorrect: false,
            },
            {
              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: Consent (Art. 9 DSGVO) — muss als erster Schritt bestätigt werden
// ---------------------------------------------------------------------------

function ConsentStep({
  consentGiven,
  onToggleConsent,
  onNext,
  t,
  colors,
}: {
  consentGiven: boolean;
  onToggleConsent: (v: boolean) => void;
  onNext: () => void;
  t: (key: string) => string;
  colors: ReturnType<typeof useColors>;
}) {
  return (
    <ScrollView
      style={{ flex: 1 }}
      contentContainerStyle={{ padding: 20, gap: 16 }}
      showsVerticalScrollIndicator={false}
    >
      <Text
        style={{
          fontSize: 14,
          fontFamily: 'Nunito_400Regular',
          color: colors.text,
          lineHeight: 21,
        }}
      >
        {t('mail.consent.intro')}
      </Text>

      <View
        style={{
          backgroundColor: '#fefce8',
          borderRadius: 12,
          borderWidth: 1,
          borderColor: '#fde68a',
          padding: 14,
          gap: 12,
        }}
      >
        <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 10 }}>
          <Ionicons
            name="document-text-outline"
            size={18}
            color="#92400e"
            style={{ marginTop: 1 }}
          />
          <Text
            style={{
              flex: 1,
              fontSize: 13,
              fontFamily: 'Nunito_400Regular',
              color: '#78350f',
              lineHeight: 19,
            }}
          >
            {t('mail.consent.legal_text')}
          </Text>
        </View>

        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 12,
            paddingTop: 4,
            borderTopWidth: 1,
            borderTopColor: '#fde68a',
          }}
        >
          <Switch
            value={consentGiven}
            onValueChange={onToggleConsent}
            trackColor={{ false: '#d1d5db', true: '#16a34a' }}
            thumbColor="#fff"
          />
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => onToggleConsent(!consentGiven)}
            style={{ flex: 1 }}
          >
            <Text
              style={{
                fontSize: 13,
                fontFamily: 'Nunito_600SemiBold',
                color: '#78350f',
                lineHeight: 18,
              }}
            >
              {t('mail.consent.checkbox_label')}
            </Text>
          </TouchableOpacity>
        </View>
      </View>

      <TouchableOpacity
        activeOpacity={0.7}
        onPress={() => Linking.openURL(PRIVACY_URL)}
      >
        <Text
          style={{
            fontSize: 13,
            fontFamily: 'Nunito_600SemiBold',
            color: '#007AFF',
            textAlign: 'center',
          }}
        >
          {t('mail.consent.more_link')} →
        </Text>
      </TouchableOpacity>

      <TouchableOpacity
        activeOpacity={consentGiven ? 0.85 : 1}
        onPress={consentGiven ? onNext : undefined}
        disabled={!consentGiven}
        style={{ marginTop: 4, marginBottom: 12 }}
      >
        <View
          style={{
            backgroundColor: consentGiven ? '#007AFF' : '#d4d4d4',
            borderRadius: 14,
            paddingVertical: 14,
            alignItems: 'center',
          }}
        >
          <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
            {t('mail.consent.cta_next')}
          </Text>
        </View>
      </TouchableOpacity>
    </ScrollView>
  );
}

// ---------------------------------------------------------------------------
// Sub-View: OAuth Warning (DSB Memo Section 6.1 — Outing-Effekt-Hinweis)
// ---------------------------------------------------------------------------

function OAuthWarningStep({
  error,
  onContinue,
  onCancel,
  t,
  colors,
}: {
  error: string | null;
  onContinue: () => void;
  onCancel: () => void;
  t: (key: string) => string;
  colors: ReturnType<typeof useColors>;
}) {
  return (
    <ScrollView
      style={{ flex: 1 }}
      contentContainerStyle={{ padding: 20, gap: 16 }}
      showsVerticalScrollIndicator={false}
    >
      <View
        style={{
          backgroundColor: '#fffbeb',
          borderRadius: 12,
          borderWidth: 1,
          borderColor: '#fde68a',
          padding: 14,
          gap: 10,
        }}
      >
        <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 10 }}>
          <Ionicons name="information-circle-outline" size={20} color="#92400e" style={{ marginTop: 1 }} />
          <Text
            style={{
              flex: 1,
              fontSize: 13,
              fontFamily: 'Nunito_700Bold',
              color: '#92400e',
            }}
          >
            {t('mail.oauth.warning_title')}
          </Text>
        </View>
        <Text
          style={{
            fontSize: 13,
            fontFamily: 'Nunito_400Regular',
            color: '#78350f',
            lineHeight: 19,
          }}
        >
          {t('mail.oauth.warning_body')}
        </Text>
      </View>

      {error ? (
        <Text
          style={{
            fontSize: 13,
            fontFamily: 'Nunito_400Regular',
            color: '#dc2626',
            textAlign: 'center',
          }}
        >
          {error}
        </Text>
      ) : null}

      <TouchableOpacity
        activeOpacity={0.85}
        onPress={onContinue}
        style={{ marginTop: 4 }}
      >
        <View
          style={{
            backgroundColor: '#0078D4',
            borderRadius: 14,
            paddingVertical: 14,
            alignItems: 'center',
          }}
        >
          <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
            {t('mail.oauth.warning_continue')}
          </Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        activeOpacity={0.7}
        onPress={onCancel}
        style={{ marginBottom: 12, alignItems: 'center', paddingVertical: 10 }}
      >
        <Text
          style={{
            fontSize: 14,
            fontFamily: 'Nunito_600SemiBold',
            color: colors.textMuted,
          }}
        >
          {t('mail.oauth.warning_cancel')}
        </Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

// ---------------------------------------------------------------------------
// Sub-View: OAuth Pending (Browser läuft gerade)
// ---------------------------------------------------------------------------

function OAuthPendingStep({
  t,
  colors,
}: {
  t: (key: string) => string;
  colors: ReturnType<typeof useColors>;
}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32, gap: 16 }}>
      <ActivityIndicator size="large" color="#0078D4" />
      <Text
        style={{
          fontSize: 15,
          fontFamily: 'Nunito_600SemiBold',
          color: colors.text,
          textAlign: 'center',
          lineHeight: 22,
        }}
      >
        {t('mail.oauth.pending_label')}
      </Text>
      <Text
        style={{
          fontSize: 13,
          fontFamily: 'Nunito_400Regular',
          color: colors.textMuted,
          textAlign: 'center',
          lineHeight: 19,
        }}
      >
        {t('mail.oauth.pending_hint')}
      </Text>
    </View>
  );
}

// ---------------------------------------------------------------------------
// 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>
  );
}