/**
 * 호스트 앱(Aislo) 테마를 CAD iframe에 그대로 따라 붙인다.
 *
 * iframe은 호스트와 **같은 오리진**이라 `localStorage["frd_theme"]`를 공유한다.
 * 부모가 토글하며 값을 쓰면 이 문서에는 `storage` 이벤트가 오므로, 부모 쪽에
 * 별도 전달 코드(postMessage)를 넣지 않는다. 값이 없으면 미지정 상태로 두어
 * `ui_template_theme.css`의 `prefers-color-scheme` 폴백이 그대로 먹는다.
 */

import { bumpSceneVersion } from './helpers/scene-version.ts';

const THEME_STORAGE_KEY = 'frd_theme';

/** 테마가 바뀔 때마다 비우는 색 캐시 (CSS 변수 조회·휘도 보정 결과). */
let cssVarCache = new Map<string, string>();
let paintCache = new Map<string, string>();

function applyTheme(value: string | null): void {
	if (value === 'dark' || value === 'light') {
		document.documentElement.setAttribute('data-theme', value);
	} else {
		document.documentElement.removeAttribute('data-theme');
	}
	cssVarCache = new Map();
	paintCache = new Map();
	// 정적 장면 비트맵은 배경·선 색까지 구워 두므로 테마가 바뀌면 다시 굽는다.
	bumpSceneVersion();
}

/** 부팅 시 1회 호출 — 현재 테마 반영 + 이후 변경 구독. */
export function syncThemeFromHost(): void {
	applyTheme(localStorage.getItem(THEME_STORAGE_KEY));
	window.addEventListener('storage', (event) => {
		if (event.key === THEME_STORAGE_KEY) applyTheme(event.newValue);
	});
	// 시스템 설정 폴백으로 도는 중이면 OS 전환도 따라간다.
	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
		if (!document.documentElement.hasAttribute('data-theme')) applyTheme(null);
	});
}

/** 토큰 값 조회 (테마 바뀔 때까지 캐시). */
export function themeColor(varName: string, fallback: string): string {
	const cached = cssVarCache.get(varName);
	if (cached !== undefined) return cached;
	const value =
		getComputedStyle(document.documentElement).getPropertyValue(varName).trim() || fallback;
	cssVarCache.set(varName, value);
	return value;
}

export function isLightTheme(): boolean {
	const attr = document.documentElement.getAttribute('data-theme');
	if (attr === 'dark') return false;
	if (attr === 'light') return true;
	return !window.matchMedia('(prefers-color-scheme: dark)').matches;
}

function relativeLuminance(r: number, g: number, b: number): number {
	return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
}

/**
 * 도면 색 보정 — 저장된 엔티티 색은 다크 배경 기준(밝은 회색·흰색)이라
 * 라이트 모드 흰 종이 위에서는 안 보인다. **그릴 때만** 휘도를 낮춰 색상(색조)은
 * 유지한 채 대비를 살린다. 저장 데이터는 건드리지 않는다.
 */
export function paintColor(color: string): string {
	if (!isLightTheme()) return color;
	const cached = paintCache.get(color);
	if (cached !== undefined) return cached;

	const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color);
	let result = color;
	if (hex) {
		const raw = hex[1];
		const full =
			raw.length === 3
				? raw
						.split('')
						.map((c) => c + c)
						.join('')
				: raw;
		const r = Number.parseInt(full.slice(0, 2), 16);
		const g = Number.parseInt(full.slice(2, 4), 16);
		const b = Number.parseInt(full.slice(4, 6), 16);
		const luminance = relativeLuminance(r, g, b);
		// 흰 배경에서 묻히는 밝기(0.58 초과)만 목표 휘도 0.3으로 눌러 준다.
		if (luminance > 0.58) {
			const scale = 0.3 / luminance;
			const to = (v: number) =>
				Math.round(Math.min(255, v * scale))
					.toString(16)
					.padStart(2, '0');
			result = `#${to(r)}${to(g)}${to(b)}`;
		}
	}
	paintCache.set(color, result);
	return result;
}