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

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import axios from 'axios';
import type { OutboundSmsHistoryResponse, OutboundSmsLogDto } from '@mento/shared';
import { MESSAGE_AUTOMATION_FIELDS, countSmsParts } from '@mento/shared';
import { api } from '@/lib/api';
import { formatJalaliDay, formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
import { UiButton, UiModal } from '@/components/ui';

const props = withDefaults(
  defineProps<{
    open: boolean;
    endpoint: string;
    historyEndpoint?: string;
    name: string;
    phone: string;
    recordTitle?: string;
    company?: string;
    title?: string;
    defaultText?: string;
    nest?: boolean;
  }>(),
  {
    historyEndpoint: '',
    recordTitle: '',
    company: '',
    title: 'ارسال پیامک',
    defaultText: 'سلام {نام} عزیز',
    nest: false,
  },
);

const emit = defineEmits<{
  close: [];
  sent: [];
}>();

const text = ref('');
const busy = ref(false);
const error = ref('');
const done = ref('');
const fieldsOpen = ref(false);
const bodyEl = ref<HTMLTextAreaElement | null>(null);
const history = ref<OutboundSmsLogDto[]>([]);
const historyLoading = ref(false);

const preview = computed(() => fill(text.value));
const count = computed(() => text.value.length);
const parts = computed(() => countSmsParts(text.value));

watch(
  () => props.open,
  (open) => {
    if (!open) return;
    text.value = props.defaultText;
    error.value = '';
    done.value = '';
    fieldsOpen.value = false;
    busy.value = false;
    void loadHistory();
  },
);

async function loadHistory() {
  history.value = [];
  if (!props.historyEndpoint) return;
  historyLoading.value = true;
  try {
    const { data } = await api.get<OutboundSmsHistoryResponse>(props.historyEndpoint, {
      params: { limit: 50 },
    });
    history.value = data.items ?? [];
  } catch {
    history.value = [];
  } finally {
    historyLoading.value = false;
  }
}

function fill(source: string) {
  const map: Record<string, string> = {
    نام: props.name,
    name: props.name,
    شماره: props.phone,
    phone: props.phone,
    تاریخ: formatJalaliDay(new Date()),
    date: formatJalaliDay(new Date()),
    عنوان: props.recordTitle || props.name,
    title: props.recordTitle || props.name,
    شرکت: props.company,
    company: props.company,
  };
  return source.replace(/\{([^}]+)\}/g, (full, key: string) => {
    const next = map[key.trim()];
    return next === undefined ? full : next;
  });
}

function insertField(token: string) {
  const el = bodyEl.value;
  const current = text.value;
  if (!el) {
    text.value = `${current}${token}`;
  } else {
    const start = el.selectionStart ?? current.length;
    const end = el.selectionEnd ?? start;
    text.value = `${current.slice(0, start)}${token}${current.slice(end)}`;
    const caret = start + token.length;
    requestAnimationFrame(() => {
      el.focus();
      el.setSelectionRange(caret, caret);
    });
  }
  fieldsOpen.value = false;
}

function apiMessage(e: unknown, fallback: string) {
  if (!axios.isAxiosError(e)) return fallback;
  const msg = (e.response?.data as { message?: string | string[] })?.message;
  if (Array.isArray(msg)) return msg.join('، ') || fallback;
  if (typeof msg === 'string' && msg.trim()) return msg;
  return fallback;
}

async function send() {
  if (!props.endpoint || busy.value || done.value) return;
  busy.value = true;
  error.value = '';
  try {
    await api.post(props.endpoint, { text: text.value });
    done.value = 'پیامک ارسال شد.';
    emit('sent');
    void loadHistory();
  } catch (e) {
    error.value = apiMessage(e, 'ارسال پیامک ناموفق بود.');
  } finally {
    busy.value = false;
  }
}

function statusLabel(status: OutboundSmsLogDto['status']) {
  return status === 'failed' ? 'ناموفق' : 'ارسال‌شده';
}
</script>

<template>
  <UiModal :open="open" :nest="nest" :title="title" @close="emit('close')">
    <p class="who">
      برای {{ name || 'این شخص' }}
      <span v-if="phone" dir="ltr">{{ toFaDigits(phone) }}</span>
      <span v-else class="warn">شماره موبایل ندارد</span>
    </p>

    <div class="tools">
      <button type="button" class="pill" @click="fieldsOpen = !fieldsOpen">فیلدهای پویا</button>
      <div v-if="fieldsOpen" class="fields">
        <button
          v-for="item in MESSAGE_AUTOMATION_FIELDS"
          :key="item.token"
          type="button"
          @click="insertField(item.token)"
        >
          <code>{{ item.token }}</code>
          <span>{{ item.label }}</span>
        </button>
      </div>
    </div>

    <textarea ref="bodyEl" v-model="text" rows="4" maxlength="500" placeholder="سلام {نام} عزیز" />
    <p class="count">{{ toFaDigits(count) }} نویسه · {{ toFaDigits(parts) }} پیامک</p>

    <div class="preview">
      <span>پیش‌نمایش</span>
      <p>{{ preview || 'متن پیام هنوز نوشته نشده است.' }}</p>
    </div>

    <div v-if="historyEndpoint" class="history">
      <header>
        <strong>پیامک‌های قبلی</strong>
        <span v-if="historyLoading" class="muted">در حال بارگذاری…</span>
      </header>
      <p v-if="!historyLoading && !history.length" class="muted empty">
        هنوز پیامکی ثبت نشده است.
      </p>
      <ul v-else class="history-list">
        <li v-for="item in history" :key="item.id">
          <div class="meta">
            <span class="src">{{ item.sourceLabel }}</span>
            <span :class="['st', item.status]">{{ statusLabel(item.status) }}</span>
            <time>{{ formatJalaliNumeric(new Date(item.createdAt)) }}</time>
          </div>
          <p>{{ item.body }}</p>
        </li>
      </ul>
    </div>

    <p v-if="error" class="err">{{ error }}</p>
    <p v-if="done" class="ok">{{ done }}</p>

    <template #footer>
      <UiButton variant="ghost" :disabled="busy" @click="emit('close')">بستن</UiButton>
      <UiButton
        variant="primary"
        :loading="busy"
        :disabled="busy || !!done || !phone || text.trim().length < 2"
        @click="send"
      >
        ارسال پیامک
      </UiButton>
    </template>
  </UiModal>
</template>

<style scoped>
.who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  color: #0f172a;
}

.who span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 0.85rem;
}

.warn {
  color: #b45309;
}

.tools {
  position: relative;
  margin-bottom: 0.45rem;
}

.pill,
.fields button {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff);
  background: var(--accent-subtle);
  color: var(--accent-deep);
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}

.pill {
  padding: 0.28rem 0.7rem;
  font-size: 0.8rem;
}

.fields {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.3rem);
  inset-inline: 0;
  display: grid;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid #e7eef2;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.fields button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: #fff;
  text-align: start;
}

.fields code {
  color: var(--accent-deep);
}

textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  font: inherit;
  resize: vertical;
  color: #0f172a;
}

.count {
  margin: 0.35rem 0 0;
  color: #94a3b8;
  font-size: 0.75rem;
}

.preview {
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: var(--accent-subtle);
}

.preview span {
  color: var(--accent-deep);
  font-size: 0.75rem;
}

.preview p {
  margin: 0.3rem 0 0;
  color: #134e4a;
  overflow-wrap: anywhere;
}

.history {
  margin-top: 0.9rem;
  border-top: 1px solid #eef2f7;
  padding-top: 0.75rem;
}

.history header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.history header strong {
  font-size: 0.9rem;
  color: #0f172a;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  max-height: 220px;
  overflow: auto;
}

.history-list li {
  padding: 0.55rem 0.65rem;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fafbfc;
}

.history-list .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  color: #64748b;
}

.history-list .src {
  font-weight: 700;
  color: #0f766e;
}

.history-list .st.failed {
  color: #b91c1c;
}

.history-list .st.sent {
  color: #15803d;
}

.history-list p {
  margin: 0;
  color: #0f172a;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.muted,
.empty {
  color: #94a3b8;
  font-size: 0.8rem;
  margin: 0;
}

.err,
.ok {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
}

.err {
  color: #dc2626;
}

.ok {
  color: #16a34a;
}
</style>