import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export type Theme = 'light' | 'dark' | 'senior';

interface ThemeState {
  theme: Theme;
  setTheme: (theme: Theme) => void;
  toggleTheme: () => void;
}

export const useThemeStore = create<ThemeState>()(
  persist(
    (set, get) => ({
      theme: 'light',

      setTheme: (theme: Theme) => {
        // HTML 클래스 업데이트 (다른 클래스 보존 - 폰트 등)
        const root = document.documentElement;
        root.classList.remove('light', 'dark', 'senior');
        root.classList.add(theme);
        set({ theme });
      },

      toggleTheme: () => {
        const themes: Theme[] = ['light', 'dark', 'senior'];
        const currentIndex = themes.indexOf(get().theme);
        const nextTheme = themes[(currentIndex + 1) % 3];
        get().setTheme(nextTheme);
      },
    }),
    {
      name: 'theme', // ThemeContext와 동일한 키 사용 (마이그레이션 호환성)
      // Zustand persist 재수화 시 HTML 클래스 복원
      onRehydrateStorage: () => (state) => {
        if (state?.theme) {
          const root = document.documentElement;
          root.classList.remove('light', 'dark', 'senior');
          root.classList.add(state.theme);
        }
      },
    }
  )
);

// ===== 셀렉터 훅 =====

/** 현재 테마만 구독 */
export const useTheme = () =>
  useThemeStore((state) => state.theme);

/** setTheme 액션만 구독 */
export const useSetTheme = () =>
  useThemeStore((state) => state.setTheme);