CRM_Montzar/apps/web/src/views/PipelineBoardView.vue

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
import PipelineToolbar from '@/components/pipeline/PipelineToolbar.vue';
import type { PipelineViewMode } from '@/components/pipeline/PipelineToolbar.vue';
import PipelineBoard from '@/components/pipeline/PipelineBoard.vue';
import PipelineList from '@/components/pipeline/PipelineList.vue';
import DealCardOverlay from '@/components/pipeline/DealCardOverlay.vue';
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
import {
  filterStages,
  mapBoardToStages,
  moveStageToIndex,
  updateDealStage,
} from '@/lib/pipeline-board';
import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
import DealFormView from '@/views/DealFormView.vue';
import SavedFiltersBar from '@/components/SavedFiltersBar.vue';
import {
  DeleteOutlined,
  DownloadOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';
import {
  Alert as AAlert,
  Button as AButton,
  Flex as AFlex,
  Form as AForm,
  FormItem as AFormItem,
  Input as AInput,
  Menu as AMenu,
  MenuItem as AMenuItem,
  Modal,
  Modal as AModal,
  Space as ASpace,
  Spin as ASpin,
  theme,
} from 'ant-design-vue';
import type { ImportContactsResult, PipelineBoardDto, PipelineDto } from '@mento/shared';
import {
  DEAL_EXCEL_ALIASES,
  DEAL_EXCEL_COLUMNS,
  EXCEL_CUSTOM_FIELD_PREFIX,
  brand,
} from '@mento/shared';
import { useAuthStore } from '@/stores/auth';
import { canManageSettings } from '@/lib/roles';
import { bindMenuDismiss, cardMenuStyle } from '@/lib/anchored-menu';

const dealExcelFields = DEAL_EXCEL_COLUMNS.filter((c) => c.key !== '_type').map((c) => ({
  key: c.key,
  label: c.header,
  required: c.key === 'title',
}));
const dealClientReadOptions = {
  rawValues: true,
  customFieldPrefix: EXCEL_CUSTOM_FIELD_PREFIX,
};

const { token } = theme.useToken();
const GAP = 16;

/** پدینگ بیرونی فقط از `.content` شل = ۱۶px */
const pageStyle = {
  boxSizing: 'border-box' as const,
  display: 'flex',
  flexDirection: 'column' as const,
  gap: `${GAP}px`,
  flex: '1 1 auto',
  minHeight: 0,
  minWidth: 0,
  width: '100%',
  height: '100%',
  padding: 0,
  margin: 0,
};

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const canCreatePipeline = computed(() => canManageSettings(auth.user?.role));

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const stages = ref<PipelineStage[]>([]);
const pipelines = ref<PipelineDto[]>([]);
const boardPipelineId = ref('');
const viewMode = ref<PipelineViewMode>('kanban');
const search = ref('');
const amountMin = ref('');
const amountMax = ref('');
const showCreate = ref(false);
const newName = ref('');
const dealModal = ref<{ dealId?: string; stageId?: string } | null>(null);
const stageBusy = ref(false);
const busy = ref(false);
const importMsg = ref('');

const draggingId = ref<string | null>(null);
const draggingColumnId = ref<string | null>(null);
const dropStageId = ref<string | null>(null);
const overlayDeal = ref<PipelineDeal | null>(null);
const overlayAccent = ref<PipelineStage['color']>('green');
const overlayPos = ref({ x: 0, y: 0 });
const menuOpenId = ref<string | null>(null);
const moving = ref(false);

const pipelineOptions = computed(() =>
  pipelines.value.map((p) => ({
    id: p.id,
    name: p.name,
  })),
);

const selectedPipelineId = computed({
  get: () => {
    const q = route.query.pipelineId;
    if (typeof q === 'string' && q) return q;
    return boardPipelineId.value;
  },
  set: (id: string) => {
    void router.replace({ name: 'pipeline', query: { pipelineId: id } });
  },
});

const visibleStages = computed(() =>
  filterStages(stages.value, {
    query: search.value,
    amountMin: amountMin.value === '' ? null : Number(amountMin.value),
    amountMax: amountMax.value === '' ? null : Number(amountMax.value),
  }),
);

const dealsSavedFilters = computed(() => ({
  q: search.value.trim() || undefined,
  amountMin: amountMin.value || undefined,
  amountMax: amountMax.value || undefined,
  pipelineId: selectedPipelineId.value || undefined,
  viewMode: viewMode.value,
}));

function applyDealsSavedFilters(filters: Record<string, unknown>) {
  search.value = typeof filters.q === 'string' ? filters.q : '';
  amountMin.value =
    filters.amountMin == null || filters.amountMin === ''
      ? ''
      : String(filters.amountMin);
  amountMax.value =
    filters.amountMax == null || filters.amountMax === ''
      ? ''
      : String(filters.amountMax);
  if (filters.viewMode === 'list' || filters.viewMode === 'kanban') {
    viewMode.value = filters.viewMode;
  }
  const nextPipeline =
    typeof filters.pipelineId === 'string' ? filters.pipelineId : '';
  if (nextPipeline && nextPipeline !== selectedPipelineId.value) {
    selectedPipelineId.value = nextPipeline;
  }
}

function formatDealDate(iso: string) {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  return formatJalaliNumeric(d);
}

function findAccent(dealId: string): PipelineStage['color'] {
  for (const stage of stages.value) {
    if (stage.deals.some((d) => d.id === dealId)) return stage.color;
  }
  return 'green';
}

async function loadPipelines() {
  const { data } = await api.get<PipelineDto[]>('/pipelines');
  pipelines.value = data;
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    await loadPipelines();
    const pipelineId =
      typeof route.query.pipelineId === 'string'
        ? route.query.pipelineId
        : undefined;
    const { data } = await api.get<PipelineBoardDto>('/pipelines/board', {
      params: pipelineId ? { pipelineId } : undefined,
    });
    boardPipelineId.value = data.pipeline.id;
    stages.value = mapBoardToStages(data, formatDealDate);
    if (!pipelineId || pipelineId !== data.pipeline.id) {
      await router.replace({
        name: 'pipeline',
        query: { pipelineId: data.pipeline.id },
      });
    }
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری مسیر فروش ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

async function createPipeline() {
  const name = newName.value.trim();
  if (name.length < 2 || saving.value) return;
  saving.value = true;
  error.value = '';
  try {
    const { data } = await api.post<PipelineDto>('/pipelines', { name });
    newName.value = '';
    showCreate.value = false;
    await router.replace({ name: 'pipeline', query: { pipelineId: data.id } });
  } catch {
    error.value = 'ساخت مسیر فروش ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

function onPointerMove(event: PointerEvent | MouseEvent) {
  if (!draggingId.value) return;
  overlayPos.value = { x: event.clientX + 12, y: event.clientY + 12 };
}

function onDragStart(deal: PipelineDeal, event: DragEvent) {
  draggingId.value = deal.id;
  overlayDeal.value = deal;
  overlayAccent.value = findAccent(deal.id);
  overlayPos.value = {
    x: (event.clientX || 0) + 12,
    y: (event.clientY || 0) + 12,
  };
  event.dataTransfer?.setData('text/plain', deal.id);
  event.dataTransfer!.effectAllowed = 'move';
  if (event.dataTransfer) {
    const img = new Image();
    img.src =
      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
    event.dataTransfer.setDragImage(img, 0, 0);
  }
}

function onDragEnd() {
  draggingId.value = null;
  dropStageId.value = null;
  overlayDeal.value = null;
}

function onDragOver(stageId: string, event: DragEvent) {
  event.preventDefault();
  dropStageId.value = stageId;
  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
  if (event.clientX || event.clientY) {
    overlayPos.value = { x: event.clientX + 12, y: event.clientY + 12 };
  }
}

async function applyUpdateDealStage(
  dealId: string,
  stageId: string,
  toIndex?: number,
) {
  const prev = stages.value;
  const next = updateDealStage(prev, dealId, stageId, toIndex);
  const target = next.find((s) => s.id === stageId);
  const position = target?.deals.findIndex((d) => d.id === dealId) ?? toIndex;

  stages.value = next;
  moving.value = true;
  error.value = '';
  try {
    await api.patch(`/deals/${dealId}/move`, {
      stageId,
      position: position ?? undefined,
    });
  } catch {
    stages.value = prev;
    error.value = 'جابه‌جایی معامله ناموفق بود.';
  } finally {
    moving.value = false;
  }
}

async function onDrop(stageId: string, event: DragEvent, index?: number) {
  event.preventDefault();
  const raw =
    event.dataTransfer?.getData('text/plain') ||
    draggingColumnId.value ||
    draggingId.value ||
    '';
  dropStageId.value = null;
  draggingId.value = null;
  overlayDeal.value = null;
  if (raw.startsWith('stage:') || draggingColumnId.value) {
    const fromId = raw.replace(/^stage:/, '') || draggingColumnId.value;
    draggingColumnId.value = null;
    if (fromId) await reorderColumn(fromId, stageId);
    return;
  }
  const dealId = raw;
  if (!dealId || moving.value) return;

  const current = stages.value.find((s) => s.deals.some((d) => d.id === dealId));
  const currentIndex = current?.deals.findIndex((d) => d.id === dealId) ?? -1;
  if (current?.id === stageId && (index == null || index === currentIndex)) {
    return;
  }

  await applyUpdateDealStage(dealId, stageId, index);
}

function apiMessage(e: unknown, fallback: string) {
  if (axios.isAxiosError(e)) {
    const msg = (e.response?.data as { message?: string | string[] })?.message;
    if (typeof msg === 'string' && msg) return msg;
    if (Array.isArray(msg) && msg[0]) return String(msg[0]);
  }
  return fallback;
}

function onAddDeal(stageId: string) {
  dealModal.value = { stageId };
}

function onColumnDragStart(stageId: string) {
  draggingColumnId.value = stageId;
}

function onColumnDragEnd() {
  draggingColumnId.value = null;
  dropStageId.value = null;
}

async function persistStageOrder(next: PipelineStage[], prev: PipelineStage[]) {
  if (!boardPipelineId.value || !canCreatePipeline.value) return;
  stages.value = next;
  stageBusy.value = true;
  error.value = '';
  try {
    await api.patch(`/pipelines/${boardPipelineId.value}/stages/order`, {
      stageIds: next.map((s) => s.id),
    });
  } catch (e) {
    stages.value = prev;
    error.value = apiMessage(e, 'جابه‌جایی ستون ناموفق بود.');
  } finally {
    stageBusy.value = false;
  }
}

async function onMoveStage(stageId: string, dir: -1 | 1) {
  if (stageBusy.value) return;
  const from = stages.value.findIndex((s) => s.id === stageId);
  const to = from + dir;
  if (from < 0 || to < 0 || to >= stages.value.length) return;
  await persistStageOrder(
    moveStageToIndex(stages.value, stageId, to),
    stages.value,
  );
}

async function reorderColumn(fromId: string, toId: string) {
  if (stageBusy.value || fromId === toId) return;
  const to = stages.value.findIndex((s) => s.id === toId);
  if (to < 0) return;
  await persistStageOrder(
    moveStageToIndex(stages.value, fromId, to),
    stages.value,
  );
}

async function onRenameStage(stageId: string, title: string) {
  if (!boardPipelineId.value || stageBusy.value) return;
  const prev = stages.value;
  stages.value = prev.map((s) =>
    s.id === stageId ? { ...s, title } : s,
  );
  stageBusy.value = true;
  error.value = '';
  try {
    await api.patch(`/pipelines/${boardPipelineId.value}/stages/${stageId}`, {
      name: title,
    });
  } catch (e) {
    stages.value = prev;
    error.value = apiMessage(e, 'تغییر نام ستون ناموفق بود.');
  } finally {
    stageBusy.value = false;
  }
}

async function onAddStage(name: string) {
  if (!boardPipelineId.value || stageBusy.value) return;
  stageBusy.value = true;
  error.value = '';
  try {
    await api.post(`/pipelines/${boardPipelineId.value}/stages`, { name });
    await load();
  } catch (e) {
    error.value = apiMessage(e, 'افزودن ستون ناموفق بود.');
  } finally {
    stageBusy.value = false;
  }
}

function onDeleteStage(stageId: string) {
  const title = stages.value.find((s) => s.id === stageId)?.title ?? '';
  Modal.confirm({
    title: 'حذف ستون',
    content: `ستون «${title}» حذف شود؟ اگر معامله‌ای داخل آن باشد باید اول آن‌ها را جابه‌جا کنید.`,
    okText: 'حذف',
    cancelText: 'انصراف',
    okButtonProps: { danger: true },
    async onOk() {
      if (!boardPipelineId.value || stageBusy.value) return;
      stageBusy.value = true;
      error.value = '';
      try {
        await api.delete(`/pipelines/${boardPipelineId.value}/stages/${stageId}`);
        await load();
      } catch (e) {
        error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
        throw e;
      } finally {
        stageBusy.value = false;
      }
    },
  });
}

const dealDeleting = ref(false);
const selectMode = ref(false);
const selectedIds = ref<Set<string>>(new Set());

const selectedCount = computed(() => selectedIds.value.size);

function dealTitleById(dealId: string) {
  for (const s of stages.value) {
    const d = s.deals.find((x) => x.id === dealId);
    if (d) return d.title;
  }
  return '';
}

function askDeleteDeal(dealId: string) {
  menuOpenId.value = null;
  confirmDeleteDeals([dealId]);
}

function startSelect(dealId: string) {
  menuOpenId.value = null;
  selectMode.value = true;
  selectedIds.value = new Set([dealId]);
}

function toggleSelect(dealId: string) {
  const next = new Set(selectedIds.value);
  if (next.has(dealId)) next.delete(dealId);
  else next.add(dealId);
  selectedIds.value = next;
  if (!next.size) selectMode.value = false;
}

function clearSelect() {
  selectMode.value = false;
  selectedIds.value = new Set();
}

function askBulkDelete() {
  if (!selectedIds.value.size) return;
  menuOpenId.value = null;
  confirmDeleteDeals([...selectedIds.value]);
}

function confirmDeleteDeals(ids: string[]) {
  if (!ids.length || dealDeleting.value) return;
  const copy =
    ids.length === 1
      ? `معاملهٔ «${dealTitleById(ids[0]!)}» حذف شود؟ این کار قابل بازگشت نیست.`
      : `${toFaDigits(ids.length)} معامله حذف شود؟ این کار قابل بازگشت نیست.`;
  Modal.confirm({
    title: ids.length > 1 ? 'حذف معامله‌ها' : 'حذف معامله',
    content: copy,
    okText: 'حذف',
    cancelText: 'انصراف',
    okButtonProps: { danger: true },
    async onOk() {
      dealDeleting.value = true;
      error.value = '';
      try {
        const results = await Promise.allSettled(ids.map((id) => api.delete(`/deals/${id}`)));
        const failed = results.filter((r) => r.status === 'rejected').length;
        clearSelect();
        await load();
        if (failed) {
          error.value =
            failed === ids.length
              ? 'حذف معامله‌ها ناموفق بود.'
              : `${toFaDigits(failed)} مورد حذف نشد.`;
        }
      } catch (e) {
        error.value = apiMessage(e, 'حذف معامله ناموفق بود.');
        throw e;
      } finally {
        dealDeleting.value = false;
      }
    },
  });
}

async function onDealSaved() {
  dealModal.value = null;
  await load();
}

function onOpenDeal(dealId: string) {
  menuOpenId.value = null;
  void router.push({ name: 'deal-detail', params: { id: dealId } });
}

function findDeal(dealId: string | null) {
  if (!dealId) return null;
  for (const stage of stages.value) {
    const deal = stage.deals.find((d) => d.id === dealId);
    if (deal) return deal;
  }
  return null;
}

function canPromotePrior(deal: PipelineDeal | null) {
  const pa = auth.user?.priorArchive;
  if (!deal || !pa || pa.lens !== 'archive' || !pa.cutoffAt || !deal.createdAt) return false;
  if (deal.promotedFromPriorAt) return false;
  return new Date(deal.createdAt).getTime() < new Date(pa.cutoffAt).getTime();
}

async function promotePriorDeal(dealId: string) {
  menuOpenId.value = null;
  error.value = '';
  try {
    await api.post(`/deals/${dealId}/promote-from-prior`);
    await load();
  } catch (e) {
    error.value = apiMessage(e, 'انتقال معامله به کار جاری ناموفق بود.');
  }
}

const pageBusy = ref(false);
const busyMessage = ref('لطفاً صبر کنید…');

async function exportExcel() {
  busy.value = true;
  pageBusy.value = true;
  busyMessage.value = 'در حال تهیه خروجی اکسل…';
  importMsg.value = '';
  error.value = '';
  try {
    const { data } = await api.get<Blob>('/deals/export', { responseType: 'blob' });
    const url = URL.createObjectURL(data);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${brand.filePrefix}-deals.xlsx`;
    a.click();
    URL.revokeObjectURL(url);
  } catch {
    error.value = 'خروجی اکسل ناموفق بود.';
  } finally {
    busy.value = false;
    pageBusy.value = false;
  }
}

function onImportStart() {
  busy.value = true;
  pageBusy.value = false;
  importMsg.value = '';
  error.value = '';
}

async function onImportDone(data: ImportContactsResult) {
  importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
    data.errors.length ? ` · خطا: ${data.errors.length}` : ''
  }${data.boards?.length ? ` · مسیر فروش: ${data.boards.join('، ')}` : ''}`;
  if (data.errors.length) {
    error.value = data.errors
      .slice(0, 3)
      .map((e) => `ردیف ${e.row}: ${e.message}`)
      .join(' | ');
  }
  if (data.boardId && data.boardId !== selectedPipelineId.value) {
    await router.replace({ name: 'pipeline', query: { pipelineId: data.boardId } });
  } else {
    await load();
  }
}

function onImportFail(message: string) {
  error.value = message;
}

function onImportSettled() {
  busy.value = false;
  pageBusy.value = false;
}

const menuStyle = ref<Record<string, string> | null>(null);

function onMenuDeal(dealId: string) {
  menuOpenId.value = menuOpenId.value === dealId ? null : dealId;
  menuStyle.value = null;
  if (!menuOpenId.value) return;
  void nextTick(() => {
    menuStyle.value = cardMenuStyle(dealId);
  });
}

function onDealMenuClick({ key }: { key: string | number }) {
  const id = menuOpenId.value;
  if (!id) return;
  if (key === 'select') startSelect(id);
  else if (key === 'view') onOpenDeal(id);
  else if (key === 'edit') {
    dealModal.value = { dealId: id };
    menuOpenId.value = null;
  } else if (key === 'promote') void promotePriorDeal(id);
  else if (key === 'delete') askDeleteDeal(id);
  else menuOpenId.value = null;
}

const unbindMenuDismiss = bindMenuDismiss(
  () => menuOpenId.value != null,
  () => (menuOpenId.value = null),
);

watch(viewMode, () => {
  clearSelect();
  menuOpenId.value = null;
});

watch(
  () => route.query.pipelineId,
  (id, prev) => {
    if (id === prev) return;
    void load();
  },
);

onMounted(() => {
  void load();
  window.addEventListener('drag', onPointerMove);
  window.addEventListener('dragover', onPointerMove);
});

onBeforeUnmount(() => {
  unbindMenuDismiss();
  window.removeEventListener('drag', onPointerMove);
  window.removeEventListener('dragover', onPointerMove);
});

defineExpose({ updateDealStage: applyUpdateDealStage });
</script>

<template>
  <div class="pipeline-page" dir="rtl" :style="pageStyle">
    <a-flex vertical :gap="GAP" :style="{ flexShrink: 0 }">
      <PipelineToolbar
        pipeline-name="مسیر فروش"
        :pipeline-options="pipelineOptions"
        v-model:selected-pipeline-id="selectedPipelineId"
        v-model:view-mode="viewMode"
        v-model:search="search"
        v-model:amount-min="amountMin"
        v-model:amount-max="amountMax"
        :can-create="canCreatePipeline"
        @create="showCreate = true"
      >
        <template #excel>
          <a-button :disabled="loading || busy" @click="exportExcel">
            <template #icon><DownloadOutlined /></template>
            خروجی اکسل
          </a-button>
          <ExcelImportFlow
            preview-path="/deals/import/preview"
            import-path="/deals/import"
            rows-import-path="/deals/import/rows"
            :client-aliases="DEAL_EXCEL_ALIASES"
            :client-fields="dealExcelFields"
            :client-read-options="dealClientReadOptions"
            :disabled="loading || busy"
            @start="onImportStart"
            @done="onImportDone"
            @fail="onImportFail"
            @settled="onImportSettled"
          >
            <a-button :disabled="loading || busy">
              <template #icon><UploadOutlined /></template>
              ورود از اکسل
            </a-button>
          </ExcelImportFlow>
        </template>
        <template #filters>
          <SavedFiltersBar
            compact
            scope="deals"
            :current-filters="dealsSavedFilters"
            @apply="applyDealsSavedFilters"
          />
        </template>
      </PipelineToolbar>

      <a-alert v-if="error" type="error" show-icon :message="error" />
      <a-alert v-if="importMsg" type="success" show-icon :message="importMsg" />
      <a-spin v-if="loading && !stages.length" tip="در حال بارگذاری مسیر فروش…" />

      <a-alert
        v-if="selectMode"
        type="info"
        show-icon
        :message="`${toFaDigits(selectedCount)} معامله انتخاب شده`"
      >
        <template #action>
          <a-space>
            <a-button
              v-if="selectedCount"
              type="primary"
              danger
              @click="askBulkDelete"
            >
              <template #icon><DeleteOutlined /></template>
              حذف انتخاب‌شده‌ها
            </a-button>
            <a-button @click="clearSelect">انصراف از انتخاب</a-button>
          </a-space>
        </template>
      </a-alert>
    </a-flex>

    <div
      :style="{
        position: 'relative',
        flex: '1 1 auto',
        minHeight: 0,
        display: 'flex',
        flexDirection: 'column',
      }"
    >
      <div
        v-if="pageBusy"
        :style="{
          position: 'absolute',
          inset: 0,
          zIndex: 2,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: token.colorBgMask,
        }"
      >
        <a-spin :tip="busyMessage" />
      </div>

      <PipelineList
        v-if="viewMode === 'list' && (!loading || stages.length)"
        :stages="visibleStages"
        :select-mode="selectMode"
        :selected-ids="selectedIds"
        @open-deal="onOpenDeal"
        @menu-deal="onMenuDeal"
        @toggle-select="toggleSelect"
        @bulk-delete="askBulkDelete"
      />

      <PipelineBoard
        v-else-if="viewMode === 'kanban' && stages.length"
        :stages="visibleStages"
        :dragging-id="draggingId"
        :drop-stage-id="dropStageId"
        :can-manage="canCreatePipeline"
        :select-mode="selectMode"
        :selected-ids="selectedIds"
        @drag-start="onDragStart"
        @drag-end="onDragEnd"
        @drag-over="onDragOver"
        @drop="onDrop"
        @add-deal="onAddDeal"
        @open-deal="onOpenDeal"
        @menu-deal="onMenuDeal"
        @toggle-select="toggleSelect"
        @bulk-delete="askBulkDelete"
        @rename-stage="onRenameStage"
        @delete-stage="onDeleteStage"
        @move-stage="onMoveStage"
        @column-drag-start="onColumnDragStart"
        @column-drag-end="onColumnDragEnd"
        @add-stage="onAddStage"
      />
    </div>

    <Teleport to="body">
      <DealCardOverlay
        v-if="overlayDeal && draggingId"
        :deal="overlayDeal"
        :accent="overlayAccent"
        :x="overlayPos.x"
        :y="overlayPos.y"
      />
    </Teleport>

    <Teleport to="body">
      <div
        v-if="menuOpenId"
        class="menu-pop"
        :style="{
          position: 'fixed',
          zIndex: 1080,
          ...(menuStyle ?? {}),
        }"
      >
        <a-menu
          :style="{ minWidth: '160px', boxShadow: token.boxShadowSecondary }"
          @click="onDealMenuClick"
        >
          <a-menu-item key="select">انتخاب</a-menu-item>
          <a-menu-item key="view">مشاهده معامله</a-menu-item>
          <a-menu-item key="edit">ویرایش</a-menu-item>
          <a-menu-item
            v-if="canPromotePrior(findDeal(menuOpenId))"
            key="promote"
          >
            انتقال به کار جاری
          </a-menu-item>
          <a-menu-item key="delete" danger>حذف</a-menu-item>
          <a-menu-item key="close">بستن</a-menu-item>
        </a-menu>
      </div>
    </Teleport>

    <a-modal
      :open="showCreate && canCreatePipeline"
      title="مسیر فروش جدید"
      :confirm-loading="saving"
      ok-text="ساخت"
      cancel-text="انصراف"
      :ok-button-props="{ disabled: newName.trim().length < 2 }"
      destroy-on-close
      @ok="createPipeline"
      @cancel="showCreate = false"
    >
      <a-form layout="vertical" @finish="createPipeline">
        <a-form-item label="نام مسیر فروش" required>
          <a-input
            v-model:value="newName"
            placeholder="نام مسیر فروش جدید…"
            :maxlength="120"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      :open="Boolean(dealModal)"
      :title="dealModal?.dealId ? 'ویرایش معامله' : 'ایجاد معامله جدید'"
      :footer="null"
      destroy-on-close
      width="720px"
      @cancel="dealModal = null"
    >
      <DealFormView
        v-if="dealModal"
        embedded
        :deal-id="dealModal.dealId"
        :initial-pipeline-id="selectedPipelineId || undefined"
        :initial-stage-id="dealModal.stageId"
        @saved="onDealSaved"
        @cancel="dealModal = null"
      />
    </a-modal>
  </div>
</template>

<style scoped>
/* پدینگ بیرونی فقط از `.content` شل = ۱۶px */
.pipeline-page {
  margin: 0;
  width: 100%;
}
</style>