/**
 * 코드의 tone(의미 토큰)을 실제 Tailwind 클래스로 바꾼다.
 *
 * DB에는 'emerald' 같은 이름표만 저장하고 클래스는 여기서 붙인다. DB에 Tailwind 클래스를
 * 넣으면 화면 스타일을 손볼 때마다 DB를 고쳐야 하기 때문이다.
 *
 * 맵을 풀어 쓴 이유는 Tailwind가 `bg-${tone}-50` 같은 조립식 클래스명을 빌드 시점에
 * 못 찾아 지워버리기 때문이다. 반드시 문자열 전체가 소스에 보여야 한다.
 */

import type { GlyphKind } from '../ui/StatusGlyph'

/** 뱃지: 옅은 배경 + 진한 글씨. 예전 표기. 새 화면은 StatusChip을 쓴다. */
const BADGE: Record<string, string> = {
  slate: 'bg-slate-100 text-slate-700',
  gray: 'bg-gray-100 text-gray-700',
  blue: 'bg-blue-50 text-blue-700',
  sky: 'bg-sky-50 text-sky-700',
  indigo: 'bg-indigo-50 text-indigo-700',
  violet: 'bg-violet-50 text-violet-700',
  emerald: 'bg-emerald-50 text-emerald-700',
  amber: 'bg-amber-50 text-amber-700',
  orange: 'bg-orange-50 text-orange-700',
  red: 'bg-red-50 text-red-700',
}

/** 색 띠: 칸반 컬럼 상단에 그리는 한 줄. 업무구간이 쓴다. */
const BAR: Record<string, string> = {
  slate: 'bg-slate-400',
  gray: 'bg-gray-400',
  blue: 'bg-blue-400',
  sky: 'bg-sky-400',
  indigo: 'bg-indigo-400',
  violet: 'bg-violet-400',
  emerald: 'bg-emerald-400',
  amber: 'bg-amber-400',
  orange: 'bg-orange-400',
  red: 'bg-red-400',
}

const BADGE_FALLBACK = 'bg-gray-100 text-gray-700'
const BAR_FALLBACK = 'bg-gray-300'

/**
 * 모르는 tone이 와도 화면이 깨지지 않게 회색으로 떨어뜨린다 - 코드 관리 화면에서
 * 오타가 들어가도 색만 밋밋해질 뿐 항목이 사라지지는 않아야 한다.
 */
export function badgeClass(tone: string | null | undefined): string {
  return (tone && BADGE[tone]) || BADGE_FALLBACK
}

export function barClass(tone: string | null | undefined): string {
  return (tone && BAR[tone]) || BAR_FALLBACK
}

/**
 * 칩: 왼쪽 컬러 바 + 옅은 배경 + 진한 글씨. StatusChip이 쓴다.
 *
 * 배경만 칠하던 예전 뱃지와 달리 왼쪽에 2px 바를 세우는 이유는, 표에서 상태 칸이
 * 세로로 늘어설 때 그 바들이 한 줄로 정렬돼 눈이 빠르게 훑고 내려갈 수 있어서다.
 */
const CHIP: Record<string, string> = {
  slate: 'border-slate-400 bg-slate-50 text-slate-700',
  gray: 'border-gray-400 bg-gray-50 text-gray-700',
  blue: 'border-blue-500 bg-blue-50 text-blue-800',
  sky: 'border-sky-500 bg-sky-50 text-sky-800',
  indigo: 'border-indigo-500 bg-indigo-50 text-indigo-800',
  violet: 'border-violet-500 bg-violet-50 text-violet-800',
  emerald: 'border-emerald-600 bg-emerald-50 text-emerald-800',
  amber: 'border-amber-500 bg-amber-50 text-amber-800',
  orange: 'border-orange-500 bg-orange-50 text-orange-800',
  red: 'border-red-500 bg-red-50 text-red-800',
}

const CHIP_FALLBACK = 'border-gray-300 bg-gray-50 text-gray-600'

/**
 * tone이 정해지면 글리프 모양도 따라 정해진다. 코드표에 색만 지정해도 알맞은 모양이
 * 붙게 하려는 것이다 - 코드 한 줄 추가할 때마다 모양까지 고르게 하면 금방 어긋난다.
 */
const GLYPH: Record<string, GlyphKind> = {
  emerald: 'done',
  blue: 'progress',
  sky: 'progress',
  indigo: 'progress',
  violet: 'progress',
  amber: 'caution',
  orange: 'caution',
  red: 'blocked',
  slate: 'idle',
  gray: 'idle',
}

export function chipClass(tone: string | null | undefined): string {
  return (tone && CHIP[tone]) || CHIP_FALLBACK
}

export function glyphOf(tone: string | null | undefined): GlyphKind {
  return (tone && GLYPH[tone]) || 'idle'
}