import { createApp } from 'vue';
import { createPinia } from 'pinia';
import VueLazyLoad from 'vue3-lazyload';
import { Locale } from 'vant';
import faIR from 'vant/es/locale/lang/fa-IR';
import App from './App.vue';
import { router } from './router';
import { setUnauthorizedHandler } from './api/client';
import { useSessionStore } from './stores/session';
import { useAppearanceStore } from './stores/appearanceStore';
import Container from './components/ui/Container.vue';
// TODO: temporary placeholder — swap Vector.svg back in (or a proper loading
// mark) once one exists; montzar-logo.png is the brand logo, borrowed here
// just so lazy-loaded images have something other than a broken icon.
import Vector from './assets/img/montzar-logo.png';

// 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.
// The light/dark values behind the theme tokens — first, so every stylesheet
// below resolves var(--c-…) against it. See themeConfig/appearance.ts.
import 'virtual:palette.css';
import './assets/styles/tailwind.css';
import 'ant-design-vue/dist/antd.less';
import './assets/styles/style.less';
import 'vant/lib/index.css';

// Vant defaults to zh-CN. Every view in this app is Persian (RTL), so any
// Vant component rendering its own built-in text (PullRefresh's
// pulling/loosing labels, etc.) would otherwise show untranslated Chinese —
// switch to Vant's own fa-IR locale before anything mounts.
Locale.use('fa-IR', faIR);

const app = createApp(App);

app.use(createPinia());
// Theme + reduced motion. index.html already applied the saved classes before
// first paint; this keeps them in sync (and follows the OS while on "system").
useAppearanceStore().init();
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') {
    // `replace`: the page whose request just failed is behind a dead session,
    // so leaving it in history only gives the person a back button that returns
    // them to it and bounces straight back here.
    void router.replace({ name: 'login' });
  }
});
// Ported from legacy main.ts:32-46, with one change: the brand mark is now only
// the on-error placeholder. As the while-loading placeholder it painted the
// logo into every card first and then swapped it for the real photo a moment
// later — a visible jump on every image. While loading, the library's own
// transparent pixel is used instead, the image is held at opacity 0 and fades
// in once loaded (see `img[lazy]` in style.less); the card's own background
// stands in until then.
app.use(VueLazyLoad, {
  error: Vector,
});
app.component('container', Container);
app.mount('#app');