import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';
import type { DedupResult } from '../../domain/transaction/dedup';

interface DedupBannerProps {
  result: DedupResult;
  onAccept?: () => void;   // 强行单独导入
  onReject?: () => void;   // 忽略跳过
  onLink?: () => void;     // 关联/合并已有交易
}

/** 去重提示横幅（主题化）。展示去重原因 + 操作按钮。 */
export function DedupBanner({ result, onAccept, onReject, onLink }: DedupBannerProps) {
  const { theme } = useTheme();
  const t = useT();
  if (!result.isDuplicate) return null;

  const confidenceColor = result.confidence === 'high'
    ? theme.colors.error
    : result.confidence === 'medium'
    ? theme.colors.warning
    : theme.colors.fgSecondary;

  return (
    <View style={[styles.banner, { backgroundColor: theme.colors.bgTertiary, borderLeftColor: confidenceColor }]}>
      <View style={styles.header}>
        <Ionicons name="warning" size={18} color={confidenceColor} />
        <Text style={[theme.typography.bodySmall, { color: theme.colors.fgPrimary, fontWeight: '700' }]}>
          {t('importFlow.suspectedDuplicate')}
        </Text>
        <Text style={[theme.typography.caption, { color: confidenceColor }]}>
          {result.confidence}
        </Text>
      </View>
      {result.reason && (
        <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>
          {result.reason}
        </Text>
      )}
      <View style={styles.actions}>
        <Pressable onPress={onReject} style={[styles.btn, { borderColor: theme.colors.border }]}>
          <Text style={{ color: theme.colors.fgSecondary }}>{t('importFlow.skip')}</Text>
        </Pressable>
        {onLink && (
          <Pressable onPress={onLink} style={[styles.btn, { borderColor: theme.colors.accent, backgroundColor: `${theme.colors.accent}15` }]}>
            <Text style={{ color: theme.colors.accent, fontWeight: '700' }}>关联交易</Text>
          </Pressable>
        )}
        <Pressable onPress={onAccept} style={[styles.btn, { backgroundColor: theme.colors.accent, borderColor: theme.colors.accent }]}>
          <Text style={{ color: theme.colors.fgInverse }}>{t('importFlow.forceImport')}</Text>
        </Pressable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  banner: { borderLeftWidth: 3, borderRadius: 6, padding: 12, gap: 6, marginVertical: 8 },
  header: { flexDirection: 'row', alignItems: 'center', gap: 6 },
  actions: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 4 },
  btn: { flexDirection: 'row', alignItems: 'center', paddingVertical: 6, paddingHorizontal: 12, borderRadius: 6, borderWidth: 1 },
});
