/* =============================================================================
 * ui_template_palette.ts
 * 캔버스(2D 지도)용 색 조회 — 색 값의 정의처는 `ui_template_theme.css` 하나뿐이다.
 *
 * CSS로 칠할 수 없는 `<canvas>` 그림도 색은 테마 변수에서 읽어야 화면마다 값이
 * 갈라지지 않는다. `getComputedStyle`은 호출할 때마다 스타일 재계산을 유발하므로
 * 한 번 읽은 값은 캐시하고, 테마가 바뀔 때(`data-theme` 변경)만 비운다.
 * ========================================================================== */

const cache = new Map<string, string>();
let watching = false;

/** 테마가 바뀌면 캐시를 버린다 — 다음 렌더에서 새 값으로 다시 읽는다. */
function watchThemeChange(): void {
  if (watching || typeof MutationObserver === "undefined") return;
  watching = true;
  new MutationObserver(() => cache.clear()).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ["data-theme"],
  });
}

/**
 * 테마 CSS 변수 하나를 읽는다.
 *
 * @param name 변수 이름(`--map-route` 처럼 두 하이픈까지 포함)
 * @param fallback 스타일이 아직 붙기 전(초기 렌더)이나 변수가 없을 때 쓸 값
 */
export function themeColor(name: string, fallback: string): string {
  const cached = cache.get(name);
  if (cached !== undefined) return cached;
  watchThemeChange();
  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  const resolved = value || fallback;
  // 값이 비어 있으면(스타일 미적용) 캐시하지 않는다 — 다음 렌더에서 다시 읽게 둔다.
  if (value) cache.set(name, resolved);
  return resolved;
}

/** 585-1 예정노선 지점 색 — 그림 색 여섯 차례 돌림(지점 1 · 2 …) · 핀 · 목록 줄 같은 번호 같은 색 */
const POINT_COLORS = [
  ["--draw-chart-0", "#5b8def"],
  ["--draw-chart-1", "#34c38f"],
  ["--draw-chart-2", "#f1963b"],
  ["--draw-chart-3", "#9b6dde"],
  ["--draw-warning", "#b8860b"],
  ["--draw-danger", "#c0392b"],
] as const;
export function pointColor(index: number): string {
  const [name, fallback] = POINT_COLORS[index % POINT_COLORS.length];
  return themeColor(name, fallback);
}

/** 600-1 예정노선 선마다 차례 색 — 다섯 차례 돌림 · 지도 전용 값(테마 안 따름 · 겹 색과 가름) · 지도 선 · 구역 목록 색 띠가 같은 번호 같은 색 */
const ROUTE_COLORS = [
  ["--draw-map-route-0", "#3df5c4"],
  ["--draw-map-route-1", "#6db8ff"],
  ["--draw-map-route-2", "#cf9dff"],
  ["--draw-map-route-3", "#ff8cbc"],
  ["--draw-map-route-4", "#9dff4d"],
] as const;
export function routeColor(index: number): string {
  const [name, fallback] = ROUTE_COLORS[((index % 5) + 5) % 5];
  return themeColor(name, fallback);
}