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

import { Colors, Radius, Spacing } from '@/constants/theme';
import { formatMoney, type ClaimSummary } from '@/shared/domain/claim';
import { StatusPill } from '@/shared/components/StatusPill';

type Props = {
  claim: ClaimSummary;
};

export function ClaimCard({ claim }: Props) {
  return (
    <View style={styles.card}>
      <View style={styles.top}>
        <View style={styles.iconBox}>
          <Text style={styles.iconText}>{claim.title.slice(0, 1)}</Text>
        </View>
        <View style={styles.titleBlock}>
          <Text style={styles.title}>{claim.title}</Text>
          <Text style={styles.meta}>单号：{claim.claimNo}</Text>
        </View>
        <Text style={styles.amount}>{formatMoney(claim.amount)}</Text>
      </View>

      <View style={styles.bottom}>
        <View>
          <Text style={styles.meta}>申请人：{claim.applicant}</Text>
          <Text style={styles.meta}>当前节点：{claim.approvalStage}</Text>
        </View>
        <StatusPill status={claim.status} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    gap: Spacing.four,
    borderRadius: Radius.lg,
    borderWidth: 1,
    borderColor: Colors.light.border,
    backgroundColor: Colors.light.backgroundElement,
    padding: Spacing.four,
    shadowColor: '#0F172A',
    shadowOpacity: 0.08,
    shadowRadius: 14,
    elevation: 2,
  },
  top: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.three,
  },
  iconBox: {
    width: 46,
    height: 46,
    borderRadius: Radius.lg,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.light.primarySoft,
  },
  iconText: {
    color: Colors.light.primary,
    fontWeight: '900',
  },
  titleBlock: {
    flex: 1,
    gap: 3,
  },
  title: {
    color: Colors.light.text,
    fontSize: 17,
    fontWeight: '900',
  },
  amount: {
    color: Colors.light.text,
    fontSize: 20,
    fontWeight: '900',
  },
  bottom: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    gap: Spacing.three,
  },
  meta: {
    color: Colors.light.textSecondary,
    fontSize: 13,
    lineHeight: 21,
  },
});
