import { StatusBar } from 'expo-status-bar';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { authService } from '../../services';
import { spacing, fontSizes, useAppColors, type AppColors } from '../../theme';
import { Text, SimpleHeader } from '../../components/common';
import { useResponsive, useResponsiveSpacing } from '../../hooks';
import { useAuthStore } from '../../stores';
import type { DeletionStatusDTO } from '../../types/dto';
import * as hrefs from '../../navigation/hrefs';

const CONTENT_MAX_WIDTH = 720;

function createAccountDeletionStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background.paper,
    },
    loadingWrap: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    keyboardView: {
      flex: 1,
    },
    scrollContent: {
      paddingVertical: spacing.lg,
    },
    content: {
      maxWidth: CONTENT_MAX_WIDTH,
      alignSelf: 'center',
      width: '100%',
    },

    // 顶部叙述区：左对齐、有呼吸感
    heroSection: {
      paddingHorizontal: spacing['2xl'],
      paddingTop: spacing.md,
      paddingBottom: spacing.xl,
    },
    heroEyebrow: {
      fontSize: 13,
      color: colors.text.hint,
      letterSpacing: 1,
      marginBottom: spacing.sm,
    },
    heroTitle: {
      fontSize: 24,
      fontWeight: '700',
      color: colors.text.primary,
      lineHeight: 32,
      marginBottom: spacing.sm,
    },
    heroDesc: {
      fontSize: 15,
      color: colors.text.secondary,
      lineHeight: 22,
    },

    // 倒计时区：圆环 + 数字 + 文案，替代"大数字 + 标签"卡片
    countdownSection: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: spacing['2xl'],
      paddingVertical: spacing.lg,
    },
    countdownRing: {
      width: 88,
      height: 88,
      borderRadius: 44,
      borderWidth: 4,
      borderColor: colors.warning.main,
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: spacing.lg,
    },
    countdownNumber: {
      fontSize: 32,
      fontWeight: '700',
      color: colors.warning.dark,
      lineHeight: 36,
    },
    countdownUnit: {
      fontSize: 11,
      color: colors.text.secondary,
      marginTop: -2,
    },
    countdownTextWrap: {
      flex: 1,
    },
    countdownTitle: {
      fontSize: 16,
      fontWeight: '600',
      color: colors.text.primary,
      marginBottom: 4,
    },
    countdownDesc: {
      fontSize: 13,
      color: colors.text.secondary,
      lineHeight: 19,
    },

    // 引导文 + 列表（无背景、无圆角，自然排版）
    guideSection: {
      paddingHorizontal: spacing['2xl'],
      paddingTop: spacing.lg,
    },
    guideLabel: {
      fontSize: 13,
      color: colors.text.secondary,
      fontWeight: '500',
      marginBottom: spacing.md,
    },
    guideItem: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      paddingVertical: 10,
    },
    guideIcon: {
      marginRight: spacing.md,
      marginTop: 2,
    },
    guideTextWrap: {
      flex: 1,
    },
    guideTitle: {
      fontSize: 15,
      fontWeight: '500',
      color: colors.text.primary,
      marginBottom: 2,
    },
    guideDesc: {
      fontSize: 13,
      color: colors.text.secondary,
      lineHeight: 19,
    },
    guideDivider: {
      height: StyleSheet.hairlineWidth,
      backgroundColor: colors.divider,
      marginLeft: spacing['2xl'] + 22 + spacing.md,
    },

    // 注意事项（无填色，仅左侧色条）
    noticeSection: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      paddingHorizontal: spacing['2xl'],
      paddingTop: spacing.lg,
      paddingBottom: spacing.md,
    },
    noticeBar: {
      width: 3,
      alignSelf: 'stretch',
      backgroundColor: colors.error.main,
      borderRadius: 2,
      marginRight: spacing.md,
    },
    noticeTextWrap: {
      flex: 1,
    },
    noticeTitle: {
      fontSize: 14,
      fontWeight: '600',
      color: colors.error.main,
      marginBottom: 4,
    },
    noticeDesc: {
      fontSize: 13,
      color: colors.text.secondary,
      lineHeight: 20,
    },

    // 表单区（与 AccountSecurity 风格一致：分节标题 + 输入框）
    formSection: {
      marginTop: spacing.lg,
    },
    sectionHeader: {
      paddingHorizontal: spacing['2xl'],
      marginBottom: spacing.sm,
      marginTop: spacing.sm,
    },
    sectionTitle: {
      fontWeight: '600',
      fontSize: fontSizes.sm,
      color: colors.text.secondary,
      textTransform: 'uppercase',
      letterSpacing: 0.5,
    },

    // 输入框
    inputWrapper: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.background.default,
      borderRadius: 14,
      paddingHorizontal: spacing.lg,
      height: 56,
      marginHorizontal: spacing['2xl'],
      marginBottom: spacing.md,
    },
    inputIcon: {
      marginRight: spacing.sm,
    },
    input: {
      flex: 1,
      color: colors.text.primary,
      fontSize: fontSizes.md,
      height: 56,
    },
    eyeButton: {
      padding: 4,
      marginLeft: 4,
    },

    // 按钮行：次按钮在左、危险按钮在右，与全站保持一致
    buttonRow: {
      flexDirection: 'row',
      gap: spacing.md,
      marginTop: spacing.lg,
      marginHorizontal: spacing['2xl'],
    },
    secondaryButton: {
      flex: 1,
      height: 56,
      borderRadius: 14,
      backgroundColor: 'transparent',
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 1.5,
      borderColor: colors.divider,
    },
    secondaryButtonText: {
      color: colors.text.primary,
      fontSize: fontSizes.md,
      fontWeight: '600',
    },
    dangerButton: {
      flex: 1,
      height: 56,
      borderRadius: 14,
      backgroundColor: colors.error.main,
      alignItems: 'center',
      justifyContent: 'center',
    },
    dangerButtonText: {
      color: colors.text.inverse,
      fontSize: fontSizes.md,
      fontWeight: '600',
    },
    buttonDisabled: {
      opacity: 0.5,
    },
    primaryButton: {
      height: 56,
      borderRadius: 14,
      backgroundColor: colors.primary.main,
      alignItems: 'center',
      justifyContent: 'center',
      marginHorizontal: spacing['2xl'],
      marginTop: spacing.md,
    },
    primaryButtonText: {
      color: colors.text.inverse,
      fontSize: fontSizes.md,
      fontWeight: '600',
    },

    // 页脚：联系客服
    footer: {
      alignItems: 'center',
      marginTop: spacing.xl,
      paddingHorizontal: spacing['2xl'],
    },
    footerText: {
      fontSize: 13,
      color: colors.text.hint,
      lineHeight: 20,
      textAlign: 'center',
    },
    footerLink: {
      color: colors.primary.main,
      fontWeight: '500',
    },
  });
}

export const AccountDeletionScreen: React.FC = () => {
  const colors = useAppColors();
  const styles = useMemo(() => createAccountDeletionStyles(colors), [colors]);
  const router = useRouter();
  const { isMobile } = useResponsive();
  const insets = useSafeAreaInsets();
  const logout = useAuthStore((s) => s.logout);
  const [status, setStatus] = useState<DeletionStatusDTO | null>(null);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const scrollBottomInset = isMobile ? 64 + 24 + insets.bottom + spacing.md : spacing.md;
  const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });

  const loadStatus = useCallback(async () => {
    try {
      const result = await authService.getDeletionStatus();
      setStatus(result);
    } catch (error) {
      console.error('加载注销状态失败:', error);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadStatus();
  }, [loadStatus]);

  const handleRequestDeletion = useCallback(async () => {
    if (!password.trim()) {
      Alert.alert('提示', '请输入密码确认');
      return;
    }

    Alert.alert(
      '确认注销',
      '注销后，您的账号将在90天后永久删除。在此期间，您可以通过重新登录来取消注销。确定要继续吗？',
      [
        { text: '取消', style: 'cancel' },
        {
          text: '确定注销',
          style: 'destructive',
          onPress: async () => {
            setSubmitting(true);
            try {
              const result = await authService.requestAccountDeletion(password);
              if (result) {
                setStatus(result);
                setPassword('');
                Alert.alert('已申请注销', '您的账号将在90天后永久删除。在此期间登录即可取消注销。');
                await logout();
                router.replace(hrefs.hrefAuthLogin());
              } else {
                Alert.alert('失败', '密码错误或申请失败，请重试');
              }
            } catch (error) {
              console.error('申请注销失败:', error);
              Alert.alert('失败', '申请注销失败，请稍后重试');
            } finally {
              setSubmitting(false);
            }
          },
        },
      ]
    );
  }, [password, logout, router]);

  const handleCancelDeletion = useCallback(async () => {
    Alert.alert(
      '取消注销',
      '确定要取消注销申请吗？您的账号将恢复正常使用。',
      [
        { text: '继续注销', style: 'cancel' },
        {
          text: '确定取消',
          onPress: async () => {
            setSubmitting(true);
            try {
              const ok = await authService.cancelAccountDeletion();
              if (ok) {
                setStatus({ is_pending_deletion: false });
                Alert.alert('已取消', '注销申请已取消，您的账号已恢复正常使用');
              } else {
                Alert.alert('失败', '取消注销失败，请稍后重试');
              }
            } catch (error) {
              console.error('取消注销失败:', error);
              Alert.alert('失败', '取消注销失败，请稍后重试');
            } finally {
              setSubmitting(false);
            }
          },
        },
      ]
    );
  }, []);

  if (loading) {
    return (
      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
        <View style={styles.loadingWrap}>
          <ActivityIndicator size="large" color={colors.primary.main} />
        </View>
      </SafeAreaView>
    );
  }

  // 待注销状态
  if (status?.is_pending_deletion) {
    return (
      <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
        <StatusBar style="auto" />
        <SimpleHeader title="注销账号" onBack={() => router.back()} />
        <ScrollView
          contentContainerStyle={[
            styles.scrollContent,
            { paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding },
          ]}
          showsVerticalScrollIndicator={false}
        >
          <View style={styles.content}>
            {/* 顶部叙述 */}
            <View style={styles.heroSection}>
              <Text style={styles.heroEyebrow}>ACCOUNT · 注销申请中</Text>
              <Text style={styles.heroTitle}>我们将在倒计时结束后清除你的账号</Text>
              <Text style={styles.heroDesc}>
                在此期间，你随时可以撤销申请，账号会立即恢复正常使用。
              </Text>
            </View>

            {/* 倒计时 */}
            <View style={styles.countdownSection}>
              <View style={styles.countdownRing}>
                <Text style={styles.countdownNumber}>{status.cool_down_days || 90}</Text>
                <Text style={styles.countdownUnit}>天</Text>
              </View>
              <View style={styles.countdownTextWrap}>
                <Text style={styles.countdownTitle}>距离永久删除</Text>
                <Text style={styles.countdownDesc}>
                  再次登录或点击下方按钮可立即取消注销。
                </Text>
              </View>
            </View>

            {/* 取消按钮 */}
            <TouchableOpacity
              style={[
                styles.primaryButton,
                submitting && styles.buttonDisabled,
              ]}
              onPress={handleCancelDeletion}
              disabled={submitting}
              activeOpacity={0.9}
            >
              {submitting ? (
                <ActivityIndicator size="small" color={colors.text.inverse} />
              ) : (
                <Text style={styles.primaryButtonText}>撤销注销申请</Text>
              )}
            </TouchableOpacity>

            {/* 页脚 */}
            <View style={styles.footer}>
              <Text style={styles.footerText}>
                如有疑虑可联系<Text style={styles.footerLink}> 客服 </Text>获取帮助
              </Text>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }

  // 正常状态：申请注销
  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      <StatusBar style="auto" />
      <SimpleHeader title="注销账号" onBack={() => router.back()} />
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={styles.keyboardView}
      >
        <ScrollView
          contentContainerStyle={[
            styles.scrollContent,
            { paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding },
          ]}
          showsVerticalScrollIndicator={false}
          keyboardShouldPersistTaps="handled"
        >
          <View style={styles.content}>
            {/* 顶部叙述 */}
            <View style={styles.heroSection}>
              <Text style={styles.heroEyebrow}>ACCOUNT · 注销</Text>
              <Text style={styles.heroTitle}>在离开之前，我们想让你知道这些</Text>
              <Text style={styles.heroDesc}>
                注销并非立即生效，提交后你有 90 天的冷静期，反悔了随时可以回来。
              </Text>
            </View>

            {/* 注销影响 - 列表式（无背景） */}
            <View style={styles.guideSection}>
              <Text style={styles.guideLabel}>注销后会发生什么</Text>

              <View style={styles.guideItem}>
                <MaterialCommunityIcons
                  name="account-remove-outline"
                  size={22}
                  color={colors.error.main}
                  style={styles.guideIcon}
                />
                <View style={styles.guideTextWrap}>
                  <Text style={styles.guideTitle}>个人资料会被清除</Text>
                  <Text style={styles.guideDesc}>头像、昵称、简介等所有个人信息都将被永久删除。</Text>
                </View>
              </View>
              <View style={styles.guideDivider} />

              <View style={styles.guideItem}>
                <MaterialCommunityIcons
                  name="message-text-outline"
                  size={22}
                  color={colors.warning.main}
                  style={styles.guideIcon}
                />
                <View style={styles.guideTextWrap}>
                  <Text style={styles.guideTitle}>历史内容会保留</Text>
                  <Text style={styles.guideDesc}>你发布的帖子、评论将保留，但作者会显示为「已注销用户」。</Text>
                </View>
              </View>
              <View style={styles.guideDivider} />

              <View style={styles.guideItem}>
                <MaterialCommunityIcons
                  name="heart-broken-outline"
                  size={22}
                  color={colors.error.main}
                  style={styles.guideIcon}
                />
                <View style={styles.guideTextWrap}>
                  <Text style={styles.guideTitle}>关注关系被解绑</Text>
                  <Text style={styles.guideDesc}>你关注的人、粉丝、收藏、点赞等社交关系会被一并清除。</Text>
                </View>
              </View>
              <View style={styles.guideDivider} />

              <View style={styles.guideItem}>
                <MaterialCommunityIcons
                  name="clock-time-four-outline"
                  size={22}
                  color={colors.text.secondary}
                  style={styles.guideIcon}
                />
                <View style={styles.guideTextWrap}>
                  <Text style={styles.guideTitle}>90 天冷静期</Text>
                  <Text style={styles.guideDesc}>期间重新登录即可撤销申请，账号会立刻恢复。</Text>
                </View>
              </View>
            </View>

            {/* 红色提示 - 左侧细线代替大色块 */}
            <View style={styles.noticeSection}>
              <View style={styles.noticeBar} />
              <View style={styles.noticeTextWrap}>
                <Text style={styles.noticeTitle}>这是不可恢复的操作</Text>
                <Text style={styles.noticeDesc}>
                  90 天后所有数据将被永久删除，届时无法通过任何方式找回。请确认你已备份好需要保留的内容。
                </Text>
              </View>
            </View>

            {/* 密码确认 */}
            <View style={styles.formSection}>
              <View style={styles.sectionHeader}>
                <Text variant="caption" style={styles.sectionTitle}>
                  身份验证
                </Text>
              </View>

              <View style={styles.inputWrapper}>
                <MaterialCommunityIcons
                  name="lock-outline"
                  size={20}
                  color={colors.text.secondary}
                  style={styles.inputIcon}
                />
                <TextInput
                  style={styles.input}
                  placeholder="请输入登录密码以确认"
                  placeholderTextColor={colors.text.hint}
                  secureTextEntry={!showPassword}
                  value={password}
                  onChangeText={setPassword}
                  autoCapitalize="none"
                  returnKeyType="done"
                />
                <TouchableOpacity
                  onPress={() => setShowPassword(!showPassword)}
                  style={styles.eyeButton}
                >
                  <MaterialCommunityIcons
                    name={showPassword ? 'eye-off-outline' : 'eye-outline'}
                    size={20}
                    color={colors.text.hint}
                  />
                </TouchableOpacity>
              </View>
            </View>

            {/* 按钮行 */}
            <View style={styles.buttonRow}>
              <TouchableOpacity
                style={styles.secondaryButton}
                onPress={() => router.back()}
                activeOpacity={0.8}
              >
                <Text style={styles.secondaryButtonText}>再想想</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[
                  styles.dangerButton,
                  (submitting || !password.trim()) && styles.buttonDisabled,
                ]}
                onPress={handleRequestDeletion}
                disabled={submitting || !password.trim()}
                activeOpacity={0.9}
              >
                {submitting ? (
                  <ActivityIndicator size="small" color={colors.text.inverse} />
                ) : (
                  <Text style={styles.dangerButtonText}>确认申请注销</Text>
                )}
              </TouchableOpacity>
            </View>

            {/* 页脚 */}
            <View style={styles.footer}>
              <Text style={styles.footerText}>
                遇到问题？可以联系<Text style={styles.footerLink}> 客服 </Text>
                我们会帮你处理
              </Text>
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

export default AccountDeletionScreen;