<script setup lang="ts">
import { useMutation, useQuery } from '@vue/apollo-composable';
import {
  ManagerUsersDetailDocument,
  ManagerSetOrderOfferDocument,
  ManagerSetOrderStatusDocument,
  OrderStatus,
  OrderDetailDocument,
  type OrderDetailQuery,
  type ManagerUsersDetailQuery,
} from '~/composables/graphql/generated';
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
import {
  formatPrice,
} from '~/composables/useOrderDetailPresentation';
import { formatOrderCode } from '~/composables/useOrderCodePresentation';

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

const route = useRoute();
const orderId = computed(() => String(route.params.id || ''));

type ManagerOrderItem = NonNullable<OrderDetailQuery['order']>;
type ManagerCustomerItem = ManagerUsersDetailQuery['managerUsers'][number];
type StatusOption = {
  value: OrderStatus;
  label: string;
};

const orderQuery = useQuery(OrderDetailDocument, () => ({
  id: orderId.value,
}));
const managerUsersQuery = useQuery(ManagerUsersDetailDocument);

const setOfferMutation = useMutation(ManagerSetOrderOfferDocument);
const setOrderStatusMutation = useMutation(ManagerSetOrderStatusDocument);

const itemPriceDrafts = reactive<Record<string, string>>({});
const deliveryTermsDraft = ref('');
const deliveryFeeDraft = ref('');
const editingPriceItemId = ref<string | null>(null);
const editingDeliveryTerms = ref(false);
const editingDeliveryFee = ref(false);
const editingStatus = ref(false);
const statusDraft = ref<OrderStatus | ''>('');
const autosavePending = ref(false);
const statusMutationPending = ref(false);
let autosaveTimer: ReturnType<typeof setTimeout> | null = null;

const currentOrder = computed<ManagerOrderItem | null>(() =>
  orderQuery.result.value?.order ?? null,
);

const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code));
const currentCustomer = computed<ManagerCustomerItem | null>(() => {
  const customerId = currentOrder.value?.customerId;
  if (!customerId) {
    return null;
  }

  return (managerUsersQuery.result.value?.managerUsers ?? []).find((item) => item.id === customerId) ?? null;
});

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('');
}

watch(
  currentOrder,
  (order) => {
    editingPriceItemId.value = null;
    editingDeliveryTerms.value = false;
    editingDeliveryFee.value = false;
    editingStatus.value = false;
    statusDraft.value = '';

    for (const key of Object.keys(itemPriceDrafts)) {
      itemPriceDrafts[key] = '';
    }

    if (!order) {
      deliveryTermsDraft.value = '';
      deliveryFeeDraft.value = '';
      return;
    }

    for (const item of order.items) {
      itemPriceDrafts[item.id] = item.unitPrice == null ? '' : String(item.unitPrice);
    }

    deliveryTermsDraft.value = order.deliveryTerms ?? '';
    deliveryFeeDraft.value = order.deliveryFee == null ? '' : String(order.deliveryFee);
  },
  { immediate: true },
);

function parseMoneyDraft(value: string) {
  const trimmed = String(value).replace(',', '.').trim();
  if (!trimmed) {
    return null;
  }

  const normalized = Number(trimmed);
  if (!Number.isFinite(normalized) || normalized < 0) {
    return null;
  }

  return Math.round((normalized + Number.EPSILON) * 100) / 100;
}

const draftDeliveryTerms = computed(() => deliveryTermsDraft.value.trim() || currentOrder.value?.deliveryTerms || null);
const draftDeliveryFee = computed(() => parseMoneyDraft(deliveryFeeDraft.value));
const canEditOffer = computed(() => currentOrder.value != null);
const activePriceItemIds = computed(() => (
  editingPriceItemId.value ? [editingPriceItemId.value] : []
));
const statusOptions: StatusOption[] = [
  { value: OrderStatus.New, label: 'Заявка' },
  { value: OrderStatus.ManagerProcessing, label: 'В обработке' },
  { value: OrderStatus.WaitingDoubleConfirm, label: 'Предложение' },
  { value: OrderStatus.Confirmed, label: 'Подтвержден' },
  { value: OrderStatus.InProgress, label: 'В работе' },
  { value: OrderStatus.Completed, label: 'Завершен' },
  { value: OrderStatus.ManagerBlocked, label: 'Пауза' },
  { value: OrderStatus.ManagerRejected, label: 'Отклонен менеджером' },
  { value: OrderStatus.ClientRejected, label: 'Отклонен клиентом' },
];

const offerSignature = computed(() => {
  if (!currentOrder.value) {
    return '';
  }

  return JSON.stringify({
    deliveryTerms: deliveryTermsDraft.value.trim(),
    deliveryFee: parseMoneyDraft(deliveryFeeDraft.value),
    itemPrices: currentOrder.value.items.map((item) => ({
      itemId: item.id,
      unitPrice: parseMoneyDraft(itemPriceDrafts[item.id] ?? ''),
    })),
  });
});

const publishedSignature = computed(() => {
  if (!currentOrder.value) {
    return '';
  }

  return JSON.stringify({
    deliveryTerms: currentOrder.value.deliveryTerms ?? '',
    deliveryFee: currentOrder.value.deliveryFee ?? null,
    itemPrices: currentOrder.value.items.map((item) => ({
      itemId: item.id,
      unitPrice: item.unitPrice ?? null,
    })),
  });
});

const offerReady = computed(() => {
  if (!currentOrder.value) {
    return false;
  }

  const deliveryFee = parseMoneyDraft(deliveryFeeDraft.value);
  if (deliveryFee == null) {
    return false;
  }

  return currentOrder.value.items.every((item) => parseMoneyDraft(itemPriceDrafts[item.id] ?? '') != null);
});

const offerTotal = computed(() => {
  if (!currentOrder.value || !offerReady.value) {
    return null;
  }

  const productsTotal = currentOrder.value.items.reduce((sum, item) => (
    sum + item.quantity * (parseMoneyDraft(itemPriceDrafts[item.id] ?? '') ?? 0)
  ), 0);

  return Math.round((productsTotal + (parseMoneyDraft(deliveryFeeDraft.value) ?? 0) + Number.EPSILON) * 100) / 100;
});

async function refetchOrder() {
  await orderQuery.refetch({ id: orderId.value });
}

async function focusElement(selector: string) {
  await nextTick();
  document.querySelector<HTMLInputElement | HTMLSelectElement>(selector)?.focus();
}

async function saveOffer() {
  if (!currentOrder.value || !canEditOffer.value) {
    return;
  }

  autosavePending.value = true;
  try {
    await setOfferMutation.mutate({
      input: {
        orderId: currentOrder.value.id,
        itemPrices: currentOrder.value.items.map((item) => ({
          itemId: item.id,
          unitPrice: parseMoneyDraft(itemPriceDrafts[item.id] ?? ''),
        })),
        deliveryTerms: deliveryTermsDraft.value.trim(),
        deliveryFee: parseMoneyDraft(deliveryFeeDraft.value),
      },
    });
    await refetchOrder();
  }
  finally {
    autosavePending.value = false;
  }
}

async function openPriceEditor(itemId: string) {
  if (!canEditOffer.value) {
    return;
  }

  editingPriceItemId.value = itemId;
  await focusElement(`[data-unit-price-input="${itemId}"]`);
}

function closePriceEditor(itemId: string) {
  if (editingPriceItemId.value === itemId) {
    editingPriceItemId.value = null;
  }
}

async function openDeliveryTermsEditor() {
  if (!canEditOffer.value) {
    return;
  }

  editingDeliveryTerms.value = true;
  await focusElement('[data-delivery-terms-input]');
}

function closeDeliveryTermsEditor() {
  editingDeliveryTerms.value = false;
}

async function openDeliveryFeeEditor() {
  if (!canEditOffer.value) {
    return;
  }

  editingDeliveryFee.value = true;
  await focusElement('[data-delivery-fee-input]');
}

function closeDeliveryFeeEditor() {
  editingDeliveryFee.value = false;
}

async function openStatusEditor() {
  if (statusMutationPending.value) {
    return;
  }

  editingStatus.value = true;
  statusDraft.value = currentOrder.value?.status ?? '';
  await focusElement('[data-manager-status-select]');
}

function closeStatusEditor() {
  if (!statusMutationPending.value) {
    editingStatus.value = false;
    statusDraft.value = '';
  }
}

async function applyStatusChange() {
  if (!currentOrder.value || !statusDraft.value) {
    closeStatusEditor();
    return;
  }

  if (statusDraft.value === currentOrder.value.status) {
    closeStatusEditor();
    return;
  }

  statusMutationPending.value = true;

  try {
    await setOrderStatusMutation.mutate({
      orderId: currentOrder.value.id,
      status: statusDraft.value,
    });
    await refetchOrder();
  }
  finally {
    statusMutationPending.value = false;
    closeStatusEditor();
  }
}

watch(
  [offerSignature, publishedSignature],
  ([nextSignature, currentSignature]) => {
    if (autosaveTimer) {
      clearTimeout(autosaveTimer);
      autosaveTimer = null;
    }

    if (!canEditOffer.value || !nextSignature || nextSignature === currentSignature || autosavePending.value) {
      return;
    }

    autosaveTimer = setTimeout(() => {
      void saveOffer();
    }, 700);
  },
);
</script>

<template>
  <section class="space-y-6">
    <div v-if="orderQuery.loading.value" class="manager-empty-state">
      Загружаем заказ...
    </div>

    <div v-else-if="!currentOrder" class="manager-empty-state">
      Заказ не найден.
    </div>

    <template v-else>
      <UiBackHeader
        to="/admin/orders"
        back-label="Назад к заказам клиентов"
        :title="`Заказ ${currentOrderCode}`"
      >
        <template #actions>
          <NuxtLink
            :to="`/admin/orders/clients/${currentOrder.customerId}`"
            class="surface-card surface-card-interactive flex min-w-[220px] items-center gap-3 rounded-[24px] px-4 py-3"
          >
            <img
              v-if="currentCustomer && messengerConnectionAvatarSrc(currentCustomer.telegramConnection)"
              :src="messengerConnectionAvatarSrc(currentCustomer.telegramConnection)"
              :alt="currentCustomer.fullName"
              class="h-12 w-12 rounded-[16px] object-cover"
            >
            <div
              v-else
              class="flex h-12 w-12 shrink-0 items-center justify-center rounded-[16px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-sm font-black text-[#123824]"
            >
              {{ userInitials(currentCustomer?.fullName || 'Fregat') }}
            </div>

            <div class="min-w-0 text-left">
              <p class="truncate text-sm font-bold text-[#123824]">
                {{ currentCustomer?.fullName || 'Клиент' }}
              </p>
              <p class="truncate text-xs text-[#5c7b69]">
                {{ currentCustomer?.companyName || currentCustomer?.email || 'Открыть карточку клиента' }}
              </p>
            </div>
          </NuxtLink>
        </template>
      </UiBackHeader>

      <div class="space-y-4">
        <div class="surface-card rounded-3xl p-5">
          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Статус заказа</p>

          <label v-if="editingStatus" class="mt-3 block">
            <select
              v-model="statusDraft"
              data-manager-status-select
              class="w-full min-w-[220px] rounded-2xl bg-[#f3f5f4] px-4 py-3 text-sm font-semibold text-[#123824] outline-none transition focus:shadow-[0_0_0_3px_rgba(19,153,87,0.12)]"
              :disabled="statusMutationPending"
              @change="void applyStatusChange()"
              @blur="closeStatusEditor"
            >
              <option
                v-for="option in statusOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </option>
            </select>
          </label>

          <button
            v-else
            type="button"
            class="mt-3 rounded-2xl px-0 py-0 text-left"
            @dblclick="void openStatusEditor()"
          >
            <OrdersOrderStatusBadge :status="currentOrder.status" />
          </button>
        </div>

        <div>
          <h2 class="text-xl font-bold text-[#123824]">Состав заказа</h2>
          <OrdersOrderItemsTable
            class="mt-4"
            :items="currentOrder.items"
            :calculation-payload="currentOrder.calculationPayload"
            mode="manager-pricing"
            :unit-price-drafts="itemPriceDrafts"
            :editable-price-item-ids="activePriceItemIds"
            :disabled="!canEditOffer"
            :framed="false"
            price-placeholder="Рассчитывается"
            @update:unit-price="({ itemId, value }) => { itemPriceDrafts[itemId] = value; }"
            @activate:unit-price="void openPriceEditor($event)"
            @finish:unit-price="closePriceEditor($event)"
          />
          <OrdersOrderDeliveryLine
            class="mt-3"
            mode="manager"
            :can-edit="canEditOffer"
            :delivery-address="currentOrder.deliveryAddress"
            :delivery-terms="draftDeliveryTerms"
            :delivery-fee="draftDeliveryFee"
            :editing-delivery-terms="editingDeliveryTerms"
            :editing-delivery-fee="editingDeliveryFee"
            :delivery-terms-draft="deliveryTermsDraft"
            :delivery-fee-draft="deliveryFeeDraft"
            @update:delivery-terms="deliveryTermsDraft = $event"
            @update:delivery-fee="deliveryFeeDraft = $event"
            @activate:delivery-terms="void openDeliveryTermsEditor()"
            @finish:delivery-terms="closeDeliveryTermsEditor()"
            @activate:delivery-fee="void openDeliveryFeeEditor()"
            @finish:delivery-fee="closeDeliveryFeeEditor()"
          />

          <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
            <p class="text-sm text-[#5c7b69]">
              {{
                offerTotal == null
                  ? currentOrder.totalPrice == null
                    ? 'Итог пока не задан.'
                    : `Текущий итог: ${formatPrice(currentOrder.totalPrice)}`
                  : autosavePending
                    ? `Сохраняем: ${formatPrice(offerTotal)}`
                    : `Текущий итог: ${formatPrice(offerTotal)}`
              }}
            </p>
          </div>
        </div>
      </div>
    </template>
  </section>
</template>
