/**
 * 月度报告图表（plan.md「5.2 图表与可视化」）。
 * 数据计算为纯函数，图表渲染用简单 RN 组件（避免重图表库依赖）。
 */
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';
import { groupByMonth } from '../../domain/chartStats';
import type { Transaction } from '../../domain/types';

export function MonthlyReport({ transactions }: { transactions: Transaction[] }) {
  const { theme } = useTheme();
  const t = useT();
  const data = groupByMonth(transactions);
  const maxExpense = Math.max(...data.map(d => d.expense), 1);

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.bgSecondary, borderRadius: theme.radii.md, padding: theme.spacing.md }]}>
      <Text style={[theme.typography.h3, { color: theme.colors.fgPrimary }]}>{t('report.monthlyTitle')}</Text>
      {data.map(d => (
        <View key={d.month} style={styles.row}>
          <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, width: 60 }]}>{d.month.slice(5)}</Text>
          <View style={[styles.barWrap, { backgroundColor: theme.colors.progressBg }]}>
            <View style={[styles.bar, {
              width: `${(d.expense / maxExpense) * 100}%`,
              backgroundColor: theme.colors.financial.expense,
            }]} />
          </View>
          <Text style={[theme.typography.caption, { color: theme.colors.financial.expense }]}>{d.expense.toFixed(0)}</Text>
        </View>
      ))}
      {data.length === 0 && (
        <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary }]}>{t('common.noData')}</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { gap: 6 },
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  barWrap: { flex: 1, height: 12, borderRadius: 6, overflow: 'hidden' },
  bar: { height: '100%', borderRadius: 6 },
});