import { Brain, ChevronRight } from 'lucide-react'
import type { Conversation, Customer, CustomerStage } from '@/types'
import { Button } from '@/components/ui/button'
import {
  CustomerStageBadge,
  IntentScoreBadge,
  RiskLevelBadge,
  SentimentBadge,
} from '@/components/common/StatusBadges'

const validStages = new Set([
  'initial', 'comparing', 'sample', 'custom', 'closing',
  'fulfillment', 'aftersales', 'repurchase',
])

export function ConversationInsightBar({
  customer,
  conversation,
  onOpenProfile,
}: {
  customer: Customer
  conversation: Conversation
  onOpenProfile: () => void
}) {
  const stage = validStages.has(customer.stage) ? customer.stage : 'initial'
  const summary = customer.aiProfile?.summary || conversation.summary || '收到更多客户消息后将补充客户画像'

  return (
    <div
      data-testid="conversation-insight-bar"
      className="shrink-0 border-b border-slate-100 bg-white px-3 py-2 shadow-[0_1px_0_rgba(15,23,42,.02)] sm:px-4"
    >
      <div className="flex min-w-0 items-center gap-2">
        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-violet-100 bg-violet-50 text-violet-600">
          <Brain className="h-4 w-4" />
        </span>
        <div className="flex min-w-0 flex-1 items-center gap-2">
          <span className="hidden shrink-0 text-[10px] font-semibold uppercase tracking-[0.12em] text-violet-600 sm:inline">
            客户洞察
          </span>
          <p className="truncate text-xs leading-5 text-slate-600">{summary}</p>
        </div>
        <div className="hidden shrink-0 items-center gap-2 md:flex">
          <span className="flex items-center gap-1 text-xs text-muted-foreground">
            意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} />
          </span>
          <SentimentBadge sentiment={customer.sentiment || 'neutral'} />
          <CustomerStageBadge stage={stage as CustomerStage} />
          <RiskLevelBadge level={customer.riskLevel || 'none'} />
        </div>
        <Button variant="ghost" size="sm" onClick={onOpenProfile} title="打开客户画像">
          <span className="hidden lg:inline">客户画像</span>
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>
      <div className="mt-1.5 flex items-center gap-2 overflow-x-auto pb-0.5 md:hidden">
        <span className="flex shrink-0 items-center gap-1 text-[11px]">意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} /></span>
        <SentimentBadge sentiment={customer.sentiment || 'neutral'} />
        <CustomerStageBadge stage={stage as CustomerStage} />
        <RiskLevelBadge level={customer.riskLevel || 'none'} />
      </div>
    </div>
  )
}