import { AlertTriangle } from 'lucide-react'
import { numberToKorean } from '@/lib'
import { useChatInitStore } from '@/features/chat/stores/useChatInitStore'
import { parseRejectSubmission } from '@/features/chat/lib/rejectForm'

// 결렬 제출 요약 — 타결의 BidSummary 와 대칭.
export function RejectSummary({ script }: { script: string }) {
  // VAT 표기는 회사 설정 기준(item_vat_yn). 미관리(hidden)면 비어 라벨을 생략한다.
  const item_vat_yn = useChatInitStore((s) => s.item_vat_yn)
  const { price, reasonLabel, reasonDetail, opinion, extras } = parseRejectSubmission(script)

  return (
    <div className="w-full rounded-2xl border-2 border-[#FFD9D9] bg-white p-5 shadow-md">
      <div className="mb-4 flex items-center gap-2">
        <AlertTriangle className="size-5 text-[#E5484D]" />
        <h3 className="text-sm font-bold text-neutral-90">협상 결렬 사유</h3>
      </div>

      <div className="divide-y divide-border/60 rounded-xl border border-border">
        <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]">{price.toLocaleString()}원</span>
            <span className="text-neutral-70"> ({numberToKorean(price)}원)</span>
            {item_vat_yn ? <span className="text-neutral-70"> {item_vat_yn}</span> : null}
          </span>
        </div>
        <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">
            <span className="text-sm font-semibold text-neutral-90">{reasonLabel || '-'}</span>
            {reasonDetail && <span className="mt-1 block text-xs text-neutral-70">{reasonDetail}</span>}
          </span>
        </div>
        {extras.map((e) => (
          <Row key={e.label} label={e.label} value={e.value} />
        ))}
        {/* 의견은 타결·결렬 공통 기본 필드 — 값이 없어도 항상 표시 */}
        <Row label="의견" value={opinion || '-'} />
      </div>
    </div>
  )
}

function Row({ label, value }: { label: string; value: string }) {
  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">{value}</span>
    </div>
  )
}