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

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import axios from 'axios';
import {
  Alert as AAlert,
  Button as AButton,
  Card as ACard,
  Flex as AFlex,
  List as AList,
  Modal,
  Space as ASpace,
  Spin as ASpin,
  Textarea as ATextarea,
  Typography,
} from 'ant-design-vue';
import { api } from '@/lib/api';
import { brand, type MemoryItemDto, type PaginatedResponse } from '@mento/shared';
import { formatJalaliDateTime } from '@/lib/jalali';

const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } =
  Typography;
const AListItem = AList.Item;
const AListItemMeta = AList.Item.Meta;

const props = defineProps<{
  personId: string;
}>();

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const items = ref<MemoryItemDto[]>([]);
const draft = ref('');
const editingId = ref<string | null>(null);
const editContent = ref('');

const sourceLabel: Record<string, string> = {
  note: 'از یادداشت',
  manual: 'دستی',
};

async function load() {
  if (!props.personId) return;
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<PaginatedResponse<MemoryItemDto>>('/memory', {
      params: { personId: props.personId, limit: 100 },
    });
    items.value = data.items;
  } catch {
    error.value = 'بارگذاری حافظه مشتری ناموفق بود';
  } finally {
    loading.value = false;
  }
}

async function addItem() {
  if (!draft.value.trim()) return;
  saving.value = true;
  error.value = '';
  try {
    await api.post('/memory', {
      personId: props.personId,
      content: draft.value.trim(),
    });
    draft.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;
  }
}

function startEdit(item: MemoryItemDto) {
  editingId.value = item.id;
  editContent.value = item.content;
}

function cancelEdit() {
  editingId.value = null;
  editContent.value = '';
}

async function saveEdit(id: string) {
  if (!editContent.value.trim()) return;
  saving.value = true;
  error.value = '';
  try {
    await api.patch(`/memory/${id}`, { content: editContent.value.trim() });
    cancelEdit();
    await load();
  } catch {
    error.value = 'ویرایش ناموفق بود';
  } finally {
    saving.value = false;
  }
}

function removeItem(id: string) {
  Modal.confirm({
    title: 'حذف از حافظه',
    content: 'این مورد از حافظه حذف شود؟',
    okText: 'حذف',
    cancelText: 'انصراف',
    okButtonProps: { danger: true },
    async onOk() {
      try {
        await api.delete(`/memory/${id}`);
        if (editingId.value === id) cancelEdit();
        await load();
      } catch {
        error.value = 'حذف ناموفق بود';
        return Promise.reject();
      }
    },
  });
}

function formatWhen(value: string) {
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return value;
  return formatJalaliDateTime(d);
}

const hasItems = computed(() => items.value.length > 0);

watch(() => props.personId, load, { immediate: true });
onMounted(load);
</script>

<template>
  <a-card :bordered="false" :style="{ marginTop: '16px' }">
    <a-typography-text type="secondary" strong>{{ brand.memoryEn }}</a-typography-text>
    <a-typography-title :level="5" :style="{ margin: '4px 0' }">حافظه مشتری</a-typography-title>
    <a-typography-paragraph type="secondary" :style="{ marginBottom: '12px' }">
      نکات پایدار درباره این شخص — فقط با تأیید شما ذخیره می‌شود.
    </a-typography-paragraph>

    <a-flex :gap="8" align="flex-start" :style="{ marginBottom: '12px' }">
      <a-textarea
        v-model:value="draft"
        :rows="2"
        placeholder="مثلاً: بودجه تا ۵۰۰ میلیون · ترجیح تماس صبح‌ها"
        style="flex: 1"
        @pressEnter.ctrl="addItem"
      />
      <a-button
        type="primary"
        :disabled="saving || !draft.trim()"
        :loading="saving"
        @click="addItem"
      >
        افزودن
      </a-button>
    </a-flex>

    <a-alert v-if="error" type="error" show-icon :message="error" :style="{ marginBottom: '12px' }" />

    <a-spin :spinning="loading">
      <a-typography-text v-if="!loading && !hasItems" type="secondary">
        هنوز موردی در حافظه ثبت نشده.
      </a-typography-text>

      <a-list v-else-if="hasItems" item-layout="vertical" :data-source="items">
        <template #renderItem="{ item }">
          <a-list-item>
            <template v-if="editingId === item.id">
              <a-flex vertical :gap="8" style="width: 100%">
                <a-textarea v-model:value="editContent" :rows="2" />
                <a-space :size="8">
                  <a-button type="primary" :loading="saving" @click="saveEdit(item.id)">ذخیره</a-button>
                  <a-button @click="cancelEdit">انصراف</a-button>
                </a-space>
              </a-flex>
            </template>
            <a-list-item-meta v-else>
              <template #title>
                <a-typography-paragraph :style="{ marginBottom: 0, whiteSpace: 'pre-wrap' }">
                  {{ item.content }}
                </a-typography-paragraph>
              </template>
              <template #description>
                <a-typography-text type="secondary">
                  {{ sourceLabel[item.sourceType] ?? item.sourceType }}
                  <template v-if="item.confirmedBy"> · {{ item.confirmedBy.fullName }}</template>
                  · {{ formatWhen(item.updatedAt) }}
                </a-typography-text>
              </template>
            </a-list-item-meta>
            <template v-if="editingId !== item.id" #actions>
              <a-button type="link" @click="startEdit(item)">ویرایش</a-button>
              <a-button type="link" danger @click="removeItem(item.id)">حذف</a-button>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </a-spin>
  </a-card>
</template>