import { AlertTriangle, CheckCircle2, Info, XCircle } from 'lucide-react'
import type { ReactNode } from 'react'

import { cn } from '@/lib/cn'

export type AlertTone = 'info' | 'success' | 'warning' | 'error'

const TONES: Record<AlertTone, { classes: string; Icon: typeof Info; role: 'status' | 'alert' }> = {
  info: { classes: 'bg-accent-soft border-accent-soft-border text-text-primary', Icon: Info, role: 'status' },
  success: { classes: 'bg-positive-soft border-transparent text-text-primary', Icon: CheckCircle2, role: 'status' },
  warning: { classes: 'bg-caution-soft border-transparent text-text-primary', Icon: AlertTriangle, role: 'status' },
  // Errors are announced assertively: the user needs to know their action failed.
  error: { classes: 'bg-critical-soft border-transparent text-text-primary', Icon: XCircle, role: 'alert' },
}

const ICON_COLOURS: Record<AlertTone, string> = {
  info: 'text-text-accent',
  success: 'text-positive-text',
  warning: 'text-caution-text',
  error: 'text-critical-text',
}

export function Alert({
  tone = 'info',
  title,
  className,
  children,
}: {
  tone?: AlertTone
  title?: string
  className?: string
  children?: ReactNode
}) {
  const { classes, Icon, role } = TONES[tone]

  return (
    <div role={role} className={cn('flex gap-3 rounded-lg border px-4 py-3', classes, className)}>
      <Icon aria-hidden className={cn('mt-0.5 size-4 shrink-0', ICON_COLOURS[tone])} />
      <div className="min-w-0 text-sm">
        {title !== undefined && <p className="font-medium">{title}</p>}
        {children !== undefined && (
          <div className={cn('text-text-secondary', title !== undefined && 'mt-1')}>{children}</div>
        )}
      </div>
    </div>
  )
}
