CRM_Montzar/apps/web/src/components/ExcelImportFlow.vue

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import axios from 'axios';
import { api } from '@/lib/api';
import type {
  ExcelFieldOption,
  ExcelImportPrepareStatus,
  ExcelPreviewResult,
  ImportContactsResult,
} from '@mento/shared';
import {
  previewExcelClient,
  readMappedRowsClient,
  type ClientExcelReadOptions,
} from '@/lib/excel-client';
import { UiBusyOverlay, UiButton, UiModal, UiSelect } from '@/components/ui';

const props = defineProps<{
  previewPath: string;
  importPath: string;
  /** اگر باشد: ابتدا فقط فایل خوانده می‌شود، بعد تکه‌تکه وارد می‌شود (برای فایل‌های خیلی بزرگ) */
  preparePath?: string;
  /**
   * ایمپورت مرورگرگرا: اکسل در مرورگر خوانده می‌شود و فقط JSON کوچک به API می‌رود.
   * برای فایل‌های ده‌ها هزار ردیفی (جلوگیری از ۵۰۲ nginx).
   */
  rowsImportPath?: string;
  clientAliases?: Record<string, string>;
  clientFields?: ExcelFieldOption[];
  /** تشخیص خروجی بدون‌هدر (مثل فعالیت دیدار) */
  clientReadOptions?: ClientExcelReadOptions;
  disabled?: boolean;
}>();

const useClientImport = computed(
  () =>
    Boolean(
      props.rowsImportPath &&
        props.clientAliases &&
        props.clientFields?.length,
    ),
);

const emit = defineEmits<{
  start: [];
  done: [result: ImportContactsResult];
  fail: [message: string];
  settled: [];
}>();

const input = ref<HTMLInputElement | null>(null);
const pending = ref<File | null>(null);
const preview = ref<ExcelPreviewResult | null>(null);
const mapping = reactive<Record<string, string>>({});
const submitting = ref(false);
const phase = ref<'idle' | 'preview' | 'import'>('idle');
const progressLabel = ref('');
/** درصد ۰–۱۰۰؛ در مرحلهٔ خواندن فایل null */
const progressPct = ref<number | null>(null);

const requiredKeys = computed(
  () => preview.value?.fields.filter((f) => f.required).map((f) => f.key) ?? [],
);

const mappedFields = computed(() => new Set(Object.values(mapping).filter(Boolean)));

const canImport = computed(() => requiredKeys.value.every((key) => mappedFields.value.has(key)));

const busyOpen = computed(() => submitting.value && phase.value !== 'idle');
const busyMessage = computed(() => {
  if (phase.value === 'import') {
    return progressLabel.value || 'در حال ورود اطلاعات از اکسل…';
  }
  return 'در حال خواندن و بررسی فایل اکسل…';
});
const busyProgress = computed(() =>
  phase.value === 'import' ? progressPct.value : null,
);

function pick() {
  if (props.disabled || submitting.value) return;
  input.value?.click();
}

function reset() {
  pending.value = null;
  preview.value = null;
  submitting.value = false;
  phase.value = 'idle';
  progressLabel.value = '';
  progressPct.value = null;
  for (const key of Object.keys(mapping)) delete mapping[key];
}

function closeMapper() {
  if (submitting.value) return;
  reset();
  emit('settled');
}

function setColumnField(header: string, field: string) {
  if (field) {
    for (const [col, current] of Object.entries(mapping)) {
      if (col !== header && current === field) mapping[col] = '';
    }
  }
  mapping[header] = field;
}

function mergeImportResults(
  acc: ImportContactsResult,
  part: ImportContactsResult,
): ImportContactsResult {
  const errors = [...acc.errors, ...(part.errors ?? [])];
  return {
    created: acc.created + (part.created ?? 0),
    skipped: acc.skipped + (part.skipped ?? 0),
    errors: errors.slice(0, 200),
    boardId: part.boardId ?? acc.boardId,
    boards: part.boards?.length ? part.boards : acc.boards,
    sessionId: part.sessionId,
    total: part.total ?? acc.total,
    processed: part.processed ?? acc.processed,
    hasMore: part.hasMore,
    nextOffset: part.nextOffset,
  };
}

async function postImportChunk(opts: {
  file?: File;
  map?: Record<string, string>;
  sessionId?: string;
  offset?: number;
}) {
  const form = new FormData();
  if (opts.file) form.append('file', opts.file);
  if (opts.map && Object.values(opts.map).some(Boolean)) {
    form.append('mapping', JSON.stringify(opts.map));
  }
  if (opts.sessionId) form.append('sessionId', opts.sessionId);
  if (opts.offset != null) form.append('offset', String(opts.offset));
  form.append('limit', '250');
  const { data } = await api.post<ImportContactsResult>(props.importPath, form, {
    headers: { 'Content-Type': undefined },
    // خواندن فایل‌های خیلی بزرگ در مرحلهٔ اول ممکن است طول بکشد
    timeout: opts.file ? 10 * 60 * 1000 : 3 * 60 * 1000,
  });
  return data;
}

function updateImportProgress(processed: number, total: number) {
  if (total <= 0) {
    progressPct.value = null;
    progressLabel.value = 'در حال ورود اطلاعات از اکسل…';
    return;
  }
  const pct = Math.max(0, Math.min(100, Math.round((processed / total) * 100)));
  progressPct.value = pct;
  progressLabel.value = `ورود فایل: ${processed.toLocaleString('fa-IR')} از ${total.toLocaleString('fa-IR')} ردیف`;
}

function sleep(ms: number) {
  return new Promise((r) => setTimeout(r, ms));
}

async function postPrepare(file: File, map?: Record<string, string>) {
  if (!props.preparePath) {
    throw new Error('preparePath تنظیم نشده');
  }
  const form = new FormData();
  form.append('file', file);
  if (map && Object.values(map).some(Boolean)) {
    form.append('mapping', JSON.stringify(map));
  }
  // فقط آپلود — پارس روی سرور ناهمگام است؛ تایم‌اوت کوتاه کافی است
  const { data } = await api.post<ImportContactsResult>(props.preparePath, form, {
    headers: { 'Content-Type': undefined },
    timeout: 3 * 60 * 1000,
  });
  return data;
}

async function waitPrepareReady(sessionId: string) {
  if (!props.preparePath) throw new Error('preparePath تنظیم نشده');
  const statusUrl = `${props.preparePath}/${sessionId}`;
  const started = Date.now();
  const maxMs = 15 * 60 * 1000;
  while (Date.now() - started < maxMs) {
    const { data } = await api.get<ExcelImportPrepareStatus>(statusUrl, {
      timeout: 30_000,
    });
    if (data.status === 'ready') {
      progressLabel.value = `فایل آماده شد — ${data.total.toLocaleString('fa-IR')} ردیف`;
      return data;
    }
    if (data.status === 'error') {
      throw new Error(data.error || 'آماده‌سازی فایل اکسل ناموفق بود');
    }
    const parsed = data.parsed || 0;
    progressPct.value = null;
    progressLabel.value = parsed
      ? `در حال خواندن فایل روی سرور… ${parsed.toLocaleString('fa-IR')} ردیف`
      : 'در حال خواندن فایل روی سرور… لطفاً صبر کنید';
    await sleep(1200);
  }
  throw new Error('آماده‌سازی فایل بیش از حد طول کشید. دوباره تلاش کنید.');
}

async function runClientRowsImport(file: File, map?: Record<string, string>) {
  if (!props.rowsImportPath || !props.clientAliases) {
    throw new Error('پیکربندی ایمپورت مرورگر ناقص است');
  }
  phase.value = 'import';
  progressLabel.value = 'در حال خواندن فایل در مرورگر…';
  progressPct.value = 0;

  const rows = await readMappedRowsClient(
    file,
    props.clientAliases,
    map,
    props.clientReadOptions,
  );
  const total = rows.length;
  if (total > 100_000) {
    return {
      created: 0,
      skipped: 0,
      errors: [{ row: 1, message: 'فایل بیش از ۱۰۰۰۰۰ ردیف دارد. فایل را تقسیم کنید.' }],
      total,
      processed: 0,
      hasMore: false,
    };
  }

  updateImportProgress(0, total);
  let acc: ImportContactsResult = { created: 0, skipped: 0, errors: [] };
  let sessionId: string | undefined;
  const chunkSize = 60;

  for (let offset = 0; offset < total; offset += chunkSize) {
    const slice = rows.slice(offset, offset + chunkSize);
    const { data: part } = await api.post<ImportContactsResult>(
      props.rowsImportPath,
      {
        rows: slice,
        offset,
        total,
        sessionId,
      },
      { timeout: 120_000 },
    );
    acc = mergeImportResults(acc, part);
    updateImportProgress(part.processed ?? offset + slice.length, total);
    if (part.errors?.some((e) => e.row === 1 && /حداکثر|بیش از/.test(e.message))) {
      break;
    }
    sessionId = part.sessionId;
    if (!part.hasMore) break;
  }

  updateImportProgress(total, total);
  return acc;
}

async function runChunkedImport(file: File, map?: Record<string, string>) {
  if (useClientImport.value) {
    return runClientRowsImport(file, map);
  }

  phase.value = 'import';
  progressLabel.value = 'در حال ارسال فایل…';
  progressPct.value = 0;

  let acc: ImportContactsResult = { created: 0, skipped: 0, errors: [] };
  let sessionId: string | undefined;
  let offset = 0;
  let guard = 0;
  const maxChunks = 2000;

  if (props.preparePath) {
    const prep = await postPrepare(file, map);
    if (!prep.sessionId) {
      throw new Error(prep.errors[0]?.message || 'آماده‌سازی فایل ناموفق بود');
    }
    sessionId = prep.sessionId;
    progressLabel.value = 'در حال خواندن فایل روی سرور…';
    const ready = await waitPrepareReady(sessionId);
    if (!ready.total) {
      return {
        ...acc,
        total: 0,
        processed: 0,
        hasMore: false,
        errors: ready.error
          ? [{ row: 1, message: ready.error }]
          : [{ row: 1, message: 'هیچ ردیف داده‌ای در فایل نیست' }],
      };
    }
    updateImportProgress(0, ready.total);
  }

  while (guard < maxChunks) {
    guard += 1;
    const part = await postImportChunk({
      file: sessionId ? undefined : file,
      map: sessionId ? undefined : map,
      sessionId,
      offset: sessionId ? offset : undefined,
    });
    acc = mergeImportResults(acc, part);

    const total = part.total ?? 0;
    const processed = part.processed ?? 0;
    updateImportProgress(processed, total);

    if (
      part.errors?.some((e) => e.row === 1 && /بیش از .* ردیف/.test(e.message))
    ) {
      break;
    }

    if (!part.hasMore || !part.sessionId) {
      if (total > 0) updateImportProgress(total, total);
      break;
    }
    sessionId = part.sessionId;
    offset = part.nextOffset ?? processed;
  }

  if (guard >= maxChunks && acc.hasMore) {
    acc.errors = [
      ...acc.errors,
      {
        row: 1,
        message: 'ورود به‌خاطر تعداد مراحل زیاد متوقف شد. از جایی که مانده ادامه دهید یا فایل را تقسیم کنید.',
      },
    ];
  }

  return acc;
}

function apiMessage(e: unknown, fallback: string) {
  if (!axios.isAxiosError(e)) {
    return e instanceof Error && e.message ? e.message : fallback;
  }
  if (e.code === 'ECONNABORTED' || /timeout/i.test(e.message)) {
    return 'مهلت درخواست تمام شد — فایل خیلی بزرگ است یا سرور دیر جواب داد. دوباره تلاش کنید.';
  }
  if (!e.response) {
    return 'ارتباط با سرور برقرار نشد. اتصال را بررسی کنید و دوباره تلاش کنید.';
  }
  const status = e.response.status;
  const data = e.response.data as { message?: string | string[] } | string | undefined;
  let msg: string | undefined;
  if (typeof data === 'string' && data.trim() && !data.trim().startsWith('<')) {
    msg = data.trim().slice(0, 280);
  } else if (data && typeof data === 'object') {
    const m = data.message;
    msg = Array.isArray(m) ? m.join('، ') : m;
  }
  if (msg) return msg;
  if (status === 413) return 'حجم فایل بیش از حد مجاز سرور است.';
  if (status === 502 || status === 504) {
    return 'سرور میانی قطع شد (معمولاً به‌خاطر حجم/زمان فایل). چند دقیقه بعد دوباره تلاش کنید.';
  }
  return `${fallback} (کد ${status})`;
}

async function onFile(ev: Event) {
  const el = ev.target as HTMLInputElement;
  const file = el.files?.[0];
  el.value = '';
  if (!file) return;
  emit('start');
  submitting.value = true;
  phase.value = 'preview';
  try {
    let data: ExcelPreviewResult;
    if (useClientImport.value && props.clientAliases && props.clientFields) {
      progressLabel.value = 'در حال خواندن فایل در مرورگر…';
      data = await previewExcelClient(
        file,
        props.clientAliases,
        props.clientFields,
        props.clientReadOptions,
      );
    } else {
      const form = new FormData();
      form.append('file', file);
      const res = await api.post<ExcelPreviewResult>(props.previewPath, form, {
        headers: { 'Content-Type': undefined },
        timeout: 5 * 60 * 1000,
      });
      data = res.data;
    }
    if (!data.needsMapping) {
      try {
        emit('done', await runChunkedImport(file));
        reset();
        emit('settled');
      } catch (impErr) {
        emit('fail', apiMessage(impErr, 'ایمپورت ناموفق بود'));
        reset();
        emit('settled');
      }
      return;
    }
    pending.value = file;
    preview.value = data;
    for (const col of data.columns) {
      mapping[col.header] = data.suggested[col.header] ?? '';
    }
    phase.value = 'idle';
    submitting.value = false;
    // Allow parent toolbar while user maps columns.
    emit('settled');
  } catch (e) {
    emit('fail', apiMessage(e, 'خواندن فایل اکسل ناموفق بود'));
    reset();
    emit('settled');
  }
}

async function confirmMapping() {
  if (!pending.value || !canImport.value || submitting.value) return;
  emit('start');
  submitting.value = true;
  phase.value = 'import';
  try {
    emit('done', await runChunkedImport(pending.value, { ...mapping }));
    reset();
    emit('settled');
  } catch (e) {
    emit('fail', apiMessage(e, 'ایمپورت ناموفق بود'));
    phase.value = 'idle';
    submitting.value = false;
    progressLabel.value = '';
    progressPct.value = null;
    emit('settled');
  }
}
</script>

<template>
  <span class="excel-import" :class="{ isBusy: submitting }" @click.stop="pick">
    <slot :loading="submitting" :disabled="disabled || submitting" />
    <input
      ref="input"
      type="file"
      accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      hidden
      :disabled="disabled || submitting"
      @change="onFile"
      @click.stop
    />
  </span>

  <UiBusyOverlay
    :open="busyOpen"
    :message="busyMessage"
    :progress="busyProgress"
    nest
  />

  <UiModal :open="!!preview" title="تطبیق ستون‌های اکسل" @close="closeMapper">
    <p class="lead">
      ستون‌های این فایل با قالب سیستم یکی نیست. مشخص کنید هر ستون فایل در کدام فیلد ریخته شود.
    </p>
    <p v-if="preview?.largeFile" class="large-hint">
      فایل بزرگ است ({{ (preview.rowCount ?? 0).toLocaleString('fa-IR') }} ردیف) — ورود به‌صورت چندمرحله‌ای انجام می‌شود.
    </p>
    <div class="rows">
      <div v-for="col in preview?.columns ?? []" :key="col.header" class="row">
        <div class="source">
          <strong>{{ col.header }}</strong>
          <small v-if="col.samples.length">نمونه: {{ col.samples.join('، ') }}</small>
        </div>
        <UiSelect
          :model-value="mapping[col.header] ?? ''"
          :disabled="submitting"
          @update:model-value="setColumnField(col.header, $event)"
        >
          <option value="">نادیده بگیر</option>
          <option v-for="field in preview?.fields ?? []" :key="field.key" :value="field.key">
            {{ field.label }}{{ field.required ? ' *' : '' }}
          </option>
        </UiSelect>
      </div>
    </div>
    <p v-if="!canImport" class="hint">فیلدهای ستاره‌دار را حتماً به یک ستون وصل کنید.</p>
    <template #footer>
      <UiButton variant="ghost" :disabled="submitting" @click="closeMapper">انصراف</UiButton>
      <UiButton :disabled="!canImport" :loading="submitting" @click="confirmMapping">
        ورود فایل
      </UiButton>
    </template>
  </UiModal>
</template>

<style scoped>
.excel-import {
  display: inline-flex;
}

.excel-import.isBusy {
  pointer-events: none;
  opacity: 0.7;
}

.lead {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.7;
}

.large-hint {
  margin: -0.35rem 0 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
  color: var(--fg, inherit);
  font-size: 0.88rem;
  line-height: 1.6;
}

.rows {
  display: grid;
  gap: 0.75rem;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0.75rem;
  align-items: center;
}

.source {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.source strong {
  font-size: 0.95rem;
}

.source small {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hint {
  margin: 0.85rem 0 0;
  color: var(--danger);
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .row {
    grid-template-columns: 1fr;
  }
}
</style>