DriftLedger/src/app/(tabs)/index.tsx

import React, { useEffect, useMemo, useRef } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { useLedgerStore } from '../../store/ledgerStore';
import { useMetadataStore } from '../../store/metadataStore';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';
import { Card } from '../../components/Card';
import { SpeedDial } from '../../components/SpeedDial';
import { TransactionCard } from '../../components/TransactionCard';
import { AccountTree } from '../../components/AccountTree';
import { TrendLine } from '../../components/charts/TrendLine';
import { calculateNetWorth } from '../../domain/netWorth';
import { groupByMonth } from '../../domain/chartStats';
import { buildAccountTree } from '../../domain/accountTree';
import { getDueRecurring, instantiateRecurring, calculateNextDueDate } from '../../domain/recurring';

export default function HomeScreen() {
  const { theme } = useTheme();
  const t = useT();
  const router = useRouter();
  
  const ledger = useLedgerStore(s => s.ledger);
  const addTransaction = useLedgerStore(s => s.addTransaction);
  
  const recurringTransactions = useMetadataStore(s => s.recurringTransactions);
  const updateRecurringTransaction = useMetadataStore(s => s.updateRecurringTransaction);

  const transactions = useMemo(() => ledger?.transactions ?? [], [ledger]);
  const netWorth = useMemo(() => calculateNetWorth(transactions), [transactions]);
  const monthlyData = useMemo(() => groupByMonth(transactions), [transactions]);
  const currentMonth = useMemo(() => {
    if (monthlyData.length === 0) return null;
    return monthlyData[monthlyData.length - 1];
  }, [monthlyData]);
  // 1. 账户树计算
  const accountNodes = useMemo(() => {
    if (!ledger || !ledger.accounts) return [];
    return buildAccountTree(ledger.accounts, transactions, ledger);
  }, [ledger, transactions]);

  // 2. 周期性记账到期计算
  const todayStr = useMemo(() => new Date().toISOString().slice(0, 10), []);
  const dueRecurring = useMemo(() => {
    return getDueRecurring(recurringTransactions, todayStr);
  }, [recurringTransactions, todayStr]);

  // 周期记账自动触发：启动时自动确认标记了 autoConfirm 的到期项
  const autoConfirmed = useRef(false);
  useEffect(() => {
    let isMounted = true;
    if (autoConfirmed.current) return;
    const autoDue = dueRecurring.filter(r => r.autoConfirm);
    if (autoDue.length === 0) return;
    autoConfirmed.current = true;
    (async () => {
      for (const rec of autoDue) {
        if (!isMounted) break;
        try {
          const draft = instantiateRecurring(rec);
          await addTransaction(draft);
          const nextDueDate = calculateNextDueDate(rec.frequency, rec.interval, rec.nextDueDate);
          updateRecurringTransaction(rec.id, { nextDueDate });
        } catch {
          // 静默失败，用户可在周期管理页手动处理
        }
      }
    })();
    return () => { isMounted = false; };
  }, [dueRecurring, addTransaction, updateRecurringTransaction]);

  const handleConfirmRecurring = async (rec: any) => {
    try {
      const draft = instantiateRecurring(rec);
      await addTransaction(draft);
      const nextDueDate = calculateNextDueDate(rec.frequency, rec.interval, rec.nextDueDate);
      updateRecurringTransaction(rec.id, { nextDueDate });
      Alert.alert(t('home.recurringSuccess'), t('home.recurringSuccessDesc', { name: rec.name }));
    } catch (e) {
      Alert.alert(t('home.recurringFail'), String(e));
    }
  };

  // 3. 千分位格式化金额
  const fmtAmount = (s: string) => {
    if (!s || s === '0') return '¥0.00';
    const num = parseFloat(s);
    if (isNaN(num)) return s;
    const formatted = num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    return num >= 0 ? `¥${formatted}` : `-¥${Math.abs(num).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  };

  return (
    <SafeAreaView style={[styles.page, { backgroundColor: theme.colors.bgPrimary }]} edges={['top']}>
      <View style={styles.header}>
        <Text style={[theme.typography.h1, { color: theme.colors.fgPrimary, fontFamily: theme.typography.h1.fontFamily }]}>
          {t('app.name')}
        </Text>
      </View>
      <ScrollView contentContainerStyle={[styles.content, { gap: theme.spacing.md }]}>
        
        {/* 净资产 Hero 卡片 */}
        <Card
          style={{
            backgroundColor: theme.colors.accent,
            borderColor: theme.colors.accentLight,
            shadowColor: theme.colors.accent,
            shadowOpacity: 0.15,
            shadowRadius: 10,
          }}
        >
          <Text style={[theme.typography.caption, { color: 'rgba(255,255,255,0.7)', fontSize: 13, fontWeight: '600', fontFamily: theme.typography.caption.fontFamily }]}>
            {t('home.netWorthTitle')}
          </Text>
          <Text style={[theme.typography.h1, { color: '#FFFFFF', fontSize: 32, fontWeight: '800', marginVertical: 8, fontFamily: 'monospace' }]}>
            {fmtAmount(netWorth.netWorth)}
          </Text>
          <View style={styles.heroFooter}>
            <View>
              <Text style={[theme.typography.caption, { color: 'rgba(255,255,255,0.7)', fontFamily: theme.typography.caption.fontFamily }]}>
                {t('home.assets')}
              </Text>
              <Text style={[theme.typography.h3, { color: '#FFFFFF', fontSize: 15, fontWeight: '700', marginTop: 2, fontFamily: 'monospace' }]}>
                {fmtAmount(netWorth.assets)}
              </Text>
            </View>
            <View style={{ alignItems: 'flex-end' }}>
              <Text style={[theme.typography.caption, { color: 'rgba(255,255,255,0.7)', fontFamily: theme.typography.caption.fontFamily }]}>
                {t('home.liabilities')}
              </Text>
              <Text style={[theme.typography.h3, { color: 'rgba(255,255,255,0.9)', fontSize: 15, fontWeight: '700', marginTop: 2, fontFamily: 'monospace' }]}>
                {fmtAmount(netWorth.liabilities)}
              </Text>
            </View>
          </View>
        </Card>

        {/* Bento 双格排列 */}
        {(dueRecurring.length > 0 || currentMonth) && (
          <View style={styles.bentoRow}>
            {dueRecurring.length > 0 ? (
              <Card title={t('home.dueRecurring')} style={styles.bentoCol}>
                <View style={styles.recurringList}>
                  {dueRecurring.slice(0, 2).map(rec => (
                    <View key={rec.id} style={[styles.recurringItem, { borderBottomColor: theme.colors.divider }]}>
                      <Text style={[theme.typography.caption, { color: theme.colors.fgPrimary, fontWeight: '700', fontFamily: theme.typography.caption.fontFamily }]} numberOfLines={1}>
                        {rec.name}
                      </Text>
                      <Pressable
                        onPress={() => handleConfirmRecurring(rec)}
                        style={({ pressed }) => [
                          styles.confirmBtnMini,
                          {
                            backgroundColor: theme.colors.bgTertiary,
                            borderColor: theme.colors.border,
                            borderRadius: theme.radii.sm,
                            opacity: pressed ? 0.7 : 1,
                          },
                        ]}
                      >
                        <Text style={{ color: theme.colors.accent, fontSize: 10, fontWeight: '800', textAlign: 'center' }}>
                          {rec.draft.postings[0]?.amount} CNY
                        </Text>
                      </Pressable>
                    </View>
                  ))}
                </View>
              </Card>
            ) : null}

            {currentMonth ? (
              <Card title={`${currentMonth.month.slice(5)} ${t('home.title')}`} style={styles.bentoCol}>
                <View style={styles.bentoStats}>
                  <View>
                    <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, fontFamily: theme.typography.caption.fontFamily }]}>
                      {t('home.income')}
                    </Text>
                    <Text style={[theme.typography.bodySmall, { color: theme.colors.financial.income, fontWeight: '700', fontFamily: 'monospace', marginTop: 2 }]} numberOfLines={1}>
                      +{fmtAmount(currentMonth.income.toString())}
                    </Text>
                  </View>
                  <View>
                    <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, fontFamily: theme.typography.caption.fontFamily }]}>
                      {t('home.expense')}
                    </Text>
                    <Text style={[theme.typography.bodySmall, { color: theme.colors.financial.expense, fontWeight: '700', fontFamily: 'monospace', marginTop: 2 }]} numberOfLines={1}>
                      -{fmtAmount(currentMonth.expense.toString())}
                    </Text>
                  </View>
                </View>
              </Card>
            ) : null}
          </View>
        )}

        {/* 月度趋势 */}
        {monthlyData.length > 0 && (
          <Card title={t('home.monthlyTrend')}>
            <TrendLine transactions={transactions} />
          </Card>
        )}

        {/* 账户与资产余额树 */}
        {accountNodes.length > 0 && (
          <Card title={t('home.accountTree')}>
            <AccountTree nodes={accountNodes} />
          </Card>
        )}
      </ScrollView>
      <SpeedDial actions={[
        { key: 'new', icon: 'create-outline', label: t('home.newTransaction'), onPress: () => router.push('/transaction/new') },
        { key: 'ocr', icon: 'camera-outline', label: t('home.ocrScan'), onPress: () => router.push({ pathname: '/transaction/new', params: { mode: 'ocr' } }) },
        { key: 'import', icon: 'download-outline', label: t('tab.import'), onPress: () => router.push('/import') },
      ]} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  page: { flex: 1 },
  header: { paddingHorizontal: 16, paddingTop: 8, paddingBottom: 12 },
  content: { padding: 16, paddingBottom: 96 },
  heroFooter: { flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: 'rgba(255,255,255,0.15)', paddingTop: 10, marginTop: 4 },
  bentoRow: { flexDirection: 'row', gap: 12 },
  bentoCol: { flex: 1 },
  recurringList: { gap: 8 },
  recurringItem: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 6, borderBottomWidth: StyleSheet.hairlineWidth },
  confirmBtnMini: { paddingVertical: 4, paddingHorizontal: 8, borderWidth: StyleSheet.hairlineWidth },
  bentoStats: { gap: 8 },
});