import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useMemo, useState } from 'react';
import {
  Alert,
  ActivityIndicator,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { usePersonalDataExport } from '../src/hooks';
import { colors } from '../src/theme';
import type { DataExportCategory, DataExportFormat, PersonalDataExport } from '../src/types';

/* ===================== 子组件：顶部导航 ===================== */

function Header({ onBack }: { onBack: () => void }) {
  return (
    <View style={styles.header}>
      <Pressable style={styles.headerBtn} onPress={onBack} hitSlop={8}>
        <Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
      </Pressable>
      <Text style={styles.headerTitle}>个人数据导出</Text>
      <View style={styles.headerBtn} />
    </View>
  );
}

/* ===================== 子组件：功能说明卡 ===================== */

function IntroCard({ title, description }: { title: string; description: string }) {
  return (
    <View style={styles.introCard}>
      <View style={styles.introIconWrap}>
        <Ionicons name="cloud-download-outline" size={28} color={colors.primary} />
      </View>
      <View style={styles.introText}>
        <Text style={styles.introTitle}>{title}</Text>
        <Text style={styles.introDesc}>{description}</Text>
      </View>
    </View>
  );
}

/* ===================== 子组件：数据分类选择 ===================== */

function CategoryRow({
  category,
  checked,
  onToggle,
}: {
  category: DataExportCategory;
  checked: boolean;
  onToggle: () => void;
}) {
  return (
    <Pressable style={styles.categoryRow} onPress={onToggle}>
      <View style={[styles.checkbox, checked && styles.checkboxActive]}>
        {checked ? <Ionicons name="checkmark" size={14} color={colors.white} /> : null}
      </View>
      <View style={styles.categoryBody}>
        <Text style={styles.categoryLabel}>{category.label}</Text>
        <Text style={styles.categoryDesc}>{category.description}</Text>
      </View>
      <Text style={styles.categorySize}>{category.size}</Text>
    </Pressable>
  );
}

/* ===================== 子组件：导出格式选择 ===================== */

function FormatCard({
  format,
  selected,
  onSelect,
}: {
  format: DataExportFormat;
  selected: boolean;
  onSelect: () => void;
}) {
  return (
    <Pressable
      style={[styles.formatCard, selected && styles.formatCardActive]}
      onPress={onSelect}
    >
      <View style={styles.formatTop}>
        <View style={[styles.formatIconWrap, selected && styles.formatIconWrapActive]}>
          <Ionicons name={format.icon as keyof typeof Ionicons.glyphMap} size={24} color={selected ? colors.primary : colors.textSecondary} />
        </View>
        {selected ? <Ionicons name="checkmark-circle" size={20} color={colors.primary} /> : null}
      </View>
      <Text style={[styles.formatLabel, selected && styles.formatLabelActive]}>{format.label}</Text>
      <Text style={styles.formatDesc}>{format.description}</Text>
    </Pressable>
  );
}

/* ===================== 子组件：时间范围选择 ===================== */

function TimeRangeRow({
  label,
  selected,
  onSelect,
}: {
  label: string;
  selected: boolean;
  onSelect: () => void;
}) {
  return (
    <Pressable style={styles.timeRow} onPress={onSelect}>
      <Text style={[styles.timeLabel, selected && styles.timeLabelActive]}>{label}</Text>
      <View style={[styles.radio, selected && styles.radioActive]}>
        {selected ? <View style={styles.radioDot} /> : null}
      </View>
    </Pressable>
  );
}

/* ===================== 子组件：导出预览 ===================== */

function PreviewCard({
  categoryCount,
  totalSize,
  estimatedTime,
  validity,
}: {
  categoryCount: number;
  totalSize: string;
  estimatedTime: string;
  validity: string;
}) {
  return (
    <View style={styles.previewCard}>
      <Text style={styles.previewTitle}>导出数据预览</Text>
      <View style={styles.previewGrid}>
        <View style={styles.previewItem}>
          <Text style={styles.previewValue}>{categoryCount} 类</Text>
          <Text style={styles.previewLabel}>已选分类</Text>
        </View>
        <View style={styles.previewItem}>
          <Text style={styles.previewValue}>{totalSize}</Text>
          <Text style={styles.previewLabel}>预估大小</Text>
        </View>
        <View style={styles.previewItem}>
          <Text style={styles.previewValue}>{estimatedTime}</Text>
          <Text style={styles.previewLabel}>预计处理时间</Text>
        </View>
        <View style={styles.previewItem}>
          <Text style={styles.previewValue}>{validity}</Text>
          <Text style={styles.previewLabel}>有效期</Text>
        </View>
      </View>
    </View>
  );
}

/* ===================== 子组件：最近导出记录 ===================== */

function RecentExportRow({
  record,
  onDownload,
}: {
  record: PersonalDataExport['recentExports'][number];
  onDownload: () => void;
}) {
  const isCompleted = record.status === 'completed';
  return (
    <View style={styles.recentRow}>
      <View style={styles.recentIconWrap}>
        <Ionicons name="document-outline" size={22} color={colors.primary} />
      </View>
      <View style={styles.recentBody}>
        <Text style={styles.recentName}>{record.name}</Text>
        <View style={styles.recentMeta}>
          <Text style={styles.recentDate}>{record.date}</Text>
          <Text style={styles.recentSize}>{record.size}</Text>
          <View style={[styles.statusTag, isCompleted ? styles.statusCompleted : styles.statusExpired]}>
            <Text style={[styles.statusText, isCompleted ? styles.statusTextCompleted : styles.statusTextExpired]}>
              {isCompleted ? '已完成' : '已过期'}
            </Text>
          </View>
        </View>
      </View>
      <Pressable style={styles.recentAction} onPress={onDownload} hitSlop={6}>
        <Ionicons name="download-outline" size={20} color={colors.primary} />
      </Pressable>
    </View>
  );
}

/* ===================== 页面 ===================== */

export default function PersonalDataExportScreen() {
  const router = useRouter();
  const { exportData, loading, error, refresh, submit, submitting } = usePersonalDataExport();
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [formatId, setFormatId] = useState<string | null>(null);
  const [timeRangeId, setTimeRangeId] = useState<string | null>(null);

  // 初始化本地选择状态
  const initialized = useMemo(() => {
    if (!exportData) return false;
    if (selectedIds.size === 0) {
      const initial = new Set<string>();
      exportData.categories.forEach((cat) => {
        if (cat.items.every((item) => item.checked)) {
          initial.add(cat.id);
        }
      });
      setSelectedIds(initial);
    }
    if (formatId === null) setFormatId(exportData.selectedFormat);
    if (timeRangeId === null) setTimeRangeId(exportData.selectedTimeRange);
    return true;
  }, [exportData, selectedIds.size, formatId, timeRangeId]);

  const toggleCategory = (id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const handleSubmit = async () => {
    await submit();
  };

  if (loading) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        <Header onBack={() => router.back()} />
        <View style={styles.center}>
          <ActivityIndicator size="large" color={colors.primary} />
        </View>
      </SafeAreaView>
    );
  }

  if (error || !exportData || !initialized) {
    return (
      <SafeAreaView style={styles.container} edges={['top']}>
        <Header onBack={() => router.back()} />
        <View style={styles.center}>
          <Ionicons name="alert-circle-outline" size={40} color={colors.danger} />
          <Text style={styles.tip}>加载失败</Text>
          <Pressable style={styles.retryBtn} onPress={refresh}>
            <Text style={styles.retryText}>重试</Text>
          </Pressable>
        </View>
      </SafeAreaView>
    );
  }

  const selectedCategories = exportData.categories.filter((cat) => selectedIds.has(cat.id));
  const selectedCount = selectedCategories.length;

  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      <Header onBack={() => router.back()} />
      <ScrollView contentContainerStyle={styles.body} showsVerticalScrollIndicator={false}>
        <IntroCard title={exportData.title} description={exportData.description} />

        {/* 选择要导出的数据 */}
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>选择要导出的数据</Text>
            <Pressable
              onPress={() => {
                const allIds = new Set(exportData.categories.map((cat) => cat.id));
                setSelectedIds(allIds);
              }}
            >
              <Text style={styles.sectionAction}>全选</Text>
            </Pressable>
          </View>
          <View style={styles.card}>
            {exportData.categories.map((category, index) => {
              const isLast = index === exportData.categories.length - 1;
              return (
                <View key={category.id} style={isLast ? undefined : styles.rowBorder}>
                  <CategoryRow
                    category={category}
                    checked={selectedIds.has(category.id)}
                    onToggle={() => toggleCategory(category.id)}
                  />
                </View>
              );
            })}
          </View>
        </View>

        {/* 导出格式 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>导出格式</Text>
          <View style={styles.formatRow}>
            {exportData.formats.map((format) => (
              <FormatCard
                key={format.id}
                format={format}
                selected={formatId === format.id}
                onSelect={() => setFormatId(format.id)}
              />
            ))}
          </View>
        </View>

        {/* 时间范围 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>时间范围</Text>
          <View style={styles.card}>
            {exportData.timeRanges.map((range, index) => {
              const isLast = index === exportData.timeRanges.length - 1;
              return (
                <View key={range.id} style={isLast ? undefined : styles.rowBorder}>
                  <TimeRangeRow
                    label={range.label}
                    selected={timeRangeId === range.id}
                    onSelect={() => setTimeRangeId(range.id)}
                  />
                </View>
              );
            })}
          </View>
        </View>

        {/* 导出预览 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>导出数据预览</Text>
          <PreviewCard
            categoryCount={selectedCount}
            totalSize={exportData.preview.totalSize}
            estimatedTime={exportData.preview.estimatedTime}
            validity={exportData.preview.validity}
          />
        </View>

        {/* 最近导出 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>最近导出</Text>
          <View style={styles.card}>
            {exportData.recentExports.map((record, index) => {
              const isLast = index === exportData.recentExports.length - 1;
              return (
                <View key={record.id} style={isLast ? undefined : styles.rowBorder}>
                  {/* 下载需要后端给出文件地址（RecentExportRecord 无下载地址字段），故按项目 4.4 节先例
                      保留入口 + 如实说明，不假装成功 */}
                  <RecentExportRow
                    record={record}
                    onDownload={() =>
                      // affordance-pending-backend
                      Alert.alert('暂未开放', '导出文件下载需后端支持，当前版本暂未开放')
                    }
                  />
                </View>
              );
            })}
            {/* 原先这里挂着「查看更多历史导出」，但记录只有 mock 三条、也没有分页接口和历史页，已摘掉 */}
          </View>
        </View>
      </ScrollView>

      <View style={styles.footer}>
        <Pressable
          style={[styles.submitBtn, (submitting || selectedCount === 0) && styles.submitBtnDisabled]}
          onPress={handleSubmit}
          disabled={submitting || selectedCount === 0}
        >
          {submitting ? (
            <ActivityIndicator size="small" color={colors.white} />
          ) : (
            <Text style={styles.submitBtnText}>申请导出</Text>
          )}
        </Pressable>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: colors.pageBg },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 8,
    height: 48,
    backgroundColor: colors.white,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  headerBtn: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  body: {
    padding: 8,
    paddingBottom: 100,
  },
  center: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 12,
  },
  tip: { fontSize: 14, color: colors.textSecondary },
  retryBtn: {
    marginTop: 8,
    paddingHorizontal: 24,
    paddingVertical: 8,
    borderRadius: 18,
    backgroundColor: colors.primaryBtn,
  },
  retryText: { color: colors.white, fontSize: 13, fontWeight: '600' },
  introCard: {
    flexDirection: 'row',
    backgroundColor: colors.primaryLight,
    borderRadius: 8,
    padding: 8,
    marginBottom: 8,
  },
  introIconWrap: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: colors.white,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  introText: { flex: 1 },
  introTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.primaryText,
    marginBottom: 4,
  },
  introDesc: {
    fontSize: 12,
    lineHeight: 17,
    color: colors.textSecondary,
  },
  section: { marginBottom: 20 },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  sectionTitle: {
    fontSize: 15,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  sectionAction: {
    fontSize: 13,
    color: colors.primary,
    fontWeight: '600',
  },
  card: {
    backgroundColor: colors.white,
    borderRadius: 8,
    overflow: 'hidden',
  },
  rowBorder: {
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  categoryRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 14,
  },
  checkbox: {
    width: 20,
    height: 20,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: colors.borderStrong,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  checkboxActive: {
    backgroundColor: colors.primary,
    borderColor: colors.primary,
  },
  categoryBody: { flex: 1 },
  categoryLabel: {
    fontSize: 15,
    fontWeight: '600',
    color: colors.textPrimary,
  },
  categoryDesc: {
    fontSize: 12,
    color: colors.textSecondary,
    marginTop: 2,
  },
  categorySize: {
    fontSize: 12,
    color: colors.textHint,
  },
  formatRow: {
    flexDirection: 'row',
    gap: 8,
  },
  formatCard: {
    flex: 1,
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 8,
    borderWidth: 1,
    borderColor: colors.borderLight,
  },
  formatCardActive: {
    borderColor: colors.primary,
    backgroundColor: colors.primaryLight,
  },
  formatTop: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  formatIconWrap: {
    width: 44,
    height: 44,
    borderRadius: 12,
    backgroundColor: colors.pageBg,
    alignItems: 'center',
    justifyContent: 'center',
  },
  formatIconWrapActive: {
    backgroundColor: colors.white,
  },
  formatLabel: {
    fontSize: 15,
    fontWeight: '700',
    color: colors.textPrimary,
    marginBottom: 4,
  },
  formatLabelActive: {
    color: colors.primary,
  },
  formatDesc: {
    fontSize: 12,
    color: colors.textSecondary,
    lineHeight: 17,
  },
  timeRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 14,
  },
  timeLabel: {
    fontSize: 15,
    color: colors.textPrimary,
  },
  timeLabelActive: {
    fontWeight: '600',
    color: colors.primary,
  },
  radio: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: colors.borderStrong,
    alignItems: 'center',
    justifyContent: 'center',
  },
  radioActive: {
    borderColor: colors.primary,
  },
  radioDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: colors.primary,
  },
  previewCard: {
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 8,
  },
  previewTitle: {
    fontSize: 14,
    fontWeight: '700',
    color: colors.textPrimary,
    marginBottom: 12,
  },
  previewGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  previewItem: {
    width: '50%',
    paddingVertical: 10,
  },
  previewValue: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.primary,
    marginBottom: 2,
  },
  previewLabel: {
    fontSize: 12,
    color: colors.textSecondary,
  },
  recentRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  recentIconWrap: {
    width: 40,
    height: 40,
    borderRadius: 10,
    backgroundColor: colors.primaryLight,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  recentBody: { flex: 1 },
  recentName: {
    fontSize: 14,
    fontWeight: '600',
    color: colors.textPrimary,
    marginBottom: 4,
  },
  recentMeta: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  recentDate: {
    fontSize: 12,
    color: colors.textSecondary,
  },
  recentSize: {
    fontSize: 12,
    color: colors.textHint,
  },
  statusTag: {
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 8,
  },
  statusCompleted: {
    backgroundColor: colors.successLight,
  },
  statusExpired: {
    backgroundColor: colors.borderLight,
  },
  statusText: {
    fontSize: 11,
    fontWeight: '600',
  },
  statusTextCompleted: {
    color: colors.successText,
  },
  statusTextExpired: {
    color: colors.textHint,
  },
  recentAction: {
    width: 36,
    alignItems: 'center',
  },
  viewMoreRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    borderTopWidth: 1,
    borderTopColor: colors.borderLight,
  },
  viewMoreText: {
    fontSize: 13,
    color: colors.textSecondary,
    marginRight: 4,
  },
  footer: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: colors.white,
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 24,
    borderTopWidth: 1,
    borderTopColor: colors.borderLight,
  },
  submitBtn: {
    backgroundColor: colors.primaryBtn,
    borderRadius: 24,
    paddingVertical: 14,
    alignItems: 'center',
  },
  submitBtnDisabled: {
    backgroundColor: colors.textDisabled,
  },
  submitBtnText: {
    color: colors.white,
    fontSize: 16,
    fontWeight: '700',
  },
});