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

      <h1>
        {{ t('title') }}
      </h1>

      <p>
        <v-icon size="120" color="success">
          mdi-check-circle
        </v-icon>
      </p>

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

        <span v-if="brandingStore.value?.name">
          {{ brandingStore.value.name }}
        </span>

        <span v-else>
          {{ t('usernameDefault') }}
        </span>

      </p>

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

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

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

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

</script>

<i18n>
{
  "en": {
    "title": "Payment Successful!",
    "message": "Your payment has been processed successfully.",
    "usernameDefault": "the creator",
    "receipt": "A receipt has been sent to your email.",
    "continue": "Continue to",
    "returnToCreator": "Return to creator page"
  },
  "fr": {
    "title": "Paiement réussi !",
    "message": "Votre paiement a été traité avec succès.",
    "usernameDefault": "le créateur",
    "receipt": "Un reçu a été envoyé à votre email.",
    "continue": "Continuer vers",
    "returnToCreator": "Retourner à la page du créateur"
  },
  "es": {
    "title": "¡Pago exitoso!",
    "message": "Su pago ha sido procesado con éxito.",
    "usernameDefault": "el creador",
    "receipt": "Se ha enviado un recibo a su correo electrónico.",
    "continue": "Continuar a",
    "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;
  @apply mb-6;
}

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

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>
