/**
 * 상태 글리프. 10×10 정사각 격자 위에 90°와 45°만 써서 그린다 - 곡선을 하나도 넣지 않은 것은
 * 이 화면들이 법률 서식(체크칸·도장·서류 모서리)의 어휘를 따르기 때문이다.
 *
 * 모양 자체가 상태를 담는다는 점이 핵심이다. 예전에는 색만 달랐던 탓에, 색약 사용자나
 * 흑백 출력에서는 "완료"와 "개방불가"가 똑같이 보였다.
 *
 * 색은 넣지 않는다. currentColor를 그대로 물려받아 감싼 칩의 글자색을 따른다.
 */

export type GlyphKind =
  /** 아직 손대지 않음 - 빈 사각 */
  | 'idle'
  /** 진행 중 - 왼쪽 절반만 채운 사각 */
  | 'progress'
  /** 끝남 - 채운 사각에 각진 체크 */
  | 'done'
  /** 확인이 필요함 - 삼각 */
  | 'caution'
  /** 막힘·불가 - 사각을 가로지르는 사선 */
  | 'blocked'
  /** 자료·문서 - 모서리를 접은 사각 */
  | 'document'
  /** 메모 - 가로줄 세 개 */
  | 'note'
  /** 끝난 항목 표시 - 상자 없는 각진 체크. 이미 색을 채운 자리 위에 얹을 때 쓴다. */
  | 'check'

interface Props {
  kind: GlyphKind
  /** 픽셀 크기. 표 안에서는 10, 제목 옆에서는 12를 쓴다. */
  size?: number
  className?: string
}

export default function StatusGlyph({ kind, size = 10, className = '' }: Props) {
  const common = {
    width: size,
    height: size,
    viewBox: '0 0 10 10',
    // 상태 이름은 옆의 글자가 이미 말해 준다. 보조기술이 같은 말을 두 번 읽지 않게 감춘다.
    'aria-hidden': true,
    focusable: false,
    className: `shrink-0 ${className}`,
  } as const

  const stroke = {
    stroke: 'currentColor',
    strokeWidth: 1.6,
    strokeLinecap: 'square',
    strokeLinejoin: 'miter',
    fill: 'none',
  } as const

  switch (kind) {
    case 'idle':
      return (
        <svg {...common}>
          <rect x="1.6" y="1.6" width="6.8" height="6.8" {...stroke} />
        </svg>
      )

    case 'progress':
      return (
        <svg {...common}>
          <rect x="1.6" y="1.6" width="6.8" height="6.8" {...stroke} />
          <rect x="1.6" y="1.6" width="3.4" height="6.8" fill="currentColor" />
        </svg>
      )

    case 'done':
      return (
        <svg {...common}>
          <rect x="1" y="1" width="8" height="8" fill="currentColor" />
          <polyline
            points="2.9,5.1 4.3,6.5 7.1,3.4"
            stroke="#fff"
            strokeWidth="1.5"
            strokeLinecap="square"
            strokeLinejoin="miter"
            fill="none"
          />
        </svg>
      )

    case 'caution':
      return (
        <svg {...common}>
          <polygon points="5,1 9.2,8.6 0.8,8.6" {...stroke} />
          <line x1="5" y1="4" x2="5" y2="6.2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
          <line x1="5" y1="7.2" x2="5" y2="7.3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
        </svg>
      )

    case 'blocked':
      return (
        <svg {...common}>
          <rect x="1.6" y="1.6" width="6.8" height="6.8" {...stroke} />
          <line x1="2.4" y1="7.6" x2="7.6" y2="2.4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square" />
        </svg>
      )

    case 'document':
      return (
        <svg {...common}>
          {/* 오른쪽 위 모서리를 접은 종이 */}
          <polygon points="1.8,1 6.4,1 8.4,3 8.4,9 1.8,9" {...stroke} />
          <polyline points="6.4,1 6.4,3 8.4,3" {...stroke} />
        </svg>
      )

    case 'note':
      return (
        <svg {...common}>
          <line x1="1.4" y1="2.6" x2="8.6" y2="2.6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
          <line x1="1.4" y1="5" x2="8.6" y2="5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
          <line x1="1.4" y1="7.4" x2="5.8" y2="7.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
        </svg>
      )

    case 'check':
      return (
        <svg {...common}>
          <polyline points="1.4,5 3.9,7.6 8.6,2.4" {...stroke} strokeWidth={1.8} />
        </svg>
      )
  }
}
