/**
 * 可左滑的交易卡片（spec §7.2）：右滑出「复制 / 删除」快捷操作。
 * 用 gesture-handler 传统 Swipeable（不依赖 reanimated worklet）。
 */
import React, { useRef } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';
import { TransactionCard } from './TransactionCard';
import type { Transaction } from '../../domain/core/types';

interface SwipeableTransactionCardProps {
  transaction: Transaction;
  categoryId?: string;
  showDate?: boolean;
  highlight?: string;
  onPress: (t: Transaction) => void;
  /** 复制：跳转录入页预填（由调用方实现）。 */
  onDuplicate: (t: Transaction) => void;
  /** 删除：调用方负责 confirm + deleteTransaction。 */
  onDelete: (t: Transaction) => void;
}

export function SwipeableTransactionCard({ transaction, categoryId, showDate, highlight, onPress, onDuplicate, onDelete }: SwipeableTransactionCardProps) {
  const { theme } = useTheme();
  const t = useT();
  const swipeRef = useRef<Swipeable>(null);

  const renderRightActions = () => (
    <View style={styles.actions}>
      <Pressable
        onPress={() => { swipeRef.current?.close(); onDuplicate(transaction); }}
        style={[styles.actionBtn, { backgroundColor: theme.colors.bgTertiary, borderRadius: theme.radii.md }]}
        accessibilityRole="button"
        accessibilityLabel={t('transactions.duplicate')}
      >
        <Ionicons name="copy-outline" size={20} color={theme.colors.fgPrimary} />
        <Text style={[styles.actionText, { color: theme.colors.fgPrimary }]}>{t('transactions.duplicate')}</Text>
      </Pressable>
      <Pressable
        onPress={() => { swipeRef.current?.close(); onDelete(transaction); }}
        style={[styles.actionBtn, { backgroundColor: theme.colors.financial.expense, borderRadius: theme.radii.md }]}
        accessibilityRole="button"
        accessibilityLabel={t('common.delete')}
      >
        <Ionicons name="trash-outline" size={20} color={theme.colors.fgInverse} />
        <Text style={[styles.actionText, { color: theme.colors.fgInverse }]}>{t('common.delete')}</Text>
      </Pressable>
    </View>
  );

  return (
    <Swipeable ref={swipeRef} renderRightActions={renderRightActions} overshootRight={false}>
      <TransactionCard transaction={transaction} categoryId={categoryId} showDate={showDate} highlight={highlight} onPress={onPress} />
    </Swipeable>
  );
}

const styles = StyleSheet.create({
  actions: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingLeft: 8, marginBottom: 8 },
  actionBtn: { width: 64, alignItems: 'center', justifyContent: 'center', gap: 4, paddingVertical: 10 },
  actionText: { fontSize: 11, fontWeight: '600' },
});
