/*
 * 레이아웃 커스터마이저 상태 (zustand) — 강조색(accent) · 밀도(density) + localStorage 지속.
 * themeStore(라이트/다크)·uiStore(사이드바 접기)와 상호보완: 이 store 는 "테마·레이아웃 외" 개인화만 담당.
 *
 * 적용 방식(themeStore stamp 관례와 동일):
 *  - accent: documentElement 인라인 CSS 변수(--color-primary-600/700 + --focus-ring)를 프리셋 hex 로 override.
 *            신규 색 토큰을 발명하지 않고 tokens.css 팔레트 계열을 스와핑한다. 'default'=override 제거(원본 카스케이드·다크 remap 복원).
 *  - density: documentElement[data-density]='comfortable'|'compact' — settings-customizer.css 가 간격/행높이 토큰을 좁힌다.
 */
import { create } from 'zustand';

export type Density = 'comfortable' | 'compact';
export type AccentKey = 'default' | 'indigo' | 'teal' | 'violet' | 'rose' | 'amber';

const ACCENT_KEY = 'kx-accent';
const DENSITY_KEY = 'kx-density';

/** 강조색 프리셋 — 각 프리셋은 base(600)·hover(700) hex 쌍. 'default'=킨텍스 CI(override 없음). */
export interface AccentPreset {
  key: AccentKey;
  /** i18n 폴백 라벨(ko). */
  label: string;
  /** 스와치·미리보기용 대표 색(default 는 브랜드 블루). */
  swatch: string;
  /** override 값. null=override 제거(원본 토큰 사용). */
  base: string | null;
  hover: string | null;
}

export const ACCENT_PRESETS: AccentPreset[] = [
  { key: 'default', label: '브랜드 블루', swatch: '#0066b3', base: null, hover: null },
  { key: 'indigo', label: '인디고', swatch: '#4f46e5', base: '#4f46e5', hover: '#4338ca' },
  { key: 'teal', label: '틸', swatch: '#0d9488', base: '#0d9488', hover: '#0f766e' },
  { key: 'violet', label: '바이올렛', swatch: '#7c3aed', base: '#7c3aed', hover: '#6d28d9' },
  { key: 'rose', label: '로즈', swatch: '#e11d48', base: '#e11d48', hover: '#be123c' },
  { key: 'amber', label: '앰버', swatch: '#d97706', base: '#d97706', hover: '#b45309' },
];

const DEFAULT_ACCENT: AccentKey = 'default';
const DEFAULT_DENSITY: Density = 'comfortable';

function readAccent(): AccentKey {
  if (typeof localStorage === 'undefined') return DEFAULT_ACCENT;
  const v = localStorage.getItem(ACCENT_KEY);
  return ACCENT_PRESETS.some((p) => p.key === v) ? (v as AccentKey) : DEFAULT_ACCENT;
}

function readDensity(): Density {
  if (typeof localStorage === 'undefined') return DEFAULT_DENSITY;
  const v = localStorage.getItem(DENSITY_KEY);
  return v === 'compact' || v === 'comfortable' ? v : DEFAULT_DENSITY;
}

/** accent 프리셋을 documentElement 인라인 변수로 스탬프('default'=제거). */
function stampAccent(key: AccentKey) {
  if (typeof document === 'undefined') return;
  const root = document.documentElement;
  const preset = ACCENT_PRESETS.find((p) => p.key === key) ?? ACCENT_PRESETS[0];
  if (preset.base && preset.hover) {
    root.style.setProperty('--color-primary-600', preset.base);
    root.style.setProperty('--color-primary-700', preset.hover);
    root.style.setProperty('--focus-ring', preset.base);
  } else {
    root.style.removeProperty('--color-primary-600');
    root.style.removeProperty('--color-primary-700');
    root.style.removeProperty('--focus-ring');
  }
}

/** density 를 documentElement[data-density] 로 스탬프. */
function stampDensity(density: Density) {
  if (typeof document === 'undefined') return;
  document.documentElement.dataset.density = density;
}

interface CustomizerState {
  accent: AccentKey;
  density: Density;
  setAccent: (key: AccentKey) => void;
  setDensity: (density: Density) => void;
  /** 기본값 복원(accent=default·density=comfortable). 테마·사이드바는 각 store 소관. */
  reset: () => void;
}

export const useCustomizerStore = create<CustomizerState>((set) => ({
  accent: readAccent(),
  density: readDensity(),

  setAccent: (key) => {
    if (typeof localStorage !== 'undefined') localStorage.setItem(ACCENT_KEY, key);
    stampAccent(key);
    set({ accent: key });
  },

  setDensity: (density) => {
    if (typeof localStorage !== 'undefined') localStorage.setItem(DENSITY_KEY, density);
    stampDensity(density);
    set({ density });
  },

  reset: () => {
    if (typeof localStorage !== 'undefined') {
      localStorage.setItem(ACCENT_KEY, DEFAULT_ACCENT);
      localStorage.setItem(DENSITY_KEY, DEFAULT_DENSITY);
    }
    stampAccent(DEFAULT_ACCENT);
    stampDensity(DEFAULT_DENSITY);
    set({ accent: DEFAULT_ACCENT, density: DEFAULT_DENSITY });
  },
}));

// ── 앱 진입 즉시 스탬프(모듈 import 시점 — main.tsx 렌더 전에 로드) ──
stampAccent(useCustomizerStore.getState().accent);
stampDensity(useCustomizerStore.getState().density);
