<template>
  <q-dialog ref="dialogRef" persistent maximized transition-show="fade" transition-hide="fade" @hide="onDialogHide">
    <div class="bg-surface full-height column items-center justify-center q-px-xl">

      <template v-if="!success">
        <q-spinner-oval color="primary" size="72px" class="q-mb-lg" />
        <div class="processing-title text-primary text-center q-mb-sm">
          {{ $t('payment.processing_title') }}
        </div>
        <div class="processing-message text-grey-6 text-center">
          {{ $t('payment.processing_message') }}
        </div>
      </template>

      <template v-else>
        <q-btn
          flat
          round
          icon="mdi-close"
          color="grey-5"
          class="self-end q-mb-md"
          @click="onDialogOK"
        />
        <img
          :src="LogoDiariaSucesso"
          alt="mascote"
          class="success-mascot q-mb-lg"
        />
        <div class="success-title font16 fontbold text-primary text-center q-mb-sm">
          {{ $t('payment.success_title') }}
        </div>
        <i18n-t keypath="payment.success_message" tag="div" class="success-message text-grey-6 text-center font14">
          <template #nextServices>
            <strong class="text-text">{{ $t('payment.success_next_services') }}</strong>
          </template>
          <template #agenda>
            <strong class="text-text">{{ $t('payment.success_agenda') }}</strong>
          </template>
        </i18n-t>
      </template>

    </div>
  </q-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDialogPluginComponent, useQuasar } from 'quasar'
import LogoDiariaSucesso from 'src/assets/diarinho-success-payment.svg';
import { payServicePackage } from 'src/api/payment'

const props = defineProps({
  servicePackage: { type: Object, required: true },
  clientPaymentMethodId: { type: Number, required: true },
  total: { type: Number, default: null },
})

defineEmits([...useDialogPluginComponent.emits])

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
const $q = useQuasar()

const item = computed(() => props.servicePackage)

const success = ref(false)

onMounted(async () => {
  try {
    const payment = await payServicePackage(item.value.id, {
      payment_method: 'credit_card',
      client_payment_method_id: props.clientPaymentMethodId,
    })

    if (payment.status !== 'paid') {
      throw new Error(payment.failure_message || 'Pagamento não confirmado.')
    }

    success.value = true
  } catch (e) {
    console.error('Erro ao pagar:', e)

    if (e.response?.data?.error !== 'missing_payment_data') {
      $q.notify({ type: 'negative', message: e?.response?.data?.message ?? e.message ?? 'Erro ao processar pagamento.' })
    }

    onDialogCancel()
  }
})
</script>

<style scoped lang="scss">
.processing-title {
  line-height: 1.3;
}

.processing-message {
  line-height: 1.5;
  max-width: 280px;
}

.success-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-title {
  line-height: 1.3;
  max-width: 280px;
}

.success-message {
  line-height: 1.6;
  max-width: 280px;
}
</style>
