<script setup lang="ts">
import { useMutation, useQuery } from '@vue/apollo-composable';
import {
  ManagerOrdersDocument,
  ManagerUsersDetailDocument,
  RegistrationRequestsDocument,
  ReviewRegistrationRequestDocument,
  type ManagerOrdersQuery,
  type ManagerUsersDetailQuery,
  type RegistrationRequestsQuery,
} from '~/composables/graphql/generated';
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';

definePageMeta({
  middleware: ['manager-only'],
  path: '/admin/orders/:mode(clients|requests)/:id',
  alias: ['/clients/:id'],
});

type ManagerUserItem = ManagerUsersDetailQuery['managerUsers'][number];
type ManagerOrderItem = ManagerOrdersQuery['managerOrders'][number];
type RequestItem = RegistrationRequestsQuery['registrationRequests'][number];

const route = useRoute();
const entityId = computed(() => String(route.params.id || ''));
const entityMode = computed(() => String(route.params.mode || 'clients'));
const isRequestMode = computed(() => entityMode.value === 'requests');
const backTarget = computed(() => '/admin/orders/clients');

const usersQuery = useQuery(ManagerUsersDetailDocument);
const requestsQuery = useQuery(RegistrationRequestsDocument, {
  status: null,
});
const userOrdersQuery = useQuery(ManagerOrdersDocument, () => ({
  status: null,
  customerId: isRequestMode.value ? null : entityId.value,
}));
const reviewMutation = useMutation(ReviewRegistrationRequestDocument);

const currentUser = computed<ManagerUserItem | null>(() =>
  (usersQuery.result.value?.managerUsers ?? []).find((item: ManagerUserItem) => item.id === entityId.value) ?? null,
);

const currentRequest = computed(() =>
  (requestsQuery.result.value?.registrationRequests ?? []).find((item: RequestItem) => item.id === entityId.value),
);

const currentUserOrders = computed<ManagerOrderItem[]>(() => userOrdersQuery.result.value?.managerOrders ?? []);

const {
  canLoadMore: canLoadMoreUserOrders,
  loadMore: loadMoreUserOrders,
  loadMoreSentinel: loadMoreUserOrdersSentinel,
  remainingCount: remainingUserOrdersCount,
  visibleItems: visibleUserOrders,
} = useIncrementalList(currentUserOrders, {
  pageSize: 24,
  enabled: computed(() => !isRequestMode.value),
  resetKeys: [entityId, isRequestMode],
});

function userInitials(fullName: string) {
  const parts = fullName
    .trim()
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2);

  if (!parts.length) {
    return 'FR';
  }

  return parts.map((part) => part[0]?.toUpperCase() ?? '').join('');
}

async function approveRequest() {
  if (!currentRequest.value) {
    return;
  }

  await reviewMutation.mutate({
    input: {
      requestId: currentRequest.value.id,
      decision: 'APPROVE',
    },
  });

  await requestsQuery.refetch({ status: null });
}

async function rejectRequest() {
  if (!currentRequest.value) {
    return;
  }

  await reviewMutation.mutate({
    input: {
      requestId: currentRequest.value.id,
      decision: 'REJECT',
      rejectionReason: 'Не хватает данных для регистрации.',
    },
  });

  await requestsQuery.refetch({ status: null });
}
</script>

<template>
  <section class="space-y-6">
    <template v-if="isRequestMode">
      <div v-if="requestsQuery.loading.value" class="manager-empty-state">
        Загружаем карточку клиента...
      </div>

      <div v-else-if="!currentRequest" class="manager-empty-state">
        Карточка клиента не найдена.
      </div>

      <template v-else>
        <UiBackHeader
          :to="backTarget"
          back-label="Назад к пользователям"
          :title="`Заявка ${currentRequest.companyName}`"
          :subtitle="`Контакт: ${currentRequest.contactName} · ${currentRequest.email}`"
        >
          <template #actions>
            <div v-if="currentRequest.status === 'PENDING'" class="flex flex-wrap gap-2">
              <button class="btn btn-success border-0" @click="approveRequest">Одобрить</button>
              <button class="btn btn-error border-0" @click="rejectRequest">Отклонить</button>
            </div>
          </template>
        </UiBackHeader>

        <div class="grid gap-4 lg:grid-cols-3">
          <div class="manager-stat-card">
            <p class="manager-stat-label">Статус</p>
            <p class="manager-stat-value text-lg">
              {{ currentRequest.status === 'APPROVED' ? 'Активен' : currentRequest.status === 'REJECTED' ? 'Отклонен' : 'На проверке' }}
            </p>
          </div>
          <div class="manager-stat-card">
            <p class="manager-stat-label">Дата заявки</p>
            <p class="manager-stat-value text-lg">{{ new Date(currentRequest.createdAt).toLocaleDateString() }}</p>
          </div>
          <div class="manager-stat-card">
            <p class="manager-stat-label">ИНН</p>
            <p class="manager-stat-value text-lg">{{ currentRequest.inn || 'Не указан' }}</p>
          </div>
        </div>
      </template>
    </template>

    <template v-else>
      <div v-if="usersQuery.loading.value || userOrdersQuery.loading.value" class="manager-empty-state">
        Загружаем пользователя...
      </div>

      <div v-else-if="!currentUser" class="manager-empty-state">
        Пользователь не найден.
      </div>

      <template v-else>
        <UiBackHeader
          :to="backTarget"
          back-label="Назад к пользователям"
          :title="`Клиент ${currentUser.fullName}`"
          :subtitle="currentUser.companyName || currentUser.email"
        />

        <div class="rounded-[36px] bg-[#edf3ee] p-6 md:p-8">
          <div class="flex flex-col gap-6 md:flex-row md:items-start">
            <div class="flex shrink-0 justify-center md:block">
              <img
                v-if="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
                :src="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
                :alt="currentUser.fullName"
                class="h-28 w-28 rounded-[36px] object-cover shadow-[0_14px_30px_rgba(18,56,36,0.14)]"
              >
              <div
                v-else
                class="flex h-28 w-28 items-center justify-center rounded-[36px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-4xl font-black text-[#123824] shadow-[0_14px_30px_rgba(18,56,36,0.14)]"
              >
                {{ userInitials(currentUser.fullName) }}
              </div>
            </div>

            <div class="min-w-0 flex-1 space-y-5">
              <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                <div class="rounded-[24px] bg-white/70 px-4 py-3">
                  <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Email</p>
                  <p class="mt-1 break-words text-sm font-semibold text-[#123824]">{{ currentUser.email }}</p>
                </div>
                <div class="rounded-[24px] bg-white/70 px-4 py-3">
                  <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Telegram</p>
                  <p class="mt-1 text-sm font-semibold text-[#123824]">
                    {{ currentUser.telegramConnection?.username ? `@${currentUser.telegramConnection.username}` : 'Не подключен' }}
                  </p>
                </div>
                <div class="rounded-[24px] bg-white/70 px-4 py-3">
                  <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Компания</p>
                  <p class="mt-1 text-sm font-semibold text-[#123824]">{{ currentUser.companyName || 'Не указана' }}</p>
                </div>
                <div class="rounded-[24px] bg-white/70 px-4 py-3">
                  <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">ИНН</p>
                  <p class="mt-1 text-sm font-semibold text-[#123824]">{{ currentUser.inn || 'Не указан' }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="space-y-4">
          <div class="space-y-1">
            <h2 class="text-2xl font-black tracking-[-0.03em] text-[#123824]">Заказы пользователя</h2>
            <p class="text-sm text-[#5c7b69]">
              Всего заказов: {{ currentUser.orderCount }}
            </p>
          </div>

          <div class="surface-card rounded-3xl p-5">
            <div v-if="currentUserOrders.length === 0" class="manager-empty-state mt-4">
              У пользователя пока нет заказов.
            </div>
            <div v-else class="mt-4 space-y-3">
              <OrdersOrderSummaryCard
                v-for="order in visibleUserOrders"
                :key="order.id"
                :to="`/admin/orders/${order.id}`"
                :code="order.code"
                :status="order.status"
                :created-at="order.createdAt"
                :total-price="order.totalPrice"
                :items="order.items"
              />

              <div
                v-if="canLoadMoreUserOrders"
                ref="loadMoreUserOrdersSentinel"
                class="flex justify-center pt-2"
              >
                <button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreUserOrders">
                  Показать ещё {{ Math.min(remainingUserOrdersCount, 24) }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </template>
    </template>
  </section>
</template>
