'use client';

import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import { formatPrice } from '@/lib/utils';
import type { LoyaltyBalance } from '@/types/api';

interface PointsRedemptionRowProps {
  vendorBalances: LoyaltyBalance[];
  /** Map of vendor_public_id → minor amount currently applied (0 = not applied). */
  appliedByVendor: Record<string, number>;
  onToggle: (vendorPublicId: string) => void;
  /** BCP 47 locale for number formatting, defaults to "en". */
  locale?: string;
}

export function PointsRedemptionRow({
  vendorBalances,
  appliedByVendor,
  onToggle,
  locale = 'en',
}: PointsRedemptionRowProps) {
  const t = useTranslations('checkout.loyalty');

  // Only show vendors with a positive loyalty balance.
  const eligible = vendorBalances.filter((v) => v.balance_minor_equivalent > 0);

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

  return (
    <div data-testid="points-redemption-row" className="space-y-2">
      {eligible.map((v) => {
        const isApplied = (appliedByVendor[v.vendor_public_id] ?? 0) > 0;
        const id = `loyalty-toggle-${v.vendor_public_id}`;

        return (
          <div
            key={v.vendor_public_id}
            className={cn(
              'flex items-center justify-between rounded-lg border px-4 py-3 text-sm transition-colors',
              isApplied
                ? 'border-success/40 bg-success/5'
                : 'border-neutral-200 bg-white',
            )}
          >
            <div className="flex flex-col gap-0.5">
              <span className="font-medium text-neutral-800">{v.vendor_name}</span>
              <span className="text-xs text-neutral-500">
                {t('points_available', { points: v.balance_points })}{' '}
                ·{' '}
                {formatPrice(v.balance_minor_equivalent, locale)}
              </span>
              {isApplied && (
                <span className="text-xs text-success">
                  {t('redeemed')} {formatPrice(v.balance_minor_equivalent, locale)}
                </span>
              )}
            </div>

            <label
              htmlFor={id}
              className="flex cursor-pointer items-center gap-2 select-none"
            >
              <span className="text-xs text-neutral-500">
                {isApplied ? t('redeemed_short') : t('redeem')}
              </span>
              <input
                type="checkbox"
                id={id}
                checked={isApplied}
                onChange={() => onToggle(v.vendor_public_id)}
                className="sr-only"
                aria-label={`${t('redeem')} ${v.vendor_name}`}
              />
              {/* Visible toggle pill */}
              <span
                aria-hidden="true"
                className={cn(
                  'relative inline-block h-5 w-9 rounded-full transition-colors',
                  isApplied ? 'bg-success' : 'bg-neutral-300',
                )}
              >
                <span
                  className={cn(
                    'absolute top-0.5 start-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform',
                    isApplied ? 'translate-x-4' : 'translate-x-0',
                  )}
                />
              </span>
            </label>
          </div>
        );
      })}
    </div>
  );
}