<template>
    <div class="container">
        <div class="card">
            <!-- Navigation Link at the top -->
            <div class="navigation-link">
                <button
                    class="link-button"
                    @click="goBack()"
                >
                    <v-icon :icon="mdiArrowLeft" />
                    {{ t('returnToCreator') }}
                </button>
            </div>

            <h1 v-html="titleWithCreatorName"></h1>

            <p>
                <v-icon
                    :icon="mdiCheckCircle"
                    color="success"
                    size="120"
                />
            </p>

            <p>
                {{ t('message') }}
            </p>

            <p>
                {{ t('receipt') }}
            </p>
        </div>
    </div>
</template>

<script setup>
    import { useRoute, useRouter } from 'vue-router';
    import { useI18n } from 'vue-i18n';
    import { useBrandingStore } from '@/stores/brandingStore.js';
    import { mdiArrowLeft, mdiCheckCircle } from '@mdi/js';
    import { computed } from 'vue';

    const router = useRouter();
    const route = useRoute();
    const { t } = useI18n();
    const brandingStore = useBrandingStore();

    const creatorName = computed(() => {
        return route.params.creator?.split('/')[0] || t('usernameDefault');
    });

    const titleWithCreatorName = computed(() => {
        return t('title', { creatorName: creatorName.value });
    });

    function goBack() {
        // Navigate back to the creator's page
        const creatorNameParam = route.params.creator?.split('/')[0] || '';
        router.push(`/@${creatorNameParam}`);
    }
</script>

<i18n>
{
    "en": {
        "title": "{creatorName} thanks you!",
        "message": "Your payment has been processed successfully.",
        "usernameDefault": "The creator",
        "receipt": "A receipt has been sent to your email.",
        "returnToCreator": "Return to creator page"
    },
    "fr": {
        "title": "{creatorName} vous remercie !",
        "message": "Votre paiement a été traité avec succès.",
        "usernameDefault": "Le créateur",
        "receipt": "Un reçu a été envoyé à votre email.",
        "returnToCreator": "Retourner à la page du créateur"
    },
    "es": {
        "title": "¡{creatorName} te agradece!",
        "message": "Su pago ha sido procesado con éxito.",
        "usernameDefault": "El creador",
        "receipt": "Se ha enviado un recibo a su correo electrónico.",
        "returnToCreator": "Volver a la página del creador"
    }
}
</i18n>

<style scoped>
    .container {
        @apply flex items-center justify-center;
        @apply p-5;
        @apply w-full;
        @apply mx-auto;
        @apply max-w-[1024px];
    }

    .card {
        @apply bg-hSurface text-hOnSurface;
        @apply p-8;
        @apply font-sans;
        @apply rounded-2xl;
        @apply shadow-2xl;
        @apply relative;
        @apply w-full;
        @apply max-w-2xl;
        @apply mx-auto;
    }

    .card::before {
        @apply absolute inset-0;
        @apply rounded-2xl;
        @apply p-[1px];
        content: '';
        background: linear-gradient(
            135deg,
            rgba(64, 64, 64, 1) 0%,
            rgba(64, 64, 64, 0) 20%,
            rgba(64, 64, 64, 0.5) 100%
        );
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }

    .navigation-link {
        @apply flex items-center text-hutopyPrimary;
        @apply mb-6;
    }

    .link-button {
        @apply flex items-center gap-2;
        @apply text-hutopyPrimary hover:text-hutopySecondary;
        @apply transition-colors;
        @apply duration-300;
        @apply text-xl;
        @apply font-semibold;
    }

    h1 {
        @apply text-6xl;
        @apply font-medium;
        @apply mb-8;
        @apply text-center;
    }

    p {
        @apply text-lg;
        @apply font-medium;
        @apply mb-8;
        @apply text-center;
    }
</style>
