import { createApp } from 'vue';
import { createPinia } from 'pinia';
import VueLazyLoad from 'vue3-lazyload';
import App from './App.vue';
import { router } from './router';
import { setUnauthorizedHandler } from './api/client';
import { useSessionStore } from './stores/session';
import Container from './components/ui/Container.vue';
import Vector from './assets/img/Vector.svg';

// Global styles, ported from legacy henza_pwa/src/main.ts — same import order
// (ant-design-vue's own theme first, then our Less overrides on top). Legacy
// imported 'vant/lib/index.css' twice (a dead duplicate) — imported once here.
import './assets/styles/tailwind.css';
import 'ant-design-vue/dist/antd.less';
import './assets/styles/style.less';
import 'vant/lib/index.css';

const app = createApp(App);

app.use(createPinia());
app.use(router);

// A 401 from the API means the customer token is gone or expired. Clear the
// session and send the user to login, so no stale personal data stays on
// screen behind a dead token. Registered after Pinia so the store exists.
setUnauthorizedHandler(() => {
  useSessionStore().logout();
  if (router.currentRoute.value.name !== 'login') {
    void router.push({ name: 'login' });
  }
});
// Ported from legacy main.ts:32-46 — Vector.svg is both the while-loading and
// the on-error placeholder, so a missing/failed image paints the brand mark
// instead of collapsing the layout.
app.use(VueLazyLoad, {
  loading: Vector,
  error: Vector,
});
app.component('container', Container);
app.mount('#app');