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

const companyName = ref('');
const inn = ref('');
const contactName = ref('');
const email = ref('');
const channelId = ref('');
const channelType = ref<'TELEGRAM' | 'MAX'>('TELEGRAM');

const registerMutation = useMutation(RegisterSelfDocument);
const messengerMutation = useMutation(ConnectMessengerDocument);

const message = ref('');
const messageTone = ref<'success' | 'error'>('success');

registerMutation.onDone(() => {
  message.value = 'Заявка на регистрацию отправлена менеджеру';
  messageTone.value = 'success';
});

registerMutation.onError((error) => {
  message.value = error.message;
  messageTone.value = 'error';
});

messengerMutation.onDone(() => {
  message.value = 'Канал уведомлений подключен';
  messageTone.value = 'success';
});

messengerMutation.onError((error) => {
  message.value = error.message;
  messageTone.value = 'error';
});

function register() {
  message.value = '';
  registerMutation.mutate({
    input: {
      companyName: companyName.value,
      inn: inn.value || null,
      contactName: contactName.value,
      email: email.value,
    },
  });
}

function connectMessenger() {
  message.value = '';
  messengerMutation.mutate({
    input: {
      type: channelType.value,
      channelId: channelId.value,
    },
  });
}
</script>

<template>
  <section class="space-y-6">
    <div>
      <h1 class="text-3xl font-extrabold text-[#0f2f20]">Профиль</h1>
      <p class="mt-1 text-sm text-[#28543f]/80">Регистрация компании и подключение каналов уведомлений.</p>
    </div>

    <div class="grid gap-4 lg:grid-cols-2">
      <div class="surface-card rounded-3xl p-5">
        <h2 class="text-xl font-bold text-[#123824]">Самостоятельная регистрация</h2>
        <div class="mt-4 space-y-3">
          <input v-model="companyName" type="text" placeholder="Компания" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
          <input v-model="inn" type="text" placeholder="ИНН" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
          <input v-model="contactName" type="text" placeholder="Контактное лицо" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
          <input v-model="email" type="email" placeholder="Email" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
          <button class="btn w-full border-0 bg-[#139957] text-white hover:bg-[#0d854a]" :disabled="registerMutation.loading.value" @click="register">
            {{ registerMutation.loading.value ? 'Отправляем…' : 'Отправить заявку' }}
          </button>
        </div>
      </div>

      <div class="surface-card rounded-3xl p-5">
        <h2 class="text-xl font-bold text-[#123824]">Каналы уведомлений</h2>
        <div class="mt-4 space-y-3">
          <select v-model="channelType" class="select select-bordered w-full border-[#d0e8d8] bg-white/80">
            <option value="TELEGRAM">Telegram</option>
            <option value="MAX">Max</option>
          </select>
          <input v-model="channelId" type="text" placeholder="ID канала" class="input input-bordered w-full border-[#d0e8d8] bg-white/80">
          <button class="btn w-full border-0 bg-[#ff5600] text-white hover:bg-[#e24e00]" :disabled="messengerMutation.loading.value" @click="connectMessenger">
            {{ messengerMutation.loading.value ? 'Подключаем…' : 'Подключить канал' }}
          </button>
        </div>
      </div>
    </div>

    <div
      v-if="message"
      class="alert"
      :class="messageTone === 'success' ? 'alert-success' : 'alert-error'"
    >
      {{ message }}
    </div>
  </section>
</template>
