import React from 'react';
import { Badge } from '@/components/ui/badge';
import type { EventAddonSummary } from '../../api';

type Props = {
  addons: EventAddonSummary[];
  t: (key: string, fallback: string, options?: Record<string, unknown>) => string;
};

export function AddonSummaryList({ addons, t }: Props) {
  if (!addons.length) {
    return null;
  }

  return (
    <div className="space-y-3">
      {addons.map((addon) => (
        <div key={addon.id} className="flex flex-col gap-1 rounded-2xl border border-slate-200/70 bg-white/70 p-4 text-sm dark:border-white/10 dark:bg-white/5 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="font-semibold text-slate-900 dark:text-white">{addon.label ?? addon.key}</p>
            <p className="text-xs text-slate-500">
              {buildSummary(addon, t)}
            </p>
            {addon.purchased_at ? (
              <p className="text-xs text-slate-400">
                {t('events.sections.addons.purchasedAt', `Purchased ${new Date(addon.purchased_at).toLocaleString()}`, {
                  date: new Date(addon.purchased_at).toLocaleString(),
                })}
              </p>
            ) : null}
          </div>
          <Badge variant={addon.status === 'completed' ? 'outline' : addon.status === 'pending' ? 'secondary' : 'destructive'}>
            {t(`events.sections.addons.status.${addon.status}`, addon.status)}
          </Badge>
        </div>
      ))}
    </div>
  );
}

function buildSummary(addon: EventAddonSummary, t: (key: string, fallback: string, options?: Record<string, unknown>) => string): string {
  const parts: string[] = [];
  if (addon.extra_photos > 0) {
    parts.push(
      t('events.sections.addons.summary.photos', `+${addon.extra_photos} photos`, {
        count: addon.extra_photos.toLocaleString(),
      }),
    );
  }
  if (addon.extra_guests > 0) {
    parts.push(
      t('events.sections.addons.summary.guests', `+${addon.extra_guests} guests`, {
        count: addon.extra_guests.toLocaleString(),
      }),
    );
  }
  if (addon.extra_gallery_days > 0) {
    parts.push(
      t('events.sections.addons.summary.gallery', `+${addon.extra_gallery_days} days gallery`, {
        count: addon.extra_gallery_days,
      }),
    );
  }

  return parts.join(' · ');
}