// @design-system: feedback/InlineNotice
/**
 * InlineNotice - banner-style contextual notice.
 *
 * Tones: success / warning / danger / info.
 *
 * @example
 * <InlineNotice tone="warning" title={t('attention')} description={t('deal_expiring_soon')} />
 */

import { AlertCircle, AlertTriangle, CheckCircle2, Info, X } from 'lucide-react';
import { type ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';

export type NoticeTone = 'success' | 'warning' | 'danger' | 'info';

interface ToneConfig {
  bg: string;
  border: string;
  icon: string;
  title: string;
}

const toneConfig: Record<NoticeTone, ToneConfig> = {
  success: {
    bg: 'bg-success-50',
    border: 'border-success-500',
    icon: 'text-success-600',
    title: 'text-success-700',
  },
  warning: {
    bg: 'bg-warning-50',
    border: 'border-warning-500',
    icon: 'text-warning-600',
    title: 'text-warning-700',
  },
  danger: {
    bg: 'bg-danger-50',
    border: 'border-danger-500',
    icon: 'text-danger-600',
    title: 'text-danger-700',
  },
  info: {
    bg: 'bg-info-50',
    border: 'border-info-500',
    icon: 'text-info-600',
    title: 'text-info-700',
  },
};

const toneIcons: Record<NoticeTone, ReactNode> = {
  success: <CheckCircle2 width={16} height={16} aria-hidden="true" />,
  warning: <AlertTriangle width={16} height={16} aria-hidden="true" />,
  danger: <AlertCircle width={16} height={16} aria-hidden="true" />,
  info: <Info width={16} height={16} aria-hidden="true" />,
};

const roleMap: Record<NoticeTone, string> = {
  success: 'status',
  warning: 'status',
  danger: 'alert',
  info: 'status',
};

export interface InlineNoticeProps {
  tone?: NoticeTone;
  title?: string;
  description?: string;
  /** Custom icon override. */
  icon?: ReactNode;
  /** Optional dismiss callback. */
  onDismiss?: () => void;
  className?: string;
}

export function InlineNotice({
  tone = 'info',
  title,
  description,
  icon,
  onDismiss,
  className,
}: InlineNoticeProps) {
  const t = useT('common');
  const cfg = toneConfig[tone];

  return (
    <div
      role={roleMap[tone]}
      data-testid="inline-notice"
      data-tone={tone}
      className={cn('flex gap-3', 'rounded-lg', 'border-s-4', 'p-3', cfg.bg, cfg.border, className)}
    >
      <span className={cn('mt-0.5 shrink-0', cfg.icon)}>{icon ?? toneIcons[tone]}</span>
      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
        {title && <p className={cn('text-sm font-bold', cfg.title)}>{title}</p>}
        {description && <p className="text-text-secondary text-sm">{description}</p>}
      </div>
      {onDismiss && (
        <button
          type="button"
          aria-label={t('close')}
          onClick={onDismiss}
          className={cn(
            'shrink-0 self-start',
            'flex size-[var(--spacing-6)] items-center justify-center',
            'rounded-sm',
            'text-text-muted hover:text-text-primary',
            'transition-colors duration-[var(--duration-fast)]',
            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
          )}
        >
          <X width={12} height={12} aria-hidden="true" />
        </button>
      )}
    </div>
  );
}