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

const refereeUserId = ref('');
const referralCreated = ref('');
const bonusUserId = ref('');
const bonusAmount = ref(100);
const bonusReason = ref('Реферальный бонус');
const bonusResult = ref('');

const createReferral = useMutation(CreateReferralDocument);
const addBonus = useMutation(AddBonusTransactionDocument);

async function submitReferral() {
  const result = await createReferral.mutate({ input: { refereeUserId: refereeUserId.value } });
  referralCreated.value = result?.data?.createReferral.id ?? '';
}

async function submitBonus() {
  const result = await addBonus.mutate({ input: { userId: bonusUserId.value, amount: Number(bonusAmount.value), reason: bonusReason.value } });
  bonusResult.value = result?.data?.addBonusTransaction.id ?? '';
}
</script>

<template>
  <section class="space-y-6 max-w-2xl">
    <h1 class="text-2xl font-bold">Реферальная программа</h1>

    <div class="card bg-base-100 border border-base-300">
      <div class="card-body space-y-3">
        <h2 class="card-title">Создать реферальную связь</h2>
        <input v-model="refereeUserId" class="input input-bordered" placeholder="ID приглашенного пользователя" />
        <button class="btn btn-primary" @click="submitReferral">Создать</button>
        <p v-if="referralCreated" class="text-sm">Создано: {{ referralCreated }}</p>
      </div>
    </div>

    <div class="card bg-base-100 border border-base-300">
      <div class="card-body space-y-3">
        <h2 class="card-title">Начислить бонус</h2>
        <input v-model="bonusUserId" class="input input-bordered" placeholder="ID пользователя" />
        <input v-model="bonusAmount" type="number" class="input input-bordered" placeholder="Сумма" />
        <input v-model="bonusReason" class="input input-bordered" placeholder="Причина" />
        <button class="btn btn-secondary" @click="submitBonus">Начислить</button>
        <p v-if="bonusResult" class="text-sm">Транзакция: {{ bonusResult }}</p>
      </div>
    </div>
  </section>
</template>
