import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, radius, spacing, typography } from '../../../theme';
import { ExpenseObjectiveItem } from '../types/expenses.types';
import { clampPercent, formatMoney, getObjectiveProgressColor } from '../utils/expenses.formatters';

type ExpenseObjectiveCardProps = {
  item: ExpenseObjectiveItem;
};

const ExpenseObjectiveCard = ({ item }: ExpenseObjectiveCardProps) => {
  const progress = clampPercent(item.done);
  const progressColor = getObjectiveProgressColor(progress, colors);

  return (
    <View style={styles.card}>
      <View style={styles.header}>
        <View style={styles.badge}>
          <Text style={styles.badgeText}>{item.type}</Text>
        </View>

        <Text style={styles.gain}>{formatMoney(item.gain)}</Text>
      </View>

      <View style={styles.metricsRow}>
        <View style={styles.metricBox}>
          <Text style={styles.metricLabel}>Objectif</Text>
          <Text style={styles.metricValue}>{item.objectif}</Text>
        </View>

        <View style={styles.metricBox}>
          <Text style={styles.metricLabel}>Réalisé</Text>
          <Text style={styles.metricValue}>{item.realise}</Text>
        </View>

        <View style={styles.metricBox}>
          <Text style={styles.metricLabel}>Progression</Text>
          <Text style={[styles.metricValue, { color: progressColor }]}>
            {progress}%
          </Text>
        </View>
      </View>

      <View style={styles.progressTrack}>
        <View
          style={[
            styles.progressFill,
            {
              width: `${progress}%`,
              backgroundColor: progressColor,
            },
          ]}
        />
      </View>
    </View>
  );
};

export default ExpenseObjectiveCard;

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.white,
    borderRadius: radius.xl,
    padding: spacing.lg,
    marginBottom: spacing.md,
    borderWidth: 1,
    borderColor: colors.gray200,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  badge: {
    backgroundColor: colors.gray100,
    paddingHorizontal: spacing.sm,
    paddingVertical: 6,
    borderRadius: radius.md,
  },
  badgeText: {
    fontSize: typography.fontSize.xs,
    color: colors.textPrimary,
    fontWeight: typography.fontWeight.semibold,
  },
  gain: {
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.bold,
    color: colors.success || '#6FBF73',
  },
  metricsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: spacing.md,
  },
  metricBox: {
    flex: 1,
  },
  metricLabel: {
    fontSize: typography.fontSize.xs,
    color: colors.textMuted,
    marginBottom: 4,
  },
  metricValue: {
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.bold,
    color: colors.textPrimary,
  },
  progressTrack: {
    height: 8,
    backgroundColor: colors.gray200,
    borderRadius: 999,
    marginTop: spacing.md,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    borderRadius: 999,
  },
});