'use client';

import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';
import { Gift } from 'lucide-react';
import { formatPrice } from '@/lib/utils';
import type { LoyaltyBalancesResponse } from '@/types/api';

interface PointsTotalCardProps {
  data: LoyaltyBalancesResponse | LoyaltyBalancesResponse['data'] | null | undefined;
  meta?: LoyaltyBalancesResponse['meta'] | null;
}

export function PointsTotalCard({ data, meta }: PointsTotalCardProps) {
  const t = useTranslations('me.loyalty.total_card');
  const params = useParams<{ locale: string }>();
  const locale = params?.locale ?? 'en';

  // Accept either a full LoyaltyBalancesResponse or just the items array
  const items = Array.isArray(data) ? data : (data as LoyaltyBalancesResponse | null)?.data ?? [];
  const resolvedMeta = meta ?? (data as LoyaltyBalancesResponse | null)?.meta ?? null;

  const totalPoints = resolvedMeta?.total_points
    ?? items.reduce((sum, b) => sum + b.balance_points, 0);
  const totalMinor = resolvedMeta?.total_minor_equivalent
    ?? items.reduce((sum, b) => sum + (b.balance_minor_equivalent ?? 0), 0);
  const currency = resolvedMeta?.total_currency ?? 'EGP';

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

  return (
    <div className="mb-4 flex items-center justify-between rounded-xl border border-primary-100 bg-primary-50 p-4">
      <div className="flex items-center gap-3">
        <Gift className="h-6 w-6 text-primary-600" aria-hidden />
        <div>
          <p className="text-xs font-medium text-primary-700">{t('title')}</p>
          <p className="font-bold text-primary-900 tabular-nums">
            {t('points', { points: totalPoints.toLocaleString() })}
          </p>
        </div>
      </div>
      <p className="text-sm font-semibold text-primary-700 tabular-nums">
        {t('worth', { amount: formatPrice(totalMinor, locale, currency) })}
      </p>
    </div>
  );
}