<!-- Settings page view -->
<script setup lang="ts">
import Container from '../components/layout/Container.vue';
import PageHeading from '../components/layout/PageHeading.vue';
import Tabs from '../components/navigation/Tabs.vue';
import MyAccount from '../components/settings/MyAccount.vue';
import ApiConnection from '../components/settings/ApiConnection.vue';
import SubscriptionEnd from '../components/settings/SubscriptionEnd.vue';
import Subscription from '../components/settings/Subscription.vue';
import useSetPageTitle from '../composables/useSetPageTitle';
import { TabType } from '../types';
import { useGettext } from 'vue3-gettext';
import { AppConfigType } from '~src/admin/types';
import { inject, onMounted } from 'vue';
import { useNotificationStore } from '../stores/useNotificationStore';

// Translations
const { $gettext } = useGettext();

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

// Set page title
useSetPageTitle($gettext('Settings'));

// Notification store
const { addNotification } = useNotificationStore();

// Check for notification query parameters on mount
onMounted(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const notificationMessage = urlParams.get('notification_message');
    const notificationType = urlParams.get('notification_type');
    
    if (notificationMessage) {
        addNotification({
            message: decodeURIComponent(notificationMessage),
            type: notificationType || 'success',
            show_icon: true,
        });
        
        // Clean up URL parameters
        const url = new URL(window.location.href);
        url.searchParams.delete('notification_message');
        url.searchParams.delete('notification_type');
        window.history.replaceState({}, document.title, url.toString());
    }
});

// Define tabs
const tabs: TabType[] = [
    {
        label: $gettext('My account'),
        content: MyAccount,
    },
		{
        label: $gettext('API Connection'),
        content: ApiConnection,
    },
    {
        label: $gettext('Subscription'),
        content: Subscription,
    },
];
</script>

<template>
	<!-- Subscription end for paid -->
	<div id="subscription-end"></div>

	<!-- Subscription end time for free trial -->
	<SubscriptionEnd :end-time="config.settings.trial_end_time" />

    <Container>
        <!-- Heading -->
        <PageHeading :heading="$gettext('Settings')" :show-posts-limit="false" />

        <!-- Setting tabs -->
        <Tabs class="mt-9" :tabs />
    </Container>
</template>

<style scoped></style>
