// @design-system: domain/AiRecommendationCard
/**
 * AiRecommendationCard — vendor AI suggestion card with accept/dismiss.
 *
 * Shows an AI recommendation (stock nudge, pricing suggestion, schedule opportunity)
 * with accept and dismiss actions. Dismissals persist server-side (caller handles).
 *
 * Tokens: `--color-brand-primary-*`, `--color-mode-vendor-*`,
 *          `--color-surface-raised`, `--color-border`, `--color-text-*`
 */

'use client';

import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { Icon } from '@/components/ui/icons/Icon';
import { Button } from '@/components/ui/primitives/Button';

export interface AiRecommendationCardProps {
  /** Recommendation headline / body text. */
  body: string;
  /** Optional sub-text with more detail. */
  detail?: string;
  /** Called when vendor accepts the recommendation. */
  onAccept?: () => void;
  /** Called when vendor dismisses. */
  onDismiss?: () => void;
  /** Loading state for accept action. */
  accepting?: boolean;
  /** Extra class names. */
  className?: string;
}

/**
 * AiRecommendationCard
 *
 * Tokens: `--color-brand-primary-50/600/700`, `--color-surface-raised`
 */
export function AiRecommendationCard({
  body,
  detail,
  onAccept,
  onDismiss,
  accepting = false,
  className,
}: AiRecommendationCardProps) {
  const t = useT('ai_recommendation_card');

  return (
    <article
      className={cn(
        'bg-surface-raised border-brand-primary-100 rounded-xl border p-4',
        'flex flex-col gap-3',
        className,
      )}
    >
      {/* Header with AI badge */}
      <div className="flex items-start gap-3">
        <div
          className="bg-brand-primary-50 flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
          aria-hidden
        >
          <Icon name="Sparkles" size="sm" color="primary" aria-hidden />
        </div>
        <div className="min-w-0 flex-1">
          <div className="mb-1 flex items-center gap-2">
            <span className="text-brand-primary-600 text-xs font-semibold uppercase tracking-wide">
              {t('badge')}
            </span>
          </div>
          <p className="text-text-primary text-sm leading-snug">{body}</p>
          {detail && <p className="text-text-muted mt-1 text-xs leading-snug">{detail}</p>}
        </div>
      </div>

      {/* Actions */}
      <div className="flex justify-end gap-2">
        {onDismiss && (
          <Button variant="ghost" size="sm" onClick={onDismiss} aria-label={t('dismiss_aria')}>
            {t('dismiss')}
          </Button>
        )}
        {onAccept && (
          <Button
            variant="primary"
            size="sm"
            loading={accepting}
            onClick={onAccept}
            aria-label={t('accept_aria')}
          >
            {t('accept')}
          </Button>
        )}
      </div>
    </article>
  );
}