// Copyright: (c) 2026 TWWIM UG. All rights reserved.
import { Tag } from 'lucide-react';
import { useTranslation } from '@/i18n/TranslationProvider';

interface ActiveCampaign {
  campaignId: string;
  name: Record<string, string>;
  type: string;
  value: number;
  valueUnit: string;
  mode: string;
  usesCount: number;
  maxRecurringCycles: number | null;
  expiresAt: string | null;
}

interface ActiveCampaignListProps {
  campaigns: ActiveCampaign[];
}

export function ActiveCampaignList({ campaigns }: ActiveCampaignListProps) {
  const { t, locale } = useTranslation();

  if (campaigns.length === 0) return null;

  return (
    <div className="pt-3 border-t border-border">
      <p className="text-sm font-medium text-foreground mb-2 flex items-center gap-1.5">
        <Tag className="h-3.5 w-3.5 text-primary" />
        {t('subscription.activeCampaigns')}
      </p>
      <div className="space-y-2">
        {campaigns.map((c) => {
          const name = c.name[locale] || c.name.en || '';
          const isDiscount = c.type === 'discount';
          const isCapBoost = c.type === 'cap_boost';

          let valueLabel = '';
          if (isDiscount) {
            valueLabel = c.valueUnit === 'percentage'
              ? t('subscription.campaignDiscount', { value: c.value })
              : t('subscription.campaignDiscountFixed', { value: c.value, currency: '\u20AC' });
          } else if (isCapBoost) {
            valueLabel = t('subscription.campaignCapBoost', { value: c.value });
          }

          const isRecurring = c.mode === 'membership';
          const recurringLabel = isRecurring
            ? t('subscription.campaignRecurring')
            : t('subscription.campaignOneTime');

          const cyclesLabel = c.maxRecurringCycles
            ? t('subscription.campaignCyclesUsed', { used: c.usesCount, max: c.maxRecurringCycles })
            : isRecurring
              ? t('subscription.campaignCyclesUnlimited', { used: c.usesCount })
              : null;

          const expiryLabel = c.expiresAt
            ? t('subscription.campaignExpires', { date: new Date(c.expiresAt).toLocaleDateString(locale) })
            : t('subscription.campaignNoExpiry');

          return (
            <div
              key={c.campaignId}
              data-testid="active-campaign-row"
              data-campaign-id={c.campaignId}
              className="flex items-start justify-between gap-4 px-3 py-2 rounded-lg bg-primary/5 border border-primary/10"
            >
              <div className="min-w-0">
                <p className="text-sm font-medium text-foreground" data-testid="active-campaign-name">{name}</p>
                <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 mt-0.5 text-xs text-muted-foreground">
                  <span data-testid="active-campaign-recurring">{recurringLabel}</span>
                  {cyclesLabel && <span data-testid="active-campaign-cycles">{cyclesLabel}</span>}
                  <span>{expiryLabel}</span>
                </div>
              </div>
              <span className="text-sm font-semibold text-primary shrink-0" data-testid="active-campaign-value">{valueLabel}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}