/** 解析诊断（自交易页迁入，spec §7.2/§7.4 数据组）。 */
import React from 'react';
import { ScrollView, StyleSheet, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useLedgerStore } from '../../store/ledgerStore';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';
import { Card } from '../../components/ui/Card';
import { ScreenHeader } from '../../components/layout/ScreenHeader';

export default function DiagnosticsScreen() {
  const { theme } = useTheme();
  const t = useT();
  const ledger = useLedgerStore(s => s.ledger);

  return (
    <SafeAreaView style={[styles.page, { backgroundColor: theme.colors.bgPrimary }]} edges={['top', 'bottom']}>
      <ScreenHeader title={t('settings.diagnostics')} />
      <ScrollView contentContainerStyle={styles.content}>
        <Card title={t('diagnostics.title')}>
          <Text style={[theme.typography.bodySmall, { color: theme.colors.fgPrimary }]}>
            {t('diagnostics.syntaxErrors', { count: ledger?.diagnostics.length ?? 0 })}
          </Text>
          <Text style={[theme.typography.bodySmall, { color: theme.colors.fgPrimary }]}>
            {t('diagnostics.unsupported', { count: ledger?.unsupported.length ?? 0 })}
          </Text>
          <Text style={[theme.typography.bodySmall, { color: theme.colors.fgPrimary }]}>
            {t('diagnostics.balanceAssertions', { count: ledger?.balances.length ?? 0 })}
          </Text>
          <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, marginTop: 8 }]}>
            {t('diagnostics.hint')}
          </Text>
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  page: { flex: 1 },
  content: { padding: 16 },
});
