/*
 * 테마 상태 (zustand) — 라이트/다크/시스템 선호 + localStorage 지속.
 * document.documentElement[data-theme] 를 항상 스탬프해 셸 밖(로그인 등)에도 적용된다.
 * 값 정의는 CSS(global.css :root[data-theme='dark'] + @media prefers-color-scheme).
 * 라이트가 기본 — 저장값이 없으면 'system'(OS 선호 추종, 대부분 라이트).
 */
import { create } from 'zustand';

export type ThemeMode = 'light' | 'dark' | 'system';
type ResolvedTheme = 'light' | 'dark';

const STORAGE_KEY = 'kx-theme';
const DARK_QUERY = '(prefers-color-scheme: dark)';

function readStored(): ThemeMode {
  if (typeof localStorage === 'undefined') return 'system';
  const v = localStorage.getItem(STORAGE_KEY);
  return v === 'light' || v === 'dark' || v === 'system' ? v : 'system';
}

function systemPrefersDark(): boolean {
  return (
    typeof window !== 'undefined' &&
    typeof window.matchMedia === 'function' &&
    window.matchMedia(DARK_QUERY).matches
  );
}

/** 모드 → 실제 적용 테마(system 은 OS 선호로 해소). */
export function resolveTheme(mode: ThemeMode): ResolvedTheme {
  return mode === 'system' ? (systemPrefersDark() ? 'dark' : 'light') : mode;
}

/** documentElement 에 테마를 스탬프(셸 밖 화면 포함 전역 적용). */
function stamp(mode: ThemeMode): ResolvedTheme {
  const resolved = resolveTheme(mode);
  if (typeof document !== 'undefined') {
    document.documentElement.dataset.theme = resolved;
    document.documentElement.style.colorScheme = resolved;
  }
  return resolved;
}

interface ThemeState {
  mode: ThemeMode;
  resolved: ResolvedTheme;
  /** 명시 모드 설정(light|dark|system) — 지속 + 스탬프. */
  setMode: (mode: ThemeMode) => void;
  /** 현재 표시 테마의 반대편으로 명시 고정(라이트↔다크). */
  toggle: () => void;
}

export const useThemeStore = create<ThemeState>((set, get) => ({
  mode: readStored(),
  resolved: resolveTheme(readStored()),

  setMode: (mode) => {
    if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, mode);
    set({ mode, resolved: stamp(mode) });
  },

  toggle: () => {
    const next: ThemeMode = get().resolved === 'dark' ? 'light' : 'dark';
    get().setMode(next);
  },
}));

// ── 앱 진입 즉시 스탬프(모듈 import 시점 — main.tsx 가 렌더 전에 로드) ──
stamp(useThemeStore.getState().mode);

// ── 시스템 선호 변경 반영(system 모드일 때만 재해소) ──
if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
  window.matchMedia(DARK_QUERY).addEventListener('change', () => {
    if (useThemeStore.getState().mode === 'system') {
      useThemeStore.setState({ resolved: stamp('system') });
    }
  });
}
