import { useTranslation } from '@/i18n/TranslationProvider';

interface CapBoost {
  campaignId: string;
  name: Record<string, string>;
  amount: number;
}

interface UsageBarProps {
  used: number;
  limit: number;
  label?: string;
  basePlanLimit?: number;
  boosts?: CapBoost[];
}

export function UsageBar({ used, limit, label, basePlanLimit, boosts }: UsageBarProps) {
  const { t, locale } = useTranslation();
  const displayLabel = label || t('subscription.commands');
  const percentage = limit > 0 ? Math.min((used / limit) * 100, 100) : 0;
  const isNearLimit = percentage >= 80;
  const isOverLimit = percentage >= 100;
  const hasBreakdown = basePlanLimit !== undefined && boosts && boosts.length > 0;

  return (
    <div>
      <div className="flex items-center justify-between mb-1">
        <span className="text-sm font-medium text-muted-foreground">{displayLabel}</span>
        <span className={`text-sm font-medium ${isOverLimit ? 'text-destructive' : isNearLimit ? 'text-orange-600' : 'text-foreground'}`}>
          {used.toLocaleString()} / {limit.toLocaleString()}
        </span>
      </div>
      <div className="w-full bg-muted rounded-full h-2.5">
        <div
          className={`h-2.5 rounded-full transition-all duration-500 ${
            isOverLimit ? 'bg-destructive' : isNearLimit ? 'bg-orange-500' : 'bg-primary'
          }`}
          style={{ width: `${percentage}%` }}
        />
      </div>
      <div className="flex items-center justify-between mt-1">
        <p className="text-xs text-muted-foreground">
          {limit - used > 0 ? t('common.remaining', { count: (limit - used).toLocaleString() }) : t('common.limitReached')}
        </p>
      </div>
      {hasBreakdown && (
        <div className="mt-2 text-xs text-muted-foreground space-y-0.5">
          <div className="flex items-center gap-1.5">
            <div className="w-1.5 h-1.5 rounded-full bg-primary/40" />
            <span>{t('subscription.quotaBase')}: {basePlanLimit.toLocaleString()}</span>
          </div>
          {boosts.map((b) => (
            <div key={b.campaignId} className="flex items-center gap-1.5">
              <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
              <span>{t('subscription.quotaBoost', { amount: b.amount.toLocaleString(), name: b.name[locale] || b.name.en })}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}