<!-- App entry point - displays current route -->
<script lang="ts" setup>
import { inject, onMounted, provide, ref } from 'vue';
import boostsiteAiMenuFix from './admin-menu-fix';
import Notifications from './components/layout/Notifications.vue';
import { AppConfigType } from './types';
import useGetUsedTokens from './composables/useGetUsedTokens';
import Popup from './components/layout/Popup.vue';
import { useRouter } from 'vue-router';

// Get plugin config
const config: AppConfigType = inject('pluginConfig');

// Popup control
const upgradePopup = ref<InstanceType<typeof Popup>>();

// Router
const router = useRouter();

// Provide the account type and expiration globally
const isAccountFree = config.settings.account_type === 'FREE';
const isAccountExpired = !!config.settings.account_expired;
provide('isAccountFree', isAccountFree);
provide('isAccountExpired', isAccountExpired);

// Recaulculate the tokens
useGetUsedTokens();

// Apply the menu fix on mounted
onMounted(() => {
    // @ts-ignore
    boostsiteAiMenuFix(inject('pluginConfig', {}).prefix || 'vue-app');

    if (isAccountExpired && router.currentRoute.value.path !== '/upgrade') {
        upgradePopup.value.openPopup();
    }
});

const popupClick = () => {
    router.push('/upgrade');
    upgradePopup.value.closePopup();
};
</script>

<template>
    <div class="main-wrapper">
        <!-- Notifications -->
        <Notifications />

        <!-- Current page -->
        <router-view></router-view>

        <!-- Account expired popup -->
        <Popup
            ref="upgradePopup"
            :confirm-button-text="$gettext('Upgrade')"
            @popup-confirm="popupClick"
            :is-open="isAccountExpired"
            v-if="isAccountExpired"
        >
            <div class="text-center">
                <h2 class="text-[20px] leading-lg font-bold">{{ $gettext('Your account has expired') }}</h2>
                <p class="text-base">{{ $gettext('To continue using the plugin please upgrade your subscription') }}</p>
            </div>
        </Popup>
    </div>
</template>

<style scoped></style>
