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

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import axios from 'axios';
import { api } from '@/lib/api';
import type {
  PaginatedResponse,
  PersonDto,
  SmsCampaignDto,
  SmsCampaignListResponse,
} from '@mento/shared';
import {
  UiButton,
  UiCard,
  UiEmptyState,
  UiField,
  UiInput,
  UiPageHeader,
  UiTextarea,
} from '@/components/ui';
import UiIcon from '@/components/UiIcon.vue';
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';

const loading = ref(false);
const peopleLoading = ref(false);
const saving = ref(false);
const error = ref('');
const ok = ref('');
const campaigns = ref<SmsCampaignDto[]>([]);
const people = ref<PersonDto[]>([]);
const selectedIds = ref<string[]>([]);
const name = ref('');
const body = ref('');
const queueNow = ref(true);
const peopleQ = ref('');

const statusLabel: Record<string, string> = {
  draft: 'پیش‌نویس',
  queued: 'در صف',
  sending: 'در حال ارسال',
  done: 'تمام‌شده',
  cancelled: 'لغو شده',
};

async function loadPeople(q?: string) {
  peopleLoading.value = true;
  try {
    const { data } = await api.get<PaginatedResponse<PersonDto>>('/people', {
      params: {
        page: 1,
        limit: 100,
        ...(q?.trim() ? { q: q.trim() } : {}),
      },
    });
    people.value = data.items;
  } finally {
    peopleLoading.value = false;
  }
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [campRes] = await Promise.all([
      api.get<SmsCampaignListResponse>('/sms-campaigns'),
      loadPeople(peopleQ.value),
    ]);
    campaigns.value = campRes.data.items;
  } catch (e) {
    if (axios.isAxiosError(e) && e.response?.status === 403) {
      error.value = 'ماژول پیامک گروهی برای این محیط فعال نیست.';
    } else {
      error.value = 'بارگذاری ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

let peopleSearchTimer: ReturnType<typeof setTimeout> | null = null;
watch(peopleQ, (q) => {
  if (peopleSearchTimer) clearTimeout(peopleSearchTimer);
  peopleSearchTimer = setTimeout(() => {
    void loadPeople(q).catch(() => {
      error.value = 'جستجوی مخاطب ناموفق بود.';
    });
  }, 300);
});

function togglePerson(id: string) {
  if (selectedIds.value.includes(id)) {
    selectedIds.value = selectedIds.value.filter((x) => x !== id);
  } else {
    selectedIds.value = [...selectedIds.value, id];
  }
}

function selectVisible() {
  const ids = people.value.map((p) => p.id);
  selectedIds.value = [...new Set([...selectedIds.value, ...ids])];
}

async function createCampaign() {
  if (!name.value.trim() || body.value.trim().length < 2) {
    error.value = 'نام و متن پیامک را کامل کنید.';
    return;
  }
  if (!selectedIds.value.length) {
    error.value = 'حداقل یک مخاطب انتخاب کنید.';
    return;
  }
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    await api.post('/sms-campaigns', {
      name: name.value.trim(),
      body: body.value.trim(),
      personIds: selectedIds.value,
      queueNow: queueNow.value,
    });
    name.value = '';
    body.value = '';
    selectedIds.value = [];
    ok.value = queueNow.value
      ? 'کمپین در صف ارسال قرار گرفت.'
      : 'کمپین به‌صورت پیش‌نویس ذخیره شد.';
    await load();
  } 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 queue(id: string) {
  try {
    await api.post(`/sms-campaigns/${id}/queue`);
    await load();
  } catch {
    error.value = 'صف‌بندی ناموفق بود.';
  }
}

async function cancel(id: string) {
  try {
    await api.post(`/sms-campaigns/${id}/cancel`);
    await load();
  } catch {
    error.value = 'لغو ناموفق بود.';
  }
}

onMounted(() => {
  void load();
});
</script>

<template>
  <div class="page">
    <UiPageHeader
      title="پیامک گروهی"
      description="ارسال انبوه پیامک به مخاطبان انتخاب‌شده"
    >
      <template #actions>
        <UiButton variant="secondary" :disabled="loading" @click="load">
          <UiIcon name="refresh" />
          بروزرسانی
        </UiButton>
      </template>
    </UiPageHeader>

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

    <UiCard title="کمپین جدید">
      <div class="form-grid">
        <UiField label="نام کمپین">
          <UiInput v-model="name" placeholder="مثلاً اطلاع‌رسانی جشنواره" />
        </UiField>
        <label class="check">
          <input v-model="queueNow" type="checkbox" />
          ارسال فوری پس از ذخیره
        </label>
      </div>
      <UiField label="متن پیامک">
        <UiTextarea
          v-model="body"
          :rows="4"
          placeholder="متن پیامک را بنویسید…"
        />
      </UiField>

      <div class="people-head">
        <UiField label="جستجوی مخاطب">
          <UiInput v-model="peopleQ" placeholder="نام یا موبایل…" />
        </UiField>
        <UiButton variant="secondary" @click="selectVisible">
          انتخاب نتایج
        </UiButton>
      </div>
      <p class="muted">
        انتخاب‌شده: {{ toFaDigits(selectedIds.length) }} نفر
      </p>
      <p v-if="peopleLoading" class="muted">در حال بارگذاری مخاطبان…</p>
      <div class="people-list">
        <label v-for="p in people" :key="p.id" class="person">
          <input
            type="checkbox"
            :checked="selectedIds.includes(p.id)"
            @change="togglePerson(p.id)"
          />
          <span>
            <strong>{{ p.fullName }}</strong>
            <small>{{ p.mobile || 'بدون موبایل' }}</small>
          </span>
        </label>
      </div>
      <UiButton :loading="saving" @click="createCampaign">ساخت کمپین</UiButton>
    </UiCard>

    <UiCard title="کمپین‌ها">
      <UiEmptyState
        v-if="!loading && !campaigns.length"
        title="کمپینی نیست"
        description="اولین کمپین پیامک گروهی را بسازید."
      />
      <div v-else class="campaigns">
        <article v-for="c in campaigns" :key="c.id" class="campaign">
          <div>
            <strong>{{ c.name }}</strong>
            <p class="muted">{{ c.body }}</p>
            <p class="meta">
              {{ statusLabel[c.status] ?? c.status }}
              · کل {{ toFaDigits(c.totalCount) }}
              · ارسال {{ toFaDigits(c.sentCount) }}
              · ناموفق {{ toFaDigits(c.failedCount) }}
              · ردشده {{ toFaDigits(c.skippedCount) }}
              · {{ formatJalaliNumeric(new Date(c.createdAt)) }}
            </p>
          </div>
          <div class="actions">
            <UiButton
              v-if="c.status === 'draft' || c.status === 'cancelled'"
              variant="secondary"
              @click="queue(c.id)"
            >
              صف ارسال
            </UiButton>
            <UiButton
              v-if="c.status === 'queued' || c.status === 'sending' || c.status === 'draft'"
              variant="secondary"
              @click="cancel(c.id)"
            >
              لغو
            </UiButton>
          </div>
        </article>
      </div>
    </UiCard>
  </div>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.75rem;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: #334155;
  min-height: var(--control-h);
}
.people-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: end;
  margin-top: 0.75rem;
}
.people-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.45rem;
  max-height: 280px;
  overflow: auto;
  margin: 0.75rem 0 1rem;
  padding: 0.35rem;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
}
.person {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.45rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.person:hover {
  background: #f8fafc;
}
.person span {
  display: grid;
}
.person small {
  color: #64748b;
}
.campaigns {
  display: grid;
  gap: 0.75rem;
}
.campaign {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
}
.actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: start;
}
.muted,
.meta {
  color: #64748b;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}
.error {
  color: #b91c1c;
  font-weight: 600;
}
.ok {
  color: #0f766e;
  font-weight: 600;
}
@media (max-width: 800px) {
  .form-grid,
  .people-head,
  .campaign {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
}
</style>