import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import type { DesktopErrorEnvelope } from '@/lib/types/desktop'

const kindLabel: Record<DesktopErrorEnvelope['kind'], string> = {
  input: '输入校验失败',
  config: '配置错误',
  routing: '项目路由错误',
  scan: '库扫描错误',
  runtime: '运行时错误',
}

const kindVariant: Record<
  DesktopErrorEnvelope['kind'],
  'destructive' | 'secondary' | 'default'
> = {
  input: 'secondary',
  config: 'secondary',
  routing: 'secondary',
  scan: 'secondary',
  runtime: 'destructive',
}

export function ErrorBanner({ envelope }: { envelope: DesktopErrorEnvelope }) {
  return (
    <Card className="border-destructive/40 bg-destructive/5">
      <CardContent className="space-y-2 p-4">
        <div className="flex items-center gap-2">
          <Badge variant={kindVariant[envelope.kind]}>
            {kindLabel[envelope.kind]}
          </Badge>
          <span className="text-sm font-medium text-destructive">
            {envelope.message}
          </span>
        </div>
        {envelope.hint && (
          <p className="text-xs text-muted-foreground">{envelope.hint}</p>
        )}
        {envelope.explain && envelope.explain !== envelope.message && (
          <pre className="max-h-48 overflow-auto rounded-md bg-muted/50 p-2 text-xs">
            {envelope.explain}
          </pre>
        )}
      </CardContent>
    </Card>
  )
}
