import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { colors, radius, spacing, typography } from '../../../theme';

type DailyObjectiveCardProps = {
  label: string;
  target: number;
  done: number;
};

const DailyObjectiveCard = ({ label, target, done }: DailyObjectiveCardProps) => {
  const progress = Math.min(done, target) / target;
  const hasExtra = done > target;
  const extra = done - target;

  return (
    <View style={styles.card}>
      <Text style={styles.label}>{label}</Text>

      <View style={styles.barBackground}>
        <View style={[styles.barFill, { width: `${progress * 100}%` }]} />
      </View>

      <Text style={styles.text}>
        Objectif: {target} | Total: {done}
        {hasExtra ? ` (+${extra})` : ''}
      </Text>

      {hasExtra && (
        <View style={styles.extraBadge}>
          <Text style={styles.extraText}>+{extra} visites supplémentaires</Text>
        </View>
      )}
    </View>
  );
};

export default DailyObjectiveCard;

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.white,
    padding: 14,
    borderRadius: radius.lg,
    marginBottom: spacing.md,
  },
  label: {
    fontWeight: typography.fontWeight.semibold,
    color: colors.textPrimary,
  },
  barBackground: {
    height: 12,
    backgroundColor: colors.gray200,
    borderRadius: 6,
    marginTop: spacing.sm,
    overflow: 'hidden',
  },
  barFill: {
    height: '100%',
    backgroundColor: colors.primary,
  },
  text: {
    fontSize: typography.fontSize.sm,
    color: colors.textPrimary,
    marginTop: spacing.xs,
  },
  extraBadge: {
    marginTop: spacing.xs,
    paddingHorizontal: 8,
    paddingVertical: 2,
    backgroundColor: '#FBBF24',
    borderRadius: 8,
    alignSelf: 'flex-start',
  },
  extraText: {
    fontSize: 10,
    color: colors.textPrimary,
    fontWeight: typography.fontWeight.semibold,
  },
});