/**
 * InlineAlert 内联告警组件 — 用于表单内和工作流中展示提示、警告、错误
 * 支持多种语义类型和可关闭模式
 */
import { ReactNode, useState } from 'react'
import clsx from 'clsx'
import { Info, AlertTriangle, XCircle, CheckCircle, X } from 'lucide-react'

type AlertType = 'info' | 'warning' | 'error' | 'success'

interface InlineAlertProps {
  type: AlertType
  title?: string
  children?: ReactNode
  closable?: boolean
  onClose?: () => void
  className?: string
}

const config: Record<AlertType, { icon: typeof Info; bg: string; text: string; border: string; iconColor: string }> = {
  info:    { icon: Info,          bg: 'bg-info/5',       text: 'text-info',       border: 'border-info/20',       iconColor: 'text-info' },
  warning: { icon: AlertTriangle, bg: 'bg-warning/5',    text: 'text-warning',    border: 'border-warning/20',    iconColor: 'text-warning' },
  error:   { icon: XCircle,       bg: 'bg-danger/5',     text: 'text-danger',     border: 'border-danger/20',     iconColor: 'text-danger' },
  success: { icon: CheckCircle,   bg: 'bg-success/5',    text: 'text-success',    border: 'border-success/20',    iconColor: 'text-success' },
}

/**
 * 内联告警 — 工作流中的质量门禁提示
 */
export function InlineAlert({ type, title, children, closable, onClose, className }: InlineAlertProps) {
  const [closed, setClosed] = useState(false)
  if (closed) return null

  const c = config[type]
  const Icon = c.icon

  return (
    <div className={clsx('flex items-start gap-2 rounded-md border px-3 py-2 text-sm', c.bg, c.border, c.text, className)}>
      <Icon className={clsx('w-4 h-4 mt-0.5 shrink-0', c.iconColor)} />
      <div className="flex-1 min-w-0">
        {title && <div className="font-medium">{title}</div>}
        {children && <div className="text-xs mt-0.5 opacity-90">{children}</div>}
      </div>
      {closable && (
        <button
          onClick={() => { setClosed(true); onClose?.() }}
          className="shrink-0 opacity-60 hover:opacity-100 transition-opacity"
          aria-label="关闭"
        >
          <X className="w-3.5 h-3.5" />
        </button>
      )}
    </div>
  )
}
