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

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import axios from 'axios';
import { api } from '@/lib/api';
import { toFaDigits } from '@/lib/jalali';
import { UiButton, UiCard, UiEmptyState, UiField, UiInput, UiModal, UiPageHeader } from '@/components/ui';
import UiIcon from '@/components/UiIcon.vue';
import PipelineMergeWizard from '@/components/pipeline/PipelineMergeWizard.vue';
import type { PipelineDto } from '@mento/shared';

type PipelineListItem = PipelineDto & {
  dealCount?: number | null;
};

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const okMsg = ref('');
const pipelines = ref<PipelineListItem[]>([]);
const name = ref('');
const mergeOpen = ref(false);
const mergeSourceId = ref<string | null>(null);
const deleteTarget = ref<PipelineListItem | null>(null);
const deleteCountReady = ref(false);
const deleting = ref(false);

const canMerge = computed(() => pipelines.value.length >= 2);

function apiError(e: unknown, fallback: string) {
  if (axios.isAxiosError(e)) {
    const msg = (e.response?.data as { message?: string | string[] })?.message;
    if (Array.isArray(msg)) return msg.join('، ');
    if (msg) return msg;
    if (!e.response) return 'اتصال به API برقرار نشد.';
  }
  return fallback;
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<PipelineListItem[]>('/pipelines');
    pipelines.value = data;
  } catch (e) {
    error.value = apiError(e, 'بارگذاری کاریزها ناموفق بود.');
  } finally {
    loading.value = false;
  }
}

async function createPipeline() {
  const nextName = name.value.trim();
  if (nextName.length < 2 || saving.value) {
    error.value = 'نام کاریز را حداقل با ۲ کاراکتر وارد کنید.';
    return;
  }
  saving.value = true;
  error.value = '';
  okMsg.value = '';
  try {
    await api.post<PipelineDto>('/pipelines', { name: nextName });
    name.value = '';
    okMsg.value = 'کاریز جدید ساخته شد.';
    await load();
  } catch (e) {
    error.value = apiError(e, 'ساخت کاریز ناموفق بود.');
  } finally {
    saving.value = false;
  }
}

function deletePrompt(pipeline: PipelineListItem) {
  if (!deleteCountReady.value) return 'در حال شمارش معاملات این مسیر…';
  const count = pipeline.dealCount ?? 0;
  const name = pipeline.name;
  if (count > 0) {
    return `مسیر «${name}» شامل ${toFaDigits(count)} معامله است. با حذف، این معاملات هم پاک می‌شوند. از حذف مطمئن هستید؟`;
  }
  return `مسیر «${name}» معامله‌ای ندارد. از حذف آن مطمئن هستید؟`;
}

async function openDelete(pipeline: PipelineListItem) {
  deleteTarget.value = pipeline;
  deleteCountReady.value = pipeline.dealCount != null;
  if (deleteCountReady.value) return;
  try {
    const { data } = await api.get<{ dealCount: number }>(
      `/pipelines/${pipeline.id}/merge-preview`,
    );
    if (deleteTarget.value?.id !== pipeline.id) return;
    deleteTarget.value = { ...pipeline, dealCount: data.dealCount };
  } catch (e) {
    if (deleteTarget.value?.id === pipeline.id) {
      error.value = apiError(e, 'شمارش معاملات این مسیر ناموفق بود.');
      deleteTarget.value = null;
    }
    return;
  } finally {
    if (deleteTarget.value?.id === pipeline.id) deleteCountReady.value = true;
  }
}

function closeDelete() {
  if (deleting.value) return;
  deleteTarget.value = null;
  deleteCountReady.value = false;
}

async function confirmDelete() {
  const pipeline = deleteTarget.value;
  if (!pipeline || deleting.value) return;
  deleting.value = true;
  error.value = '';
  okMsg.value = '';
  try {
    await api.delete(`/pipelines/${pipeline.id}`);
    okMsg.value = 'کاریز حذف شد.';
    deleteTarget.value = null;
    await load();
  } catch (e) {
    error.value = apiError(e, 'حذف کاریز ناموفق بود.');
  } finally {
    deleting.value = false;
  }
}

function openMerge(pipeline: PipelineListItem) {
  if (!canMerge.value) return;
  mergeSourceId.value = pipeline.id;
  mergeOpen.value = true;
}

function closeMerge() {
  mergeOpen.value = false;
  mergeSourceId.value = null;
}

async function onMergeDone() {
  okMsg.value = 'کاریز با موفقیت ادغام شد.';
  await load();
  closeMerge();
}

onMounted(load);
</script>

<template>
  <section class="crm-page">
    <UiPageHeader
      title="تنظیمات مسیر فروش"
      lead="مدیریت کاریزهای فروش و آماده‌سازی ادغام مسیرها"
    />

    <p v-if="okMsg" class="ok">{{ okMsg }}</p>
    <p v-if="error" class="error">{{ error }}</p>
    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>

    <form class="crm-form" @submit.prevent="createPipeline">
      <UiCard>
        <template #header>
          <div class="card-title">
            <UiIcon name="plus" :size="18" />
            <h3>کاریز جدید</h3>
          </div>
        </template>
        <div class="form-grid">
          <UiField label="نام کاریز" required for-id="pipeline-name">
            <UiInput id="pipeline-name" v-model="name" required placeholder="مثلاً فروش سازمانی" />
          </UiField>
        </div>
        <template #footer>
          <UiButton type="submit" :loading="saving">افزودن کاریز</UiButton>
        </template>
      </UiCard>
    </form>

    <div v-if="pipelines.length" class="list">
      <UiCard v-for="pipeline in pipelines" :key="pipeline.id" padding="sm" class="pipeline-card">
        <div class="row">
          <span class="dot" aria-hidden="true" />
          <div class="info">
            <div class="title-row">
              <strong>{{ pipeline.name }}</strong>
              <em v-if="pipeline.isDefault">پیش‌فرض</em>
            </div>
            <span class="muted">
              {{ toFaDigits(pipeline.stages.length) }} مرحله
              <template v-if="pipeline.dealCount != null">
                · {{ toFaDigits(pipeline.dealCount) }} معامله
              </template>
            </span>
          </div>
          <div class="ops">
            <UiButton
              size="sm"
              variant="ghost"
              :disabled="!canMerge"
              @click="openMerge(pipeline)"
            >
              ادغام
            </UiButton>
            <UiButton size="sm" variant="danger" @click="openDelete(pipeline)">
              حذف
            </UiButton>
          </div>
        </div>
      </UiCard>
    </div>

    <UiEmptyState
      v-else-if="!loading"
      title="کاریزی تعریف نشده."
      description="اولین مسیر فروش را اضافه کنید."
    />

    <UiModal
      :open="!!deleteTarget"
      title="حذف کاریز"
      @close="closeDelete"
    >
      <p v-if="deleteTarget" class="confirm">{{ deletePrompt(deleteTarget) }}</p>
      <template #footer>
        <UiButton variant="ghost" :disabled="deleting" @click="closeDelete">انصراف</UiButton>
        <UiButton
          variant="danger"
          :loading="deleting"
          :disabled="!deleteCountReady"
          @click="confirmDelete"
        >
          حذف کاریز
        </UiButton>
      </template>
    </UiModal>

    <UiModal :open="mergeOpen" title="ادغام کاریز" @close="closeMerge">
      <PipelineMergeWizard
        :open="mergeOpen"
        :source-id="mergeSourceId"
        @close="closeMerge"
        @done="onMergeDone"
      />
    </UiModal>
  </section>
</template>

<style scoped>
.crm-page {
  display: grid;
  gap: 1rem;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.card-title h3 {
  margin: 0;
  font-size: 1rem;
}

.form-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  align-items: end;
}

.list {
  display: grid;
  gap: 0.65rem;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
}

.info {
  flex: 1 1 12rem;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.title-row em {
  font-style: normal;
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.ops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.muted {
  color: var(--muted);
  font-size: 0.85rem;
}

.confirm {
  margin: 0;
  line-height: 1.8;
  color: #0f172a;
}

.ok {
  color: #0f766e;
  margin: 0;
}

.error {
  color: #b91c1c;
  margin: 0;
}
</style>