import { defineStore } from 'pinia';
import { ref } from 'vue';

/**
 * 应用配置（与 Host 保持一致）
 */
export type AppConfig = {
  theme: 'light' | 'dark';
  language: 'zh-CN' | 'en-US';
  pageSize: number;
  notifications: boolean;
};

/**
 * ⭐ Remote 的 Config Store
 *
 * 当 Remote 被 Host 加载时：
 * - pinia 实例是共享的（singleton）
 * - Remote 的 store 会使用 Host 的 pinia
 * - 状态自动同步
 */
export const useConfigStore = defineStore('config', () => {
  const config = ref<AppConfig>({
    theme: 'light',
    language: 'zh-CN',
    pageSize: 10,
    notifications: true,
  });

  let saveTimer: ReturnType<typeof setTimeout> | null = null;

  function loadConfig() {
    try {
      const saved = localStorage.getItem('app_config');
      if (saved) {
        const parsed = JSON.parse(saved) as Partial<AppConfig>;
        config.value = { ...config.value, ...parsed };
      }
    } catch (e) {
      console.warn('加载配置失败', e);
    }
  }

  function saveConfig() {
    if (saveTimer) {
      clearTimeout(saveTimer);
    }

    saveTimer = setTimeout(() => {
      try {
        localStorage.setItem('app_config', JSON.stringify(config.value));
      } catch (e) {
        console.warn('保存配置失败', e);
      }
    }, 500);
  }

  function updateConfig<K extends keyof AppConfig>(
    key: K,
    value: AppConfig[K],
  ) {
    config.value[key] = value;
    saveConfig();
  }

  function updateMultipleConfig(updates: Partial<AppConfig>) {
    config.value = { ...config.value, ...updates };
    saveConfig();
  }

  function resetConfig() {
    config.value = {
      theme: 'light',
      language: 'zh-CN',
      pageSize: 10,
      notifications: true,
    };
    saveConfig();
  }

  function toggleTheme() {
    config.value.theme = config.value.theme === 'light' ? 'dark' : 'light';
    saveConfig();
    return config.value.theme;
  }

  // 初始化时加载配置
  loadConfig();

  return {
    config,
    updateConfig,
    updateMultipleConfig,
    resetConfig,
    toggleTheme,
  };
});
