import React from 'react';
import { Text, View } from 'react-native';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';
import { Card } from '../ui/Card';

interface RangeStatsCardProps {
  /** 周期类型（年度报表不渲染本卡片） */
  period: 'weekly' | 'monthly';
  incomeText: string;
  expenseText: string;
  netText: string;
  count: number;
}

/** 周/月收支看板：收入 / 支出 / 结余三栏 + 笔数说明。 */
export const RangeStatsCard = React.memo(function RangeStatsCard({ period, incomeText, expenseText, netText, count }: RangeStatsCardProps) {
  const { theme } = useTheme();
  const t = useT();
  const weekly = period === 'weekly';
  return (
    <Card title={t(weekly ? 'report.weeklyTitle' : 'report.monthlyTitle')}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginVertical: theme.spacing.sm, width: '100%' }}>
        <View style={{ alignItems: 'center', gap: theme.spacing.xs }}>
          <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>
            {t(weekly ? 'report.weeklyIncome' : 'report.monthlyIncome')}
          </Text>
          <Text style={[theme.typography.h3, { color: theme.colors.financial.income, fontVariant: ['tabular-nums'], fontWeight: '700' }]}>
            {incomeText}
          </Text>
        </View>
        <View style={{ alignItems: 'center', gap: theme.spacing.xs }}>
          <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>
            {t(weekly ? 'report.weeklyExpense' : 'report.monthlyExpense')}
          </Text>
          <Text style={[theme.typography.h3, { color: theme.colors.financial.expense, fontVariant: ['tabular-nums'], fontWeight: '700' }]}>
            {expenseText}
          </Text>
        </View>
        <View style={{ alignItems: 'center', gap: theme.spacing.xs }}>
          <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>
            {t(weekly ? 'report.weeklyNet' : 'report.monthlyNet')}
          </Text>
          <Text style={[theme.typography.h3, { color: theme.colors.accent, fontVariant: ['tabular-nums'], fontWeight: '700' }]}>
            {netText}
          </Text>
        </View>
      </View>
      <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, textAlign: 'center', marginTop: theme.spacing.sm }]}>
        {t(weekly ? 'report.weeklyStats' : 'report.monthlyStats', { count })}
      </Text>
    </Card>
  );
});