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

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
import { RouterLink } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import type {
  CreateVoipConnectionRequest,
  VoipCallLogDto,
  VoipConnectionDto,
} from '@mento/shared';
import {
  UiButton,
  UiCard,
  UiEmptyState,
  UiField,
  UiInput,
  UiPageHeader,
} from '@/components/ui';
import UiIcon from '@/components/UiIcon.vue';
import { formatJalaliNumeric, rewriteGregorianDates, toFaDigits } from '@/lib/jalali';

type TabKey = 'generic' | 'daftareshoma';

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const ok = ref('');
const items = ref<VoipConnectionDto[]>([]);
const calls = ref<VoipCallLogDto[]>([]);
const tab = ref<TabKey>('daftareshoma');
const callFilters = reactive({
  direction: '',
  status: '',
  lineExtension: '',
});

const form = reactive({
  label: 'سانترال اصلی',
  webhookSecret: '',
  clickToCallUrl: '',
  enabled: true,
});

const daftaForm = reactive({
  label: 'دفتر شما',
  apiToken: '',
  fromNumber: '',
  callerExtension: '',
  enabled: true,
});

const genericItems = computed(() =>
  items.value.filter((c) => c.provider !== 'daftareshoma'),
);
const daftaItems = computed(() =>
  items.value.filter((c) => c.provider === 'daftareshoma'),
);

const activeDafta = computed(() => daftaItems.value[0] ?? null);

const knownLines = ref<string[]>([]);
const lineOptions = computed(() => {
  const set = new Set(knownLines.value);
  for (const c of calls.value) {
    if (c.lineExtension) set.add(c.lineExtension);
  }
  if (callFilters.lineExtension) set.add(callFilters.lineExtension);
  return [...set].sort();
});

const webhookUrlFor = (id: string | undefined) => {
  if (!id) return '';
  const origin = typeof window !== 'undefined' ? window.location.origin : '';
  return `${origin}/api/public/integrations/voip/${id}/webhook`;
};

const genericWebhookUrl = computed(() =>
  webhookUrlFor(genericItems.value[0]?.id),
);
const daftaWebhookUrl = computed(() => webhookUrlFor(activeDafta.value?.id));

const statusLabel: Record<string, string> = {
  ringing: 'زنگ',
  answered: 'پاسخ',
  missed: 'از دست‌رفته',
  completed: 'تمام‌شده',
  failed: 'ناموفق',
};

const summaryLabel: Record<string, string> = {
  none: '—',
  pending: 'در صف',
  processing: 'در حال ساخت',
  done: 'آماده',
  failed: 'ناموفق',
  skipped: 'رد شده',
};

function noteLink(c: VoipCallLogDto): string | null {
  if (!c.summaryNoteId) return null;
  if (c.personId) return `/contacts/people/${c.personId}`;
  return '/notes';
}

async function loadCalls() {
  const params: Record<string, string> = {};
  if (callFilters.direction) params.direction = callFilters.direction;
  if (callFilters.status) params.status = callFilters.status;
  if (callFilters.lineExtension) params.lineExtension = callFilters.lineExtension;
  const callRes = await api.get<VoipCallLogDto[]>('/integrations/voip/calls', {
    params,
  });
  calls.value = callRes.data;
  const merged = new Set(knownLines.value);
  for (const c of callRes.data) {
    if (c.lineExtension) merged.add(c.lineExtension);
  }
  knownLines.value = [...merged].sort();
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [connRes] = await Promise.all([
      api.get<VoipConnectionDto[]>('/integrations/voip/connections'),
      loadCalls(),
    ]);
    items.value = connRes.data;
    fillDaftaFromActive();
  } catch (e) {
    if (axios.isAxiosError(e) && e.response?.status === 403) {
      error.value = 'ماژول تلفن سازمانی برای این محیط فعال نیست.';
    } else {
      error.value = 'بارگذاری ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

async function applyCallFilters() {
  loading.value = true;
  error.value = '';
  try {
    await loadCalls();
  } catch {
    error.value = 'فیلتر تماس‌ها ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

async function createGeneric() {
  if (!form.label.trim()) {
    error.value = 'نام اتصال را وارد کنید.';
    return;
  }
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const payload: CreateVoipConnectionRequest = {
      label: form.label.trim(),
      provider: 'generic',
      webhookSecret: form.webhookSecret.trim() || undefined,
      clickToCallUrl: form.clickToCallUrl.trim() || null,
      enabled: form.enabled,
    };
    await api.post('/integrations/voip/connections', payload);
    form.webhookSecret = '';
    ok.value = 'اتصال ذخیره شد.';
    await load();
  } catch (e) {
    error.value = axios.isAxiosError(e)
      ? String((e.response?.data as { message?: string })?.message ?? 'ذخیره ناموفق بود.')
      : 'ذخیره ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

async function saveDafta() {
  if (!daftaForm.label.trim()) {
    error.value = 'نام اتصال را وارد کنید.';
    return;
  }
  if (!activeDafta.value && !daftaForm.apiToken.trim()) {
    error.value = 'توکن API دفتر شما را وارد کنید.';
    return;
  }
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    if (activeDafta.value) {
      await api.patch(`/integrations/voip/connections/${activeDafta.value.id}`, {
        label: daftaForm.label.trim(),
        fromNumber: daftaForm.fromNumber.trim() || null,
        callerExtension: daftaForm.callerExtension.trim() || null,
        enabled: daftaForm.enabled,
        ...(daftaForm.apiToken.trim()
          ? { apiToken: daftaForm.apiToken.trim() }
          : {}),
      });
      daftaForm.apiToken = '';
      ok.value = 'اتصال دفتر شما بروزرسانی شد.';
    } else {
      const payload: CreateVoipConnectionRequest = {
        label: daftaForm.label.trim(),
        provider: 'daftareshoma',
        apiToken: daftaForm.apiToken.trim(),
        fromNumber: daftaForm.fromNumber.trim() || null,
        callerExtension: daftaForm.callerExtension.trim() || null,
        enabled: daftaForm.enabled,
      };
      await api.post('/integrations/voip/connections', payload);
      daftaForm.apiToken = '';
      ok.value =
        'اتصال دفتر شما ذخیره شد. آدرس وب‌هوک را در پرتال دفتر شما ثبت کنید.';
    }
    await load();
  } catch (e) {
    error.value = axios.isAxiosError(e)
      ? String((e.response?.data as { message?: string })?.message ?? 'ذخیره ناموفق بود.')
      : 'ذخیره ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

function fillDaftaFromActive() {
  const c = activeDafta.value;
  if (!c) return;
  daftaForm.label = c.label;
  daftaForm.fromNumber = c.fromNumber ?? '';
  daftaForm.callerExtension = c.callerExtension ?? '';
  daftaForm.enabled = c.enabled;
  daftaForm.apiToken = '';
}

async function remove(id: string) {
  if (!confirm('این اتصال حذف شود؟')) return;
  try {
    await api.delete(`/integrations/voip/connections/${id}`);
    await load();
  } catch {
    error.value = 'حذف ناموفق بود.';
  }
}

async function copyText(text: string, msg: string) {
  if (!text) return;
  try {
    await navigator.clipboard.writeText(text);
    ok.value = msg;
  } catch {
    error.value = 'کپی ممکن نشد.';
  }
}

onMounted(async () => {
  await load();
  fillDaftaFromActive();
});
</script>

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

    <nav class="tabs" aria-label="نوع اتصال تلفن">
      <button
        type="button"
        :class="{ on: tab === 'daftareshoma' }"
        @click="tab = 'daftareshoma'"
      >
        دفتر شما
      </button>
      <button
        type="button"
        :class="{ on: tab === 'generic' }"
        @click="tab = 'generic'"
      >
        وب‌هوک عمومی
      </button>
    </nav>

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

    <template v-if="tab === 'daftareshoma'">
      <UiCard title="اتصال دفتر شما">
        <p class="hint">
          برای ثبت همه تماس‌های ورودی و خروجی فقط توکن و وب‌هوک لازم است.
          توکن را از پرتال (توسعه‌دهندگان → API) بگیرید؛ بعد آدرس وب‌هوک را در
          <strong>تنظیمات → هوک</strong>
          با رویدادهای شروع/پایان ورودی و پایان خروجی ثبت کنید.
          فیلدهای شماره مبدأ و خط فقط برای «تماس از داخل CRM» اختیاری‌اند و بعداً قابل تکمیل‌اند.
        </p>
        <div class="form-grid">
          <UiField label="نام">
            <UiInput v-model="daftaForm.label" placeholder="دفتر شما" />
          </UiField>
          <UiField
            :label="activeDafta?.apiTokenSet ? 'توکن API (خالی = بدون تغییر)' : 'توکن API'"
          >
            <UiInput
              v-model="daftaForm.apiToken"
              type="password"
              placeholder="توکن از پرتال دفتر شما"
              autocomplete="off"
            />
          </UiField>
          <UiField label="شماره مبدأ — اختیاری (فقط تماس خروجی از CRM)">
            <UiInput
              v-model="daftaForm.fromNumber"
              placeholder="موبایل همکار برای click-to-call"
              dir="ltr"
            />
          </UiField>
          <UiField label="خط پیش‌فرض — اختیاری (فقط تماس خروجی از CRM)">
            <UiInput
              v-model="daftaForm.callerExtension"
              placeholder="مثلاً 02128425990"
              dir="ltr"
            />
          </UiField>
        </div>
        <UiButton :loading="saving" @click="saveDafta">
          {{ activeDafta ? 'بروزرسانی اتصال' : 'ذخیره اتصال دفتر شما' }}
        </UiButton>
      </UiCard>

      <UiCard title="اتصال‌های دفتر شما">
        <UiEmptyState
          v-if="!loading && !daftaItems.length"
          title="اتصالی نیست"
          description="توکن و مشخصات خط را ذخیره کنید."
        />
        <div v-else class="list">
          <article v-for="c in daftaItems" :key="c.id" class="item">
            <div>
              <strong>{{ c.label }}</strong>
              <p class="muted">
                تماس‌های ثبت‌شده {{ toFaDigits(c.callCount) }}
                ·
                {{
                  c.lastEventAt
                    ? `آخرین رویداد ${formatJalaliNumeric(new Date(c.lastEventAt))}`
                    : 'هنوز رویدادی نیامده'
                }}
              </p>
              <p class="muted">
                مبدأ {{ c.fromNumber || '—' }} · خط {{ c.callerExtension || '—' }}
                · توکن {{ c.apiTokenSet ? 'ثبت شده' : 'ندارد' }}
              </p>
              <p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
            </div>
            <UiButton variant="secondary" @click="remove(c.id)">حذف</UiButton>
          </article>
        </div>
        <div v-if="daftaWebhookUrl" class="webhook">
          <p class="hint">
            آدرس وب‌هوک برای پرتال دفتر شما (رویدادها را با JSON به این آدرس POST کنید):
          </p>
          <code>{{ daftaWebhookUrl }}</code>
          <UiButton
            variant="secondary"
            @click="copyText(daftaWebhookUrl, 'آدرس وب‌هوک دفتر شما کپی شد.')"
          >
            کپی
          </UiButton>
        </div>
      </UiCard>
    </template>

    <template v-else>
      <UiCard title="اتصال جدید">
        <p class="hint">
          سانترال یا سرویس VoIP شما باید رویداد تماس را با JSON به آدرس وب‌هوک بفرستد.
          فیلدهای اصلی:
          <code>callId</code>،
          <code>direction</code> (inbound/outbound)،
          <code>status</code>،
          <code>from</code>،
          <code>to</code>.
          برای خلاصه خودکار یکی از
          <code>recordingUrl</code>
          (لینک فایل ضبط) یا
          <code>transcript</code>
          (متن آماده) را بفرستید؛ پس از
          <code>completed</code>
          /
          <code>answered</code>
          صف خلاصه ساخته می‌شود.
          امضا اختیاری با هدر
          <code>X-Voip-Signature</code>
          (HMAC-SHA256 هگز).
        </p>
        <div class="form-grid">
          <UiField label="نام">
            <UiInput v-model="form.label" placeholder="سانترال اصلی" />
          </UiField>
          <UiField label="رمز وب‌هوک (اختیاری)">
            <UiInput v-model="form.webhookSecret" placeholder="برای تأیید امضا" />
          </UiField>
          <UiField label="آدرس Click-to-Call (اختیاری)">
            <UiInput
              v-model="form.clickToCallUrl"
              placeholder="https://pbx.example/originate?num={number}"
            />
          </UiField>
        </div>
        <UiButton :loading="saving" @click="createGeneric">ذخیره اتصال</UiButton>
      </UiCard>

      <UiCard title="اتصال‌ها">
        <UiEmptyState
          v-if="!loading && !genericItems.length"
          title="اتصالی نیست"
          description="یک اتصال برای دریافت رویداد تماس بسازید."
        />
        <div v-else class="list">
          <article v-for="c in genericItems" :key="c.id" class="item">
            <div>
              <strong>{{ c.label }}</strong>
              <p class="muted">
                تماس‌های ثبت‌شده {{ toFaDigits(c.callCount) }}
                ·
                {{
                  c.lastEventAt
                    ? `آخرین رویداد ${formatJalaliNumeric(new Date(c.lastEventAt))}`
                    : 'هنوز رویدادی نیامده'
                }}
              </p>
              <p v-if="c.clickToCallUrl" class="muted">Click-to-Call فعال</p>
              <p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
            </div>
            <UiButton variant="secondary" @click="remove(c.id)">حذف</UiButton>
          </article>
        </div>
        <div v-if="genericWebhookUrl" class="webhook">
          <p class="hint">آدرس وب‌هوک:</p>
          <code>{{ genericWebhookUrl }}</code>
          <UiButton
            variant="secondary"
            @click="copyText(genericWebhookUrl, 'آدرس وب‌هوک کپی شد.')"
          >
            کپی
          </UiButton>
        </div>
      </UiCard>
    </template>

    <UiCard title="آخرین تماس‌ها">
      <div class="call-filters">
        <UiField label="جهت">
          <select v-model="callFilters.direction" class="filter-select" @change="applyCallFilters">
            <option value="">همه</option>
            <option value="inbound">ورودی</option>
            <option value="outbound">خروجی</option>
          </select>
        </UiField>
        <UiField label="وضعیت">
          <select v-model="callFilters.status" class="filter-select" @change="applyCallFilters">
            <option value="">همه</option>
            <option value="ringing">زنگ</option>
            <option value="answered">پاسخ</option>
            <option value="missed">از دست‌رفته</option>
            <option value="completed">تمام‌شده</option>
            <option value="failed">ناموفق</option>
          </select>
        </UiField>
        <UiField label="خط">
          <select
            v-model="callFilters.lineExtension"
            class="filter-select"
            @change="applyCallFilters"
          >
            <option value="">همه خطوط</option>
            <option v-for="line in lineOptions" :key="line" :value="line">
              {{ line }}
            </option>
          </select>
        </UiField>
      </div>
      <UiEmptyState
        v-if="!calls.length"
        title="تماسی نیست"
        description="پس از ارسال رویداد از سانترال اینجا دیده می‌شوند."
      />
      <div v-else class="table-wrap">
        <div class="tc-row">
          <TableColumnsMenu table-key="voip.calls" align="end" />
        </div>
        <table v-table-cols="'voip.calls'">
          <thead>
            <tr>
              <th>جهت</th>
              <th>وضعیت</th>
              <th>خط</th>
              <th>از / به</th>
              <th>مشتری</th>
              <th>مدت</th>
              <th>خلاصه</th>
              <th>زمان</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="c in calls" :key="c.id">
              <td>{{ c.direction === 'outbound' ? 'خروجی' : 'ورودی' }}</td>
              <td>{{ statusLabel[c.status] ?? c.status }}</td>
              <td dir="ltr">{{ c.lineExtension || '—' }}</td>
              <td>{{ c.fromNumber || '—' }} → {{ c.toNumber || '—' }}</td>
              <td>{{ c.personName || '—' }}</td>
              <td>
                {{
                  c.durationSec != null
                    ? `${toFaDigits(c.durationSec)} ثانیه`
                    : '—'
                }}
              </td>
              <td class="summary-cell">
                <span
                  class="summary-badge"
                  :data-status="c.summaryStatus || 'none'"
                >
                  {{ summaryLabel[c.summaryStatus] ?? c.summaryStatus ?? '—' }}
                </span>
                <p v-if="c.summary" class="summary-preview">
                  {{ rewriteGregorianDates(c.summary).slice(0, 120) }}{{ c.summary.length > 120 ? '…' : '' }}
                </p>
                <p v-if="c.summaryError && c.summaryStatus === 'failed'" class="warn">
                  {{ c.summaryError }}
                </p>
                <RouterLink
                  v-if="noteLink(c)"
                  class="note-link"
                  :to="noteLink(c)!"
                >
                  مشاهده در پرونده
                </RouterLink>
              </td>
              <td>{{ formatJalaliNumeric(new Date(c.startedAt)) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </UiCard>
  </div>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
}
.tabs {
  display: flex;
  justify-content: flex-start;
  gap: 1.75rem;
  border-bottom: 1px solid #e2e8f0;
}
.tabs button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.55rem 0.15rem;
  color: #94a3b8;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tabs button.on {
  color: #0d9488;
  border-bottom-color: #14b8a6;
}
.hint,
.muted {
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.7;
}
.hint code {
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  font-size: 0.8rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.call-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.filter-select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  background: #fff;
  font: inherit;
}
.list {
  display: grid;
  gap: 0.75rem;
}
.item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
}
.webhook {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: var(--radius);
  display: grid;
  gap: 0.5rem;
}
.webhook code {
  word-break: break-all;
  font-size: 0.85rem;
}
.warn {
  color: #b45309;
  font-size: 0.85rem;
}
.error {
  color: #b91c1c;
  font-weight: 600;
}
.ok {
  color: #0f766e;
  font-weight: 600;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th,
td {
  text-align: right;
  padding: 0.55rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
}
th {
  color: #64748b;
  font-size: 0.8rem;
}
.summary-cell {
  max-width: 16rem;
}
.summary-badge {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}
.summary-badge[data-status='done'] {
  background: #ecfdf5;
  color: #047857;
}
.summary-badge[data-status='pending'],
.summary-badge[data-status='processing'] {
  background: #eff6ff;
  color: #1d4ed8;
}
.summary-badge[data-status='failed'] {
  background: #fef2f2;
  color: #b91c1c;
}
.summary-preview {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.5;
}
.note-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #0f766e;
}
@media (max-width: 800px) {
  .form-grid,
  .call-filters {
    grid-template-columns: 1fr;
  }
}
</style>