// @design-system: domain/CaseOfferCard
/**
 * CaseOfferCard — shows a vendor offer with accept/reject decision controls.
 *
 * CONTRACT props: { offer, canDecide, onDecide }
 */

import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Badge } from '@/components/ui/primitives/Badge';
import type { StringBundle } from '@/lib/i18n/types';
import type { CaseOfferView } from '@/server/support/types';
import { formatAgorotShekels } from '@/lib/money';
import { enumLabel } from '@/lib/enums/define-enum';
import { useLocale } from '@/lib/i18n/react';

export interface CaseOfferCardProps {
  offer: CaseOfferView;
  canDecide: boolean;
  onDecide?: (decision: 'accept' | 'reject') => void;
}

const STATUS_LABEL_KEY: Record<CaseOfferView['status'], keyof StringBundle['cases']['detail']> = {
  pending: 'offer_pending',
  accepted: 'offer_accepted',
  rejected: 'offer_rejected',
  superseded: 'offer_superseded',
  auto_executed: 'offer_auto_executed',
};

export function CaseOfferCard({ offer, canDecide, onDecide }: CaseOfferCardProps) {
  const t = useT('cases');
  const { locale } = useLocale();
  const tDetail = t('detail') as unknown as StringBundle['cases']['detail'];
  const tDecide = t('decide') as unknown as StringBundle['cases']['decide'];

  const amountDisplay = offer.amountCents !== null ? formatAgorotShekels(offer.amountCents) : null;

  const labelKey = STATUS_LABEL_KEY[offer.status] ?? 'offer_pending';
  const outcomeLabel = enumLabel('offer_outcome', offer.outcome, locale, 'customer');

  return (
    <article className="border-border space-y-3 rounded-lg border p-4">
      <div className="flex items-center justify-between gap-2">
        <h3 className="text-foreground text-sm font-semibold">{tDetail[labelKey]}</h3>
        <Badge tone="neutral" size="sm">
          {outcomeLabel}
        </Badge>
      </div>

      {amountDisplay && <p className="text-brand-primary-600 text-lg font-bold">{amountDisplay}</p>}

      {offer.reason && <p className="text-muted text-sm">{offer.reason}</p>}

      {canDecide && offer.status === 'pending' && (
        <div className="flex gap-2 pt-1">
          <Button variant="primary" size="sm" onClick={() => onDecide?.('accept')}>
            {tDecide.accept}
          </Button>
          <Button variant="ghost" size="sm" onClick={() => onDecide?.('reject')}>
            {tDecide.reject}
          </Button>
        </div>
      )}
    </article>
  );
}