<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import {
  MeDocument,
  MyMessengerConnectionsDocument,
} from '~/composables/graphql/generated';
import { buildMessengerBotStartUrl } from '~/composables/useMessengerBotLink';

type MessengerItem = {
  type: 'TELEGRAM' | 'MAX';
  isActive: boolean;
  channelId: string;
};

const config = useRuntimeConfig();
const meQuery = useQuery(MeDocument);
const connectionsQuery = useQuery(MyMessengerConnectionsDocument);

const telegramConnection = computed(() =>
  connectionsQuery.result.value?.myMessengerConnections?.find(
    (item: MessengerItem) => item.type === 'TELEGRAM' && item.isActive,
  ),
);

const maxConnection = computed(() =>
  connectionsQuery.result.value?.myMessengerConnections?.find(
    (item: MessengerItem) => item.type === 'MAX' && item.isActive,
  ),
);

function buildBotConnectUrl(baseUrl: string) {
  const accountEmail = meQuery.result.value?.me?.email?.trim().toLowerCase();
  if (!accountEmail || !baseUrl) {
    return '';
  }

  return buildMessengerBotStartUrl(baseUrl, accountEmail);
}

const telegramConnectUrl = computed(() => buildBotConnectUrl(config.public.telegramBotUrl || ''));
const maxConnectUrl = computed(() => buildBotConnectUrl(config.public.maxBotUrl || ''));
</script>

<template>
  <section class="space-y-6">
    <NuxtLink to="/profile" class="link link-hover text-sm">← Назад в профиль</NuxtLink>
    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Уведомления</h1>

    <div class="surface-card rounded-3xl p-5">
      <p class="text-sm text-[#355947]">
        Подключите Telegram и Max, чтобы получать статусы заказов и важные уведомления в удобном канале.
      </p>

      <div class="mt-4 space-y-3">
        <div class="rounded-2xl bg-[#f8fbf9] p-4 transition hover:shadow-md">
          <p class="font-semibold">Telegram</p>
          <p class="text-sm opacity-80">
            {{ telegramConnection ? `Подключен: ${telegramConnection.channelId}` : 'Не подключен' }}
          </p>
          <a
            :href="telegramConnectUrl || undefined"
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-secondary mt-3 w-full"
            :class="{ 'btn-disabled pointer-events-none': !telegramConnectUrl }"
          >
            {{ telegramConnection ? 'Переподключить Telegram' : 'Подключить Telegram' }}
          </a>
        </div>

        <div class="rounded-2xl bg-[#f8fbf9] p-4 transition hover:shadow-md">
          <p class="font-semibold">Max</p>
          <p class="text-sm opacity-80">
            {{ maxConnection ? `Подключен: ${maxConnection.channelId}` : 'Не подключен' }}
          </p>
          <a
            :href="maxConnectUrl || undefined"
            target="_blank"
            rel="noopener noreferrer"
            class="btn btn-accent mt-3 w-full"
            :class="{ 'btn-disabled pointer-events-none': !maxConnectUrl }"
          >
            {{ maxConnection ? 'Переподключить Max' : 'Подключить Max' }}
          </a>
        </div>
      </div>
    </div>
  </section>
</template>
