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

<script setup lang="ts">
import { computed, nextTick, onUnmounted, 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 { canAssignToOthers } from '@/lib/assign-access';
import {
  formatJalaliDayClock,
  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 { prepareActivityAttachment } from '@/lib/activity-attachment';
import { startVoiceRecorder, type VoiceRecorder } from '@/lib/voice-note';
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,
  UiSelect,
  UiTextarea,
} from '@/components/ui';
import ActivityFieldsEditor from '@/components/activities/ActivityFieldsEditor.vue';
import { typeColorStyle, useActivityTypes } from '@/lib/activity-types';
import type {
  ActivityBoardDto,
  ActivityDto,
  ActivityImageDto,
  ActivityFieldValue,
  ActivityFieldValues,
  ActivityPriority,
  ActivityType,
  ActivityTypeDefDto,
  CreateActivityRequest,
  DealDto,
  OrgUserDto,
  PaginatedResponse,
  PersonDto,
  PipelineBoardDto,
  TeamDto,
} from '@mento/shared';

const props = withDefaults(
  defineProps<{
    embedded?: boolean;
    entityId?: string;
    initialPersonId?: string;
    initialType?: ActivityType;
    initialTitle?: string;
    initialStageId?: string;
    /** گروه فعالیت پیش‌فرض برای فعالیت جدید (گروهی که کاربر در آن است) */
    initialBoardId?: 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 people = ref<PersonDto[]>([]);
const deals = ref<DealDto[]>([]);
const users = ref<OrgUserDto[]>([]);
const teams = ref<TeamDto[]>([]);
const boards = ref<ActivityBoardDto[]>([]);
const boardId = ref('');
const defaultBoardId = computed(() => boards.value.find((b) => b.isDefault)?.id ?? '');

const activityTypes = useActivityTypes();
const title = ref('');
const type = ref<ActivityType | ''>('');
const typeDefId = ref('');
const fieldValues = ref<ActivityFieldValues>({});
/** نوع غیرفعالی که فعالیت فعلی دارد — در لیست انتخاب نگه داشته می‌شود */
const keepTypeId = ref('');
const priority = ref<ActivityPriority>('medium');
const description = ref('');
const tagsRaw = ref('');
const PHOTO_TOO_LARGE = 'حجم عکس باید زیر 200 کیلوبایت باشد';
const PHOTO_LIMIT = 8;
type PendingPhoto = { localId: string; name: string; dataUrl: string; file: File };
type SavedPhoto = ActivityImageDto & { previewUrl: string };
const pendingPhotos = ref<PendingPhoto[]>([]);
const savedPhotos = ref<SavedPhoto[]>([]);
const photoBusy = ref(false);
const photoError = ref('');
const createdActivityId = ref('');
const fileInput = ref<HTMLInputElement | null>(null);
const VOICE_LIMIT = 5;
type PendingVoice = { localId: string; name: string; url: string; file: File };
type SavedVoice = ActivityImageDto & { previewUrl: string };
const pendingVoices = ref<PendingVoice[]>([]);
const savedVoices = ref<SavedVoice[]>([]);
const voiceBusy = ref(false);
const voiceError = ref('');
const recording = ref(false);
const recordSeconds = ref(0);
type PendingFile = { localId: string; name: string; file: File };
type SavedFile = ActivityImageDto;
const pendingFiles = ref<PendingFile[]>([]);
const savedFiles = ref<SavedFile[]>([]);
let voiceRecorder: VoiceRecorder | null = null;
const dueDate = ref('');
const dueTime = ref('10:30');
const durationMinutes = ref(30);
const personId = ref('');
const leadId = 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 loadedReminderAt = ref('');
const reminderSentAt = ref<string | null>(null);
const reminderChanged = computed(() => reminderAt.value !== loadedReminderAt.value);
const reminderSentLabel = computed(() =>
  reminderSentAt.value && !reminderChanged.value
    ? formatJalaliDayClock(new Date(reminderSentAt.value))
    : '',
);
const smsAssigneesWithoutMobile = computed(() =>
  users.value
    .filter((u) => assigneeIds.value.includes(u.id) && !u.mobile?.trim())
    .map((u) => u.fullName),
);

const typeOpen = ref(false);
const assigneeOpen = ref(false);
const assigneeQuery = ref('');
const assigneeSearchInput = ref<HTMLInputElement | null>(null);
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 */
  }
}

const canAssignOthers = computed(() => canAssignToOthers(auth.user, 'activities'));

function toggleAssigneeMenu() {
  if (!canAssignOthers.value) return;
  assigneeOpen.value = !assigneeOpen.value;
  if (assigneeOpen.value) {
    typeOpen.value = false;
    personOpen.value = false;
    void nextTick(() => assigneeSearchInput.value?.focus());
  }
}

watch(assigneeOpen, (open) => {
  if (!open) assigneeQuery.value = '';
});

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 = computed<ActivityTypeDefDto[]>(() =>
  activityTypes.types.value.filter((t) => t.isActive || t.id === keepTypeId.value),
);

function pickType(def: ActivityTypeDefDto) {
  typeDefId.value = def.id;
  type.value = def.baseType;
  typeOpen.value = false;
}

function isEmptyValue(v: ActivityFieldValue | undefined): boolean {
  if (v == null || v === '') return true;
  if (Array.isArray(v)) return v.length === 0;
  if (typeof v === 'object') {
    return !v.userIds?.length && !v.people?.length && !v.guests?.length;
  }
  return false;
}

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(() => activityTypes.byId.value.get(typeDefId.value) ?? null);
const typeFields = computed(() => typeMeta.value?.fields ?? []);
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 pickedRoleIds = ref<string[]>([]);
const pickedTeamIds = ref<string[]>([]);
const roleGroups = computed(() => {
  const map = new Map<string, { id: string; name: string; userIds: string[] }>();
  for (const user of users.value) {
    if (user.isActive === false || !user.orgRoleId || !user.orgRoleName) continue;
    const row = map.get(user.orgRoleId) ?? {
      id: user.orgRoleId,
      name: user.orgRoleName,
      userIds: [],
    };
    row.userIds.push(user.id);
    map.set(user.orgRoleId, row);
  }
  return [...map.values()].sort((a, b) => a.name.localeCompare(b.name, 'fa'));
});
const teamGroups = computed(() => {
  const active = new Set(users.value.filter((user) => user.isActive !== false).map((user) => user.id));
  return teams.value
    .map((team) => ({
      id: team.id,
      name: team.name,
      userIds: [...new Set(team.members.map((member) => member.userId).filter((id) => active.has(id)))],
    }))
    .filter((team) => team.userIds.length > 0)
    .sort((a, b) => a.name.localeCompare(b.name, 'fa'));
});
function normalizeSearch(value: string) {
  return value.replace(/ي/g, 'ی').replace(/ك/g, 'ک').replace(/\u200c/g, ' ').trim().toLowerCase();
}
const assigneeSearch = computed(() => normalizeSearch(assigneeQuery.value));
const filteredRoleGroups = computed(() => {
  const q = assigneeSearch.value;
  if (!q) return roleGroups.value;
  return roleGroups.value.filter((role) => normalizeSearch(role.name).includes(q));
});
const filteredTeamGroups = computed(() => {
  const q = assigneeSearch.value;
  if (!q) return teamGroups.value;
  return teamGroups.value.filter((team) => normalizeSearch(team.name).includes(q));
});
const filteredUsers = computed(() => {
  const q = assigneeSearch.value;
  if (!q) return users.value;
  return users.value.filter(
    (user) =>
      normalizeSearch(user.fullName).includes(q) ||
      normalizeSearch(user.orgRoleName ?? '').includes(q),
  );
});
function coversAll(userIds: string[]) {
  return userIds.length > 0 && userIds.every((id) => assigneeIds.value.includes(id));
}
const selectedRoles = computed(() =>
  roleGroups.value.filter((role) => pickedRoleIds.value.includes(role.id)),
);
const selectedTeams = computed(() =>
  teamGroups.value.filter((team) => pickedTeamIds.value.includes(team.id)),
);
const extraAssignees = computed(() => {
  const covered = new Set([
    ...selectedRoles.value.flatMap((role) => role.userIds),
    ...selectedTeams.value.flatMap((team) => team.userIds),
  ]);
  return selectedAssignees.value.filter((user) => !covered.has(user.id));
});
const assigneePickerLabel = computed(() => {
  const groups = [...selectedRoles.value, ...selectedTeams.value];
  const extras = extraAssignees.value;
  if (!assigneeIds.value.length) return 'انتخاب مسئول';
  if (groups.length && !extras.length) {
    if (groups.length === 1) {
      return `${groups[0]!.name} (${toFaDigits(groups[0]!.userIds.length)} نفر)`;
    }
    if (groups.length === 2) return `${groups[0]!.name} و ${groups[1]!.name}`;
    const moreWord =
      selectedTeams.value.length && !selectedRoles.value.length
        ? 'تیم'
        : selectedRoles.value.length && !selectedTeams.value.length
          ? 'نقش'
          : 'مورد';
    return `${groups[0]!.name} و ${toFaDigits(groups.length - 1)} ${moreWord} دیگر`;
  }
  if (groups.length && extras.length) {
    return `${groups.map((group) => group.name).join('، ')} و ${toFaDigits(extras.length)} نفر`;
  }
  if (selectedAssignees.value.length === 1) return selectedAssignees.value[0]!.fullName;
  return `${selectedAssignees.value[0]!.fullName} و ${toFaDigits(selectedAssignees.value.length - 1)} نفر دیگر`;
});
const assigneeSummaryLabel = computed(() => {
  if (!assigneeIds.value.length) return '—';
  const parts = [
    ...selectedRoles.value.map((role) => `${role.name} (${toFaDigits(role.userIds.length)} نفر)`),
    ...selectedTeams.value.map((team) => `${team.name} (${toFaDigits(team.userIds.length)} نفر)`),
    ...extraAssignees.value.map((user) => user.fullName),
  ];
  return parts.join('، ');
});
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 = '';
  typeDefId.value = '';
  fieldValues.value = {};
  keepTypeId.value = '';
  priority.value = 'medium';
  description.value = '';
  tagsRaw.value = '';
  clearPhotos();
  createdActivityId.value = '';
  defaultDue();
  durationMinutes.value = 30;
  personId.value = '';
  dealId.value = '';
  assigneeIds.value = auth.user?.id ? [auth.user.id] : [];
  pickedRoleIds.value = [];
  pickedTeamIds.value = [];
  isDone.value = false;
  needsNote.value = false;
  reminderAt.value = '';
  loadedReminderAt.value = '';
  reminderSentAt.value = null;
  reminderNotifyApp.value = true;
  reminderNotifySms.value = false;
  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;
  }
});

const noteCard = ref<HTMLElement | null>(null);
const tagPreview = computed(() => parseTags(tagsRaw.value).map((t) => t.replace(/^#/, '')));

function focusNote() {
  void nextTick(() => {
    noteCard.value?.scrollIntoView({ behavior: 'smooth', block: 'center' });
    noteCard.value?.querySelector<HTMLTextAreaElement>('textarea')?.focus({ preventScroll: true });
  });
}

watch(needsNote, (on) => {
  if (on && !loading.value) focusNote();
});

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [peopleRes, boardRes, usersRes, activityBoardsRes, teamsRes] = await Promise.all([
      api.get<PaginatedResponse<PersonDto>>('/people', { params: { limit: 100 } }),
      api.get<PipelineBoardDto>('/pipelines/board'),
      api.get<OrgUserDto[]>('/users').catch(() => ({ data: [] as OrgUserDto[] })),
      api
        .get<ActivityBoardDto[]>('/activities/boards')
        .catch(() => ({ data: [] as ActivityBoardDto[] })),
      api.get<TeamDto[]>('/teams').catch(() => ({ data: [] as TeamDto[] })),
      activityTypes.load(true),
    ]);
    people.value = peopleRes.data.items;
    deals.value = boardRes.data.stages.flatMap((s) => s.deals);
    users.value = usersRes.data;
    teams.value = teamsRes.data;
    boards.value = activityBoardsRes.data;
    boardId.value = props.initialBoardId || defaultBoardId.value;

    if (!isNew.value && id.value) {
      const { data } = await api.get<ActivityDto>(`/activities/${id.value}`);
      title.value = data.title;
      boardId.value = data.boardId || defaultBoardId.value;
      type.value = data.type;
      typeDefId.value =
        data.typeDef?.id ?? activityTypes.systemOf.value[data.type]?.id ?? '';
      keepTypeId.value = typeDefId.value;
      fieldValues.value = { ...(data.fields ?? {}) };
      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))
        : '';
      loadedReminderAt.value = reminderAt.value;
      reminderSentAt.value = data.reminderSentAt ?? null;
      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 ?? '';
      leadId.value = data.lead?.id ?? '';
      assigneeIds.value = data.assignees?.length
        ? data.assignees.map((a) => a.id)
        : data.assignee?.id
          ? [data.assignee.id]
          : auth.user?.id
            ? [auth.user.id]
            : [];
      refreshPickedGroups();
      isDone.value = data.status === 'done';
      await loadSavedPhotos(data);
    } else {
      resetForm();
      const incomingPerson =
        props.initialPersonId ||
        (typeof route.query.personId === 'string' ? route.query.personId : '');
      if (incomingPerson) {
        await ensurePersonLoaded(incomingPerson);
        personId.value = incomingPerson;
      }
      leadId.value = typeof route.query.leadId === 'string' ? route.query.leadId : '';
      const incomingDef =
        typeof route.query.typeDefId === 'string'
          ? activityTypes.byId.value.get(route.query.typeDefId)
          : undefined;
      const incomingType = props.initialType || route.query.type;
      const baseDef =
        typeof incomingType === 'string'
          ? activityTypes.systemOf.value[incomingType as ActivityType]
          : undefined;
      const def = incomingDef?.isActive ? incomingDef : baseDef;
      if (def) pickType(def);
      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 = parseLocalInput(reminderAt.value);
  const keys = new Set(typeFields.value.map((f) => f.key));
  return {
    title: title.value,
    boardId: boardId.value || null,
    type: type.value || 'task',
    typeDefId: typeDefId.value || null,
    fields: Object.fromEntries(
      Object.entries(fieldValues.value).filter(([k, v]) => keys.has(k) && !isEmptyValue(v)),
    ),
    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,
    leadId: leadId.value || null,
    assigneeIds: [...assigneeIds.value],
    assigneeId: assigneeIds.value[0] || null,
  };
}

function refreshPickedGroups() {
  pickedRoleIds.value = roleGroups.value
    .filter((role) => {
      if (!coversAll(role.userIds)) return false;
      if (role.userIds.length >= 2) return true;
      return pickedRoleIds.value.includes(role.id);
    })
    .map((role) => role.id);
  pickedTeamIds.value = teamGroups.value
    .filter((team) => {
      if (!coversAll(team.userIds)) return false;
      if (team.userIds.length >= 2) return true;
      return pickedTeamIds.value.includes(team.id);
    })
    .map((team) => team.id);
}

function coveredByPickedGroups() {
  return new Set([
    ...roleGroups.value
      .filter((role) => pickedRoleIds.value.includes(role.id))
      .flatMap((role) => role.userIds),
    ...teamGroups.value
      .filter((team) => pickedTeamIds.value.includes(team.id))
      .flatMap((team) => team.userIds),
  ]);
}

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);
  } else {
    assigneeIds.value = [...assigneeIds.value, userId];
  }
  refreshPickedGroups();
}

function toggleGroup(kind: 'role' | 'team', groupId: string, userIds: string[]) {
  const picked = kind === 'role' ? pickedRoleIds : pickedTeamIds;
  if (picked.value.includes(groupId)) {
    picked.value = picked.value.filter((id) => id !== groupId);
    const still = coveredByPickedGroups();
    assigneeIds.value = assigneeIds.value.filter((id) => !userIds.includes(id) || still.has(id));
    if (!assigneeIds.value.length && auth.user?.id) assigneeIds.value = [auth.user.id];
    refreshPickedGroups();
    return;
  }
  const onlyDefaultUser =
    pickedRoleIds.value.length === 0 &&
    pickedTeamIds.value.length === 0 &&
    assigneeIds.value.length === 1 &&
    assigneeIds.value[0] === auth.user?.id &&
    !userIds.includes(auth.user?.id ?? '');
  picked.value = [...picked.value, groupId];
  assigneeIds.value = onlyDefaultUser
    ? [...userIds]
    : [...new Set([...assigneeIds.value, ...userIds])];
  refreshPickedGroups();
}

function toggleRole(roleId: string, userIds: string[]) {
  toggleGroup('role', roleId, userIds);
}

function toggleTeam(teamId: string, userIds: string[]) {
  toggleGroup('team', teamId, userIds);
}

function clearVoices() {
  voiceRecorder?.cancel();
  voiceRecorder = null;
  recording.value = false;
  recordSeconds.value = 0;
  for (const voice of pendingVoices.value) URL.revokeObjectURL(voice.url);
  pendingVoices.value = [];
  for (const voice of savedVoices.value) {
    if (voice.previewUrl.startsWith('blob:')) URL.revokeObjectURL(voice.previewUrl);
  }
  savedVoices.value = [];
  pendingFiles.value = [];
  savedFiles.value = [];
  voiceError.value = '';
  voiceBusy.value = false;
}

function clearPhotos() {
  pendingPhotos.value = [];
  for (const photo of savedPhotos.value) {
    if (photo.previewUrl.startsWith('blob:')) URL.revokeObjectURL(photo.previewUrl);
  }
  savedPhotos.value = [];
  photoError.value = '';
  photoBusy.value = false;
  clearVoices();
}

async function loadSavedPhotos(activity: ActivityDto) {
  clearPhotos();
  const images = activity.images ?? [];
  const loadedPhotos: SavedPhoto[] = [];
  const loadedVoices: SavedVoice[] = [];
  const loadedFiles: SavedFile[] = [];
  for (const image of images) {
    const mime = image.mimeType.toLowerCase();
    if (!mime.startsWith('image/') && !mime.startsWith('audio/')) {
      loadedFiles.push(image);
      continue;
    }
    let previewUrl = '';
    try {
      const { data } = await api.get<Blob>(`/activities/${activity.id}/images/${image.id}`, {
        responseType: 'blob',
      });
      previewUrl = URL.createObjectURL(data);
    } catch {
      previewUrl = '';
    }
    if (mime.startsWith('audio/')) loadedVoices.push({ ...image, previewUrl });
    else loadedPhotos.push({ ...image, previewUrl });
  }
  savedPhotos.value = loadedPhotos;
  savedVoices.value = loadedVoices;
  savedFiles.value = loadedFiles;
}

const FILE_LIMIT = 8;

async function onFilesPicked(event: Event) {
  const input = event.target as HTMLInputElement;
  const files = Array.from(input.files ?? []);
  input.value = '';
  if (!files.length) return;
  photoError.value = '';
  voiceError.value = '';
  for (const file of files) {
    photoBusy.value = true;
    try {
      const prepared = await prepareActivityAttachment(file);
      if (prepared.kind === 'image') {
        if (pendingPhotos.value.length + savedPhotos.value.length >= PHOTO_LIMIT) {
          photoError.value = `حداکثر ${toFaDigits(PHOTO_LIMIT)} عکس برای هر فعالیت.`;
          continue;
        }
        pendingPhotos.value = [
          ...pendingPhotos.value,
          { localId: crypto.randomUUID(), name: prepared.name, dataUrl: prepared.previewUrl, file: prepared.file },
        ];
      } else if (prepared.kind === 'audio') {
        if (voiceCount() >= VOICE_LIMIT) {
          URL.revokeObjectURL(prepared.previewUrl);
          voiceError.value = `حداکثر ${toFaDigits(VOICE_LIMIT)} صوت برای هر فعالیت.`;
          continue;
        }
        pendingVoices.value = [
          ...pendingVoices.value,
          { localId: crypto.randomUUID(), name: prepared.name, url: prepared.previewUrl, file: prepared.file },
        ];
      } else {
        if (pendingFiles.value.length + savedFiles.value.length >= FILE_LIMIT) {
          photoError.value = `حداکثر ${toFaDigits(FILE_LIMIT)} فایل برای هر فعالیت.`;
          continue;
        }
        pendingFiles.value = [
          ...pendingFiles.value,
          { localId: crypto.randomUUID(), name: prepared.name, file: prepared.file },
        ];
      }
    } catch (error) {
      photoError.value = error instanceof Error ? error.message : 'افزودن فایل ناموفق بود.';
    } finally {
      photoBusy.value = false;
    }
  }
}

function removePendingPhoto(localId: string) {
  pendingPhotos.value = pendingPhotos.value.filter((photo) => photo.localId !== localId);
  if (photoError.value === PHOTO_TOO_LARGE) photoError.value = '';
}

async function removeSavedPhoto(photo: SavedPhoto) {
  const activityId = id.value || createdActivityId.value;
  if (!activityId) return;
  await api.delete(`/activities/${activityId}/images/${photo.id}`);
  if (photo.previewUrl.startsWith('blob:')) URL.revokeObjectURL(photo.previewUrl);
  savedPhotos.value = savedPhotos.value.filter((item) => item.id !== photo.id);
}

function formatVoiceClock(total: number) {
  const minutes = Math.floor(total / 60);
  const seconds = total % 60;
  return toFaDigits(`${minutes}:${String(seconds).padStart(2, '0')}`);
}

function formatVoiceBytes(bytes: number) {
  if (bytes >= 1024 * 1024) return `${toFaDigits((bytes / (1024 * 1024)).toFixed(1))} مگابایت`;
  if (bytes >= 1024) return `${toFaDigits(Math.round(bytes / 1024))} کیلوبایت`;
  return `${toFaDigits(bytes)} بایت`;
}

function voiceCount() {
  return pendingVoices.value.length + savedVoices.value.length;
}

function addPendingVoice(file: File) {
  if (voiceCount() >= VOICE_LIMIT) {
    voiceError.value = `حداکثر ${toFaDigits(VOICE_LIMIT)} صوت برای هر فعالیت.`;
    return;
  }
  pendingVoices.value = [
    ...pendingVoices.value,
    { localId: crypto.randomUUID(), name: file.name, url: URL.createObjectURL(file), file },
  ];
}

async function toggleRecording() {
  voiceError.value = '';
  if (voiceRecorder) {
    const handle = voiceRecorder;
    voiceRecorder = null;
    recording.value = false;
    try {
      addPendingVoice(await handle.stop());
    } catch (error) {
      voiceError.value = error instanceof Error ? error.message : 'ضبط صوت ناموفق بود.';
    }
    return;
  }
  if (voiceCount() >= VOICE_LIMIT) {
    voiceError.value = `حداکثر ${toFaDigits(VOICE_LIMIT)} صوت برای هر فعالیت.`;
    return;
  }
  try {
    recordSeconds.value = 0;
    voiceRecorder = await startVoiceRecorder({
      onTick: (seconds) => {
        recordSeconds.value = seconds;
      },
      onAutoStop: (file) => {
        voiceRecorder = null;
        recording.value = false;
        addPendingVoice(file);
      },
    });
    recording.value = true;
  } catch (error) {
    voiceError.value = error instanceof Error ? error.message : 'ضبط صوت ناموفق بود.';
  }
}

function removePendingVoice(localId: string) {
  const voice = pendingVoices.value.find((item) => item.localId === localId);
  if (voice) URL.revokeObjectURL(voice.url);
  pendingVoices.value = pendingVoices.value.filter((item) => item.localId !== localId);
}

async function removeSavedVoice(voice: SavedVoice) {
  const activityId = id.value || createdActivityId.value;
  if (!activityId) return;
  await api.delete(`/activities/${activityId}/images/${voice.id}`);
  if (voice.previewUrl.startsWith('blob:')) URL.revokeObjectURL(voice.previewUrl);
  savedVoices.value = savedVoices.value.filter((item) => item.id !== voice.id);
}

function removePendingFile(localId: string) {
  pendingFiles.value = pendingFiles.value.filter((item) => item.localId !== localId);
}

async function removeSavedFile(file: SavedFile) {
  const activityId = id.value || createdActivityId.value;
  if (!activityId) return;
  await api.delete(`/activities/${activityId}/images/${file.id}`);
  savedFiles.value = savedFiles.value.filter((item) => item.id !== file.id);
}

async function uploadPendingFiles(activityId: string) {
  const queue = [...pendingFiles.value];
  for (const file of queue) {
    const form = new FormData();
    form.append('file', file.file, file.name);
    const { data } = await api.post<ActivityImageDto>(`/activities/${activityId}/images`, form);
    pendingFiles.value = pendingFiles.value.filter((item) => item.localId !== file.localId);
    savedFiles.value = [...savedFiles.value, data];
  }
}

async function uploadPendingVoices(activityId: string) {
  const queue = [...pendingVoices.value];
  for (const voice of queue) {
    const form = new FormData();
    form.append('file', voice.file, voice.name);
    const { data } = await api.post<ActivityImageDto>(`/activities/${activityId}/images`, form);
    URL.revokeObjectURL(voice.url);
    pendingVoices.value = pendingVoices.value.filter((item) => item.localId !== voice.localId);
    savedVoices.value = [...savedVoices.value, { ...data, previewUrl: URL.createObjectURL(voice.file) }];
  }
}

async function uploadPendingPhotos(activityId: string) {
  const queue = [...pendingPhotos.value];
  for (const photo of queue) {
    const form = new FormData();
    form.append('file', photo.file, photo.name);
    const { data } = await api.post<ActivityImageDto>(`/activities/${activityId}/images`, form);
    pendingPhotos.value = pendingPhotos.value.filter((item) => item.localId !== photo.localId);
    savedPhotos.value = [...savedPhotos.value, { ...data, previewUrl: photo.dataUrl }];
  }
}

onUnmounted(() => {
  voiceRecorder?.cancel();
  for (const photo of savedPhotos.value) {
    if (photo.previewUrl.startsWith('blob:')) URL.revokeObjectURL(photo.previewUrl);
  }
  for (const voice of pendingVoices.value) URL.revokeObjectURL(voice.url);
  for (const voice of savedVoices.value) {
    if (voice.previewUrl.startsWith('blob:')) URL.revokeObjectURL(voice.previewUrl);
  }
});

function validate() {
  if (!type.value) return 'نوع فعالیت را انتخاب کنید.';
  if (title.value.trim().length < 2) return 'عنوان فعالیت را بنویسید.';
  const missing = typeFields.value.find(
    (f) => f.required && f.type !== 'checkbox' && isEmptyValue(fieldValues.value[f.key]),
  );
  if (missing) return `فیلد «${missing.label}» را تکمیل کنید.`;
  if (!dueDate.value || !dueTime.value) return 'تاریخ و ساعت را مشخص کنید.';
  if (!assigneeIds.value.length) return 'حداقل یک مسئول فعالیت را انتخاب کنید.';
  if (
    needsNote.value &&
    !description.value.trim() &&
    !pendingPhotos.value.length &&
    !savedPhotos.value.length
  ) {
    return 'توضیح این فعالیت را بنویسید.';
  }
  if (reminderAt.value && reminderChanged.value) {
    const when = parseLocalInput(reminderAt.value);
    if (when && when.getTime() < Date.now() - 60_000) {
      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()) focusNote();
    return;
  }
  saving.value = true;
  error.value = '';
  try {
    let savedId = id.value || createdActivityId.value;
    if (!savedId) {
      const { data } = await api.post<ActivityDto>('/activities', {
        ...payload(),
        ...(props.initialStageId ? { stageId: props.initialStageId } : {}),
      });
      savedId = data.id;
      createdActivityId.value = data.id;
      if (isDone.value) {
        await api.patch(`/activities/${savedId}/complete`);
      }
    } else {
      await api.patch(`/activities/${savedId}`, {
        ...payload(),
        status: isDone.value ? 'done' : 'open',
      });
    }
    await uploadPendingPhotos(savedId);
    await uploadPendingVoices(savedId);
    await uploadPendingFiles(savedId);
    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>

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

    <div v-else class="layout">
      <form class="form" @submit.prevent="submit('detail')">
        <div 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"
                  :style="typeMeta ? typeColorStyle(typeMeta.color) : undefined"
                >
                  <UiIcon :name="typeMeta?.icon || 'phone'" :size="16" />
                </span>
                <span :class="{ ghost: !typeMeta }">{{ typeMeta?.name || 'انتخاب کنید' }}</span>
                <UiIcon name="chevron" :size="16" />
              </button>
              <ul v-if="typeOpen" class="menu">
                <li v-for="opt in typeOptions" :key="opt.id">
                  <button type="button" :class="{ on: opt.id === typeDefId }" @click="pickType(opt)">
                    <span class="type-ico" :style="typeColorStyle(opt.color)">
                      <UiIcon :name="opt.icon" :size="14" />
                    </span>
                    {{ opt.name }}
                    <small v-if="opt.fields.length" class="type-fields-count">
                      {{ toFaDigits(opt.fields.length) }} فیلد
                    </small>
                  </button>
                </li>
                <li v-if="!typeOptions.length" class="menu-empty">نوع فعالیتی تعریف نشده است.</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 v-if="boards.length > 1" class="card">
            <div class="field">
              <label for="activity-board">گروه فعالیت</label>
              <UiSelect id="activity-board" v-model="boardId">
                <option v-for="b in boards" :key="b.id" :value="b.id">{{ b.name }}</option>
              </UiSelect>
            </div>
          </div>

          <div v-if="typeFields.length" class="card type-fields">
            <p class="type-fields-title">
              <span class="type-ico sm" :style="typeColorStyle(typeMeta!.color)">
                <UiIcon :name="typeMeta!.icon" :size="13" />
              </span>
              اطلاعات {{ typeMeta!.name }}
            </p>
            <ActivityFieldsEditor v-model="fieldValues" :fields="typeFields" :users="users" />
          </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="toggleAssigneeMenu">
                <div class="assignee-avatars">
                  <UserAvatar
                    v-for="user in selectedAssignees.slice(0, 3)"
                    :key="user.id"
                    :name="user.fullName"
                    :user-id="user.id"
                    :has-avatar="user.hasAvatar"
                    :size="28"
                  />
                  <UserAvatar
                    v-if="!selectedAssignees.length"
                    name="مسئول"
                    :size="28"
                  />
                </div>
                <span :class="{ ghost: !selectedAssignees.length }">
                  {{ assigneePickerLabel }}
                </span>
                <UiIcon name="chevron" :size="16" />
              </button>
              <div v-if="assigneeOpen" class="menu person-menu multi-menu" @click.stop>
                <label class="person-search">
                  <UiIcon name="search" :size="15" />
                  <input
                    ref="assigneeSearchInput"
                    v-model="assigneeQuery"
                    type="search"
                    :placeholder="teamGroups.length ? 'جستجوی تیم، نقش یا نام عضو…' : 'جستجوی نقش یا نام عضو…'"
                    @keydown.esc="assigneeOpen = false"
                  />
                </label>
                <ul class="person-list">
                  <template v-if="filteredRoleGroups.length">
                    <li class="menu-label">نقش‌ها</li>
                    <li v-for="role in filteredRoleGroups" :key="role.id">
                      <button
                        type="button"
                        class="multi-option"
                        :class="{ on: pickedRoleIds.includes(role.id) }"
                        @click="toggleRole(role.id, role.userIds)"
                      >
                        <span class="check" :class="{ on: pickedRoleIds.includes(role.id) }">
                          <UiIcon v-if="pickedRoleIds.includes(role.id)" name="check-plain" :size="12" />
                        </span>
                        <span class="role-name">{{ role.name }}</span>
                        <small class="role-count">{{ toFaDigits(role.userIds.length) }} نفر</small>
                      </button>
                    </li>
                  </template>
                  <template v-if="filteredTeamGroups.length">
                    <li class="menu-label">تیم‌ها</li>
                    <li v-for="team in filteredTeamGroups" :key="team.id">
                      <button
                        type="button"
                        class="multi-option"
                        :class="{ on: pickedTeamIds.includes(team.id) }"
                        @click="toggleTeam(team.id, team.userIds)"
                      >
                        <span class="check" :class="{ on: pickedTeamIds.includes(team.id) }">
                          <UiIcon v-if="pickedTeamIds.includes(team.id)" name="check-plain" :size="12" />
                        </span>
                        <span class="role-name">{{ team.name }}</span>
                        <small class="role-count">{{ toFaDigits(team.userIds.length) }} نفر</small>
                      </button>
                    </li>
                  </template>
                  <li v-if="(roleGroups.length || teamGroups.length) && filteredUsers.length" class="menu-label">اعضا</li>
                  <li v-for="user in filteredUsers" :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" :user-id="user.id" :has-avatar="user.hasAvatar" :size="28" />
                      <span class="role-name">{{ user.fullName }}</span>
                      <small v-if="user.orgRoleName" class="role-count">{{ user.orgRoleName }}</small>
                    </button>
                  </li>
                  <li
                    v-if="assigneeSearch && !filteredRoleGroups.length && !filteredTeamGroups.length && !filteredUsers.length"
                    class="person-empty"
                  >
                    موردی پیدا نشد.
                  </li>
                </ul>
              </div>
              <small class="hint">
                {{
                  canAssignOthers
                    ? teamGroups.length
                      ? 'یک تیم یا نقش را انتخاب کنید تا همهٔ اعضایش مسئول شوند، یا چند نفر را جدا انتخاب کنید.'
                      : 'یک نقش را انتخاب کنید تا همهٔ اعضای آن مسئول شوند، یا چند نفر را جدا انتخاب کنید.'
                    : 'بدون دسترسی «تخصیص فعالیت به دیگران» این فعالیت فقط برای خودتان ثبت می‌شود.'
                }}
              </small>
              <div v-if="selectedRoles.length || selectedTeams.length || extraAssignees.length" class="assignee-chips">
                <span v-for="role in selectedRoles" :key="role.id" class="chip">
                  {{ role.name }}
                  <button type="button" aria-label="حذف نقش" @click="toggleRole(role.id, role.userIds)">×</button>
                </span>
                <span v-for="team in selectedTeams" :key="team.id" class="chip">
                  {{ team.name }}
                  <button type="button" aria-label="حذف تیم" @click="toggleTeam(team.id, team.userIds)">×</button>
                </span>
                <span v-for="user in extraAssignees" :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>
              <p
                v-if="reminderNotifySms && smsAssigneesWithoutMobile.length"
                class="channel-warn"
              >
                شمارهٔ موبایل برای {{ smsAssigneesWithoutMobile.join('، ') }} ثبت نشده؛ پیامک برایشان ارسال نمی‌شود.
              </p>
              <p v-if="reminderSentLabel" class="channel-sent">
                این یادآوری در {{ reminderSentLabel }} ارسال شد. برای یادآوری دوباره، زمان جدیدی انتخاب کنید.
              </p>
            </div>
          </div>
        </div>

        <div ref="noteCard" class="card note-card">
          <div class="note-head">
            <label for="description">
              توضیحات و یادداشت
              <i v-if="needsNote" class="req-star">*</i>
            </label>
            <VoiceToTextButton
              @transcript="(text) => (description = appendSpokenText(description, text))"
            />
          </div>
          <UiTextarea
            id="description"
            v-model="description"
            :rows="4"
            placeholder="جزئیات تماس، نتیجه جلسه یا یادداشت مرتبط را بنویسید…"
          />
          <div class="attach-row">
            <button
              type="button"
              class="icon-tool"
              aria-label="پیوست"
              title="پیوست"
              :disabled="photoBusy || recording"
              @click="fileInput?.click()"
            >
              <UiIcon name="clip" :size="16" />
            </button>
            <button
              type="button"
              class="icon-tool"
              :class="{ recording }"
              :disabled="voiceBusy"
              :aria-label="recording ? `توقف ضبط پیام صوتی ${formatVoiceClock(recordSeconds)}` : 'ضبط پیام صوتی'"
              :title="recording ? `توقف ضبط ${formatVoiceClock(recordSeconds)}` : 'ضبط پیام صوتی'"
              @click="toggleRecording"
            >
              <UiIcon name="mic" :size="16" />
            </button>
            <span v-if="recording" class="rec-time">{{ formatVoiceClock(recordSeconds) }}</span>
            <input
              ref="fileInput"
              class="photo-file"
              type="file"
              multiple
              @change="onFilesPicked"
            />
            <small class="hint">
              عکس زیر ۲۰۰ کیلوبایت و صوت مثل پیام‌رسان کم‌حجم می‌شود. فایل‌های دیگر تا ۱۰ مگابایت؛ همه در سقف حجم حساب می‌شوند.
            </small>
          </div>
          <p v-if="photoError" class="error">{{ photoError }}</p>
          <div v-if="pendingPhotos.length || savedPhotos.length" class="photo-grid">
            <figure v-for="photo in savedPhotos" :key="photo.id">
              <img v-if="photo.previewUrl" :src="photo.previewUrl" :alt="photo.fileName" />
              <button type="button" aria-label="حذف عکس" @click="removeSavedPhoto(photo)">×</button>
            </figure>
            <figure v-for="photo in pendingPhotos" :key="photo.localId">
              <img :src="photo.dataUrl" :alt="photo.name" />
              <button type="button" aria-label="حذف عکس" @click="removePendingPhoto(photo.localId)">×</button>
            </figure>
          </div>
          <p v-if="voiceError" class="error">{{ voiceError }}</p>
          <div v-if="pendingVoices.length || savedVoices.length" class="voice-list">
            <div v-for="voice in savedVoices" :key="voice.id" class="voice-item">
              <audio v-if="voice.previewUrl" :src="voice.previewUrl" controls preload="metadata" />
              <span>{{ formatVoiceBytes(voice.sizeBytes) }}</span>
              <button type="button" aria-label="حذف صوت" @click="removeSavedVoice(voice)">×</button>
            </div>
            <div v-for="voice in pendingVoices" :key="voice.localId" class="voice-item">
              <audio :src="voice.url" controls preload="metadata" />
              <span>{{ formatVoiceBytes(voice.file.size) }}</span>
              <button type="button" aria-label="حذف صوت" @click="removePendingVoice(voice.localId)">×</button>
            </div>
          </div>
          <ul v-if="pendingFiles.length || savedFiles.length" class="file-list">
            <li v-for="file in savedFiles" :key="file.id">
              <UiIcon name="document" :size="15" />
              <span>{{ file.fileName }}</span>
              <small>{{ formatVoiceBytes(file.sizeBytes) }}</small>
              <button type="button" aria-label="حذف فایل" @click="removeSavedFile(file)">×</button>
            </li>
            <li v-for="file in pendingFiles" :key="file.localId">
              <UiIcon name="document" :size="15" />
              <span>{{ file.name }}</span>
              <small>{{ formatVoiceBytes(file.file.size) }}</small>
              <button type="button" aria-label="حذف فایل" @click="removePendingFile(file.localId)">×</button>
            </li>
          </ul>
          <label for="activity-tags" class="tags-label">هشتگ / برچسب</label>
          <UiInput
            id="activity-tags"
            v-model="tagsRaw"
            placeholder="پیگیری، فوری (با کاما یا #)"
          />
          <div v-if="tagPreview.length" class="tag-preview">
            <span v-for="t in tagPreview" :key="t" class="tag-chip">#{{ t }}</span>
          </div>
          <small class="hint">
            چند برچسب را با کاما (،) یا # جدا کنید؛ برچسب‌ها در جزئیات و لیست فعالیت‌ها نمایش داده می‌شوند و با
            جستجوی همان کلمه پیدا می‌شوند.
          </small>
        </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?.name || '—' }}</dd>
          </div>
          <div>
            <dt>تاریخ و ساعت</dt>
            <dd>{{ duePreview }}</dd>
          </div>
          <div>
            <dt>مدت فعالیت</dt>
            <dd>{{ toFaDigits(durationMinutes) }} دقیقه</dd>
          </div>
          <div>
            <dt>مسئولان</dt>
            <dd>
              {{
                assigneeSummaryLabel
              }}
            </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;
}

.tag-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.tag-chip {
  background: #f0fdfa;
  color: #0f766e;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.req-star {
  color: var(--color-danger);
  font-style: normal;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.summary {
  display: none;
}

.form,
.stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  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;
}

.menu-label {
  padding: 0.45rem 0.75rem 0.15rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.multi-menu .role-name {
  min-width: 0;
}

.multi-menu .role-count {
  margin-inline-start: auto;
  color: #94a3b8;
  font-size: 0.72rem;
}

.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.sm {
  width: 26px;
  height: 26px;
}

.menu button.on {
  background: #f0fdfa;
}

.type-fields-count {
  margin-inline-start: auto;
  color: #94a3b8;
  font-size: 0.72rem;
}

.menu-empty {
  padding: 0.6rem;
  color: #94a3b8;
  font-size: 0.82rem;
}

.type-fields {
  display: grid;
  gap: 0.85rem;
}

.type-fields-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f172a;
}

.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: wrap;
  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: #eab308;
}

.pri.low {
  color: #16a34a;
}

.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;
}

.channel-sent {
  margin: 0;
  color: #0f766e;
  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: 7rem;
  resize: vertical;
}

.attach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.icon-tool {
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-tool.recording {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.icon-tool:disabled {
  opacity: 0.6;
  cursor: progress;
}

.rec-time {
  color: #b91c1c;
  font-size: 0.82rem;
  font-weight: 700;
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.file-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.file-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-list small {
  color: var(--muted);
  white-space: nowrap;
}

.file-list button {
  margin-inline-start: auto;
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  cursor: pointer;
}

.photo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.photo-add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px dashed #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.photo-add:disabled {
  opacity: 0.7;
  cursor: progress;
}

.photo-add.recording {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.voice-list {
  display: grid;
  gap: 0.45rem;
}

.voice-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.voice-item audio {
  flex: 1;
  min-width: 0;
  height: 2.25rem;
}

.voice-item span {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.voice-item button {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  cursor: pointer;
}

.photo-file {
  display: none;
}

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.photo-grid figure {
  position: relative;
  margin: 0;
  width: 4.5rem;
  height: 4.5rem;
}

.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.6rem;
  border: 1px solid #e2e8f0;
}

.photo-grid figure button {
  position: absolute;
  top: 0.15rem;
  inset-inline-end: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.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>