import { CheckCircle2 } from 'lucide-react'
import { numberToKorean } from '@/features/chat/lib/koreanNumber'

interface BidSummaryProps {
  itemName: string
  itemCode: string
  bidPrice: number
  deliveryType: string
  isVAT: boolean
}

// 투찰 결과 요약 카드 (보고서식 final-summary)
export function BidSummary({ itemName, itemCode, bidPrice, deliveryType, isVAT }: BidSummaryProps) {
  const priceStr = (bidPrice || 0).toLocaleString()
  return (
    <div className="w-full rounded-2xl border-2 border-brand-light bg-white p-5 shadow-md">
      <div className="mb-4 flex items-center gap-2">
        <CheckCircle2 className="size-5 text-success" />
        <h3 className="text-sm font-bold text-neutral-90">투찰 결과 요약</h3>
      </div>

      <div className="divide-y divide-border/60 rounded-xl border border-border">
        <Row label="상품명" value={itemName || '-'} />
        <Row label="상품 코드" value={itemCode || '-'} mono />
        <div className="flex items-start justify-between gap-3 px-4 py-3">
          <span className="shrink-0 text-sm text-neutral-60">투찰 가격</span>
          <span className="min-w-0 flex-1 break-keep text-right text-sm">
            <span className="font-bold text-[#E5484D]">{priceStr}원</span>
            <span className="text-neutral-70"> ({numberToKorean(bidPrice || 0)}원)</span>
            <span className="text-neutral-70"> {isVAT ? 'VAT포함' : 'VAT별도'}</span>
          </span>
        </div>
        <Row label="배송형태" value={deliveryType || '-'} />
      </div>
    </div>
  )
}

function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div className="flex items-start justify-between gap-3 px-4 py-3">
      <span className="shrink-0 text-sm text-neutral-60">{label}</span>
      <span
        className={`min-w-0 flex-1 break-keep text-right text-sm font-semibold text-neutral-90 ${mono ? 'font-mono' : ''}`}
      >
        {value}
      </span>
    </div>
  )
}