import { createApp } from "vue";
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/styles/element-variables.scss'
import "@/styles/style.css";
import App from "./App.vue";
import {router} from "@/router/index";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { useSettingsStore, applyDisplayMode } from '@/store/settings'; // Import store and helper
import { setTheme } from '@/styles/theme'; // Import setTheme

// 引入 Element Plus
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

// 在开发环境下引入mock
// if (import.meta.env.VITE_APP_MOCK === 'true') {
  import('@/mocks')
// }

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate)

const app = createApp(App);
app.use(pinia); // Pinia is now available

// Access the store *after* app.use(pinia)
// The store state will be hydrated from localStorage here by the persistence plugin
const settingsStore = useSettingsStore();

// Apply persisted/initial settings
applyDisplayMode(settingsStore.displayMode);
setTheme(settingsStore.theme);
// Apply initial animation setting
if (!settingsStore.animationsEnabled) {
  document.body.classList.add('no-animations');
} else {
  // Ensure the class is not present if animations are enabled initially
  document.body.classList.remove('no-animations');
}

app.use(router);
app.use(ElementPlus, {
  locale: zhCn,
})
app.mount("#app");