/**
 * Mitgliederverwaltung Vue.js entry point.
 *
 * Bootstraps the Vue 3 app with Pinia store and Vue Router,
 * mounted into the #mitgliederverwaltung container.
 */
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router.js'

// @nextcloud/vue v9 expects loadState("core","apps") to be an array,
// but Nextcloud 28 provides it as an object keyed by app ID.
// Patch it before mounting so @nextcloud/vue's .find() call works.
const appsStateEl = document.querySelector('input[id="initial-state-core-apps"]')
if (appsStateEl) {
	try {
		const decoded = JSON.parse(atob(appsStateEl.value))
		if (decoded && !Array.isArray(decoded)) {
			appsStateEl.value = btoa(JSON.stringify(Object.values(decoded)))
		}
	} catch (_) {
		// ignore — let @nextcloud/vue handle the fallback
	}
}

const app = createApp(App)
app.use(createPinia())
app.use(router)

// @nextcloud/vue v9 reads appName/appVersion via Vue's inject(),
// not via webpack DefinePlugin globals.
app.provide('appName', 'mitgliederverwaltung')
app.provide('appVersion', '0.3.2')

app.mount('#mitgliederverwaltung')

// Inject global button style fix after all NcButton styles have loaded.
// NcButton's scoped CSS sets overflow:hidden on .button-vue__text which
// truncates button labels. CSS-in-Vue can't reliably override scoped styles,
// so we inject a <style> tag directly.
const fixStyle = document.createElement('style')
fixStyle.textContent = `
#mitgliederverwaltung .button-vue { overflow: visible; padding: 0 16px; white-space: nowrap; }
#mitgliederverwaltung .button-vue .button-vue__text { overflow: visible !important; }
#mitgliederverwaltung .button-vue--icon-only { padding: 0; }
#mitgliederverwaltung .app-navigation-entry.active { border-radius: var(--border-radius-element, 8px) !important; }
`
document.head.appendChild(fixStyle)
