<template>
  <v-container class="py-10">
    <v-row class="d-flex flex-column align-center">
      <v-col cols="10">
        <v-card
          class="elevation-3"
          style="background-color: white; border-radius: 12px"
        >
          <!-- Title Section -->
          <v-card-title class="text-center text-h4 font-weight-bold mb-4">
            {{ $t('paymentConfirmation.success.title') }}
          </v-card-title>

          <!-- Check Icon -->
          <v-card-text class="text-center mb-4">
            <v-icon size="120" color="success">mdi-check-circle</v-icon>
          </v-card-text>

          <!-- Thank You Message -->
          <v-card-text class="text-center mb-4">
            <p class="text-h6">
              {{ $t('paymentConfirmation.success.message') }}
              <span class="text-h5 font-weight-bold" v-if="creatorUserName">{{
                creatorUserName
              }}</span>
              <span class="text-h6" v-else>{{
                $t('paymentConfirmation.success.usernameDefault')
              }}</span>
            </p>
          </v-card-text>

          <!-- Email Input and Receipt Button -->
          <v-card-text class="text-center mb-4">
            <p class="text-h6">
              {{ $t('paymentConfirmation.success.receipt') }}
            </p>
          </v-card-text>

          <!-- Continue Button -->
          <v-card-actions class="justify-center">
            <v-btn
              color="primary"
              class="text-white px-5 py-3"
              @click="router.push({ path: `/@${creatorUserName}` })"
            >
              {{ $t('paymentConfirmation.success.continue') }}
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>

    <!-- Error Snackbar -->
    <v-snackbar v-model="errorSnackBar" color="red darken-1">
      Aucun reçu trouvé pour cet email.
      <template v-slot:actions>
        <v-btn color="white" text @click="errorSnackBar = false">Fermer</v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script setup>
import { useClient } from '@/plugins/api.js';
import { onBeforeMount, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
const client = useClient();

const creatorId = route.params.creatorId;
const creatorUserName = ref('');
const email = ref('');
const errorSnackBar = ref(false);

onBeforeMount(async () => {
  try {
    const response = await client.get(`/api/creators/${creatorId}`);
    creatorUserName.value = response.data.name;
  } catch (error) {
    console.error('Failed to fetch creator data:', error);
  }
});

async function getReceipt() {
  try {
    const response = await client.get(
      `/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`
    );
    const receiptUrl = response.data.receiptUrl;

    if (!receiptUrl) {
      errorSnackBar.value = true;
    } else {
      window.open(receiptUrl, '_blank');
    }
  } catch (error) {
    console.error('Failed to fetch receipt:', error);
    errorSnackBar.value = true;
  }
}
</script>

<style scoped>
.v-container {
  max-width: 800px;
  margin: auto;
}

.v-card {
  padding: 24px;
}

.v-btn {
  border-radius: 8px;
}
</style>
