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

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import UiIcon from '@/components/UiIcon.vue';
import { UiButton, UiPageHeader } from '@/components/ui';
import type {
  LeadFormDto,
  LeadFormDuplicateMode,
  LeadFormFieldDto,
  LeadFormFieldInput,
  LeadFormFieldType,
  LeadFormMapTo,
  LeadFormSubmissionDto,
  LeadStageDto,
  OrgUserDto,
  PipelineDto,
} from '@mento/shared';
import { toFaDigits } from '@/lib/jalali';

type Tab = 'edit' | 'settings' | 'share' | 'responses';
type IconName =
  | 'user' | 'chat' | 'mail' | 'phone' | 'list' | 'layers' | 'calendar'
  | 'check' | 'chart' | 'document' | 'star' | 'megaphone' | 'building';

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

const loading = ref(true);
const saving = ref(false);
const error = ref('');
const ok = ref('');
const tab = ref<Tab>('edit');
const desktopPreviewOpen = ref(false);
const publishOpen = ref(false);
const advancedOpen = ref(false);
const readyOpen = ref<string | null>('lead');
const editFieldKey = ref<string | null>(null);
const dragKey = ref<string | null>(null);

const form = ref<LeadFormDto | null>(null);
const name = ref('');
const description = ref('');
const fields = ref<LeadFormFieldDto[]>([]);
const submitLabel = ref('ارسال درخواست');
const submitColor = ref('#14b8a6');
const isActive = ref(true);
const createLead = ref(true);
const createPerson = ref(false);
const createDeal = ref(false);
const pipelineId = ref('');
const leadStageId = ref('');
const duplicateMode = ref<LeadFormDuplicateMode>('update');
const source = ref('وب‌سایت');
const thankYouMessage = ref('');
const redirectUrl = ref('');
const assigneeIds = ref<string[]>([]);
const users = ref<OrgUserDto[]>([]);
const pipelines = ref<PipelineDto[]>([]);
const leadStages = ref<LeadStageDto[]>([]);
const submissions = ref<LeadFormSubmissionDto[]>([]);
const coverInput = ref<HTMLInputElement | null>(null);

const toolbox: Array<{ type: LeadFormFieldType; label: string; icon: IconName }> = [
  { type: 'text', label: 'متن کوتاه', icon: 'user' },
  { type: 'textarea', label: 'متن بلند', icon: 'chat' },
  { type: 'email', label: 'ایمیل', icon: 'mail' },
  { type: 'phone', label: 'شماره تماس', icon: 'phone' },
  { type: 'checkbox', label: 'چندانتخابی', icon: 'list' },
  { type: 'select', label: 'لیست کشویی', icon: 'layers' },
  { type: 'date', label: 'تاریخ', icon: 'calendar' },
  { type: 'radio', label: 'دکمه رادیویی', icon: 'check' },
  { type: 'number', label: 'عددی', icon: 'chart' },
  { type: 'file', label: 'آپلود فایل', icon: 'document' },
  { type: 'rating', label: 'امتیازدهی', icon: 'star' },
  { type: 'heading', label: 'متن توضیحی', icon: 'megaphone' },
];

const typeLabel: Record<string, string> = Object.fromEntries(
  toolbox.map((t) => [t.type, t.label]),
);

const readyGroups = [
  {
    key: 'lead', title: 'فیلدهای لید',
    items: [
      { label: 'نام فروشگاه / عنوان', fieldType: 'text' as const, mapTo: 'lead.title' as const },
      { label: 'نام مخاطب', fieldType: 'text' as const, mapTo: 'lead.contactName' as const },
      { label: 'موبایل', fieldType: 'phone' as const, mapTo: 'lead.mobile' as const },
      { label: 'تلفن', fieldType: 'phone' as const, mapTo: 'lead.phone' as const },
      { label: 'شهر', fieldType: 'text' as const, mapTo: 'lead.city' as const },
      { label: 'منطقه', fieldType: 'text' as const, mapTo: 'lead.region' as const },
      { label: 'صنف', fieldType: 'text' as const, mapTo: 'lead.trade' as const },
      { label: 'توضیحات', fieldType: 'textarea' as const, mapTo: 'lead.notes' as const },
    ],
  },
  {
    key: 'personal', title: 'اطلاعات فردی (شخص)',
    items: [
      { label: 'نام و نام خانوادگی', fieldType: 'text' as const, mapTo: 'person.fullName' as const },
      { label: 'ایمیل', fieldType: 'email' as const, mapTo: 'person.email' as const },
      { label: 'موبایل', fieldType: 'phone' as const, mapTo: 'person.mobile' as const },
    ],
  },
  {
    key: 'org', title: 'اطلاعات سازمانی',
    items: [
      { label: 'نام شرکت', fieldType: 'text' as const, mapTo: 'lead.title' as const },
      { label: 'سمت', fieldType: 'text' as const, mapTo: 'person.position' as const },
    ],
  },
  {
    key: 'market', title: 'سؤالات بازاریابی',
    items: [{
      label: 'از کجا آشنا شدید؟', fieldType: 'select' as const, mapTo: 'lead.source' as const,
      options: ['سایت', 'اینستاگرام', 'معرفی'],
    }],
  },
];

const publicBase = computed(() => {
  const env = String(import.meta.env.VITE_LEAD_FORM_PUBLIC_BASE || '').replace(/\/$/, '');
  return env || window.location.origin;
});
const publicUrl = computed(() => (form.value ? `${publicBase.value}${form.value.publicPath}` : ''));
const iframeSnippet = computed(
  () =>
    `<iframe src="${publicUrl.value}" style="width:100%;min-height:600px;border:0" title="${name.value || 'فرم'}" loading="lazy"></iframe>`,
);
const qrUrl = computed(() =>
  `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(publicUrl.value)}`,
);
const coverSrc = computed(() =>
  form.value?.hasCover ? `/api/public/forms/${form.value.publicToken}/cover` : '',
);
const editingField = computed(() => fields.value.find((f) => f.key === editFieldKey.value) ?? null);
const conversionRate = computed(() => {
  const submits = form.value?.submitCount ?? 0;
  const leads = form.value?.leadCreateCount ?? 0;
  if (!submits) return '۰٪';
  return `${toFaDigits(Math.round((leads / submits) * 100))}٪`;
});
const crmSummary = computed(() => {
  const parts: string[] = [];
  if (createLead.value) parts.push('ثبت لید');
  if (createPerson.value) parts.push('شخص');
  if (createDeal.value) parts.push('معامله');
  const stage = leadStages.value.find((s) => s.id === leadStageId.value);
  if (stage) parts.push(`مرحله: ${stage.name}`);
  if (source.value) parts.push(`منبع: ${source.value}`);
  return parts.join(' · ') || 'اتصال CRM تنظیم نشده';
});

function newKey(label: string) {
  const base = label.replace(/\s+/g, '_').slice(0, 24) || 'field';
  let key = `${base}_${Math.random().toString(36).slice(2, 6)}`;
  while (fields.value.some((f) => f.key === key)) key += 'x';
  return key;
}

function defaultMap(type: LeadFormFieldType): LeadFormMapTo {
  if (type === 'email') return 'custom';
  if (type === 'phone') return 'lead.mobile';
  if (type === 'text') return 'lead.contactName';
  if (type === 'textarea') return 'lead.notes';
  return 'custom';
}

function readyIcon(type: LeadFormFieldType | string): IconName {
  return toolbox.find((t) => t.type === type)?.icon ?? 'layers';
}

function addField(type: LeadFormFieldType, preset?: Partial<LeadFormFieldInput>) {
  const meta = toolbox.find((t) => t.type === type);
  const label = preset?.label || meta?.label || 'فیلد جدید';
  const needsOptions = type === 'select' || type === 'radio' || type === 'checkbox';
  fields.value.push({
    id: newKey(label),
    key: newKey(label),
    label,
    fieldType: type,
    required: preset?.required ?? type !== 'heading',
    mapTo: (preset?.mapTo as LeadFormMapTo) || defaultMap(type),
    position: fields.value.length,
    placeholder: preset?.placeholder ?? '',
    options: preset?.options ?? (needsOptions ? ['گزینه ۱', 'گزینه ۲'] : []),
  });
}

function duplicateField(field: LeadFormFieldDto) {
  addField(field.fieldType as LeadFormFieldType, {
    label: `${field.label} (کپی)`,
    mapTo: field.mapTo as LeadFormMapTo,
    options: [...field.options],
    placeholder: field.placeholder,
  });
}

function removeField(key: string) {
  fields.value = fields.value.filter((f) => f.key !== key);
  if (editFieldKey.value === key) editFieldKey.value = null;
}

function onDragStart(key: string) { dragKey.value = key; }
function onDrop(targetKey: string) {
  if (!dragKey.value || dragKey.value === targetKey) return;
  const list = [...fields.value];
  const from = list.findIndex((f) => f.key === dragKey.value);
  const to = list.findIndex((f) => f.key === targetKey);
  if (from < 0 || to < 0) return;
  const [item] = list.splice(from, 1);
  list.splice(to, 0, item!);
  fields.value = list.map((f, i) => ({ ...f, position: i }));
  dragKey.value = null;
}

function applyForm(row: LeadFormDto) {
  form.value = row;
  name.value = row.name;
  description.value = row.description ?? '';
  fields.value = row.fields;
  submitLabel.value = row.submitLabel;
  submitColor.value = row.submitColor;
  isActive.value = row.isActive;
  createLead.value = row.createLead;
  createPerson.value = row.createPerson;
  createDeal.value = row.createDeal;
  pipelineId.value = row.pipelineId ?? '';
  leadStageId.value = row.leadStageId ?? '';
  duplicateMode.value = (row.duplicateMode as LeadFormDuplicateMode) || 'update';
  source.value = row.source ?? 'وب‌سایت';
  thankYouMessage.value = row.thankYouMessage ?? '';
  redirectUrl.value = row.redirectUrl ?? '';
  assigneeIds.value = row.assigneeIds;
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [fRes, uRes, pRes, sRes] = await Promise.all([
      api.get<LeadFormDto>(`/lead-forms/${id.value}`),
      api.get<OrgUserDto[]>('/users'),
      api.get<PipelineDto[]>('/pipelines'),
      api.get<LeadStageDto[]>('/leads/stages'),
    ]);
    applyForm(fRes.data);
    users.value = uRes.data;
    pipelines.value = pRes.data;
    leadStages.value = sRes.data;
  } catch {
    error.value = 'بارگذاری فرم ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

async function save() {
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const { data } = await api.patch<LeadFormDto>(`/lead-forms/${id.value}`, {
      name: name.value.trim(),
      description: description.value.trim() || null,
      isActive: isActive.value,
      createLead: createLead.value,
      createPerson: createPerson.value,
      createDeal: createDeal.value,
      pipelineId: pipelineId.value || null,
      leadStageId: leadStageId.value || null,
      duplicateMode: duplicateMode.value,
      source: source.value.trim() || null,
      thankYouMessage: thankYouMessage.value.trim() || null,
      redirectUrl: redirectUrl.value.trim() || null,
      assigneeIds: assigneeIds.value,
      submitLabel: submitLabel.value.trim() || 'ارسال درخواست',
      submitColor: submitColor.value,
      fields: fields.value.map((f, i) => ({
        key: f.key, label: f.label, fieldType: f.fieldType, required: f.required,
        mapTo: f.mapTo, position: i, placeholder: f.placeholder, options: f.options,
      })),
    });
    applyForm(data);
    ok.value = 'تغییرات ذخیره شد.';
  } 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;
  }
}

async function uploadCover(ev: Event) {
  const file = (ev.target as HTMLInputElement).files?.[0];
  if (!file) return;
  const body = new FormData();
  body.append('file', file);
  try {
    const { data } = await api.post<LeadFormDto>(`/lead-forms/${id.value}/cover`, body);
    applyForm(data);
  } catch {
    error.value = 'آپلود کاور ناموفق بود.';
  }
}

async function clearCover() {
  const { data } = await api.delete<LeadFormDto>(`/lead-forms/${id.value}/cover`);
  applyForm(data);
}

async function loadResponses() {
  tab.value = 'responses';
  const { data } = await api.get<LeadFormSubmissionDto[]>(`/lead-forms/${id.value}/submissions`);
  submissions.value = data;
}

async function copyText(text: string) {
  await navigator.clipboard.writeText(text);
  ok.value = 'کپی شد.';
}

function openPreview() {
  if (!form.value?.publicPath) return;
  window.open(form.value.publicPath, '_blank', 'noopener');
}

function toggleAssignee(uid: string) {
  assigneeIds.value = assigneeIds.value.includes(uid)
    ? assigneeIds.value.filter((x) => x !== uid)
    : [...assigneeIds.value, uid];
}

onMounted(load);
</script>

<template>
  <section class="crm-page page" dir="rtl">
    <UiPageHeader
      title="فرم‌ساز"
      description="فرم را بچینید، پیش‌نمایش بگیرید و پاسخ‌ها را ببینید."
      :back-to="{ name: 'lead-forms' }"
    >
      <template #actions>
        <div class="top-ghosts">
          <UiButton
            variant="secondary"
            type="button"
            :disabled="!form?.publicPath"
            @click="openPreview"
          >
            <template #icon>
              <UiIcon name="eye" :size="15" />
            </template>
            پیش‌نمایش
          </UiButton>
          <UiButton variant="secondary" type="button" @click="publishOpen = true">
            <template #icon>
              <UiIcon name="megaphone" :size="15" />
            </template>
            انتشار فرم
          </UiButton>
        </div>
        <UiButton variant="primary" type="button" :loading="saving" :disabled="saving" @click="save">
          <template #icon>
            <UiIcon name="check" :size="15" />
          </template>
          ذخیره تغییرات
        </UiButton>
      </template>
    </UiPageHeader>
    <p v-if="error" class="banner err">{{ error }}</p>
    <p v-if="ok" class="banner ok">{{ ok }}</p>

    <nav class="tabs">
      <button type="button" :class="{ on: tab === 'edit' }" @click="tab = 'edit'">
        <UiIcon name="pencil" :size="14" /> ویرایش فرم
      </button>
      <button type="button" :class="{ on: tab === 'settings' }" @click="tab = 'settings'">تنظیمات</button>
      <button type="button" :class="{ on: tab === 'share' }" @click="tab = 'share'">اشتراک‌گذاری</button>
      <button type="button" :class="{ on: tab === 'responses' }" @click="loadResponses">پاسخ‌ها</button>
    </nav>

    <div v-if="tab === 'edit'" class="workspace">
      <aside class="preview-col">
        <div class="device-toggle">
          <button type="button" @click="desktopPreviewOpen = true">دسکتاپ</button>
          <button type="button" class="on">موبایل</button>
        </div>
        <div class="phone">
          <div class="cover" :style="{ background: submitColor }">
            <img v-if="coverSrc" :src="coverSrc" alt="" />
            <UiIcon v-else name="layers" :size="28" />
          </div>
          <div class="preview-body">
            <h3>{{ name || 'عنوان فرم' }}</h3>
            <p>{{ description || 'توضیح کوتاه فرم اینجاست.' }}</p>
            <template v-for="f in fields" :key="f.key">
              <p v-if="f.fieldType === 'heading'" class="heading">{{ f.label }}</p>
              <label v-else>
                {{ f.label }}
                <textarea v-if="f.fieldType === 'textarea'" rows="3" :placeholder="f.placeholder || ''" disabled />
                <select v-else-if="f.fieldType === 'select'" disabled>
                  <option>{{ f.placeholder || 'انتخاب کنید' }}</option>
                  <option v-for="o in f.options" :key="o">{{ o }}</option>
                </select>
                <div v-else-if="f.fieldType === 'radio' || f.fieldType === 'checkbox'" class="opts">
                  <span v-for="o in f.options" :key="o">{{ f.fieldType === 'checkbox' ? '☐' : '○' }} {{ o }}</span>
                </div>
                <div v-else-if="f.fieldType === 'rating'" class="stars">★★★★★</div>
                <input v-else disabled :placeholder="f.placeholder || ''" />
              </label>
            </template>
            <button type="button" class="send" :style="{ background: submitColor }">
              <UiIcon name="send" :size="14" /> {{ submitLabel }}
            </button>
            <small>اطلاعات شما محرمانه می‌ماند.</small>
          </div>
        </div>
      </aside>

      <section class="canvas">
        <button class="cover-box" type="button" @click="coverInput?.click()">
          <img v-if="coverSrc" :src="coverSrc" alt="" />
          <span v-else>+ افزودن لوگو یا تصویر کاور</span>
        </button>
        <input ref="coverInput" type="file" accept="image/*" hidden @change="uploadCover" />
        <button v-if="coverSrc" class="link" type="button" @click="clearCover">حذف کاور</button>

        <div class="title-card">
          <input v-model="name" class="title" />
          <textarea v-model="description" rows="2" placeholder="توضیح فرم را بنویسید" />
        </div>

        <article
          v-for="f in fields"
          :key="f.key"
          class="field-card"
          draggable="true"
          @dragstart="onDragStart(f.key)"
          @dragover.prevent
          @drop="onDrop(f.key)"
        >
          <span class="grip"><UiIcon name="grip" :size="16" /></span>
          <div>
            <strong>{{ f.label }}</strong>
            <small>{{ typeLabel[f.fieldType] || f.fieldType }}</small>
          </div>
          <div class="fops">
            <button type="button" title="کپی" @click="duplicateField(f)"><UiIcon name="layers" :size="14" /></button>
            <button type="button" class="danger" title="حذف" @click="removeField(f.key)"><UiIcon name="trash" :size="14" /></button>
            <button type="button" title="ویرایش" @click="editFieldKey = f.key"><UiIcon name="pencil" :size="14" /></button>
          </div>
        </article>

        <button class="add-field" type="button" @click="addField('text')">+ افزودن فیلد جدید</button>

        <div class="submit-card">
          <label>متن دکمه ارسال
            <input v-model="submitLabel" />
          </label>
          <label>رنگ دکمه
            <input v-model="submitColor" type="color" />
          </label>
        </div>

        <button class="adv" type="button" @click="advancedOpen = !advancedOpen">تنظیمات پیشرفته</button>
        <div v-if="advancedOpen" class="adv-box">
          <label class="chk"><input v-model="createLead" type="checkbox" /> ثبت به‌عنوان لید</label>
          <label class="chk"><input v-model="createPerson" type="checkbox" /> ساخت شخص (اختیاری)</label>
          <label class="chk"><input v-model="createDeal" type="checkbox" /> ساخت معامله (اختیاری)</label>
        </div>
      </section>

      <aside class="toolbox">
        <h3>افزودن فیلد</h3>
        <div class="tools">
          <button v-for="t in toolbox" :key="t.type" type="button" @click="addField(t.type)">
            <UiIcon :name="t.icon" :size="16" />
            {{ t.label }}
          </button>
        </div>
        <h3>فیلدهای آماده</h3>
        <div v-for="g in readyGroups" :key="g.key" class="ready">
          <button type="button" class="ready-toggle" @click="readyOpen = readyOpen === g.key ? null : g.key">
            <span>{{ g.title }}</span>
            <span class="ready-caret">{{ readyOpen === g.key ? '▾' : '◂' }}</span>
          </button>
          <div v-if="readyOpen === g.key" class="tools ready-tools">
            <button
              v-for="item in g.items"
              :key="item.label"
              type="button"
              @click="addField(item.fieldType, item)"
            >
              <UiIcon :name="readyIcon(item.fieldType)" :size="16" />
              {{ item.label }}
            </button>
          </div>
        </div>
      </aside>
    </div>

    <section v-else-if="tab === 'settings'" class="panel settings-panel">
      <article class="settings-card">
        <header class="settings-card-head">
          <h3>وضعیت فرم</h3>
          <p>فعال بودن فرم و ثبت مستقیم در لیدها</p>
        </header>
        <div class="toggle-list">
          <label class="toggle-row">
            <span>
              <strong>فرم فعال باشد</strong>
              <small>اگر خاموش باشد لینک عمومی کار نمی‌کند</small>
            </span>
            <input v-model="isActive" type="checkbox" />
          </label>
          <label class="toggle-row">
            <span>
              <strong>ثبت پاسخ به‌عنوان لید</strong>
              <small>هر ارسال در لیست لیدهای CRM ذخیره می‌شود</small>
            </span>
            <input v-model="createLead" type="checkbox" />
          </label>
        </div>
      </article>

      <article class="settings-card">
        <header class="settings-card-head">
          <h3>اتصال به CRM</h3>
          <p>مرحله، منبع، تکراری و پیام بعد از ارسال</p>
        </header>
        <div class="settings-grid">
          <label class="field">مرحله اولیه لید
            <select v-model="leadStageId">
              <option value="">اولین مرحله فعال</option>
              <option v-for="s in leadStages" :key="s.id" :value="s.id">{{ s.name }}</option>
            </select>
          </label>
          <label class="field">منبع بازاریابی
            <input v-model="source" placeholder="مثلاً وب‌سایت" />
          </label>
          <label class="field span-2">سیاست شماره تکراری
            <select v-model="duplicateMode">
              <option value="update">به‌روزرسانی لید موجود</option>
              <option value="skip">رد کردن (ثبت نشود)</option>
              <option value="activity">فقط ثبت رویداد روی لید موجود</option>
            </select>
          </label>
          <label class="field span-2">پیام تشکر
            <input v-model="thankYouMessage" placeholder="پیام بعد از ارسال موفق" />
          </label>
          <label class="field span-2">آدرس بعد از ارسال
            <input v-model="redirectUrl" placeholder="https://..." dir="ltr" />
          </label>
        </div>
      </article>

      <article class="settings-card">
        <header class="settings-card-head">
          <h3>توزیع نوبتی مسئولان</h3>
          <p>لیدهای جدید به‌نوبت به این افراد اختصاص داده می‌شوند</p>
        </header>
        <div class="chips">
          <button
            v-for="u in users"
            :key="u.id"
            type="button"
            class="chip"
            :class="{ on: assigneeIds.includes(u.id) }"
            @click="toggleAssignee(u.id)"
          >
            {{ u.fullName }}
          </button>
        </div>
        <p v-if="!assigneeIds.length" class="settings-empty">مسئولی انتخاب نشده؛ لید بدون مسئول ثبت می‌شود.</p>
      </article>

      <article class="settings-card optional">
        <header class="settings-card-head">
          <h3>مسیر اختیاری</h3>
          <p>فقط در صورت نیاز؛ پیش‌فرض خاموش است</p>
        </header>
        <div class="toggle-list compact">
          <label class="toggle-row">
            <span><strong>ساخت شخص</strong></span>
            <input v-model="createPerson" type="checkbox" />
          </label>
          <label class="toggle-row">
            <span><strong>ساخت معامله</strong></span>
            <input v-model="createDeal" type="checkbox" />
          </label>
        </div>
        <label v-if="createDeal" class="field pipeline-field">مسیر فروش مقصد
          <select v-model="pipelineId">
            <option value="">پیش‌فرض سازمان</option>
            <option v-for="p in pipelines" :key="p.id" :value="p.id">{{ p.name }}</option>
          </select>
        </label>
      </article>

      <div class="settings-actions">
        <button class="btn primary" type="button" :disabled="saving" @click="save">
          ذخیره تنظیمات
        </button>
      </div>
    </section>

    <section v-else-if="tab === 'share'" class="panel">
      <div class="share-actions">
        <button class="btn primary" type="button" @click="publishOpen = true">
          <UiIcon name="megaphone" :size="15" /> باز کردن مودال انتشار
        </button>
      </div>
      <label>لینک عمومی
        <div class="row">
          <input :value="publicUrl" readonly />
          <button class="btn ghost" type="button" @click="copyText(publicUrl)">کپی</button>
        </div>
      </label>
      <label>کد iframe
        <div class="row">
          <textarea class="iframe-code" :value="iframeSnippet" readonly rows="3" />
          <button class="btn ghost" type="button" @click="copyText(iframeSnippet)">کپی</button>
        </div>
      </label>
      <img v-if="publicUrl" :src="qrUrl" alt="QR" width="140" height="140" />
      <p class="crm-hint">{{ crmSummary }}</p>
      <button class="link" type="button" @click="tab = 'settings'">ویرایش اتصال CRM</button>
    </section>

    <section v-else class="panel">
      <div v-if="form" class="stats-grid">
        <div class="stat"><b>{{ toFaDigits(form.viewCount) }}</b><span>بازدید</span></div>
        <div class="stat"><b>{{ toFaDigits(form.startCount) }}</b><span>شروع پر کردن</span></div>
        <div class="stat"><b>{{ toFaDigits(form.submitCount) }}</b><span>ارسال</span></div>
        <div class="stat"><b>{{ toFaDigits(form.leadCreateCount) }}</b><span>لید جدید</span></div>
        <div class="stat"><b>{{ toFaDigits(form.duplicateCount) }}</b><span>تکراری</span></div>
        <div class="stat"><b>{{ conversionRate }}</b><span>نرخ submit→lead</span></div>
      </div>
      <p v-if="!submissions.length">هنوز پاسخی ثبت نشده.</p>
      <article v-for="s in submissions" :key="s.id" class="sub">
        <small>
          {{ new Date(s.createdAt).toLocaleString('fa-IR') }}
          <span v-if="s.status"> · {{ s.status }}</span>
          <span v-if="s.leadId"> · لید</span>
        </small>
        <p v-for="(val, key) in s.values" :key="key"><b>{{ key }}:</b> {{ val }}</p>
      </article>
    </section>

    <div v-if="desktopPreviewOpen" class="overlay desk-overlay" @click.self="desktopPreviewOpen = false">
      <div class="desk-sheet" role="dialog" aria-label="پیش‌نمایش دسکتاپ">
        <header>
          <strong>پیش‌نمایش دسکتاپ</strong>
          <button class="btn ghost" type="button" @click="desktopPreviewOpen = false">بستن</button>
        </header>
        <div class="desk-form">
          <div class="cover" :style="{ background: submitColor }">
            <img v-if="coverSrc" :src="coverSrc" alt="" />
            <UiIcon v-else name="layers" :size="36" />
          </div>
          <div class="preview-body desk-body">
            <h3>{{ name || 'عنوان فرم' }}</h3>
            <p>{{ description || 'توضیح کوتاه فرم اینجاست.' }}</p>
            <div class="desk-fields">
              <template v-for="f in fields" :key="'d-' + f.key">
                <p v-if="f.fieldType === 'heading'" class="heading wide">{{ f.label }}</p>
                <label v-else :class="{ wide: f.fieldType === 'textarea' || f.fieldType === 'checkbox' }">
                  {{ f.label }}
                  <textarea v-if="f.fieldType === 'textarea'" rows="3" :placeholder="f.placeholder || ''" disabled />
                  <select v-else-if="f.fieldType === 'select'" disabled>
                    <option>{{ f.placeholder || 'انتخاب کنید' }}</option>
                    <option v-for="o in f.options" :key="o">{{ o }}</option>
                  </select>
                  <div v-else-if="f.fieldType === 'radio' || f.fieldType === 'checkbox'" class="opts">
                    <span v-for="o in f.options" :key="o">{{ f.fieldType === 'checkbox' ? '☐' : '○' }} {{ o }}</span>
                  </div>
                  <div v-else-if="f.fieldType === 'rating'" class="stars">★★★★★</div>
                  <input v-else disabled :placeholder="f.placeholder || ''" />
                </label>
              </template>
            </div>
            <button type="button" class="send" :style="{ background: submitColor }">
              <UiIcon name="send" :size="14" /> {{ submitLabel }}
            </button>
            <small>اطلاعات شما محرمانه می‌ماند.</small>
          </div>
        </div>
      </div>
    </div>

    <div v-if="editingField" class="overlay" @click.self="editFieldKey = null">
      <div class="sheet">
        <h3>ویرایش فیلد</h3>
        <label>عنوان <input v-model="editingField.label" /></label>
        <label>متن راهنما <input v-model="editingField.placeholder" /></label>
        <label class="chk"><input v-model="editingField.required" type="checkbox" /> الزامی</label>
        <label>اتصال به
          <select v-model="editingField.mapTo">
            <optgroup label="لید">
              <option value="lead.title">عنوان / نام فروشگاه</option>
              <option value="lead.contactName">نام مخاطب</option>
              <option value="lead.mobile">موبایل لید</option>
              <option value="lead.phone">تلفن لید</option>
              <option value="lead.city">شهر</option>
              <option value="lead.region">منطقه</option>
              <option value="lead.trade">صنف</option>
              <option value="lead.notes">یادداشت لید</option>
              <option value="lead.source">منبع لید</option>
            </optgroup>
            <optgroup label="شخص">
              <option value="person.fullName">نام کامل</option>
              <option value="person.firstName">نام</option>
              <option value="person.lastName">نام خانوادگی</option>
              <option value="person.mobile">موبایل</option>
              <option value="person.email">ایمیل</option>
              <option value="person.phone">تلفن</option>
              <option value="person.position">سمت</option>
            </optgroup>
            <optgroup label="معامله">
              <option value="deal.title">عنوان معامله</option>
              <option value="deal.notes">یادداشت معامله</option>
            </optgroup>
            <option value="notes">یادداشت</option>
            <option value="custom">فقط در پاسخ فرم</option>
          </select>
        </label>
        <label v-if="['select','radio','checkbox'].includes(editingField.fieldType)">
          گزینه‌ها (هر خط یکی)
          <textarea
            :value="editingField.options.join('\n')"
            rows="4"
            @input="editingField.options = ($event.target as HTMLTextAreaElement).value.split('\n').map(s => s.trim()).filter(Boolean)"
          />
        </label>
        <button class="btn primary" type="button" @click="editFieldKey = null">تمام</button>
      </div>
    </div>

    <div v-if="publishOpen" class="overlay" @click.self="publishOpen = false">
      <div class="sheet publish-sheet" role="dialog" aria-label="انتشار فرم">
        <header class="publish-head">
          <strong>انتشار فرم</strong>
          <button class="btn ghost" type="button" @click="publishOpen = false">بستن</button>
        </header>
        <div class="publish-preview">
          <div class="mini-cover" :style="{ background: submitColor }">
            <img v-if="coverSrc" :src="coverSrc" alt="" />
          </div>
          <div>
            <h4>{{ name || 'فرم' }}</h4>
            <p>{{ crmSummary }}</p>
            <a :href="form?.publicPath" target="_blank" rel="noopener">باز کردن پیش‌نمایش</a>
          </div>
        </div>
        <label>لینک مستقیم
          <div class="row">
            <input :value="publicUrl" readonly />
            <button class="btn ghost" type="button" @click="copyText(publicUrl)">کپی</button>
          </div>
        </label>
        <label>کد iframe ریسپانسیو
          <div class="row col">
            <textarea class="iframe-code" :value="iframeSnippet" readonly rows="3" />
            <button class="btn ghost" type="button" @click="copyText(iframeSnippet)">کپی iframe</button>
          </div>
        </label>
        <img v-if="publicUrl" class="publish-qr" :src="qrUrl" alt="QR" width="120" height="120" />
        <button class="link" type="button" @click="publishOpen = false; tab = 'settings'">
          تنظیم اتصال CRM
        </button>
      </div>
    </div>
  </section>
</template>

<style scoped>
.page { --teal: #14b8a6; display: grid; gap: 0.85rem; }
.top-ghosts { display: flex; gap: 0.45rem; flex-wrap: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: var(--control-h); height: var(--control-h); padding: 0 0.9rem; border-radius: var(--radius); font: inherit; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; box-sizing: border-box; white-space: nowrap; }
.btn.primary { background: var(--teal); color: #fff; }
.btn.ghost { background: #fff; color: #0f766e; border-color: #99f6e4; }
.banner { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--radius); }
.banner.err { background: #fef2f2; color: #b91c1c; }
.banner.ok { background: #ecfdf5; color: #047857; }
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; background: #fff; padding: 0.35rem; border-radius: var(--radius); }
.tabs button { border: 0; background: transparent; min-height: 38px; padding: 0 0.85rem; border-radius: var(--radius); font: inherit; font-weight: 700; color: #0f766e; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.tabs button.on { background: var(--teal); color: #fff; }
.workspace { display: grid; grid-template-columns: 280px minmax(0,1fr) 240px; gap: 0.85rem; align-items: start; }
.preview-col, .canvas, .toolbox, .panel { background: #fff; border-radius: var(--radius); padding: 0.9rem; box-shadow: 0 8px 22px rgba(15,23,42,.04); }
.device-toggle { display: flex; gap: 0.3rem; margin-bottom: 0.7rem; }
.device-toggle button { flex: 1; border: 0; min-height: 34px; border-radius: var(--radius); font: inherit; font-weight: 700; background: #f1f5f9; cursor: pointer; }
.device-toggle button.on { background: var(--teal); color: #fff; }
.phone { border: 8px solid #0f172a; border-radius: var(--radius); overflow: hidden; background: #fff; max-width: 260px; margin: 0 auto; }
.desk-overlay { padding: 1.2rem; }
.desk-sheet {
  width: min(920px, 100%);
  max-height: calc(100vh - 2.4rem);
  overflow: auto;
  background: #eef2f6;
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.2rem;
  display: grid;
  gap: 0.75rem;
}
.desk-sheet header { display: flex; justify-content: space-between; align-items: center; }
.desk-form { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 40px rgba(15,23,42,.08); }
.desk-form .cover { height: 140px; }
.desk-form .cover img { width: 100%; height: 140px; object-fit: cover; }
.desk-body { padding: 1.2rem 1.4rem 1.4rem; }
.desk-body h3 { font-size: 1.35rem; }
.desk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.desk-fields .wide { grid-column: 1 / -1; }
.desk-form .send { justify-self: start; min-width: 200px; }
.cover { height: 86px; display: grid; place-items: center; color: #fff; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.preview-body { padding: 0.8rem; display: grid; gap: 0.5rem; }
.preview-body h3 { margin: 0; font-size: 1rem; }
.preview-body p, .preview-body small { margin: 0; color: #64748b; font-size: 0.78rem; }
.preview-body label { display: grid; gap: 0.25rem; font-size: 0.78rem; color: #475569; }
.preview-body input, .preview-body textarea, .preview-body select { border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.45rem 0.6rem; font: inherit; background: #f8fafc; }
.send { border: 0; color: #fff; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; box-sizing: border-box; }
.opts, .stars { color: #64748b; font-size: 0.75rem; display: grid; gap: 0.2rem; }
.cover-box { width: 100%; min-height: 88px; border: 1.5px dashed #99f6e4; border-radius: var(--radius); background: #f0fdfa; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; overflow: hidden; }
.cover-box img { width: 100%; height: 88px; object-fit: cover; display: block; }
.title-card, .field-card, .submit-card, .adv-box { border: 1px solid #eef2f7; border-radius: var(--radius); padding: 0.8rem; display: grid; gap: 0.45rem; }
.title { font-size: 1.15rem; font-weight: 600; border: 0; background: transparent; font: inherit; }
.title-card textarea, .submit-card input, .panel input, .panel select, .sheet input, .sheet select, .sheet textarea {
  border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.55rem 0.7rem; font: inherit; width: 100%;
}
.field-card { grid-template-columns: auto 1fr auto; align-items: center; cursor: grab; }
.field-card small { color: #94a3b8; display: block; }
.fops { display: flex; gap: 0.2rem; }
.fops button { width: 30px; height: 30px; border: 0; border-radius: var(--radius); background: #f8fafc; cursor: pointer; color: #64748b; }
.fops .danger { color: #dc2626; }
.add-field { width: 100%; min-height: var(--control-h); height: var(--control-h); border: 1.5px dashed #14b8a6; background: #f0fdfa; color: #0f766e; border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box; }
.adv { background: none; border: 0; font: inherit; font-weight: 700; color: #0f766e; cursor: pointer; text-align: right; }
.toolbox h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 1rem; }
.tools button {
  border: 1px solid #eef2f7;
  background: #f8fafc;
  border-radius: var(--radius);
  min-height: 52px;
  padding: 0.35rem 0.4rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  color: #334155;
  text-align: center;
}
.ready { margin-bottom: 0.35rem; }
.ready-toggle {
  width: 100%;
  background: none;
  border: 0;
  text-align: right;
  font: inherit;
  font-weight: 700;
  padding: 0.45rem 0;
  cursor: pointer;
  color: #0f172a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.ready-caret { color: #94a3b8; font-size: 0.85rem; }
.ready-tools { margin: 0 0 0.65rem; }
.panel { display: grid; gap: 0.7rem; }
.panel label, .sheet label { display: grid; gap: 0.3rem; font-size: 0.88rem; font-weight: 700; color: #334155; }
.chk { display: flex !important; align-items: center; gap: 0.4rem; font-weight: 600 !important; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 0.3rem 0.7rem; font: inherit; cursor: pointer; }
.chip.on { background: #ccfbf1; border-color: #99f6e4; color: #0f766e; font-weight: 700; }
.row { display: flex; gap: 0.4rem; align-items: stretch; }
.row input { flex: 1; min-width: 0; }
.sub { border-bottom: 1px solid #f1f5f9; padding: 0.5rem 0; }
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); display: grid; place-items: center; z-index: 40; padding: 1rem; }
.sheet { width: min(420px,100%); background: #fff; border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.65rem; }
.link { background: none; border: 0; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; text-align: right; padding: 0; }
.panel-title {
  margin: 0.2rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.95rem;
  color: #0f766e;
}
.panel > .panel-title:first-child {
  border-top: 0;
  padding-top: 0;
}
.settings-panel {
  gap: 0.85rem;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.settings-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.85rem;
  box-shadow: 0 8px 22px rgba(15,23,42,.04);
}
.settings-card.optional {
  background: #f8fafc;
  border-style: dashed;
}
.settings-card-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
}
.settings-card-head p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}
.toggle-list { display: grid; gap: 0.45rem; }
.toggle-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
  background: #fff;
  font-weight: 600 !important;
}
.toggle-list.compact .toggle-row { padding: 0.55rem 0.7rem; }
.toggle-row span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.toggle-row strong {
  font-size: 0.9rem;
  color: #0f172a;
  font-weight: 700;
}
.toggle-row small {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.35;
}
.toggle-row input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: #14b8a6;
  cursor: pointer;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.85rem;
}
.settings-grid .field,
.settings-card .field {
  display: grid;
  gap: 0.3rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #334155;
}
.settings-grid .span-2 { grid-column: 1 / -1; }
.settings-card .field input,
.settings-card .field select,
.settings-grid .field input,
.settings-grid .field select {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  font: inherit;
  width: 100%;
  background: #fff;
  font-weight: 500;
  color: #0f172a;
}
.settings-empty {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
}
.pipeline-field { margin-top: 0.15rem; }
.settings-actions {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 0.5rem;
  padding-top: 0.25rem;
}
.settings-actions .btn { min-width: 160px; }
.share-actions { display: flex; gap: 0.4rem; }
.iframe-code { flex: 1; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.55rem 0.7rem; font: inherit; width: 100%; resize: vertical; min-width: 0; }
.row.col { flex-direction: column; align-items: stretch; }
.crm-hint {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.stat {
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: var(--radius);
  padding: 0.6rem 0.55rem;
  display: grid;
  gap: 0.15rem;
  text-align: center;
}
.stat b { font-size: 1.05rem; color: #0f766e; }
.stat span { font-size: 0.72rem; color: #64748b; line-height: 1.3; }
.publish-sheet { width: min(520px, 100%); gap: 0.75rem; max-height: calc(100vh - 2rem); overflow: auto; }
.publish-head { display: flex; justify-content: space-between; align-items: center; }
.publish-preview {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
}
.publish-preview h4 { margin: 0 0 0.25rem; }
.publish-preview p { margin: 0 0 0.35rem; color: #64748b; font-size: 0.82rem; }
.publish-preview a { color: #0f766e; font-weight: 700; font-size: 0.85rem; }
.mini-cover {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  overflow: hidden;
}
.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.publish-qr { justify-self: start; border-radius: 8px; border: 1px solid #eef2f7; }
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-col { order: 3; }
  .toolbox { order: 1; }
  .canvas { order: 2; }
  .tools { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .top-ghosts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    width: 100%;
  }
  .top-ghosts :deep(.ui-btn) { width: 100%; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .publish-preview { grid-template-columns: 56px 1fr; }
  .mini-cover { width: 56px; height: 56px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid .span-2 { grid-column: auto; }
  .settings-card { padding: 0.85rem; }
  .toggle-row { align-items: flex-start; }
  .settings-actions { justify-content: stretch; }
  .settings-actions .btn { width: 100%; min-width: 0; }
}
</style>