import { StyleSheet, Text, View } from 'react-native';

import { ActionButton } from '@/shared/components/ActionButton';
import { ClaimCard } from '@/shared/components/ClaimCard';
import { Screen } from '@/shared/components/Screen';
import { Colors, Radius, Spacing } from '@/constants/theme';
import { approvalClaims } from '@/shared/mock/claims';

export default function ApprovalsScreen() {
  return (
    <Screen title="审批中心" subtitle="处理待我审批的报销单，查看 AI 风控提示后再做决定。">
      <View style={styles.summary}>
        <View>
          <Text style={styles.summaryNumber}>{approvalClaims.length}</Text>
          <Text style={styles.summaryLabel}>待审批单据</Text>
        </View>
        <View>
          <Text style={styles.summaryNumber}>1</Text>
          <Text style={styles.summaryLabel}>需关注风险</Text>
        </View>
      </View>

      {approvalClaims.map((claim) => (
        <View key={claim.id} style={styles.approvalItem}>
          <ClaimCard claim={claim} />
          <View style={styles.actionRow}>
            <ActionButton accessibilityLabel={`驳回 ${claim.claimNo}`} variant="danger">
              驳回
            </ActionButton>
            <ActionButton accessibilityLabel={`同意 ${claim.claimNo}`}>同意</ActionButton>
          </View>
        </View>
      ))}
    </Screen>
  );
}

const styles = StyleSheet.create({
  summary: {
    flexDirection: 'row',
    gap: Spacing.three,
    borderRadius: Radius.lg,
    backgroundColor: Colors.light.primarySoft,
    borderWidth: 1,
    borderColor: '#BFEEDB',
    padding: Spacing.four,
  },
  summaryNumber: {
    color: Colors.light.primary,
    fontSize: 26,
    fontWeight: '900',
  },
  summaryLabel: {
    color: Colors.light.textSecondary,
    fontSize: 13,
  },
  approvalItem: {
    gap: Spacing.three,
  },
  actionRow: {
    flexDirection: 'row',
    gap: Spacing.three,
  },
});
