<script setup lang="ts">
import { useMutation, useQuery } from '@vue/apollo-composable';
import {
  CreateBonusProgramLinkDocument,
  ManagerUsersDocument,
  type CreateBonusProgramLinkMutation,
  type ManagerUsersQuery,
} from '~/composables/graphql/generated';

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

type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
const userId = ref('');
const errorMessage = ref('');
const bonusProgramLink = ref('');
const bonusProgramLinkExpiresAt = ref('');
const usersQuery = useQuery(ManagerUsersDocument);
const createBonusProgramLinkMutation = useMutation(CreateBonusProgramLinkDocument, { throws: 'never' });

const clientOptions = computed<ManagerUserItem[]>(() => (
  (usersQuery.result.value?.managerUsers ?? [])
    .filter((user) => user.role === 'CLIENT')
));

function userOptionLabel(user: ManagerUserItem) {
  return [user.fullName, user.companyName || user.email]
    .filter(Boolean)
    .join(' • ');
}

async function createBonusAccountLink() {
  errorMessage.value = '';
  bonusProgramLink.value = '';
  bonusProgramLinkExpiresAt.value = '';

  if (!userId.value) {
    errorMessage.value = 'Выберите клиента.';
    return;
  }

  const bonusLinkResponse = await createBonusProgramLinkMutation.mutate({
    userId: userId.value,
  });

  const bonusLinkPayload: CreateBonusProgramLinkMutation['createBonusProgramLink'] | undefined = bonusLinkResponse?.data?.createBonusProgramLink;
  if (!bonusLinkPayload?.url) {
    errorMessage.value = createBonusProgramLinkMutation.error.value?.message || 'Не удалось сгенерировать ссылку.';
    return;
  }

  bonusProgramLink.value = bonusLinkPayload.url;
  bonusProgramLinkExpiresAt.value = bonusLinkPayload.expiresAt;
}

async function copyBonusProgramLink() {
  if (!bonusProgramLink.value) {
    return;
  }

  await navigator.clipboard.writeText(bonusProgramLink.value);
}

function formatDateTime(value: string) {
  return new Date(value).toLocaleString('ru-RU');
}
</script>

<template>
  <section class="space-y-6 max-w-3xl">
    <UiBackHeader
      to="/admin/bonuses/balances"
      back-label="Назад к бонусным счетам"
      title="Создать бонусный счет"
      subtitle="Менеджер выбирает клиента и сразу получает ссылку, которую можно переслать ему."
    />

    <div class="surface-card rounded-3xl p-5 space-y-4">
      <label class="form-control">
        <span class="label-text">Клиент</span>
        <select v-model="userId" class="select manager-field w-full">
          <option value="">Выберите клиента</option>
          <option v-for="user in clientOptions" :key="user.id" :value="user.id">
            {{ userOptionLabel(user) }}
          </option>
        </select>
      </label>

      <div class="mt-4">
        <button
          class="btn btn-primary border-0"
          :disabled="createBonusProgramLinkMutation.loading.value || usersQuery.loading.value"
          @click="createBonusAccountLink"
        >
          {{ createBonusProgramLinkMutation.loading.value ? 'Генерируем...' : 'Создать ссылку' }}
        </button>
      </div>
    </div>

    <div v-if="errorMessage" class="surface-card rounded-3xl border border-[#d27d7d] bg-[#fff4f4] p-5 text-sm text-[#8b2a2a]">
      {{ errorMessage }}
    </div>

    <article v-if="bonusProgramLink" class="surface-card rounded-3xl p-5 space-y-4">
      <div class="space-y-2">
        <p class="text-sm font-semibold text-[#123824]">Ссылка в бонусный кабинет</p>
        <p class="text-sm text-[#466653]">
          Эту ссылку менеджер может сразу отправить клиенту.
        </p>
        <div class="rounded-[20px] bg-[#f8fbf9] px-4 py-3 text-sm font-semibold text-[#123824] break-all">
          {{ bonusProgramLink }}
        </div>
        <p v-if="bonusProgramLinkExpiresAt" class="text-xs text-[#5c7b69]">
          Действует до {{ formatDateTime(bonusProgramLinkExpiresAt) }}
        </p>
      </div>

      <div class="flex flex-wrap gap-3">
        <a
          :href="bonusProgramLink"
          target="_blank"
          rel="noreferrer"
          class="btn rounded-full border border-[#d7e9de] bg-white px-5 text-[#123824] hover:bg-[#f3f8f5]"
        >
          Открыть
        </a>
        <button
          class="btn rounded-full border-0 bg-[#139957] px-5 text-white hover:bg-[#0d854a]"
          @click="copyBonusProgramLink"
        >
          Скопировать
        </button>
      </div>
    </article>
  </section>
</template>
