<script setup lang="ts">
import { useMutation } from '@vue/apollo-composable';
import { AddBonusTransactionDocument } from '~/composables/graphql/generated';

definePageMeta({
  middleware: ['manager-only'],
  path: '/admin/bonuses/transactions/new',
  alias: ['/bonus-system/transactions/new'],
});

const userId = ref('');
const amount = ref(100);
const reason = ref('Реферальный бонус');
const createdTransactionId = ref('');

const addBonusMutation = useMutation(AddBonusTransactionDocument);

async function addBonus() {
  createdTransactionId.value = '';
  const response = await addBonusMutation.mutate({
    input: {
      userId: userId.value,
      amount: Number(amount.value),
      reason: reason.value,
    },
  });

  createdTransactionId.value = response?.data?.addBonusTransaction.id ?? '';
}
</script>

<template>
  <section class="space-y-6 max-w-3xl">
    <NuxtLink to="/admin/bonuses/balances" class="text-sm font-semibold text-[#0d854a]">← Назад к бонусам</NuxtLink>

    <div class="manager-hero">
      <p class="manager-eyebrow">Бонусы</p>
      <h1 class="manager-title">Добавить бонусную транзакцию</h1>
    </div>

    <div class="surface-card rounded-3xl p-5 space-y-3">
      <label class="form-control">
        <span class="label-text">ID пользователя</span>
        <input v-model="userId" class="input manager-field w-full" placeholder="user id">
      </label>

      <label class="form-control">
        <span class="label-text">Сумма</span>
        <input v-model="amount" type="number" class="input manager-field w-full" placeholder="100">
      </label>

      <label class="form-control">
        <span class="label-text">Причина</span>
        <input v-model="reason" class="input manager-field w-full" placeholder="Причина начисления">
      </label>

      <div>
        <button class="btn btn-primary border-0" @click="addBonus">Начислить</button>
      </div>
    </div>

    <div v-if="createdTransactionId" class="surface-card rounded-3xl p-5 text-sm text-[#123824]">
      Создана транзакция: <span class="font-semibold">{{ createdTransactionId }}</span>
    </div>
  </section>
</template>
