/*
 * 셸 UI 상태 (zustand) — 사이드바 접힘(navCollapsed) 토글 + localStorage 지속.
 * WISE(UIWS) uiStore 패턴 이식: 상단 Header 햄버거(nav-toggle)가 toggleNav 로 사이드바를 접고,
 * 데스크톱=사이드바 숨김(콘텐츠 전폭), <1024px=오버레이 드로어(+백드롭). themeStore 와 동일한
 * 지속·스탬프 관례를 따른다(신규 store 최소 표면).
 */
import { create } from 'zustand';

const STORAGE_KEY = 'kx-nav-collapsed';
const MOBILE_QUERY = '(max-width: 1024px)';

/**
 * 초기 접힘 상태 — 저장값 우선, 없으면 뷰포트로 추정(모바일이면 접힘=드로어 닫힘 기본).
 * 모바일에서 저장값 없이 열린 채 첫 렌더되어 드로어가 화면을 덮는 회귀를 방지한다.
 */
function readInitial(): boolean {
  if (typeof localStorage !== 'undefined') {
    const v = localStorage.getItem(STORAGE_KEY);
    if (v === 'true') return true;
    if (v === 'false') return false;
  }
  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
    return window.matchMedia(MOBILE_QUERY).matches;
  }
  return false;
}

interface UiState {
  /** 사이드바 접힘 여부. true=접힘(데스크톱 숨김 / 모바일 드로어 닫힘). */
  navCollapsed: boolean;
  /** 명시 설정 — 지속. */
  setNavCollapsed: (v: boolean) => void;
  /** 햄버거 토글. */
  toggleNav: () => void;
}

function persist(v: boolean) {
  if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, String(v));
}

export const useUiStore = create<UiState>((set, get) => ({
  navCollapsed: readInitial(),
  setNavCollapsed: (v) => {
    persist(v);
    set({ navCollapsed: v });
  },
  toggleNav: () => {
    const next = !get().navCollapsed;
    persist(next);
    set({ navCollapsed: next });
  },
}));

/** <1024px 여부(모바일 드로어 판정용). SSR 안전. */
export function isMobileViewport(): boolean {
  return (
    typeof window !== 'undefined' &&
    typeof window.matchMedia === 'function' &&
    window.matchMedia(MOBILE_QUERY).matches
  );
}
