CRM_Montzar/apps/web/src/components/automations/AutomationInspector.vue

<script setup lang="ts">
import { computed, watch } from 'vue';
import type {
  ActivityType,
  ActivityTypeDefDto,
  AutomationAction,
  AutomationAssignMode,
  AutomationChainMode,
  AutomationConditionField,
  AutomationConditionOp,
  AutomationStep,
  AutomationTrigger,
  LeadFormDto,
  OrgUserDto,
  TeamDto,
  TicketPriority,
} from '@mento/shared';
import {
  AUTOMATION_ACTION_LABELS,
  AUTOMATION_ACTIONS,
  AUTOMATION_ASSIGN_MODE_LABELS,
  AUTOMATION_CHAIN_MODE_LABELS,
  AUTOMATION_CONDITION_FIELD_LABELS,
  AUTOMATION_CONDITION_OP_LABELS,
  AUTOMATION_NOTIFY_CHANNEL_LABELS,
  AUTOMATION_NOTIFY_CHANNELS,
  AUTOMATION_TRIGGER_GROUPS,
  AUTOMATION_TRIGGER_LABELS,
  conditionFieldsForTrigger,
  conditionOpsForField,
  isAutomationCondition,
} from '@mento/shared';

const props = defineProps<{
  selected: 'trigger' | string;
  users: OrgUserDto[];
  forms: LeadFormDto[];
  teams: TeamDto[];
  activityTypeDefs: ActivityTypeDefDto[];
}>();

const trigger = defineModel<AutomationTrigger>('trigger', { required: true });
const steps = defineModel<AutomationStep[]>('steps', { required: true });
const sourceId = defineModel<string | null>('sourceId', { default: null });
const chainMode = defineModel<AutomationChainMode>('chainMode', { default: 'branches' });

const selectedStep = computed(() => {
  if (props.selected === 'trigger') return null;
  return steps.value.find((s) => s.id === props.selected) ?? null;
});

const isCondition = computed(
  () => !!selectedStep.value && isAutomationCondition(selectedStep.value),
);

const conditionFields = computed(() => conditionFieldsForTrigger(trigger.value));

const conditionOps = computed((): AutomationConditionOp[] =>
  conditionOpsForField(selectedStep.value?.conditionField),
);

const selectedForm = computed(() =>
  sourceId.value ? props.forms.find((f) => f.id === sourceId.value) ?? null : null,
);

const formFields = computed(() =>
  (selectedForm.value?.fields ?? []).filter((f) => f.fieldType !== 'heading'),
);

const conditionFormField = computed(() => {
  const key = selectedStep.value?.conditionKey;
  return key ? formFields.value.find((f) => f.key === key) ?? null : null;
});

const needsConditionValue = computed(() => {
  const op = selectedStep.value?.conditionOp;
  return op !== 'is_set' && op !== 'is_empty';
});

const assignModes = Object.keys(AUTOMATION_ASSIGN_MODE_LABELS) as AutomationAssignMode[];

const dueUnits = [
  { value: 'now', label: 'همان لحظه (امروز)' },
  { value: 'hours', label: 'چند ساعت بعد' },
  { value: 'days', label: 'چند روز بعد' },
] as const;
type DueUnit = (typeof dueUnits)[number]['value'];

function dueUnitOf(step: AutomationStep): DueUnit {
  const m = step.dueOffsetMinutes ?? 0;
  if (!m) return 'now';
  return m % 1440 === 0 ? 'days' : 'hours';
}

function dueAmountOf(step: AutomationStep): number {
  const m = step.dueOffsetMinutes ?? 0;
  if (!m) return 0;
  return m % 1440 === 0 ? m / 1440 : Math.round(m / 60);
}

function setDue(step: AutomationStep, unit: DueUnit, amount: number) {
  const n = Math.max(1, Math.trunc(Number(amount) || 1));
  step.dueOffsetMinutes = unit === 'now' ? 0 : unit === 'days' ? n * 1440 : n * 60;
}

function toggleUser(step: AutomationStep, id: string, on: boolean) {
  const cur = new Set(step.assigneeUserIds ?? []);
  if (on) cur.add(id);
  else cur.delete(id);
  step.assigneeUserIds = [...cur];
}

function setConditionKey(step: AutomationStep, key: string) {
  step.conditionKey = key || null;
  const field = formFields.value.find((f) => f.key === key);
  step.conditionValue = field?.options?.[0] ?? '';
}

const activityTypes: Array<{ value: ActivityType; label: string }> = [
  { value: 'task', label: 'وظیفه' },
  { value: 'call', label: 'تماس' },
  { value: 'meeting', label: 'جلسه' },
  { value: 'note', label: 'یادداشت' },
];

const ticketPriorities: Array<{ value: TicketPriority; label: string }> = [
  { value: 'low', label: 'کم' },
  { value: 'normal', label: 'عادی' },
  { value: 'high', label: 'بالا' },
  { value: 'urgent', label: 'فوری' },
];

function setAction(step: AutomationStep, action: AutomationAction) {
  step.kind = 'action';
  step.action = action;
  if (action === 'add_loyalty_points' && !step.points) step.points = 100;
  if (action === 'create_activity' && !step.activityType) step.activityType = 'task';
  if (action === 'create_activity' && !step.assignMode) step.assignMode = 'owner';
  if (action === 'create_notification' && !step.notifyChannel) step.notifyChannel = 'app';
}

function setConditionField(step: AutomationStep, field: AutomationConditionField) {
  step.conditionField = field;
  step.conditionKey = null;
  if (field === 'deal_amount') {
    step.conditionOp = 'gte';
    step.conditionValue = typeof step.conditionValue === 'number' ? step.conditionValue : 0;
  } else if (field === 'ticket_priority') {
    step.conditionOp = 'eq';
    step.conditionValue = 'normal';
  } else if (field === 'form_field') {
    step.conditionOp = 'contains';
    step.conditionValue = '';
  } else {
    step.conditionOp = 'is_set';
    step.conditionValue = undefined;
  }
}

watch(
  selectedStep,
  (step) => {
    if (!step || isAutomationCondition(step) || step.action !== 'create_notification') return;
    if (!step.notifyChannel) step.notifyChannel = 'app';
    if (!step.notifyTarget) step.notifyTarget = 'staff';
  },
  { immediate: true },
);
</script>

<template>
  <aside class="inspector">
    <template v-if="selected === 'trigger'">
      <h2>گره محرک</h2>
      <p class="hint">وقتی این اتفاق بیفتد، زنجیره از راست به چپ اجرا می‌شود.</p>
      <label>
        اگر
        <select v-model="trigger">
          <optgroup
            v-for="group in AUTOMATION_TRIGGER_GROUPS"
            :key="group.label"
            :label="group.label"
          >
            <option v-for="t in group.items" :key="t" :value="t">
              {{ AUTOMATION_TRIGGER_LABELS[t] }}
            </option>
          </optgroup>
        </select>
      </label>
      <label v-if="trigger === 'lead_submitted'">
        فرم
        <select v-model="sourceId">
          <option :value="null">همه فرم‌ها</option>
          <option v-for="f in forms" :key="f.id" :value="f.id">{{ f.name }}</option>
        </select>
      </label>
      <p v-if="trigger === 'lead_submitted' && !sourceId" class="hint">
        برای شرط روی پاسخ‌های فرم، یک فرم مشخص را انتخاب کنید.
      </p>
      <label>
        رفتار شرط‌ها
        <select v-model="chainMode">
          <option value="branches">{{ AUTOMATION_CHAIN_MODE_LABELS.branches }}</option>
          <option value="stop">{{ AUTOMATION_CHAIN_MODE_LABELS.stop }}</option>
        </select>
      </label>
      <p v-if="chainMode === 'branches'" class="hint">
        هر شرط یک شاخه را شروع می‌کند. شرط‌های پشت‌سرهم با «و» ترکیب می‌شوند و فقط
        عمل‌های بعد از خودشان (تا شرط بعدی) را کنترل می‌کنند؛ مثلاً اگر دو گزینه تیک بخورد، هر دو
        شاخه اجرا می‌شود.
      </p>
    </template>

    <template v-else-if="selectedStep && isCondition">
      <h2>گره شرط</h2>
      <p class="hint">
        {{
          chainMode === 'branches'
            ? 'اگر شرط برقرار نباشد، فقط عمل‌های این شاخه (تا شرط بعدی) اجرا نمی‌شوند.'
            : 'اگر شرط برقرار نباشد، عمل‌های بعد از این گره اجرا نمی‌شوند.'
        }}
      </p>
      <label>
        فیلد
        <select
          :value="selectedStep.conditionField"
          @change="
            setConditionField(
              selectedStep,
              ($event.target as HTMLSelectElement).value as AutomationConditionField,
            )
          "
        >
          <option v-for="f in conditionFields" :key="f" :value="f">
            {{ AUTOMATION_CONDITION_FIELD_LABELS[f] }}
          </option>
        </select>
      </label>
      <template v-if="selectedStep.conditionField === 'form_field'">
        <p v-if="!selectedForm" class="hint warn">
          ابتدا در گره محرک یک فرم مشخص انتخاب کنید.
        </p>
        <label v-else>
          فیلد فرم
          <select
            :value="selectedStep.conditionKey ?? ''"
            @change="setConditionKey(selectedStep, ($event.target as HTMLSelectElement).value)"
          >
            <option value="" disabled>انتخاب فیلد…</option>
            <option v-for="f in formFields" :key="f.key" :value="f.key">{{ f.label }}</option>
          </select>
        </label>
      </template>
      <label>
        مقایسه
        <select v-model="selectedStep.conditionOp">
          <option v-for="op in conditionOps" :key="op" :value="op">
            {{ AUTOMATION_CONDITION_OP_LABELS[op] }}
          </option>
        </select>
      </label>
      <label v-if="selectedStep.conditionField === 'deal_amount'">
        مبلغ
        <input v-model.number="selectedStep.conditionValue" type="number" min="0" />
      </label>
      <label v-if="selectedStep.conditionField === 'ticket_priority'">
        اولویت
        <select v-model="selectedStep.conditionValue">
          <option v-for="p in ticketPriorities" :key="p.value" :value="p.value">
            {{ p.label }}
          </option>
        </select>
      </label>
      <template v-if="selectedStep.conditionField === 'form_field' && needsConditionValue">
        <label v-if="conditionFormField?.options?.length">
          گزینه
          <select v-model="selectedStep.conditionValue">
            <option v-for="o in conditionFormField.options" :key="o" :value="o">{{ o }}</option>
          </select>
        </label>
        <label v-else>
          مقدار
          <input v-model.trim="selectedStep.conditionValue" type="text" maxlength="200" />
        </label>
      </template>
    </template>

    <template v-else-if="selectedStep">
      <h2>گره عمل</h2>
      <p class="hint">بعد از محرک (و شرط‌ها)، این کار به ترتیب انجام می‌شود.</p>
      <label>
        آنگاه
        <select
          :value="selectedStep.action"
          @change="
            setAction(
              selectedStep,
              ($event.target as HTMLSelectElement).value as AutomationAction,
            )
          "
        >
          <option v-for="a in AUTOMATION_ACTIONS" :key="a" :value="a">
            {{ AUTOMATION_ACTION_LABELS[a] }}
          </option>
        </select>
      </label>

      <label>
        عنوان
        <input
          v-model="selectedStep.title"
          type="text"
          maxlength="200"
          placeholder="اختیاری"
        />
      </label>
      <label>
        توضیح / متن پیام
        <textarea
          v-model="selectedStep.body"
          rows="3"
          maxlength="1000"
          placeholder="اختیاری"
        />
      </label>

      <label v-if="selectedStep.action === 'create_activity'">
        نوع فعالیت
        <select v-model="selectedStep.activityType">
          <option v-for="t in activityTypes" :key="t.value" :value="t.value">
            {{ t.label }}
          </option>
        </select>
      </label>
      <template v-if="selectedStep.action === 'create_activity'">
        <label v-if="activityTypeDefs.length">
          نوع سفارشی (اختیاری)
          <select v-model="selectedStep.activityTypeDefId">
            <option :value="null">— بدون نوع سفارشی —</option>
            <option v-for="t in activityTypeDefs" :key="t.id" :value="t.id">{{ t.name }}</option>
          </select>
        </label>

        <label>
          تخصیص به
          <select v-model="selectedStep.assignMode">
            <option v-for="m in assignModes" :key="m" :value="m">
              {{ AUTOMATION_ASSIGN_MODE_LABELS[m] }}
            </option>
          </select>
        </label>
        <label v-if="selectedStep.assignMode === 'user'">
          کاربر
          <select v-model="selectedStep.assigneeId">
            <option :value="null" disabled>انتخاب کاربر…</option>
            <option v-for="u in users" :key="u.id" :value="u.id">{{ u.fullName }}</option>
          </select>
        </label>
        <template v-else-if="selectedStep.assignMode === 'team_round_robin'">
          <label>
            تیم
            <select v-model="selectedStep.assigneeTeamId">
              <option :value="null" disabled>انتخاب تیم…</option>
              <option v-for="t in teams" :key="t.id" :value="t.id">
                {{ t.name }} ({{ t.memberCount }} نفر)
              </option>
            </select>
          </label>
          <p v-if="!teams.length" class="hint warn">
            هنوز تیمی تعریف نشده؛ از «تنظیمات ← تیم‌ها و سطح دسترسی» بسازید.
          </p>
        </template>
        <div v-else-if="selectedStep.assignMode === 'users_round_robin'" class="user-picks">
          <p class="field-label">کاربران</p>
          <label v-for="u in users" :key="u.id" class="ch">
            <input
              type="checkbox"
              :checked="(selectedStep.assigneeUserIds ?? []).includes(u.id)"
              @change="toggleUser(selectedStep, u.id, ($event.target as HTMLInputElement).checked)"
            />
            {{ u.fullName }}
          </label>
        </div>
        <p
          v-if="selectedStep.assignMode === 'team_round_robin' || selectedStep.assignMode === 'users_round_robin'"
          class="hint"
        >
          هر بار نفر بعدی به نوبت انتخاب می‌شود تا کارها مساوی تقسیم شوند.
        </p>

        <div class="due">
          <label>
            موعد
            <select
              :value="dueUnitOf(selectedStep)"
              @change="
                setDue(
                  selectedStep,
                  ($event.target as HTMLSelectElement).value as DueUnit,
                  dueAmountOf(selectedStep) || 1,
                )
              "
            >
              <option v-for="u in dueUnits" :key="u.value" :value="u.value">{{ u.label }}</option>
            </select>
          </label>
          <label v-if="dueUnitOf(selectedStep) !== 'now'">
            تعداد
            <input
              type="number"
              min="1"
              :value="dueAmountOf(selectedStep)"
              @input="
                setDue(
                  selectedStep,
                  dueUnitOf(selectedStep),
                  Number(($event.target as HTMLInputElement).value),
                )
              "
            />
          </label>
        </div>
      </template>
      <p v-if="selectedStep.action === 'create_activity' || selectedStep.action === 'create_notification'" class="hint">
        در عنوان و متن می‌توانید از
        <code v-pre>{{title}}</code>، <code v-pre>{{mobile}}</code>، <code v-pre>{{form}}</code> و
        <code v-pre>{{field.کلید}}</code> استفاده کنید.
        <template v-if="formFields.length">
          کلیدها:
          <span v-for="(f, i) in formFields" :key="f.key">
            <code>{{ f.key }}</code> ({{ f.label }})<template v-if="i < formFields.length - 1">، </template>
          </span>
        </template>
      </p>

      <template v-if="selectedStep.action === 'create_notification'">
        <p class="field-label">نحوه ارسال</p>
        <div class="channels">
          <label
            v-for="ch in AUTOMATION_NOTIFY_CHANNELS"
            :key="ch"
            class="ch"
          >
            <input
              v-model="selectedStep.notifyChannel"
              type="radio"
              :value="ch"
            />
            {{ AUTOMATION_NOTIFY_CHANNEL_LABELS[ch] }}
          </label>
        </div>
        <label>
          گیرنده
          <select v-model="selectedStep.notifyTarget">
            <option value="staff">کاربر تیم</option>
            <option value="person">مخاطب معامله / تیکت</option>
          </select>
        </label>
        <label v-if="selectedStep.notifyTarget !== 'person'">
          کاربر
          <select v-model="selectedStep.notifyUserId">
            <option :value="null">مسئول معامله / تیکت</option>
            <option v-for="u in users" :key="u.id" :value="u.id">
              {{ u.fullName }}
            </option>
          </select>
        </label>
        <p v-if="selectedStep.notifyTarget === 'person'" class="hint">
          پیامک به موبایل مخاطب ارسال می‌شود. ناتیفیکیشن داخلی برای مخاطب نیست.
        </p>
        <p
          v-else-if="selectedStep.notifyChannel === 'sms' || selectedStep.notifyChannel === 'both'"
          class="hint"
        >
          پیامک به موبایل همان کاربر ارسال می‌شود.
        </p>
      </template>

      <label v-if="selectedStep.action === 'add_loyalty_points'">
        امتیاز
        <input v-model.number="selectedStep.points" type="number" min="1" />
      </label>
    </template>

    <p v-else class="hint">یک گره را از بوم انتخاب کنید.</p>
  </aside>
</template>

<style scoped>
.inspector {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  min-width: 0;
}

h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
}

.hint {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.6;
}

label,
.field-label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.84rem;
  color: #64748b;
}

.field-label {
  margin: 0;
  font-weight: 700;
}

input,
select,
textarea {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: #0f172a;
  background: #fff;
}

.channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
}

.ch {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 0.32rem;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}

.ch input {
  accent-color: #14b8a6;
  width: 14px;
  height: 14px;
  margin: 0;
}

.hint.warn {
  color: #b45309;
}

.hint code {
  font-size: 0.76rem;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 0 0.25rem;
  direction: ltr;
  unicode-bidi: embed;
}

.user-picks {
  display: grid;
  gap: 0.4rem;
  max-height: 12rem;
  overflow: auto;
}

.due {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: end;
}

.due input {
  width: 5.5rem;
}
</style>