/**
 * 决策卡组件
 *
 * 在决策中心列表中展示单个决策卡，点击可展开详情抽屉。
 */
import { ChevronRight } from 'lucide-react'
import { cn, formatCurrency } from '@/lib/utils'
import type { DecisionCard } from '@/lib/decision-aggregator'
import { SOURCE_LABELS, LEVEL_LABELS } from '@/lib/decision-aggregator'

interface DecisionCardProps {
  decision: DecisionCard
  index: number
  approved: boolean
  onOpen: (d: DecisionCard) => void
}

/** 来源类型颜色 */
const SOURCE_COLORS: Record<string, string> = {
  profit_opportunity: 'bg-purple-100 text-purple-700',
  risk_alert: 'bg-red-100 text-red-700',
  task_anomaly: 'bg-amber-100 text-amber-700',
}

/** 等级颜色 */
const LEVEL_COLORS: Record<string, string> = {
  L1: 'bg-red-50 text-red-600 border border-red-200',
  L2: 'bg-amber-50 text-amber-600 border border-amber-200',
  L3: 'bg-green-50 text-green-600 border border-green-200',
}

export function DecisionCardItem({ decision, index, approved, onOpen }: DecisionCardProps) {
  const isApproved = approved || decision.status === '已批准'

  return (
    <button
      className="flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors hover:bg-muted/40"
      onClick={() => onOpen(decision)}
    >
      {/* 排名序号 */}
      <span
        className={cn(
          'flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold',
          index < 3 ? 'bg-purple-600 text-white' : 'bg-muted text-muted-foreground',
        )}
      >
        {index + 1}
      </span>

      {/* 主体内容 */}
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className={cn('rounded px-1.5 py-0.5 text-[10px] font-medium', SOURCE_COLORS[decision.sourceType])}>
            {SOURCE_LABELS[decision.sourceType]}
          </span>
          <span className={cn('rounded px-1.5 py-0.5 text-[10px] font-medium', LEVEL_COLORS[decision.level])}>
            {LEVEL_LABELS[decision.level]}
          </span>
          <span className="text-[10px] text-muted-foreground">{decision.agentName}</span>
        </div>
        <p className="mt-1 truncate text-sm font-medium">{decision.title}</p>
        <p className="mt-0.5 truncate text-xs text-muted-foreground">{decision.reason}</p>
      </div>

      {/* 影响金额 + 状态 */}
      <div className="shrink-0 text-right">
        {decision.impactAmount > 0 ? (
          <p className="text-sm font-bold text-green-600">{formatCurrency(decision.impactAmount)}</p>
        ) : (
          <p className="text-sm font-medium text-muted-foreground">{decision.impactDescription}</p>
        )}
        <p className="text-[10px] text-muted-foreground">{decision.deadline}</p>
      </div>

      {/* 状态标签 */}
      <span
        className={cn(
          'shrink-0 rounded px-2 py-0.5 text-[10px] font-medium',
          isApproved ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600',
        )}
      >
        {isApproved ? '已批准' : decision.status}
      </span>

      <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
    </button>
  )
}