<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import {
  MyCounterpartyProfileDocument,
  MyDeliveryAddressesDocument,
  MyMessengerConnectionsDocument,
  type MyDeliveryAddressesQuery,
} from '~/composables/graphql/generated';
import { isCounterpartyProfileComplete } from '~/composables/useCounterpartyProfile';

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

type DeliveryAddressItem = MyDeliveryAddressesQuery['myDeliveryAddresses'][number];

const profileQuery = useQuery(MyCounterpartyProfileDocument);
const connectionsQuery = useQuery(MyMessengerConnectionsDocument);
const deliveryAddressesQuery = useQuery(MyDeliveryAddressesDocument);

const profileIsComplete = computed(() => isCounterpartyProfileComplete(profileQuery.result.value?.myCounterpartyProfile));

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

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

const connectedMessengerCount = computed(() => Number(telegramConnected.value) + Number(maxConnected.value));

const notificationsSummary = computed(() => {
  if (connectedMessengerCount.value === 0) {
    return 'Уведомления не подключены. Подключите Telegram и Max для удобной работы с заказами.';
  }
  if (connectedMessengerCount.value === 1) {
    return 'Подключен 1 канал. Рекомендуем подключить второй канал как резервный.';
  }
  return 'Оба канала подключены. Вы будете получать уведомления в Telegram и Max.';
});

const deliveryAddresses = computed<DeliveryAddressItem[]>(() => deliveryAddressesQuery.result.value?.myDeliveryAddresses ?? []);
const defaultDeliveryAddress = computed(() => deliveryAddresses.value.find((item) => item.isDefault) ?? null);
</script>

<template>
  <section class="space-y-6">
    <h1 class="text-3xl font-extrabold text-[#0f2f20]">Профиль</h1>

    <div class="grid gap-4 md:grid-cols-3">
      <NuxtLink to="/profile/counterparty" class="block rounded-3xl border border-[#d6ebde] bg-[#f7fffb] p-5 transition hover:shadow-md">
        <p class="text-sm opacity-70">Карточка контрагента</p>
        <p class="mt-2 text-lg font-bold text-[#123824]">{{ profileIsComplete ? 'Заполнена' : 'Требует внимания' }}</p>
        <p class="mt-2 text-sm text-[#355947]">
          {{
            profileIsComplete
              ? 'Данные контрагента заполнены.'
              : 'Пожалуйста, заполните карточку контрагента, чтобы получить максимум возможностей личного кабинета.'
          }}
        </p>
      </NuxtLink>

      <NuxtLink to="/profile/notifications" class="block rounded-3xl border border-[#d6ebde] bg-[#f7fffb] p-5 transition hover:shadow-md">
        <p class="text-sm opacity-70">Уведомления</p>
        <p class="mt-2 text-lg font-bold text-[#123824]">{{ connectedMessengerCount }}/2 каналов подключено</p>
        <p class="mt-2 text-sm text-[#355947]">{{ notificationsSummary }}</p>
      </NuxtLink>

      <NuxtLink to="/profile/addresses" class="block rounded-3xl border border-[#d6ebde] bg-[#f7fffb] p-5 transition hover:shadow-md">
        <p class="text-sm opacity-70">Адреса доставки</p>
        <p class="mt-2 text-lg font-bold text-[#123824]">{{ deliveryAddresses.length }}</p>
        <p class="mt-2 text-sm text-[#355947]">
          {{
            defaultDeliveryAddress
              ? `Основной: ${defaultDeliveryAddress.label || defaultDeliveryAddress.address}`
              : 'Адреса пока не добавлены. Добавьте минимум один адрес доставки.'
          }}
        </p>
      </NuxtLink>
    </div>
  </section>
</template>
