// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // router will be initialized here
import store from './store'   // store will be initialized here
import './assets/tailwind.css'

const app = createApp(App)

// Dispatch loadState immediately after store is created and before app is mounted
// and before router is fully used by the app.
store.dispatch('loadState').then(() => {
  // Now that the state is loaded (or attempted to be loaded),
  // we can safely use the router and mount the app.
  app.use(router)
  app.use(store) // Using store here is fine, it's already created.
  app.mount('#app')
}).catch(error => {
  console.error("Failed to load initial state for the store:", error);
  // Fallback: Mount the app even if state loading fails, guards should handle it.
  // Or display an error message to the user.
  // For now, let's still try to mount.
  app.use(router)
  app.use(store)
  app.mount('#app')
});