<template>
  <div class="payment-step">
    <v-card-text class="pa-8 text-center">
      <div class="failure-container">
        <v-icon icon="mdi-close-circle" size="80" class="text-red mb-4" />
        <h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Gagal</h2>
        <p class="text-h6 text-grey-darken-1 mb-6">
          Terjadi kesalahan saat memproses<br />pembayaran Anda.
        </p>
        <div class="button-group">
          <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="retryPayment" class="mb-3">
            Coba Lagi
          </v-btn>
          <v-btn color="grey-darken-1" size="large" variant="outlined" rounded="xl" @click="paymentStore.reset">
            Kembali ke Awal
          </v-btn>
        </div>
      </div>
    </v-card-text>
  </div>
</template>

<script setup>
import { usePaymentStore } from '~/stores/payment';
const paymentStore = usePaymentStore();

const retryPayment = () => {
  // Logika untuk mencoba lagi pembayaran
  // Misalnya, memanggil API backend untuk mendapatkan tagihan baru
  // Untuk saat ini, kita bisa mensimulasikannya
  console.log("Mencoba pembayaran lagi...");
  paymentStore.setPaymentStatus('aktif');
};
</script>

<style scoped>
.failure-container {
  padding: 40px 20px;
}
.text-red {
  color: #f44336 !important;
}
.text-dark {
  color: #424242 !important;
}
.button-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>