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

interface AppState {
  collapsed: boolean;
  darkMode: boolean;
  language: string;
  primaryColor: string;
  componentSize: 'small' | 'middle' | 'large';
  menuTheme: 'dark' | 'light';
  toggleCollapsed: () => void;
  toggleDarkMode: () => void;
  setLanguage: (lang: string) => void;
  setPrimaryColor: (color: string) => void;
  setComponentSize: (size: 'small' | 'middle' | 'large') => void;
  setMenuTheme: (theme: 'dark' | 'light') => void;
}

export const useAppStore = create<AppState>()(
  persist(
    (set) => ({
      collapsed: false,
      darkMode: false,
      language: localStorage.getItem('app-language') || 'zh-CN',
      primaryColor: '#1677ff',
      componentSize: 'middle' as const,
      menuTheme: 'dark' as const,
      toggleCollapsed: () => set((s) => ({ collapsed: !s.collapsed })),
      toggleDarkMode: () => set((s) => ({ darkMode: !s.darkMode })),
      setLanguage: (lang: string) => {
        i18n.changeLanguage(lang);
        localStorage.setItem('app-language', lang);
        set({ language: lang });
      },
      setPrimaryColor: (color: string) => set({ primaryColor: color }),
      setComponentSize: (size: 'small' | 'middle' | 'large') =>
        set({ componentSize: size }),
      setMenuTheme: (theme: 'dark' | 'light') => set({ menuTheme: theme }),
    }),
    { name: 'admin-pro-app' },
  ),
);