// @design-system: domain/RejectionBanner

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

/** Props for RejectionBanner */
export interface RejectionBannerProps {
  /**
   * Visual severity.
   * - `'danger'` (default) — red tint; used for deal rejections with onResubmit.
   * - `'warning'` — amber tint; used for image rejections with replaceHref link.
   */
  severity?: 'danger' | 'warning';
  /**
   * Override the heading text. Pass an already-translated string.
   * Falls back to the `domain_rejection.title` i18n key when omitted.
   */
  title?: string;
  /** Short rejection reason (raw string, e.g. from AI verdict). */
  reason: string;
  /** Detailed rejection explanation. */
  detail?: string;
  /** Called when the Resubmit button is clicked (danger variant). */
  onResubmit?: () => void;
  /**
   * URL for the "Replace image" link-CTA (warning variant).
   * Rendered as an `<a>` so it navigates without JS event handling.
   */
  replaceHref?: string;
  /** Label for the replace CTA link. Falls back to `domain_rejection.replace_cta` key. */
  replaceLabel?: string;
  /** Additional class names. */
  className?: string;
}

/**
 * RejectionBanner - tinted block showing a rejection reason + action CTA (FDS §5.6).
 *
 * Two severity modes:
 * - `danger` (default) — red, for deal rejections, shows Resubmit button via `onResubmit`.
 * - `warning` — amber, for image rejections, shows Replace link via `replaceHref`.
 *
 * @example
 * ```tsx
 * // Deal rejection (existing API — unchanged)
 * <RejectionBanner reason="Image quality too low" onResubmit={handleResubmit} />
 *
 * // Image rejection (new API)
 * <RejectionBanner
 *   severity="warning"
 *   title={t('rejection_banner_title_logo')}
 *   reason={notification.payload.reason}
 *   replaceHref="/vendor/settings?tab=logo"
 * />
 * ```
 */
export function RejectionBanner({
  severity = 'danger',
  title,
  reason,
  detail,
  onResubmit,
  replaceHref,
  replaceLabel,
  className,
}: RejectionBannerProps) {
  const t = useT('domain_rejection');

  const isWarning = severity === 'warning';

  const containerCls = isWarning
    ? 'border-warning-500 bg-warning-50'
    : 'border-danger-500 bg-danger-50';

  const titleCls = isWarning ? 'text-warning-700' : 'text-danger-700';
  const reasonCls = isWarning ? 'text-warning-600' : 'text-danger-600';
  const detailCls = isWarning ? 'text-warning-500' : 'text-danger-500';

  const headingText = title ?? t('title');
  const replaceCta = replaceLabel ?? t('replace_cta');

  return (
    <aside
      className={cn('flex gap-3 rounded-xl border p-4', containerCls, className)}
      role="alert"
      aria-label={headingText}
    >
      <span
        className={cn('mt-0.5 shrink-0', isWarning ? 'text-warning-600' : 'text-danger-600')}
        aria-hidden="true"
      >
        {/* color="inherit" lets the parent span's text-* class drive icon color */}
        <Icon name="AlertCircle" size="sm" color={isWarning ? 'inherit' : 'danger'} />
      </span>
      <div className="min-w-0 flex-1">
        <p className={cn('text-sm font-semibold', titleCls)}>{headingText}</p>
        <p className={cn('mt-0.5 text-sm', reasonCls)}>{reason}</p>
        {detail && <p className={cn('mt-1 text-xs', detailCls)}>{detail}</p>}
        {onResubmit && (
          <Button variant="danger" size="sm" onClick={onResubmit} className="mt-3">
            {t('resubmit')}
          </Button>
        )}
        {replaceHref && (
          <a
            href={replaceHref}
            className={cn(
              'mt-3 inline-flex items-center gap-1 rounded-lg text-sm font-medium underline-offset-2 hover:underline focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none',
              isWarning
                ? 'text-warning-700 focus-visible:ring-warning-500'
                : 'text-danger-700 focus-visible:ring-danger-500',
            )}
          >
            {replaceCta}
          </a>
        )}
      </div>
    </aside>
  );
}