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

<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import { useAuthStore } from '@/stores/auth';
import {
  formatJalaliNumeric,
  formatLocalDateInput,
  formatLocalDateTimeInput,
  parseLocalInput,
  toFaDigits,
} from '@/lib/jalali';
import JalaliDateInput from '@/components/JalaliDateInput.vue';
import VoiceToTextButton from '@/components/VoiceToTextButton.vue';
import { appendSpokenText } from '@/lib/spoken-text';
import UiIcon from '@/components/UiIcon.vue';
import { brand } from '@mento/shared';
import UserAvatar from '@/components/UserAvatar.vue';
import PersonFormView from '@/views/PersonFormView.vue';
import {
  UiBadge,
  UiButton,
  UiInput,
  UiModal,
  UiPageHeader,
  UiTextarea,
} from '@/components/ui';
import type {
  ActivityDto,
  ActivityPriority,
  ActivityType,
  CreateActivityRequest,
  DealDto,
  OrgUserDto,
  PaginatedResponse,
  PersonDto,
  PipelineBoardDto,
} from '@mento/shared';

const props = withDefaults(
  defineProps<{
    embedded?: boolean;
    entityId?: string;
    initialPersonId?: string;
    initialType?: ActivityType;
    initialTitle?: string;
  }>(),
  { embedded: false },
);
const emit = defineEmits<{ saved: []; cancel: [] }>();

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const id = computed(() => {
  if (props.embedded) return props.entityId ?? '';
  return typeof route.params.id === 'string' ? route.params.id : '';
});
const isNew = computed(() =>
  props.embedded ? !props.entityId : route.name === 'activity-new',
);

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const tab = ref<'main' | 'notes'>('main');
const people = ref<PersonDto[]>([]);
const deals = ref<DealDto[]>([]);
const users = ref<OrgUserDto[]>([]);

const title = ref('');
const type = ref<ActivityType | ''>('');
const priority = ref<ActivityPriority>('medium');
const description = ref('');
const tagsRaw = ref('');
const dueDate = ref('');
const dueTime = ref('10:30');
const durationMinutes = ref(30);
const personId = ref('');
const dealId = ref('');
const assigneeIds = ref<string[]>([]);
const isDone = ref(false);
const needsNote = ref(false);
const reminderAt = ref('');
const reminderNotifyApp = ref(true);
const reminderNotifySms = ref(false);

const typeOpen = ref(false);
const assigneeOpen = ref(false);
const personOpen = ref(false);
const personQuery = ref('');
const personResults = ref<PersonDto[] | null>(null);
const personSearching = ref(false);
const personSearchInput = ref<HTMLInputElement | null>(null);
const newPersonOpen = ref(false);
let personSearchTimer: ReturnType<typeof setTimeout> | undefined;
let personSearchSeq = 0;

const personOptions = computed(() => personResults.value ?? people.value);

function rememberPerson(p: PersonDto) {
  if (!people.value.some((x) => x.id === p.id)) people.value = [p, ...people.value];
}

async function ensurePersonLoaded(pid: string) {
  if (!pid || people.value.some((p) => p.id === pid)) return;
  try {
    const { data } = await api.get<PersonDto>(`/people/${pid}`);
    rememberPerson(data);
  } catch {
    /* person may have been removed */
  }
}

function togglePersonMenu() {
  personOpen.value = !personOpen.value;
  if (personOpen.value) {
    typeOpen.value = false;
    assigneeOpen.value = false;
    void nextTick(() => personSearchInput.value?.focus());
  }
}

function pickPerson(p: PersonDto) {
  rememberPerson(p);
  personId.value = p.id;
  personOpen.value = false;
}

function clearPerson() {
  personId.value = '';
  personOpen.value = false;
}

function openNewPerson() {
  personOpen.value = false;
  newPersonOpen.value = true;
}

function onPersonCreated(p?: PersonDto) {
  newPersonOpen.value = false;
  if (!p) return;
  personQuery.value = '';
  personResults.value = null;
  pickPerson(p);
}

watch(personQuery, (raw) => {
  if (personSearchTimer) clearTimeout(personSearchTimer);
  const q = raw.trim();
  if (!q) {
    personResults.value = null;
    personSearching.value = false;
    return;
  }
  personSearching.value = true;
  const seq = ++personSearchSeq;
  personSearchTimer = setTimeout(async () => {
    try {
      const { data } = await api.get<PaginatedResponse<PersonDto>>('/people', {
        params: { q, limit: 30 },
      });
      if (seq === personSearchSeq) personResults.value = data.items;
    } catch {
      if (seq === personSearchSeq) personResults.value = [];
    } finally {
      if (seq === personSearchSeq) personSearching.value = false;
    }
  }, 300);
});

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

const priorityOptions: Array<{ value: ActivityPriority; label: string; tone: string }> = [
  { value: 'very_high', label: 'خیلی زیاد', tone: 'very-high' },
  { value: 'high', label: 'زیاد', tone: 'high' },
  { value: 'medium', label: 'متوسط', tone: 'medium' },
  { value: 'low', label: 'کم', tone: 'low' },
  { value: 'very_low', label: 'خیلی کم', tone: 'very-low' },
];

const typeMeta = computed(() => typeOptions.find((o) => o.value === type.value));
const selectedPerson = computed(() => people.value.find((p) => p.id === personId.value) ?? null);
const selectedAssignees = computed(() =>
  assigneeIds.value
    .map((id) => users.value.find((u) => u.id === id))
    .filter((u): u is (typeof users.value)[number] => Boolean(u)),
);
const assigneePickerLabel = computed(() => {
  const list = selectedAssignees.value;
  if (!list.length) return 'انتخاب مسئول';
  if (list.length === 1) return list[0]!.fullName;
  return `${list[0]!.fullName} و ${toFaDigits(list.length - 1)} نفر دیگر`;
});
const selectedDeal = computed(() => deals.value.find((d) => d.id === dealId.value) ?? null);
const personDeals = computed(() =>
  deals.value.filter((d) => !personId.value || d.person?.id === personId.value),
);
const personSub = computed(
  () => selectedDeal.value?.title || selectedPerson.value?.company?.name || '',
);

const duePreview = computed(() => {
  if (!dueDate.value) return '—';
  const d = parseLocalInput(`${dueDate.value}T${dueTime.value || '00:00'}`);
  if (!d) return '—';
  return `${formatJalaliNumeric(d)}  ${toFaDigits((dueTime.value || '00:00').replace(':', ':'))}`;
});

const statusText = computed(() => (isDone.value ? 'انجام شده' : 'انجام نشده'));
const priorityText = computed(
  () => priorityOptions.find((p) => p.value === priority.value)?.label || '—',
);
const pageTitle = computed(() => (isNew.value ? 'ایجاد فعالیت جدید' : 'ویرایش فعالیت'));
const summaryReady = computed(() => Boolean(title.value.trim() || type.value || selectedPerson.value));

function pad(n: number) {
  return String(n).padStart(2, '0');
}

function splitDue(iso: string | null) {
  if (!iso) return;
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return;
  dueDate.value = formatLocalDateInput(d);
  dueTime.value = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

function defaultDue() {
  const d = new Date();
  d.setHours(10, 30, 0, 0);
  dueDate.value = formatLocalDateInput(d);
  dueTime.value = '10:30';
}

function resetForm() {
  title.value = '';
  type.value = '';
  priority.value = 'medium';
  description.value = '';
  tagsRaw.value = '';
  defaultDue();
  durationMinutes.value = 30;
  personId.value = '';
  dealId.value = '';
  assigneeIds.value = auth.user?.id ? [auth.user.id] : [];
  isDone.value = false;
  needsNote.value = false;
  reminderAt.value = '';
  reminderNotifyApp.value = true;
  reminderNotifySms.value = false;
  tab.value = 'main';
  error.value = '';
}

watch(personId, () => {
  if (dealId.value && !personDeals.value.some((d) => d.id === dealId.value)) {
    dealId.value = personDeals.value[0]?.id ?? '';
  } else if (!dealId.value && personDeals.value.length === 1) {
    dealId.value = personDeals.value[0].id;
  }
});

watch(needsNote, (on) => {
  if (on) tab.value = 'notes';
});

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [peopleRes, boardRes, usersRes] = await Promise.all([
      api.get<PaginatedResponse<PersonDto>>('/people', { params: { limit: 100 } }),
      api.get<PipelineBoardDto>('/pipelines/board'),
      api.get<OrgUserDto[]>('/users').catch(() => ({ data: [] as OrgUserDto[] })),
    ]);
    people.value = peopleRes.data.items;
    deals.value = boardRes.data.stages.flatMap((s) => s.deals);
    users.value = usersRes.data;

    if (!isNew.value && id.value) {
      const { data } = await api.get<ActivityDto>(`/activities/${id.value}`);
      title.value = data.title;
      type.value = data.type;
      priority.value = data.priority ?? 'medium';
      description.value = data.description ?? '';
      needsNote.value = Boolean(data.description?.trim());
      tagsRaw.value = (data.tags ?? []).join('، ');
      splitDue(data.dueAt);
      durationMinutes.value = data.durationMinutes ?? 30;
      reminderAt.value = data.reminderAt
        ? formatLocalDateTimeInput(new Date(data.reminderAt))
        : '';
      reminderNotifyApp.value = data.reminderNotifyApp ?? true;
      reminderNotifySms.value = data.reminderNotifySms ?? false;
      if (data.person?.id) await ensurePersonLoaded(data.person.id);
      personId.value = data.person?.id ?? '';
      dealId.value = data.deal?.id ?? '';
      assigneeIds.value = data.assignees?.length
        ? data.assignees.map((a) => a.id)
        : data.assignee?.id
          ? [data.assignee.id]
          : auth.user?.id
            ? [auth.user.id]
            : [];
      isDone.value = data.status === 'done';
    } else {
      resetForm();
      const incomingPerson =
        props.initialPersonId ||
        (typeof route.query.personId === 'string' ? route.query.personId : '');
      if (incomingPerson) {
        await ensurePersonLoaded(incomingPerson);
        personId.value = incomingPerson;
      }
      const incomingType = props.initialType || route.query.type;
      if (
        typeof incomingType === 'string' &&
        typeOptions.some((o) => o.value === incomingType)
      ) {
        type.value = incomingType as ActivityType;
      }
      const incomingTitle =
        props.initialTitle ||
        (typeof route.query.title === 'string' ? route.query.title : '');
      if (incomingTitle) title.value = incomingTitle;
      if (typeof route.query.dueAt === 'string' && route.query.dueAt) {
        splitDue(new Date(route.query.dueAt).toISOString());
      }
    }
  } catch {
    error.value = 'بارگذاری فرم فعالیت ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

function parseTags(raw: string): string[] {
  return [
    ...new Set(
      raw
        .split(/[,،#\n]/)
        .map((t) => t.trim())
        .filter(Boolean),
    ),
  ].slice(0, 40);
}

function payload(): CreateActivityRequest {
  const due =
    dueDate.value && dueTime.value ? new Date(`${dueDate.value}T${dueTime.value}:00`) : null;
  const reminder = reminderAt.value ? new Date(reminderAt.value) : null;
  return {
    title: title.value,
    type: type.value || 'task',
    priority: priority.value,
    description: description.value || undefined,
    tags: parseTags(tagsRaw.value),
    dueAt: due && !Number.isNaN(due.getTime()) ? due.toISOString() : null,
    durationMinutes: durationMinutes.value || null,
    reminderAt: reminder && !Number.isNaN(reminder.getTime()) ? reminder.toISOString() : null,
    reminderNotifyApp: reminder ? reminderNotifyApp.value : false,
    reminderNotifySms: reminder ? reminderNotifySms.value : false,
    personId: personId.value || null,
    companyId: selectedPerson.value?.company?.id ?? null,
    dealId: dealId.value || null,
    assigneeIds: [...assigneeIds.value],
    assigneeId: assigneeIds.value[0] || null,
  };
}

function toggleAssignee(userId: string) {
  const idx = assigneeIds.value.indexOf(userId);
  if (idx >= 0) {
    if (assigneeIds.value.length <= 1) return;
    assigneeIds.value = assigneeIds.value.filter((id) => id !== userId);
    return;
  }
  assigneeIds.value = [...assigneeIds.value, userId];
}

function validate() {
  if (!type.value) return 'نوع فعالیت را انتخاب کنید.';
  if (title.value.trim().length < 2) return 'عنوان فعالیت را بنویسید.';
  if (!dueDate.value || !dueTime.value) return 'تاریخ و ساعت را مشخص کنید.';
  if (!assigneeIds.value.length) return 'حداقل یک مسئول فعالیت را انتخاب کنید.';
  if (needsNote.value && !description.value.trim()) return 'توضیح این فعالیت را بنویسید.';
  if (reminderAt.value && !reminderNotifyApp.value && !reminderNotifySms.value) {
    return 'برای یادآوری، اعلان یا پیامک را انتخاب کنید.';
  }
  return '';
}

async function submit(next: 'detail' | 'new' = 'detail') {
  const message = validate();
  if (message) {
    error.value = message;
    if (needsNote.value && !description.value.trim()) tab.value = 'notes';
    else tab.value = 'main';
    return;
  }
  saving.value = true;
  error.value = '';
  try {
    let savedId = id.value;
    if (isNew.value) {
      const { data } = await api.post<ActivityDto>('/activities', payload());
      savedId = data.id;
      if (isDone.value) {
        await api.patch(`/activities/${savedId}/complete`);
      }
    } else {
      await api.patch(`/activities/${id.value}`, {
        ...payload(),
        status: isDone.value ? 'done' : 'open',
      });
    }
    if (props.embedded) {
      emit('saved');
      return;
    }
    if (next === 'new') {
      if (!isNew.value) {
        await router.push({ name: 'activity-new' });
      }
      resetForm();
      return;
    }
    await router.replace({ name: 'activity-detail', params: { id: savedId } });
  } catch (e) {
    if (axios.isAxiosError(e)) {
      if (!e.response) error.value = 'اتصال به سرور برقرار نشد.';
      else {
        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 bumpDuration(delta: number) {
  durationMinutes.value = Math.min(24 * 60, Math.max(5, durationMinutes.value + delta));
}

function cancel() {
  if (props.embedded) {
    emit('cancel');
    return;
  }
  if (!isNew.value && id.value) {
    void router.push({ name: 'activity-detail', params: { id: id.value } });
    return;
  }
  void router.push({ name: 'activities' });
}

watch([id, isNew], () => void load(), { immediate: true });
</script>

<template>
  <section class="crm-page" :class="{ embedded }" @click="typeOpen = assigneeOpen = personOpen = false">
    <UiPageHeader
      v-if="!embedded"
      :title="pageTitle"
      :back-to="{ name: 'activities' }"
    >
      <template #lead>
        <span class="crumb">
          <RouterLink :to="{ name: 'activities' }">فعالیت‌ها</RouterLink>
          <span>›</span>
          <strong>{{ pageTitle }}</strong>
        </span>
      </template>
      <template #actions>
        <UiButton
          variant="primary"
          type="button"
          :disabled="saving"
          :loading="saving"
          @click="submit('detail')"
        >
          <UiIcon name="check" :size="16" />
          {{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
        </UiButton>
        <UiButton
          variant="outline"
          type="button"
          :disabled="saving"
          @click="submit('new')"
        >
          <UiIcon name="plus" :size="16" />
          ذخیره و ایجاد جدید
        </UiButton>
        <UiButton variant="ghost" type="button" :disabled="saving" @click="cancel">
          انصراف
        </UiButton>
      </template>
    </UiPageHeader>

    <nav class="tabs">
      <button type="button" :class="{ on: tab === 'main' }" @click="tab = 'main'">اطلاعات اصلی</button>
      <button type="button" :class="{ on: tab === 'notes' }" @click="tab = 'notes'">توضیحات و یادداشت</button>
    </nav>

    <p v-if="loading" class="muted">در حال بارگذاری…</p>

    <div v-else class="layout">
      <form class="form" @submit.prevent="submit('detail')">
        <div v-show="tab === 'main'" class="stack">
          <div class="card pair">
            <div class="field">
              <label>نوع فعالیت <i>*</i></label>
              <button class="picker type-pick" type="button" @click.stop="typeOpen = !typeOpen">
                <span class="type-ico" :class="type || 'empty'">
                  <UiIcon :name="typeMeta?.icon || 'phone'" :size="16" />
                </span>
                <span :class="{ ghost: !typeMeta }">{{ typeMeta?.label || 'انتخاب کنید' }}</span>
                <UiIcon name="chevron" :size="16" />
              </button>
              <ul v-if="typeOpen" class="menu">
                <li v-for="opt in typeOptions" :key="opt.value">
                  <button type="button" @click="type = opt.value; typeOpen = false">
                    <span class="type-ico" :class="opt.value">
                      <UiIcon :name="opt.icon" :size="14" />
                    </span>
                    {{ opt.label }}
                  </button>
                </li>
              </ul>
            </div>
            <div class="field">
              <label for="title">عنوان فعالیت <i>*</i></label>
              <UiInput
                id="title"
                v-model="title"
                required
                minlength="2"
                placeholder="مثلاً: تماس پیگیری جهت ارائه پیش‌فاکتور"
              />
            </div>
          </div>

          <div class="card toggles">
            <label class="switch">
              <span>این فعالیت انجام شده</span>
              <input v-model="isDone" type="checkbox" />
              <i />
            </label>
            <label class="switch">
              <span>این فعالیت نیاز به توضیح دارد</span>
              <input v-model="needsNote" type="checkbox" />
              <i />
            </label>
          </div>

          <div class="card trio">
            <div class="field">
              <label>تاریخ <i>*</i></label>
              <JalaliDateInput v-model="dueDate" required />
            </div>
            <div class="field">
              <label>ساعت <i>*</i></label>
              <JalaliDateInput v-model="dueTime" mode="time" required />
            </div>
            <div class="field">
              <label>مدت فعالیت (دقیقه) <i>*</i></label>
              <div class="stepper">
                <button type="button" aria-label="افزایش" @click="bumpDuration(5)">
                  <UiIcon name="plus" :size="16" />
                </button>
                <strong>{{ toFaDigits(durationMinutes) }}</strong>
                <button type="button" aria-label="کاهش" @click="bumpDuration(-5)">
                  <UiIcon name="minus" :size="16" />
                </button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="field">
              <label>مسئولان انجام این فعالیت <i>*</i></label>
              <button class="picker person-pick" type="button" @click.stop="assigneeOpen = !assigneeOpen">
                <div class="assignee-avatars">
                  <UserAvatar
                    v-for="user in selectedAssignees.slice(0, 3)"
                    :key="user.id"
                    :name="user.fullName"
                    :size="28"
                  />
                  <UserAvatar
                    v-if="!selectedAssignees.length"
                    name="مسئول"
                    :size="28"
                  />
                </div>
                <span :class="{ ghost: !selectedAssignees.length }">
                  {{ assigneePickerLabel }}
                </span>
                <UiIcon name="chevron" :size="16" />
              </button>
              <ul v-if="assigneeOpen" class="menu multi-menu" @click.stop>
                <li v-for="user in users" :key="user.id">
                  <button
                    type="button"
                    class="multi-option"
                    :class="{ on: assigneeIds.includes(user.id) }"
                    @click="toggleAssignee(user.id)"
                  >
                    <span class="check" :class="{ on: assigneeIds.includes(user.id) }">
                      <UiIcon v-if="assigneeIds.includes(user.id)" name="check-plain" :size="12" />
                    </span>
                    <UserAvatar :name="user.fullName" :size="28" />
                    {{ user.fullName }}
                  </button>
                </li>
              </ul>
              <small class="hint">می‌توانید چند نفر را به‌عنوان مسئول انتخاب کنید.</small>
              <div v-if="selectedAssignees.length" class="assignee-chips">
                <span v-for="user in selectedAssignees" :key="user.id" class="chip">
                  {{ user.fullName }}
                  <button
                    v-if="assigneeIds.length > 1"
                    type="button"
                    aria-label="حذف مسئول"
                    @click="toggleAssignee(user.id)"
                  >
                    ×
                  </button>
                </span>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="field">
              <div class="label-row">
                <label>شخص / مشتری مرتبط <small class="optional">(اختیاری)</small></label>
                <button type="button" class="person-add" @click.stop="openNewPerson">
                  <UiIcon name="user-plus" :size="14" />
                  افزودن شخص جدید
                </button>
              </div>
              <button class="picker person-pick" type="button" @click.stop="togglePersonMenu">
                <span class="person-ico" :class="{ on: selectedPerson }">
                  <UiIcon name="user" :size="16" />
                </span>
                <span class="who">
                  <b :class="{ ghost: !selectedPerson }">{{ selectedPerson?.fullName || 'بدون شخص — انتخاب کنید' }}</b>
                  <small v-if="personSub">{{ personSub }}</small>
                </span>
                <UiIcon name="chevron" :size="16" />
              </button>
              <div v-if="personOpen" class="menu person-menu" @click.stop>
                <label class="person-search">
                  <UiIcon name="search" :size="15" />
                  <input
                    ref="personSearchInput"
                    v-model="personQuery"
                    type="search"
                    placeholder="جستجوی نام، موبایل یا کد…"
                    @keydown.esc="personOpen = false"
                  />
                </label>
                <ul class="person-list">
                  <li v-if="personId">
                    <button type="button" class="person-row" @click="clearPerson">
                      <span class="row-text">
                        <b>بدون شخص</b>
                        <small>حذف شخص انتخاب‌شده</small>
                      </span>
                    </button>
                  </li>
                  <li v-for="p in personOptions" :key="p.id">
                    <button
                      type="button"
                      class="person-row"
                      :class="{ on: p.id === personId }"
                      @click="pickPerson(p)"
                    >
                      <span class="row-text">
                        <b>{{ p.fullName }}</b>
                        <small v-if="p.company?.name">{{ p.company.name }}</small>
                      </span>
                      <span v-if="p.mobile || p.phone" class="row-phone" dir="ltr">
                        {{ p.mobile || p.phone }}
                      </span>
                      <UiIcon v-if="p.id === personId" name="check-plain" :size="14" class="row-check" />
                    </button>
                  </li>
                  <li v-if="personSearching" class="person-empty">در حال جستجو…</li>
                  <li v-else-if="!personOptions.length" class="person-empty">
                    شخصی پیدا نشد.
                    <button
                      v-if="personQuery.trim()"
                      type="button"
                      class="empty-add"
                      @click="openNewPerson"
                    >
                      افزودن «{{ personQuery.trim() }}» به‌عنوان شخص جدید
                    </button>
                  </li>
                </ul>
              </div>
            </div>
            <div v-if="personDeals.length > 1" class="field deal-field">
              <label>فرصت مرتبط</label>
              <select v-model="dealId">
                <option value="">بدون معامله</option>
                <option v-for="d in personDeals" :key="d.id" :value="d.id">{{ d.title }}</option>
              </select>
            </div>
          </div>

          <div class="card">
            <p class="pri-label">اولویت</p>
            <div class="priorities">
              <label v-for="opt in priorityOptions" :key="opt.value" :class="['pri', opt.tone, { on: priority === opt.value }]">
                <input v-model="priority" type="radio" :value="opt.value" />
                <UiIcon name="flag" :size="16" />
                <span>{{ opt.label }}</span>
              </label>
            </div>
          </div>

          <div class="card reminder">
            <JalaliDateInput
              v-model="reminderAt"
              mode="datetime"
              icon="bell"
              placeholder="یادآوری تنظیم نشده است"
            />
            <div v-if="reminderAt" class="reminder-channels">
              <p class="channel-title">چگونه یادآوری شود؟</p>
              <label class="channel">
                <input v-model="reminderNotifyApp" type="checkbox" />
                <span>
                  <strong>اعلان داخل پنل</strong>
                  <small>در زنگوله اعلان‌های {{ brand.nameFa }} نشان داده می‌شود</small>
                </span>
              </label>
              <label class="channel">
                <input v-model="reminderNotifySms" type="checkbox" />
                <span>
                  <strong>پیامک به مسئول</strong>
                  <small>به شماره موبایل مسئول فعالیت ارسال می‌شود</small>
                </span>
              </label>
              <p
                v-if="reminderAt && !reminderNotifyApp && !reminderNotifySms"
                class="channel-warn"
              >
                حداقل یکی از روش‌های یادآوری را انتخاب کنید.
              </p>
            </div>
          </div>
        </div>

        <div v-show="tab === 'notes'" class="card note-card">
          <div class="note-head">
            <label for="description">توضیحات و یادداشت</label>
            <VoiceToTextButton
              @transcript="(text) => (description = appendSpokenText(description, text))"
            />
          </div>
          <UiTextarea
            id="description"
            v-model="description"
            :rows="8"
            placeholder="جزئیات تماس، نتیجه جلسه یا یادداشت مرتبط را بنویسید…"
          />
          <label for="activity-tags" class="tags-label">هشتگ / برچسب</label>
          <UiInput
            id="activity-tags"
            v-model="tagsRaw"
            placeholder="پیگیری، فوری (با کاما یا #)"
          />
        </div>

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

      <aside class="summary">
        <h2>
          <UiIcon name="document" :size="18" />
          خلاصه فعالیت
        </h2>
        <div v-if="!summaryReady" class="empty">
          <UiIcon name="calendar" :size="28" />
          <p>با تکمیل اطلاعات، خلاصه فعالیت در اینجا نمایش داده می‌شود.</p>
        </div>
        <dl>
          <div>
            <dt>نوع فعالیت</dt>
            <dd>{{ typeMeta?.label || '—' }}</dd>
          </div>
          <div>
            <dt>تاریخ و ساعت</dt>
            <dd>{{ duePreview }}</dd>
          </div>
          <div>
            <dt>مدت فعالیت</dt>
            <dd>{{ toFaDigits(durationMinutes) }} دقیقه</dd>
          </div>
          <div>
            <dt>مسئولان</dt>
            <dd>
              {{
                selectedAssignees.length
                  ? selectedAssignees.map((u) => u.fullName).join('، ')
                  : '—'
              }}
            </dd>
          </div>
          <div>
            <dt>مشتری مرتبط</dt>
            <dd>{{ selectedPerson?.fullName || '—' }}</dd>
          </div>
          <div>
            <dt>وضعیت انجام</dt>
            <dd>
              <UiBadge :variant="isDone ? 'success' : 'neutral'" size="sm">
                {{ statusText }}
              </UiBadge>
            </dd>
          </div>
          <div>
            <dt>اولویت</dt>
            <dd>
              <UiBadge
                :variant="priority === 'very_high' || priority === 'high' ? 'danger' : priority === 'medium' ? 'warning' : 'neutral'"
                size="sm"
              >
                {{ priorityText }}
              </UiBadge>
            </dd>
          </div>
        </dl>
      </aside>
    </div>

    <footer v-if="!embedded" class="mobile-save">
      <UiButton
        variant="primary"
        type="button"
        :disabled="saving || loading"
        :loading="saving"
        @click="submit('detail')"
      >
        {{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
      </UiButton>
    </footer>

    <!-- Embedded Modal Actions (Fixed at bottom) -->
    <div v-if="embedded" class="embed-actions">
      <UiButton
        variant="primary"
        type="button"
        :disabled="saving"
        :loading="saving"
        @click="submit('detail')"
      >
        <UiIcon name="check" :size="16" />
        {{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
      </UiButton>
      <UiButton variant="ghost" type="button" :disabled="saving" @click="cancel">انصراف</UiButton>
    </div>

    <UiModal :open="newPersonOpen" title="شخص جدید" nest @close="newPersonOpen = false">
      <PersonFormView
        v-if="newPersonOpen"
        embedded
        :initial-query="personQuery"
        @saved="onPersonCreated"
        @cancel="newPersonOpen = false"
      />
    </UiModal>
  </section>
</template>

<style scoped>
.crm-page:not(.embedded) {
  padding-bottom: 5rem;
}

.crm-page.embedded {
  padding-bottom: 0;
}

.embed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.crumb {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.crumb a {
  color: var(--color-primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.tabs {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

.tabs button {
  border: 0;
  background: none;
  padding: var(--sp-2) 0;
  font: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tabs .on {
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.layout {
  display: grid;
  gap: var(--sp-3);
}

.summary {
  display: none;
}

.form,
.stack {
  display: grid;
  gap: var(--sp-3);
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.field {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
}

.field label,
.pri-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.field i {
  color: var(--color-danger);
  font-style: normal;
}

.field input,
.field select,
.field textarea,
.note-card textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  min-height: var(--control-h);
  padding: 0 0.85rem;
  font: inherit;
  background: #fff;
  box-sizing: border-box;
}

.field textarea,
.note-card textarea {
  min-height: 5.5rem;
  padding: 0.65rem 0.85rem;
}

.picker {
  width: 100%;
  min-height: var(--control-h);
  height: var(--control-h);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.picker .ghost,
.who .ghost {
  color: #94a3b8;
  font-weight: 500;
}

.picker :deep(.ico:last-child) {
  margin-inline-start: auto;
  color: #94a3b8;
  transform: rotate(90deg);
}

.assignee-avatars {
  display: flex;
  align-items: center;
}

.assignee-avatars :deep(.avatar),
.assignee-avatars > * {
  margin-inline-end: -0.35rem;
  box-shadow: 0 0 0 2px #fff;
}

.hint {
  display: block;
  margin-top: 0.35rem;
  color: #94a3b8;
  font-size: 0.75rem;
}

.assignee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.assignee-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #f0fdfa;
  color: #0f766e;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.assignee-chips .chip button {
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0 0.1rem;
}

.multi-menu .multi-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

.multi-menu .check {
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.multi-menu .check.on {
  background: #14b8a6;
  border-color: #14b8a6;
}

.multi-menu .multi-option.on {
  background: #f0fdfa;
}

.type-ico {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  color: #0d9488;
  flex-shrink: 0;
}

.type-ico.meeting {
  background: #f5f3ff;
  color: #7c3aed;
}

.type-ico.task {
  background: #fff7ed;
  color: #c2410c;
}

.type-ico.note {
  background: #eff6ff;
  color: #2563eb;
}

.who {
  display: grid;
  min-width: 0;
  text-align: start;
}

.who b {
  font-weight: 600;
}

.who small {
  color: #94a3b8;
  font-size: 0.75rem;
}

.menu {
  position: absolute;
  inset-inline: 0.95rem;
  top: calc(100% - 0.35rem);
  z-index: 5;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  max-height: 16rem;
  overflow: auto;
}

.menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  background: none;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.menu button:hover {
  background: #f8fafc;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.label-row .optional {
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.75rem;
}

.person-add {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: none;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #0f766e;
  cursor: pointer;
}

.person-add:hover {
  background: #f0fdfa;
}

.person-ico {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #94a3b8;
}

.person-ico.on {
  background: #ccfbf1;
  color: #0f766e;
}

.person-menu {
  max-height: none;
  overflow: visible;
  display: grid;
  gap: 0.35rem;
  padding: 0.45rem;
  z-index: 30;
  border: 1px solid #e2e8f0;
}

.person-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.4rem;
  padding: 0 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  color: #94a3b8;
}

.person-search:focus-within {
  border-color: #5eead4;
}

.person-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  color: #0f172a;
}

.person-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
}

.menu .person-row {
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
}

.menu .person-row.on {
  background: #f0fdfa;
}

.row-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.row-text b {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-text small {
  font-size: 0.74rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-phone {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.row-check {
  flex-shrink: 0;
  color: #0d9488;
}

.person-list li + li {
  border-top: 1px solid #f8fafc;
}

.person-empty {
  padding: 0.8rem;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
}

.menu .empty-add {
  width: auto;
  justify-content: center;
  border: 1px dashed #5eead4;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  color: #0f766e;
  font-weight: 700;
  font-size: 0.8rem;
}

.menu .empty-add:hover {
  background: #f0fdfa;
}

.toggles {
  display: grid;
  gap: 0.85rem;
}

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  cursor: pointer;
}

.switch input {
  display: none;
}

.switch i {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #e2e8f0;
  position: relative;
  flex-shrink: 0;
}

.switch i::after {
  content: '';
  position: absolute;
  inset-inline-start: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  transition: 0.18s;
}

.switch input:checked + i {
  background: #14b8a6;
}

.switch input:checked + i::after {
  inset-inline-start: 21px;
}

.trio {
  display: grid;
  gap: 0.85rem;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-h);
  height: var(--control-h);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 0.15rem;
}

.stepper button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius);
  background: #f0fdfa;
  color: #0f766e;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.stepper strong {
  font-size: 1.05rem;
}

.deal-field {
  margin-top: 0.75rem;
}

.priorities {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: 0.45rem;
  min-width: 0;
}

.pri {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.pri input {
  accent-color: #14b8a6;
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
}

.pri.very-high {
  color: #dc2626;
}

.pri.high {
  color: #ea580c;
}

.pri.medium {
  color: #0d9488;
}

.pri.low {
  color: #2563eb;
}

.pri.very-low {
  color: #94a3b8;
}

.pri.on span {
  font-weight: 600;
}

.reminder :deep(.trigger) {
  border: 0;
  min-height: var(--control-h);
  height: var(--control-h);
  padding-inline: 0.15rem;
}

.reminder-channels {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
}

.channel-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.channel {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.channel:has(input:checked) {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.channel input {
  margin-top: 0.2rem;
  accent-color: #0d9488;
}

.channel span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

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

.channel small {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.45;
}

.channel-warn {
  margin: 0;
  color: #b45309;
  font-size: 0.8rem;
}

.note-card {
  display: grid;
  gap: 0.45rem;
}

.note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.note-card textarea {
  min-height: 12rem;
  resize: vertical;
}

.muted,
.error {
  margin: 0;
}

.error {
  color: #b91c1c;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--control-h);
  border-radius: var(--radius);
  padding: 0 0.95rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn.primary {
  border: 0;
  background: #14b8a6;
  color: #fff;
}

.btn.outline {
  border: 1.5px solid #14b8a6;
  background: #fff;
  color: #0f766e;
}

.btn.cancel {
  border: 1.5px solid #f87171;
  background: #fff;
  color: #dc2626;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-save {
  position: fixed;
  inset-inline: 0.85rem;
  bottom: calc(0.55rem + var(--mobile-tabbar-h));
  z-index: 8;
}

.mobile-save .btn {
  width: 100%;
  min-height: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius);
}

@media (min-width: 960px) {
  .crm-page:not(.embedded),
  .page {
    padding-bottom: 1rem;
    gap: 1rem;
  }

  .desktop-head {
    display: flex;
  }

  .mobile-head,
  .mobile-save {
    display: none;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    align-items: start;
    gap: 1rem;
  }

  .summary {
    display: block;
    position: sticky;
    top: 0.8rem;
    background: #fff;
    border-radius: var(--radius);
    padding: 1rem 1.05rem 0.7rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  }

  .summary h2 {
    margin: 0 0 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: #0f766e;
  }

  .empty {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    padding: 1rem 0.6rem;
    border-radius: var(--radius);
    background: #f8fafc;
    color: #94a3b8;
    text-align: center;
    font-size: 0.78rem;
    margin-bottom: 0.7rem;
  }

  .empty p {
    margin: 0;
  }

  .summary dl {
    margin: 0;
  }

  .summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.62rem 0;
    border-top: 1px solid #f1f5f9;
    font-size: 0.8rem;
  }

  .summary dt {
    color: #94a3b8;
  }

  .summary dd {
    margin: 0;
    font-weight: 700;
  }

  .pair,
  .toggles,
  .trio {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .trio {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .toggles {
    align-items: center;
  }

  .toggles .switch {
    justify-content: flex-start;
  }

  .priorities {
    justify-content: flex-start;
    gap: 1.15rem;
  }

  .pri {
    gap: 0.32rem;
  }
}
</style>