/**
 * 개체번호 표시 컴포넌트
 * 형식: "KOR 001 1223 3440 1" (3-4-4-1 띄어쓰기)
 * cowShortNo(요약번호 4자리)를 강조 표시
 */

interface CowNumberDisplayProps {
  cowId: string | number  // 개체식별번호 (KOR로 시작하는 문자열 또는 숫자)
  cowShortNo?: string
  className?: string
  variant?: 'default' | 'light' | 'highlight'  // highlight: 배경색 강조
  format?: 'full' | 'noKor' | 'shortOnly'  // full: KOR 포함, noKor: KOR 제외, shortOnly: 4자리만
}

/**
 * cowId에서 cowShortNo를 자동 계산하는 함수
 * 규칙: 숫자만 추출 → 마지막 자리 제외 → 뒤에서 4자리
 * 예: 001122334401 → 2334
 */
function extractShortNo(cowId: string): string {
  const digits = cowId.replace(/\D/g, '')
  if (digits.length < 5) return ''
  return digits.slice(-5, -1)
}

export function CowNumberDisplay({ cowId, cowShortNo, className = '', variant = 'default', format = 'full' }: CowNumberDisplayProps) {
  const cowIdStr = String(cowId || '')
  const cleaned = cowIdStr.replace(/\D/g, '')

  if (cleaned.length !== 12) {
    return <span className={className}>{cowId}</span>
  }

  const shortNo = cowShortNo || extractShortNo(cowIdStr)
  const part1 = cleaned.slice(0, 3)
  const part2 = cleaned.slice(3, 7)
  const part3 = cleaned.slice(7, 11)
  const part4 = cleaned.slice(11)

  // variant에 따른 강조 스타일
  const getHighlightClass = () => {
    switch (variant) {
      case 'light':
        return 'text-white font-bold'
      case 'highlight':
        return 'bg-primary/15 text-primary font-bold px-1.5 py-0.5 rounded'
      default:
        return 'bg-blue-100 text-primary font-bold px-1.5 py-0.5 rounded'
    }
  }

  // shortOnly: 4자리만 표시
  if (format === 'shortOnly') {
    return (
      <span className={className}>
        <span className={getHighlightClass()}>{part3}</span>
      </span>
    )
  }

  // noKor: KOR 제외
  if (format === 'noKor') {
    if (shortNo && shortNo.length === 4) {
      return (
        <span className={className}>
          {part1} {part2} <span className={getHighlightClass()}>{part3}</span> {part4}
        </span>
      )
    }
    return (
      <span className={className}>
        {part1} {part2} {part3} {part4}
      </span>
    )
  }

  // full: KOR 포함 (기본값)
  if (shortNo && shortNo.length === 4) {
    return (
      <span className={className}>
        KOR {part1} {part2} <span className={getHighlightClass()}>{part3}</span> {part4}
      </span>
    )
  }

  return (
    <span className={className}>
      KOR {part1} {part2} {part3} {part4}
    </span>
  )
}
