import { HTMLAttributes, ReactNode } from 'react';
import { cn } from '../lib/cn';

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

export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
  variant?: BannerVariant;
  title: ReactNode;
  description?: ReactNode;
  icon?: ReactNode;
  cta?: ReactNode;
  onClose?: () => void;
}

const variantClasses: Record<BannerVariant, string> = {
  info: 'bg-info-soft text-info border-info',
  success: 'bg-success-soft text-success border-success',
  warning: 'bg-warning-soft text-warning border-warning',
  danger: 'bg-danger-soft text-danger border-danger',
};

const titleColor: Record<BannerVariant, string> = {
  info: 'text-info',
  success: 'text-success',
  warning: 'text-warning',
  danger: 'text-danger',
};

function DefaultIcon({ variant }: { variant: BannerVariant }) {
  if (variant === 'success') {
    return (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
        <polyline points="20 6 9 17 4 12" />
      </svg>
    );
  }
  if (variant === 'warning') {
    return (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
        <line x1="12" y1="9" x2="12" y2="13" />
        <line x1="12" y1="17" x2="12.01" y2="17" />
      </svg>
    );
  }
  if (variant === 'danger') {
    return (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
        <circle cx="12" cy="12" r="10" />
        <line x1="15" y1="9" x2="9" y2="15" />
        <line x1="9" y1="9" x2="15" y2="15" />
      </svg>
    );
  }
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
      <circle cx="12" cy="12" r="10" />
      <line x1="12" y1="16" x2="12" y2="12" />
      <line x1="12" y1="8" x2="12.01" y2="8" />
    </svg>
  );
}

export function Banner({
  variant = 'info',
  title,
  description,
  icon,
  cta,
  onClose,
  className,
  ...rest
}: BannerProps) {
  return (
    <div
      role="alert"
      className={cn(
        'flex items-start gap-3 p-4 rounded-xl border w-full',
        variantClasses[variant],
        className,
      )}
      {...rest}
    >
      <div className={cn('shrink-0 mt-0.5', titleColor[variant])}>
        {icon ?? <DefaultIcon variant={variant} />}
      </div>
      <div className="flex-1 min-w-0">
        <div className={cn('text-sm font-medium', titleColor[variant])}>{title}</div>
        {description && (
          <div className="text-xs mt-1 text-text-2">{description}</div>
        )}
      </div>
      {cta && <div className="shrink-0 ml-2 self-center">{cta}</div>}
      {onClose && (
        <button
          type="button"
          onClick={onClose}
          aria-label="Dismiss banner"
          className="shrink-0 text-lg leading-none mt-0.5 text-text-3 hover:text-text transition-colors"
        >
          ×
        </button>
      )}
    </div>
  );
}