<script setup lang="ts">
import { useQuery } from '@vue/apollo-composable';
import {
  IntegrationSyncDashboardDocument,
  type IntegrationSyncDashboardQuery,
} from '~/composables/graphql/generated';

definePageMeta({
  middleware: ['manager-only'],
  path: '/admin/settings/sync',
});

type SyncItem = IntegrationSyncDashboardQuery['integrationSyncDashboard']['items'][number];

const syncDashboardQuery = useQuery(IntegrationSyncDashboardDocument);

const dashboard = computed(() => syncDashboardQuery.result.value?.integrationSyncDashboard ?? null);
const syncItems = computed<SyncItem[]>(() => dashboard.value?.items ?? []);

function formatDateTime(value?: string | null) {
  if (!value) {
    return 'Пока нет';
  }

  return new Date(value).toLocaleString('ru-RU', {
    day: '2-digit',
    month: 'short',
    hour: '2-digit',
    minute: '2-digit',
  });
}
</script>

<template>
  <section class="space-y-6">
    <div class="space-y-3">
      <h1 class="text-3xl font-extrabold text-[#0f2f20]">1С</h1>
      <p class="max-w-3xl text-sm leading-6 text-[#557562]">
        Витрина контроля будущей интеграции с 1С. Здесь видно, какие контуры уже есть в данных,
        когда в них была последняя активность и под какие workers мы потом соберём реальную синхронизацию.
      </p>
    </div>

    <div v-if="syncDashboardQuery.loading.value" class="manager-empty-state">
      Загружаем контур синхронизации...
    </div>

    <template v-else-if="dashboard">
      <section class="grid gap-4 md:grid-cols-3">
        <article class="surface-card rounded-[28px] bg-white p-5">
          <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Заказы</p>
          <p class="mt-3 text-3xl font-black tracking-[-0.05em] text-[#123824]">
            {{ dashboard.totalOrders }}
          </p>
          <p class="mt-2 text-sm text-[#557562]">
            Последняя активность: {{ formatDateTime(dashboard.lastActivityAt) }}
          </p>
        </article>

        <article class="surface-card rounded-[28px] bg-white p-5">
          <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Каталог</p>
          <p class="mt-3 text-3xl font-black tracking-[-0.05em] text-[#123824]">
            {{ dashboard.totalProducts }}
          </p>
          <p class="mt-2 text-sm text-[#557562]">
            Активных позиций сейчас в базе
          </p>
        </article>

        <article class="surface-card rounded-[28px] bg-white p-5">
          <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Клиенты</p>
          <p class="mt-3 text-3xl font-black tracking-[-0.05em] text-[#123824]">
            {{ dashboard.totalClients }}
          </p>
          <p class="mt-2 text-sm text-[#557562]">
            Клиентских аккаунтов готовы к будущей связке с 1С
          </p>
        </article>
      </section>

      <section class="grid gap-4 xl:grid-cols-2">
        <article
          v-for="item in syncItems"
          :key="item.id"
          class="surface-card rounded-[28px] bg-white p-5"
        >
          <div class="flex flex-wrap items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="flex flex-wrap items-center gap-2">
                <span class="rounded-full bg-[#eef5f0] px-3 py-1 text-xs font-bold uppercase tracking-[0.12em] text-[#4e7060]">
                  {{ item.source }}
                </span>
                <span class="rounded-full bg-[#fff8dc] px-3 py-1 text-xs font-bold text-[#7a5b00]">
                  {{ item.status }}
                </span>
              </div>
              <h2 class="mt-3 text-xl font-bold text-[#123824]">{{ item.title }}</h2>
              <p class="mt-2 text-sm leading-6 text-[#557562]">{{ item.description }}</p>
            </div>

            <div class="rounded-[20px] bg-[#f7fbf8] px-4 py-3 text-right">
              <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">
                Синхронизировано
              </p>
              <p class="mt-2 text-2xl font-black tracking-[-0.04em] text-[#123824]">
                {{ item.syncedCount }}
              </p>
            </div>
          </div>

          <div class="mt-5 grid gap-3 md:grid-cols-2">
            <div class="rounded-[20px] bg-[#f8fbf9] px-4 py-3">
              <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">
                Последняя активность
              </p>
              <p class="mt-2 text-sm font-semibold text-[#123824]">
                {{ formatDateTime(item.lastSyncedAt) }}
              </p>
            </div>

            <div class="rounded-[20px] bg-[#f8fbf9] px-4 py-3">
              <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">
                Следующий шаг
              </p>
              <p class="mt-2 text-sm font-semibold text-[#123824]">
                {{ item.note }}
              </p>
            </div>
          </div>
        </article>
      </section>

      <article class="surface-card rounded-[28px] bg-white p-5">
        <h2 class="text-xl font-bold text-[#123824]">Контур синхронизации</h2>
        <div class="mt-4 grid gap-3 md:grid-cols-4">
          <div class="rounded-[22px] bg-[#f8fbf9] px-4 py-4">
            <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Webhooks</p>
            <p class="mt-2 text-sm leading-6 text-[#123824]">События создания и обновления заказов из 1С.</p>
          </div>
          <div class="rounded-[22px] bg-[#f8fbf9] px-4 py-4">
            <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Pull jobs</p>
            <p class="mt-2 text-sm leading-6 text-[#123824]">Регулярная загрузка каталога, остатков и справочников.</p>
          </div>
          <div class="rounded-[22px] bg-[#f8fbf9] px-4 py-4">
            <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Workers</p>
            <p class="mt-2 text-sm leading-6 text-[#123824]">Отдельные воркеры для заказов, статусов, каталога и складов.</p>
          </div>
          <div class="rounded-[22px] bg-[#f8fbf9] px-4 py-4">
            <p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#688676]">Журнал</p>
            <p class="mt-2 text-sm leading-6 text-[#123824]">Контроль последнего sync, объёма данных и состояния канала.</p>
          </div>
        </div>
      </article>
    </template>
  </section>
</template>
