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

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import type { PublicLeadFormDto, SubmitLeadFormResponse } from '@mento/shared';
import UiIcon from '@/components/UiIcon.vue';
import JalaliDateInput from '@/components/JalaliDateInput.vue';
import {
  FormFileTooLargeError,
  FORM_FILE_MAX_BYTES,
  encodeFormFileValue,
  formFileDisplayName,
  prepareFormFieldFile,
} from '@/lib/form-file-compress';

const route = useRoute();
const loading = ref(true);
const saving = ref(false);
const error = ref('');
const fieldErrors = reactive<Record<string, string>>({});
const fileBusy = reactive<Record<string, boolean>>({});
const fileInputKey = reactive<Record<string, number>>({});
const done = ref(false);
const thankYou = ref('');
const started = ref(false);
const form = ref<PublicLeadFormDto | null>(null);
const values = reactive<Record<string, string>>({});
const honeypot = ref('');
const token = String(route.params.token || '');
/** حالت پیش‌نمایش سازنده: نسخهٔ ذخیره‌نشده از localStorage خوانده می‌شود و ارسال/آمار غیرفعال است */
const isPreview = route.query.preview === '1';
const PREVIEW_KEY = `lead-form-preview:${token}`;

function readPreviewDraft(): PublicLeadFormDto | null {
  try {
    const raw = localStorage.getItem(PREVIEW_KEY);
    return raw ? (JSON.parse(raw) as PublicLeadFormDto) : null;
  } catch {
    return null;
  }
}

function applyLoaded(data: PublicLeadFormDto) {
  form.value = data;
  for (const field of data.fields) {
    if (field.fieldType === 'heading') continue;
    values[field.key] = values[field.key] ?? '';
  }
}

function onStorage(e: StorageEvent) {
  if (e.key !== PREVIEW_KEY) return;
  const draft = readPreviewDraft();
  if (draft) applyLoaded(draft);
}

const coverUrl = computed(() =>
  form.value?.coverPath || (form.value?.hasCover ? `/api/public/forms/${token}/cover` : ''),
);

function readUtm() {
  const q = route.query;
  const pick = (key: string) => {
    const v = q[key];
    return typeof v === 'string' ? v : Array.isArray(v) ? String(v[0] || '') : '';
  };
  return {
    source: pick('utm_source'),
    medium: pick('utm_medium'),
    campaign: pick('utm_campaign'),
    term: pick('utm_term'),
    content: pick('utm_content'),
    landingPage: typeof window !== 'undefined' ? window.location.href : '',
    referrer: typeof document !== 'undefined' ? document.referrer : '',
  };
}

async function postEvent(type: 'view' | 'start') {
  try {
    await axios.post(`/api/public/forms/${token}/event`, { type });
  } catch {
    /* ignore analytics errors */
  }
}

function onFieldFocus() {
  if (started.value || isPreview) return;
  started.value = true;
  void postEvent('start');
}

async function load() {
  loading.value = true;
  error.value = '';
  if (isPreview) {
    const draft = readPreviewDraft();
    if (draft) {
      applyLoaded(draft);
      loading.value = false;
      window.addEventListener('storage', onStorage);
      return;
    }
  }
  try {
    const { data } = await axios.get<PublicLeadFormDto>(`/api/public/forms/${token}`);
    applyLoaded(data);
    if (!isPreview) void postEvent('view');
  } catch {
    error.value = 'این فرم پیدا نشد یا غیرفعال است.';
    form.value = null;
  } finally {
    loading.value = false;
  }
}

function setMulti(key: string, option: string, on: boolean) {
  const cur = new Set((values[key] || '').split(',').map((s) => s.trim()).filter(Boolean));
  if (on) cur.add(option);
  else cur.delete(option);
  values[key] = [...cur].join(', ');
}

function hasMulti(key: string, option: string) {
  return (values[key] || '').split(',').map((s) => s.trim()).includes(option);
}

function clearFile(key: string) {
  values[key] = '';
  fieldErrors[key] = '';
  fileInputKey[key] = (fileInputKey[key] ?? 0) + 1;
}

async function onFileChange(key: string, event: Event) {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  fieldErrors[key] = '';
  if (!file) {
    values[key] = '';
    return;
  }
  fileBusy[key] = true;
  try {
    const prepared = await prepareFormFieldFile(file);
    values[key] = encodeFormFileValue(prepared);
  } catch (e) {
    values[key] = '';
    input.value = '';
    fieldErrors[key] =
      e instanceof FormFileTooLargeError
        ? e.message
        : e instanceof Error
          ? e.message
          : 'آپلود فایل ناموفق بود.';
  } finally {
    fileBusy[key] = false;
  }
}

function validateRequiredFiles(): string | null {
  if (!form.value) return null;
  for (const field of form.value.fields) {
    if (field.fieldType !== 'file' || !field.required) continue;
    if (!values[field.key]?.trim()) {
      fieldErrors[field.key] = 'آپلود فایل الزامی است.';
      return `فیلد «${field.label || 'آپلود فایل'}» را کامل کنید.`;
    }
  }
  return null;
}

async function submit() {
  if (!form.value) return;
  if (isPreview) {
    thankYou.value = form.value.thankYouMessage || 'ثبت شد. متشکریم.';
    done.value = true;
    return;
  }
  const fileErr = validateRequiredFiles();
  if (fileErr) {
    error.value = fileErr;
    return;
  }
  if (Object.values(fieldErrors).some(Boolean)) {
    error.value = 'لطفاً خطاهای فایل را برطرف کنید.';
    return;
  }
  saving.value = true;
  error.value = '';
  try {
    const utm = readUtm();
    const { data } = await axios.post<SubmitLeadFormResponse>(
      `/api/public/forms/${token}/submit`,
      {
        values: { ...values },
        utm,
        pageUrl: window.location.href,
        referrer: document.referrer || undefined,
        website: honeypot.value,
      },
    );
    thankYou.value =
      data.message ||
      data.thankYouMessage ||
      'ثبت شد. متشکریم.';
    done.value = true;
    if (data.redirectUrl) window.location.assign(data.redirectUrl);
  } catch (e) {
    if (axios.isAxiosError(e)) {
      const msg = (e.response?.data as { message?: string | string[] })?.message;
      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ارسال ناموفق بود');
    } else error.value = 'ارسال ناموفق بود';
  } finally {
    saving.value = false;
  }
}

onMounted(load);
onBeforeUnmount(() => window.removeEventListener('storage', onStorage));
</script>

<template>
  <main class="shell" dir="rtl">
    <p v-if="isPreview" class="preview-banner">
      حالت پیش‌نمایش — تغییرات ذخیره‌نشده نمایش داده می‌شود و ارسال واقعی انجام نمی‌شود.
    </p>
    <div class="panel">
      <div class="cover" :style="{ background: form?.submitColor || '#14b8a6' }">
        <img v-if="coverUrl" :src="coverUrl" alt="" />
        <UiIcon v-else name="layers" :size="34" />
      </div>

      <div class="body">
      <header>
        <h1>{{ form?.name || 'فرم' }}</h1>
        <p v-if="form?.description">{{ form.description }}</p>
      </header>

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

      <div v-else-if="done" class="success">
        <UiIcon name="check" :size="22" />
        <strong>ثبت شد</strong>
        <p>{{ thankYou }}</p>
      </div>

      <form v-else-if="form" class="fields" @submit.prevent="submit">
        <!-- honeypot -->
        <label class="hp" aria-hidden="true">
          وب‌سایت
          <input v-model="honeypot" type="text" tabindex="-1" autocomplete="off" />
        </label>
        <template v-for="field in form.fields" :key="field.key">
          <p v-if="field.fieldType === 'heading'" class="heading">{{ field.label }}</p>
          <label v-else @focusin="onFieldFocus">
            {{ field.fieldType === 'file' ? (field.label || 'آپلود فایل') : field.label }}
            <span v-if="field.required" class="req">*</span>
            <textarea
              v-if="field.fieldType === 'textarea'"
              v-model="values[field.key]"
              rows="4"
              :placeholder="field.placeholder || ''"
              :required="field.required"
            />
            <select
              v-else-if="field.fieldType === 'select'"
              v-model="values[field.key]"
              :required="field.required"
            >
              <option value="">{{ field.placeholder || 'انتخاب کنید' }}</option>
              <option v-for="o in field.options" :key="o" :value="o">{{ o }}</option>
            </select>
            <div v-else-if="field.fieldType === 'radio'" class="opts">
              <label v-for="o in field.options" :key="o">
                <input v-model="values[field.key]" type="radio" :value="o" :required="field.required" />
                {{ o }}
              </label>
            </div>
            <div v-else-if="field.fieldType === 'checkbox'" class="opts">
              <label v-for="o in field.options" :key="o">
                <input
                  type="checkbox"
                  :checked="hasMulti(field.key, o)"
                  @change="setMulti(field.key, o, ($event.target as HTMLInputElement).checked)"
                />
                {{ o }}
              </label>
            </div>
            <div v-else-if="field.fieldType === 'rating'" class="stars">
              <button
                v-for="n in 5"
                :key="n"
                type="button"
                :class="{ on: Number(values[field.key]) >= n }"
                @click="values[field.key] = String(n)"
              >
                ★
              </button>
            </div>
            <div v-else-if="field.fieldType === 'date'" class="date-field">
              <JalaliDateInput
                v-model="values[field.key]"
                mode="date"
                :required="field.required"
                :placeholder="field.placeholder || 'انتخاب تاریخ شمسی'"
                clearable
              />
            </div>
            <div v-else-if="field.fieldType === 'file'" class="file-field">
              <input
                :key="fileInputKey[field.key] ?? 0"
                type="file"
                :disabled="fileBusy[field.key]"
                :aria-label="field.label || 'آپلود فایل'"
                @change="onFileChange(field.key, $event)"
              />
              <small class="file-hint">
                حداکثر {{ Math.round(FORM_FILE_MAX_BYTES / 1024) }} کیلوبایت پس از فشرده‌سازی
              </small>
              <p v-if="fileBusy[field.key]" class="muted">در حال فشرده‌سازی…</p>
              <p v-else-if="values[field.key]" class="file-ok">
                {{ formFileDisplayName(values[field.key]) }}
                <button type="button" class="file-clear" @click="clearFile(field.key)">
                  حذف
                </button>
              </p>
              <p v-if="fieldErrors[field.key]" class="error">{{ fieldErrors[field.key] }}</p>
            </div>
            <input
              v-else
              v-model="values[field.key]"
              :type="field.fieldType === 'email' ? 'email' : field.fieldType === 'phone' ? 'tel' : field.fieldType === 'number' ? 'number' : 'text'"
              :placeholder="field.placeholder || ''"
              :required="field.required"
            />
          </label>
        </template>
        <p v-if="error" class="error">{{ error }}</p>
        <button
          class="btn"
          type="submit"
          :disabled="saving || Object.values(fileBusy).some(Boolean)"
          :style="{ background: form.submitColor || '#14b8a6' }"
        >
          <UiIcon v-if="!saving" name="send" :size="16" />
          {{ saving ? 'در حال ارسال…' : (form.submitLabel || 'ارسال درخواست') }}
        </button>
        <small class="note">اطلاعات شما محرمانه می‌ماند.</small>
      </form>
      </div>
    </div>
  </main>
</template>

<style scoped>
.shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--bg, #f1f5f9);
  box-sizing: border-box;
  text-align: right;
}
.preview-banner {
  margin: 0;
  width: min(420px, 100%);
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius);
  background: #fef3c7;
  color: #92400e;
  font-size: 0.82rem;
  font-weight: 600;
  box-sizing: border-box;
}
.panel {
  width: min(420px, 100%);
  background: #fff;
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  box-shadow: 0 0 0 1px #e2e8f0, 0 18px 44px rgba(15, 23, 42, 0.1);
}
.cover { aspect-ratio: 3 / 1; display: grid; place-items: center; color: #fff; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.body { padding: 1.1rem 1.15rem 1.25rem; display: grid; gap: 0.75rem; }
header { display: grid; gap: 0.3rem; }
h1 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #0f172a; }
header p, .muted { margin: 0; color: #64748b; font-size: 0.88rem; line-height: 1.7; }
.fields { display: grid; gap: 0.7rem; }
label { display: grid; gap: 0.3rem; color: #475569; font-size: 0.88rem; font-weight: 600; }
.req { color: #ef4444; }
input, textarea, select {
  border: 1px solid #e2e8f0; border-radius: var(--radius); min-height: var(--control-h, 42px); padding: 0.5rem 0.75rem;
  font: inherit; font-weight: 400; color: #0f172a; width: 100%; background: #f8fafc; box-sizing: border-box;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #14b8a6; background: #fff; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); }
.btn {
  border: 0; color: #fff; border-radius: var(--radius); min-height: var(--control-h, 42px); height: var(--control-h, 42px);
  padding: 0 1rem; font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.15rem;
}
.btn:disabled { opacity: 0.7; cursor: default; }
.note { margin: 0; color: #94a3b8; font-size: 0.78rem; text-align: center; }
.error { color: #b42318; margin: 0; font-size: 0.88rem; }
.success { display: grid; justify-items: center; gap: 0.35rem; text-align: center; padding: 1rem; border-radius: var(--radius); background: #ecfdf5; color: #047857; }
.success p { margin: 0; color: #065f46; }
.opts { display: grid; gap: 0.4rem; font-weight: 400; }
.opts label { display: flex; align-items: center; gap: 0.45rem; font-weight: 400; color: #334155; }
.opts input { width: auto; min-height: 0; }
.stars { display: flex; gap: 0.25rem; }
.stars button { border: 0; background: none; font-size: 1.5rem; color: #cbd5e1; cursor: pointer; padding: 0; }
.stars button.on { color: #eab308; }
.heading { margin: 0.2rem 0 0; font-weight: 700; color: #0f172a; }
.date-field { min-width: 0; }
.date-field :deep(.jdi) { width: 100%; }
.file-field { display: grid; gap: 0.35rem; }
.file-field input[type='file'] {
  padding: 0.45rem 0.55rem;
  background: #fff;
  cursor: pointer;
}
.file-hint { color: #94a3b8; font-size: 0.75rem; font-weight: 400; }
.file-ok {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #0f766e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.file-clear {
  border: 0;
  background: #f1f5f9;
  color: #475569;
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.hp {
  position: absolute;
  clip-path: inset(50%);
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
</style>