<!-- Show how many available articles are left to generate -->
<script setup lang="ts">
import { inject, onMounted, useTemplateRef, watch } from 'vue';
import Button from '../base/Button.vue';
import { useCssVar } from '@vueuse/core';
import { useRouter } from 'vue-router';
import { useGettext } from 'vue3-gettext';
import { useTokensStore } from '~src/admin/stores/useTokensStore';

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

// Router
const router = useRouter();

// Get tokens store
const { totalTokens, usedTokens, totalTokensAdditional, refreshTokens } = useTokensStore();

// Get tokens from config
const usedArticles = usedTokens;
const totalArticles = totalTokens;
const totalArticlesAdditional = totalTokensAdditional;

// Progress bar element
const progressBar = useTemplateRef('progress-bar');

// Progress bar calculation and update function
const updateProgressBar = () => {
	const useArticles = usedArticles.value;
    const progressBarPercentage = (useArticles / totalArticles.value) * 100;

    // Set progress bar width
    const progressWidth = useCssVar('--progressWidth', progressBar.value);
    progressWidth.value = `${progressBarPercentage}%`;

    // Set progress bar color
    const progressColor = useCssVar('--progressColor', progressBar.value);

    if (progressBarPercentage < 50) {
        progressColor.value = '#79D22C';
    } else if (progressBarPercentage >= 50 && progressBarPercentage < 75) {
        progressColor.value = '#FFDB21';
    } else {
        progressColor.value = '#FF3221';
    }
};

// Initial progress bar setup
updateProgressBar();

// Watch for refreshTokens changes
watch(
    () => refreshTokens.value,
    () => {
        updateProgressBar();
    }
);

// Account type
const isAccountFree = inject('isAccountFree');

// Account expired
const isAccountExpired = inject<boolean>('isAccountExpired');
</script>

<template>
    <div class="flex flex-col md:flex-row gap-3 md:gap-5 items-center max-md:w-full">
        <p class="inline-flex flex-col xl:flex-row text-xs leading-loose text-base-200">
            <!-- Number of articles -->
            <span>
                {{ $gettext('Used') }} {{ usedArticles }} {{ $gettext('out of') }} {{ totalArticles }}
                {{ isAccountFree ? $gettext('weekly token.') : $gettext('weekly tokens.') }} &nbsp;
            </span>

            <!-- Number of additional articles -->
            <span v-if="totalArticlesAdditional">
                {{ $gettext('You have') }} {{ totalArticlesAdditional }} {{ $gettext('additional tokens left.') }}
            </span>
        </p>

        <!-- Progress bar -->
        <span
            ref="progress-bar"
            class="progress-bar relative inline-block rounded bg-neutral-200 w-full md:w-[300px] h-1.5"
        ></span>

        <!-- Button -->
        <Button
            :text="$gettext('Upgrade')"
            size="small"
            v-if="isAccountFree"
            @click.prevent="router.push('/upgrade')"
        />
        <Button
            :disabled="isAccountExpired"
            :text="$gettext('Add more')"
            size="small"
            v-else
            @click.prevent="router.push('/add-articles')"
        />
    </div>
</template>

<style lang="scss" scoped>
.progress-bar {
    &::after {
        @apply content-[''] absolute h-1.5 left-0 top-0 rounded;
        width: var(--progressWidth, 0);
        background-color: var(--progressColor, 'transparent');
    }
}
</style>
