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

<script setup lang="ts">
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { RouterLink, useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import {
  Alert as AAlert,
  Breadcrumb as ABreadcrumb,
  BreadcrumbItem as ABreadcrumbItem,
  Button as AButton,
  Checkbox as ACheckbox,
  Dropdown as ADropdown,
  Empty as AEmpty,
  Flex as AFlex,
  Form as AForm,
  FormItem as AFormItem,
  Input as AInput,
  InputSearch as AInputSearch,
  Menu as AMenu,
  MenuItem as AMenuItem,
  Modal as AModal,
  Pagination as APagination,
  Segmented as ASegmented,
  Select as ASelect,
  Space as ASpace,
  Spin as ASpin,
  Table as ATable,
  TabPane as ATabPane,
  Tabs as ATabs,
  Tag as ATag,
  Typography,
  theme,
} from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';
import {
  BulbOutlined,
  CalendarOutlined,
  CheckOutlined,
  ClockCircleOutlined,
  DeleteOutlined,
  DownloadOutlined,
  FilterOutlined,
  MoreOutlined,
  PlusOutlined,
  ScheduleOutlined,
  SettingOutlined,
  SlidersOutlined,
  StarOutlined,
  UploadOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue';
import { api } from '@/lib/api';
import {
  calendarDaysBetween,
  formatClockFa,
  formatJalaliDay,
  startOfLocalDay,
  toFaDigits,
} from '@/lib/jalali';
import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
import ActivitiesKanban from '@/components/activities/ActivitiesKanban.vue';
import ActivityStagesManager from '@/components/activities/ActivityStagesManager.vue';
import ActivityTypesManager from '@/components/activities/ActivityTypesManager.vue';
import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
import { activityTypeView, typeColorStyle, useActivityTypes } from '@/lib/activity-types';
import {
  ACTIVITY_EXCEL_ALIASES,
  ACTIVITY_EXCEL_FIELDS,
  DIDAR_ACTIVITY_POSITIONAL,
  looksLikeDidarActivityHeaderless,
} from '@/lib/activity-excel';
import ActivityFormView from '@/views/ActivityFormView.vue';
import type {
  ActivityBoardDto,
  ActivityDto,
  ActivityFilter,
  ActivityStageCountsDto,
  ActivityStageDto,
  ActivityStatus,
  ActivityType,
  ImportContactsResult,
  OrgUserDto,
  PaginatedResponse,
} from '@mento/shared';
import { brand } from '@mento/shared';
import { useAuthStore } from '@/stores/auth';
import { canManageSettings, canViewAllRecords } from '@/lib/roles';
import { PAGE_SIZE_OPTIONS, usePageSize } from '@/lib/pageSize';
import { registerTableColumns, useTableColumns } from '@/lib/tableColumns';
import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
import { bindMenuDismiss, cardMenuStyle } from '@/lib/anchored-menu';

const { Title: ATypographyTitle, Text: ATypographyText, Link: ATypographyLink } = Typography;
const { token } = theme.useToken();
const GAP = 16;

const pageStyle = {
  boxSizing: 'border-box' as const,
  display: 'flex',
  flexDirection: 'column' as const,
  gap: `${GAP}px`,
  flex: '1 1 auto',
  minHeight: 0,
  minWidth: 0,
  width: '100%',
  height: '100%',
  padding: 0,
  margin: 0,
};

const activityClientReadOptions = {
  positionalColumns: DIDAR_ACTIVITY_POSITIONAL,
  detectHeaderless: looksLikeDidarActivityHeaderless,
};

const ACT_TABLE_KEY = 'activities';
const ACT_COLUMNS = [
  { key: 'title', label: 'عنوان فعالیت', width: 240 },
  { key: 'who', label: 'کارشناس', width: 120 },
  { key: 'customer', label: 'مشتری', width: 140 },
  { key: 'type', label: 'نوع فعالیت', width: 120 },
  { key: 'when', label: 'زمان شروع', width: 120 },
  { key: 'status', label: 'وضعیت', width: 140 },
] as const;
type ActColKey = (typeof ACT_COLUMNS)[number]['key'];
registerTableColumns(
  ACT_TABLE_KEY,
  ACT_COLUMNS.map((c) => c.label),
);
const actCols = useTableColumns(() => ACT_TABLE_KEY);
function colOn(key: ActColKey) {
  const col = ACT_COLUMNS.find((c) => c.key === key)!;
  return actCols.isVisible(col.label);
}

const selectMode = ref(false);
const selectedIds = ref<Set<string>>(new Set());
const selectedCount = computed(() => selectedIds.value.size);

/** 'all' یا شناسهٔ نوع فعالیت */
type TypeFilter = string;
type StatusFilter = 'all' | ActivityStatus;
type UiStatus = 'done' | 'progress' | 'planned' | 'overdue' | 'canceled';
type DeskScope = 'mine' | 'team';
type ViewMode = 'tabs' | 'board';
type TimeFilter = Exclude<ActivityFilter, 'done'>;

const TIME_TABS: Array<{ key: TimeFilter; label: string }> = [
  { key: 'today', label: 'امروز' },
  { key: 'overdue', label: 'عقب‌افتاده' },
  { key: 'upcoming', label: 'بعداً' },
  { key: 'all', label: 'همه زمان‌ها' },
];
const TIME_KEYS: TimeFilter[] = TIME_TABS.map((t) => t.key);

const VIEW_OPTIONS = [
  { value: 'tabs' as const, label: 'نمای تب' },
  { value: 'board' as const, label: 'نمای ستونی' },
];
const VIEW_STORAGE_KEY = 'activities-view-mode';

const DESK_TABS: Array<{ key: DeskScope; label: string }> = [
  { key: 'mine', label: 'میز من' },
  { key: 'team', label: 'همه تیم' },
];

const STATUS_FILTERS: Array<{ key: StatusFilter; label: string }> = [
  { key: 'all', label: 'همه وضعیت‌ها' },
  { key: 'open', label: 'باز / انجام‌نشده' },
  { key: 'done', label: 'انجام‌شده' },
  { key: 'canceled', label: 'لغو شده' },
];

const pageSize = usePageSize('activities', 10);

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const showDeskTabs = computed(() => canViewAllRecords(auth.user?.role));
const canManageStages = computed(() => canManageSettings(auth.user?.role));

function storedViewMode(): ViewMode {
  try {
    return localStorage.getItem(VIEW_STORAGE_KEY) === 'board' ? 'board' : 'tabs';
  } catch {
    return 'tabs';
  }
}

const viewMode = computed<ViewMode>(() => {
  if (route.query.view === 'board') return 'board';
  if (route.query.view === 'tabs') return 'tabs';
  return storedViewMode();
});

/** پیش‌فرض زمانی: در نمای تب «امروز»، در نمای ستونی «همه زمان‌ها» */
const defaultTime = computed<TimeFilter>(() => (viewMode.value === 'board' ? 'all' : 'today'));

const filter = computed<TimeFilter>(() => {
  const value = typeof route.query.filter === 'string' ? route.query.filter : '';
  if (TIME_KEYS.includes(value as TimeFilter)) return value as TimeFilter;
  if (value === 'done') return 'all';
  return defaultTime.value;
});

const stages = ref<ActivityStageDto[]>([]);
const stagesManagerOpen = ref(false);
const typesManagerOpen = ref(false);

/** گروه‌های فعالیت (مثل مسیر فروش)؛ هر گروه ستون‌های خودش را دارد */
const boards = ref<ActivityBoardDto[]>([]);
const defaultBoardId = computed(() => boards.value.find((b) => b.isDefault)?.id ?? '');
const board = computed<string>(() => {
  const value = typeof route.query.board === 'string' ? route.query.board : '';
  if (value && boards.value.some((b) => b.id === value)) return value;
  return defaultBoardId.value;
});
const currentBoard = computed(() => boards.value.find((b) => b.id === board.value) ?? null);
const boardModal = ref<{ mode: 'create' | 'edit'; name: string } | null>(null);
const boardSaving = ref(false);
const boardDeleteOpen = ref(false);

async function onTypesChanged() {
  await activityTypes.load(true);
  kanbanReload.value += 1;
  await refreshAll();
}
const kanbanReload = ref(0);
const stageCounts = ref<ActivityStageCountsDto>({ counts: {}, total: 0 });

const stage = computed<string>(() => {
  const value = typeof route.query.stage === 'string' ? route.query.stage : 'all';
  if (value === 'all' || stages.value.some((s) => s.id === value)) return value;
  return 'all';
});

const desk = computed<DeskScope>(() => {
  if (!showDeskTabs.value) return 'mine';
  return route.query.desk === 'team' ? 'team' : 'mine';
});

const page = computed(() => {
  const raw = Number(route.query.page);
  return Number.isFinite(raw) && raw > 0 ? raw : 1;
});

const loading = ref(false);
const error = ref('');
const data = ref<PaginatedResponse<ActivityDto> | null>(null);
const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
const users = ref<OrgUserDto[]>([]);
const filterOpen = ref(false);
const ideasOpen = ref(false);

const ACTIVITY_TYPES: ActivityType[] = ['call', 'meeting', 'task', 'note'];
const ACTIVITY_STATUSES: ActivityStatus[] = ['open', 'done', 'canceled'];

const activityTypes = useActivityTypes();
const TYPE_FILTERS = computed<Array<{ key: TypeFilter; label: string }>>(() => [
  { key: 'all', label: 'همه انواع' },
  ...activityTypes.types.value
    .filter((t) => t.isActive || t.id === typeFilter.value)
    .map((t) => ({ key: t.id, label: t.name })),
]);

/** پارامتر قدیمی ?type=call → نوع اصلیِ همان نوع پایه */
const legacyBaseType = computed<ActivityType | null>(() => {
  const value = typeof route.query.type === 'string' ? route.query.type : '';
  return ACTIVITY_TYPES.includes(value as ActivityType) ? (value as ActivityType) : null;
});

const typeFilter = computed<TypeFilter>(() => {
  const id = typeof route.query.typeDefId === 'string' ? route.query.typeDefId.trim() : '';
  if (id) return id;
  if (legacyBaseType.value) return activityTypes.systemOf.value[legacyBaseType.value]?.id ?? 'all';
  return 'all';
});

const statusFilter = computed<StatusFilter>(() => {
  const value = typeof route.query.status === 'string' ? route.query.status : 'all';
  return ACTIVITY_STATUSES.includes(value as ActivityStatus)
    ? (value as ActivityStatus)
    : 'all';
});

const assigneeFilter = computed(() =>
  typeof route.query.assigneeId === 'string' ? route.query.assigneeId : '',
);
const activityModal = ref<{
  type?: ActivityType;
  title?: string;
  stageId?: string;
} | null>(null);
const menuId = ref<string | null>(null);
const boardMenuId = ref<string | null>(null);
const boardMenuActivity = ref<ActivityDto | null>(null);
const boardMenuStyle = ref<Record<string, string> | null>(null);
const deleteActivityIds = ref<string[]>([]);
const deleteSingleTitle = ref('');
const activityDeleting = ref(false);
const busy = ref(false);
const pageBusy = ref(false);
const busyMessage = ref('لطفاً صبر کنید…');
const importMsg = ref('');
const counts = ref<Record<TimeFilter, number>>({
  today: 0,
  overdue: 0,
  upcoming: 0,
  all: 0,
});

const statusLabel: Record<UiStatus, string> = {
  done: 'انجام شد',
  progress: 'در حال انجام',
  planned: 'برنامه‌ریزی شده',
  overdue: 'عقب‌افتاده',
  canceled: 'لغو شده',
};

const items = computed(() => data.value?.items ?? []);

const total = computed(() => data.value?.total ?? 0);
const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
const rangeFrom = computed(() => (page.value - 1) * pageSize.value + 1);
const stageById = computed(() => new Map(stages.value.map((s) => [s.id, s])));
const filterLabel = computed(() => {
  const time = TIME_TABS.find((t) => t.key === filter.value)?.label ?? 'امروز';
  const st = stage.value === 'all' ? 'همه ستون‌ها' : stageById.value.get(stage.value)?.name ?? '';
  return `${st} · ${time}`;
});

/** فیلترهای مشترک لیست، شمارش‌ها و کانبان */
const sharedParams = computed<Record<string, string | undefined>>(() => ({
  boardId: board.value || undefined,
  filter: filter.value,
  q: typeof route.query.q === 'string' && route.query.q.trim() ? route.query.q.trim() : undefined,
  desk: showDeskTabs.value ? desk.value : undefined,
  typeDefId: typeof route.query.typeDefId === 'string' && route.query.typeDefId.trim()
    ? route.query.typeDefId.trim()
    : undefined,
  type:
    !(typeof route.query.typeDefId === 'string' && route.query.typeDefId.trim()) && legacyBaseType.value
      ? legacyBaseType.value
      : undefined,
  status: statusFilter.value === 'all' ? undefined : statusFilter.value,
  assigneeId: assigneeFilter.value || undefined,
}));

function stageDotStyle(s: ActivityStageDto) {
  return { background: PIPELINE_ACCENT[s.color].solid };
}
const activeFacetCount = computed(() => {
  let n = 0;
  if (typeFilter.value !== 'all') n += 1;
  if (statusFilter.value !== 'all') n += 1;
  if (assigneeFilter.value) n += 1;
  return n;
});
const filterBtnLabel = computed(() =>
  activeFacetCount.value ? `فیلتر (${toFaDigits(activeFacetCount.value)})` : 'فیلتر',
);
const trulyEmpty = computed(
  () =>
    !loading.value &&
    counts.value.all === 0 &&
    stage.value === 'all' &&
    !q.value.trim() &&
    !activeFacetCount.value,
);
const listEmpty = computed(() => !loading.value && !items.value.length);

const deskModel = computed<DeskScope>({
  get: () => desk.value,
  set: (v) => setDesk(v),
});

const timeFilterModel = computed<TimeFilter>({
  get: () => filter.value,
  set: (v) => setFilter(v),
});

const timeSegmentOptions = computed(() =>
  TIME_TABS.map((tab) => ({
    value: tab.key,
    label: `${tab.label} (${toFaDigits(counts.value[tab.key].toLocaleString('en-US'))})`,
  })),
);

const typeSelectOptions = computed(() =>
  TYPE_FILTERS.value.map((o) => ({ value: o.key, label: o.label })),
);
const statusSelectOptions = computed(() =>
  STATUS_FILTERS.map((o) => ({ value: o.key, label: o.label })),
);
const assigneeSelectOptions = computed(() => [
  { value: '', label: 'همه کارشناسان' },
  ...users.value.map((u) => ({ value: u.id, label: u.fullName })),
]);
const boardSelectOptions = computed(() =>
  boards.value.map((b) => ({ value: b.id, label: b.name })),
);

function onBoardSelectChange(v: unknown) {
  if (typeof v === 'string' && v) setBoard(v);
}

function statusTagColor(s: UiStatus): string {
  const map: Record<UiStatus, string> = {
    done: 'success',
    progress: 'processing',
    planned: 'warning',
    overdue: 'error',
    canceled: 'default',
  };
  return map[s];
}

const tableColumns = computed<TableColumnsType<ActivityDto>>(() => {
  const cols: TableColumnsType<ActivityDto> = [];
  if (selectMode.value) {
    cols.push({ title: '', key: 'select', width: 48, fixed: 'right' });
  }
  cols.push({
    title: '#',
    key: 'row',
    width: 56,
    customRender: ({ index }) => toFaDigits(rangeFrom.value + (index ?? 0)),
  });
  for (const col of ACT_COLUMNS) {
    if (!colOn(col.key)) continue;
    cols.push({
      title: col.label,
      key: col.key,
      dataIndex: col.key,
      width: col.width,
      ellipsis: col.key === 'title',
    });
  }
  cols.push({ title: '', key: 'actions', width: 56, fixed: 'left' });
  return cols;
});

function isOverdue(item: ActivityDto) {
  if (item.status !== 'open' || !item.dueAt) return false;
  return startOfLocalDay(new Date(item.dueAt)).getTime() < startOfLocalDay().getTime();
}

function uiStatus(item: ActivityDto): UiStatus {
  if (item.status === 'done') return 'done';
  if (item.status === 'canceled') return 'canceled';
  if (isOverdue(item)) return 'overdue';
  if (item.dueAt && calendarDaysBetween(new Date(item.dueAt), new Date()) === 0) {
    return 'progress';
  }
  return 'planned';
}

function clockText(item: ActivityDto) {
  if (!item.dueAt) return '—';
  return formatClockFa(new Date(item.dueAt));
}

function dayText(item: ActivityDto) {
  if (!item.dueAt) return 'بدون موعد';
  const days = calendarDaysBetween(new Date(item.dueAt), new Date());
  if (days === 0) return 'امروز';
  if (days === 1) return 'دیروز';
  if (days === -1) return 'فردا';
  return formatJalaliDay(new Date(item.dueAt));
}

function subtitle(item: ActivityDto) {
  const linked = item.deal?.title || item.lead?.title || item.person?.fullName;
  if (linked) return linked;
  return (item.description ?? '').split('\n')[0].trim();
}

async function loadBoards() {
  try {
    const { data: rows } = await api.get<ActivityBoardDto[]>('/activities/boards');
    boards.value = rows;
  } catch {
    error.value = 'بارگذاری گروه‌های فعالیت ناموفق بود.';
  }
}

function activityTableRow(record: ActivityDto) {
  const selected = selectedIds.value.has(record.id);
  return {
    onClick: () => {
      if (selectMode.value) toggleSelect(record.id);
    },
    style: selected ? { background: token.value.colorPrimaryBg } : undefined,
  };
}

function goActivityDetail(id: string) {
  menuId.value = null;
  void router.push({ name: 'activity-detail', params: { id } });
}

function goActivityEdit(id: string) {
  menuId.value = null;
  void router.push({ name: 'activity-edit', params: { id } });
}

function onPaginationChange(p: number, ps?: number) {
  if (ps != null && ps !== pageSize.value) {
    onPageSize(ps);
    if (page.value !== 1) {
      setPage(1);
      return;
    }
  }
  setPage(p);
}

function onStageTabChange(key: string | number) {
  setStage(String(key));
}

function onTypeSelectChange(v: unknown) {
  setTypeFilter(typeof v === 'string' && v ? v : 'all');
}

function onStatusSelectChange(v: unknown) {
  setStatusFilter(typeof v === 'string' && v ? (v as StatusFilter) : 'all');
}

function onAssigneeSelectChange(v: unknown) {
  setAssigneeFilter(typeof v === 'string' ? v : '');
}

function onSelectCheckboxChange(id: string, checked: boolean) {
  const next = new Set(selectedIds.value);
  if (checked) {
    next.add(id);
    selectMode.value = true;
  } else {
    next.delete(id);
  }
  selectedIds.value = next;
  if (!next.size) selectMode.value = false;
}

function onRowMenuOpenChange(id: string, open: boolean) {
  menuId.value = open ? id : null;
}

async function loadStages() {
  try {
    const { data: rows } = await api.get<ActivityStageDto[]>('/activities/stages', {
      params: { boardId: board.value || undefined },
    });
    stages.value = rows;
  } catch {
    error.value = 'بارگذاری ستون‌های فعالیت ناموفق بود.';
  }
}

function setBoard(next: string) {
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      board: next && next !== defaultBoardId.value ? next : undefined,
      stage: undefined,
      page: undefined,
    },
  });
}

function openCreateBoard() {
  boardModal.value = { mode: 'create', name: '' };
}

function openEditBoard() {
  if (!currentBoard.value) return;
  boardModal.value = { mode: 'edit', name: currentBoard.value.name };
}

async function saveBoard() {
  const modal = boardModal.value;
  const name = modal?.name.trim() ?? '';
  if (!modal || name.length < 2 || boardSaving.value) return;
  boardSaving.value = true;
  error.value = '';
  try {
    if (modal.mode === 'create') {
      const { data: created } = await api.post<ActivityBoardDto>('/activities/boards', { name });
      await loadBoards();
      boardModal.value = null;
      setBoard(created.id);
    } else if (currentBoard.value) {
      await api.patch(`/activities/boards/${currentBoard.value.id}`, { name });
      await loadBoards();
      boardModal.value = null;
    }
  } catch (e) {
    error.value = axios.isAxiosError(e)
      ? String((e.response?.data as { message?: string })?.message ?? 'ذخیرهٔ گروه ناموفق بود.')
      : 'ذخیرهٔ گروه ناموفق بود.';
  } finally {
    boardSaving.value = false;
  }
}

async function deleteBoard() {
  const target = currentBoard.value;
  if (!target || target.isDefault || boardSaving.value) return;
  boardSaving.value = true;
  error.value = '';
  try {
    await api.delete(`/activities/boards/${target.id}`);
    boardDeleteOpen.value = false;
    boardModal.value = null;
    await loadBoards();
    setBoard(defaultBoardId.value);
  } catch {
    error.value = 'حذف گروه ناموفق بود.';
  } finally {
    boardSaving.value = false;
  }
}

/** شمارش تب‌های زمانی (با ستون انتخابی در نمای تب) و شمارش ستون‌ها (با زمان انتخابی) */
async function loadCounts() {
  const base = sharedParams.value;
  const stageParam = viewMode.value === 'tabs' ? stage.value : 'all';
  try {
    const [timeResults, stageRes] = await Promise.all([
      Promise.all(
        TIME_KEYS.map((key) =>
          api.get<PaginatedResponse<ActivityDto>>('/activities', {
            params: { ...base, filter: key, stageId: stageParam, limit: 1 },
          }),
        ),
      ),
      api.get<ActivityStageCountsDto>('/activities/stage-counts', { params: base }),
    ]);
    const next = { ...counts.value };
    TIME_KEYS.forEach((key, i) => {
      next[key] = timeResults[i]?.data.total ?? 0;
    });
    counts.value = next;
    stageCounts.value = stageRes.data;
  } catch {
    /* شمارش‌ها اختیاری‌اند؛ خطای اصلی را load نشان می‌دهد */
  }
}

async function refreshAll() {
  await Promise.all([viewMode.value === 'tabs' ? load() : Promise.resolve(), loadCounts()]);
}

async function loadUsers() {
  if (!showDeskTabs.value) {
    users.value = [];
    return;
  }
  try {
    const { data: rows } = await api.get<OrgUserDto[]>('/users');
    users.value = rows.filter((u) => u.isActive !== false);
  } catch {
    users.value = [];
  }
}

async function load() {
  if (viewMode.value !== 'tabs') return;
  loading.value = true;
  error.value = '';
  menuId.value = null;
  try {
    const { data: res } = await api.get<PaginatedResponse<ActivityDto>>('/activities', {
      params: {
        ...sharedParams.value,
        stageId: stage.value,
        page: page.value,
        limit: pageSize.value,
      },
    });
    data.value = res;
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری فعالیت‌ها ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

function setDesk(next: DeskScope) {
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      desk: next === 'mine' ? undefined : next,
      page: undefined,
    },
  });
}

function setFilter(next: TimeFilter) {
  filterOpen.value = false;
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      filter: next === defaultTime.value ? undefined : next,
      page: undefined,
    },
  });
}

function setStage(next: string) {
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      stage: next === 'all' ? undefined : next,
      page: undefined,
    },
  });
}

function setViewMode(next: ViewMode) {
  try {
    localStorage.setItem(VIEW_STORAGE_KEY, next);
  } catch {
    /* ignore */
  }
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      view: next,
      filter: undefined,
      page: undefined,
      stage: next === 'board' ? undefined : route.query.stage,
    },
  });
}

function onViewSegmentChange(val: string | number) {
  const next = String(val) as ViewMode;
  if (next === 'board' || next === 'tabs') setViewMode(next);
}

function onStagesChanged() {
  void loadStages().then(() => loadCounts());
}

function openAddInStage(stageId: string) {
  activityModal.value = { stageId };
}

function onActivitySaved() {
  activityModal.value = null;
  kanbanReload.value += 1;
  void refreshAll();
}

function setPage(next: number) {
  const safe = Math.min(Math.max(1, next), pageCount.value);
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      page: safe === 1 ? undefined : String(safe),
    },
  });
}

function onPageSize(size: number) {
  pageSize.value = size;
  if (page.value === 1) void load();
}

function onSearch() {
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      q: q.value.trim() || undefined,
      page: undefined,
    },
  });
}

function patchFacetQuery(patch: Record<string, string | undefined>) {
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      ...patch,
      page: undefined,
    },
  });
}

function setTypeFilter(next: TypeFilter) {
  patchFacetQuery({ typeDefId: next === 'all' ? undefined : next, type: undefined });
}

function setStatusFilter(next: StatusFilter) {
  patchFacetQuery({ status: next === 'all' ? undefined : next });
}

function setAssigneeFilter(next: string) {
  patchFacetQuery({
    assigneeId: next || undefined,
    desk: next && showDeskTabs.value ? 'team' : route.query.desk === 'team' ? 'team' : undefined,
  });
}

function clearFacets() {
  patchFacetQuery({
    type: undefined,
    status: undefined,
    assigneeId: undefined,
  });
}

async function complete(id: string) {
  menuId.value = null;
  boardMenuId.value = null;
  boardMenuActivity.value = null;
  try {
    await api.patch(`/activities/${id}/complete`);
    await refreshAll();
  } catch {
    error.value = 'ثبت انجام‌شدن ناموفق بود.';
  }
}

function closePopovers() {
  filterOpen.value = false;
  menuId.value = null;
}

function canPromotePrior(item: ActivityDto) {
  const pa = auth.user?.priorArchive;
  if (!pa || pa.lens !== 'archive' || !pa.cutoffAt) return false;
  if (item.promotedFromPriorAt) return false;
  return new Date(item.createdAt).getTime() < new Date(pa.cutoffAt).getTime();
}

async function promotePriorActivity(id: string) {
  menuId.value = null;
  boardMenuId.value = null;
  boardMenuActivity.value = null;
  error.value = '';
  try {
    await api.post(`/activities/${id}/promote-from-prior`);
    kanbanReload.value += 1;
    await refreshAll();
  } catch {
    error.value = 'انتقال فعالیت به کار جاری ناموفق بود.';
  }
}

const deleteConfirmCopy = computed(() => {
  const n = deleteActivityIds.value.length;
  if (n <= 0) return '';
  if (n === 1) {
    const title = deleteSingleTitle.value.trim();
    return title
      ? `فعالیت «${title}» حذف شود؟ این کار قابل بازگشت نیست.`
      : 'این فعالیت حذف شود؟ این کار قابل بازگشت نیست.';
  }
  return `${toFaDigits(n)} فعالیت حذف شود؟ این کار قابل بازگشت نیست.`;
});

function activityTitle(id: string) {
  return items.value.find((item) => item.id === id)?.title ?? '';
}

function startSelect(id: string) {
  menuId.value = null;
  boardMenuId.value = null;
  boardMenuActivity.value = null;
  selectMode.value = true;
  selectedIds.value = new Set([id]);
}

function toggleSelect(id: string) {
  const next = new Set(selectedIds.value);
  if (next.has(id)) next.delete(id);
  else next.add(id);
  selectedIds.value = next;
  if (!next.size) selectMode.value = false;
}

function clearSelect() {
  selectMode.value = false;
  selectedIds.value = new Set();
}

function askDeleteActivity(id: string, title?: string) {
  menuId.value = null;
  boardMenuId.value = null;
  boardMenuActivity.value = null;
  deleteSingleTitle.value = title?.trim() || activityTitle(id);
  deleteActivityIds.value = [id];
}

function askBulkDelete() {
  if (!selectedIds.value.size) return;
  menuId.value = null;
  boardMenuId.value = null;
  boardMenuActivity.value = null;
  deleteSingleTitle.value = '';
  deleteActivityIds.value = [...selectedIds.value];
}

async function confirmDeleteActivities() {
  const ids = deleteActivityIds.value;
  if (!ids.length || activityDeleting.value) return;
  activityDeleting.value = true;
  error.value = '';
  try {
    const results = await Promise.allSettled(ids.map((id) => api.delete(`/activities/${id}`)));
    const failed = results.filter((r) => r.status === 'rejected').length;
    deleteActivityIds.value = [];
    clearSelect();
    kanbanReload.value += 1;
    await refreshAll();
    if (failed) {
      error.value =
        failed === ids.length
          ? 'حذف فعالیت‌ها ناموفق بود.'
          : `${toFaDigits(failed)} مورد حذف نشد.`;
    }
  } finally {
    activityDeleting.value = false;
  }
}

function onBoardMenu(activity: ActivityDto) {
  boardMenuId.value = boardMenuId.value === activity.id ? null : activity.id;
  boardMenuActivity.value = boardMenuId.value ? activity : null;
  boardMenuStyle.value = null;
  if (!boardMenuId.value) return;
  void nextTick(() => {
    boardMenuStyle.value = cardMenuStyle(activity.id);
  });
}

function onBoardMenuClick({ key }: { key: string | number }) {
  const id = boardMenuId.value;
  if (!id) return;
  if (key === 'select') startSelect(id);
  else if (key === 'view') {
    boardMenuId.value = null;
    boardMenuActivity.value = null;
    goActivityDetail(id);
  } else if (key === 'edit') {
    boardMenuId.value = null;
    boardMenuActivity.value = null;
    goActivityEdit(id);
  } else if (key === 'promote') void promotePriorActivity(id);
  else if (key === 'delete') askDeleteActivity(id);
  else {
    boardMenuId.value = null;
    boardMenuActivity.value = null;
  }
}

const unbindBoardMenuDismiss = bindMenuDismiss(
  () => boardMenuId.value != null,
  () => {
    boardMenuId.value = null;
    boardMenuActivity.value = null;
  },
);

async function exportExcel() {
  busy.value = true;
  pageBusy.value = true;
  busyMessage.value = 'در حال تهیه خروجی اکسل…';
  importMsg.value = '';
  error.value = '';
  try {
    const { data } = await api.get<Blob>('/activities/export', { responseType: 'blob' });
    const url = URL.createObjectURL(data);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${brand.filePrefix}-activities.xlsx`;
    a.click();
    URL.revokeObjectURL(url);
  } catch {
    error.value = 'خروجی اکسل ناموفق بود.';
  } finally {
    busy.value = false;
    pageBusy.value = false;
  }
}

function onImportStart() {
  busy.value = true;
  pageBusy.value = false;
  importMsg.value = '';
  error.value = '';
}

async function onImportDone(data: ImportContactsResult) {
  importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
    data.errors.length ? ` · خطا: ${data.errors.length}` : ''
  }`;
  if (data.errors.length) {
    error.value = data.errors
      .slice(0, 3)
      .map((e) => `ردیف ${e.row}: ${e.message}`)
      .join(' | ');
  }
  kanbanReload.value += 1;
  await refreshAll();
}

function onImportFail(message: string) {
  error.value = message;
}

function onImportSettled() {
  busy.value = false;
  pageBusy.value = false;
}

watch(
  () => [
    route.query.filter,
    route.query.q,
    route.query.page,
    route.query.desk,
    route.query.type,
    route.query.typeDefId,
    route.query.status,
    route.query.assigneeId,
    route.query.stage,
    route.query.view,
  ],
  () => {
    q.value = typeof route.query.q === 'string' ? route.query.q : '';
    void load();
    void loadCounts();
  },
);

/** گروه عوض شد → ستون‌های همان گروه، بعد لیست و شمارش‌ها */
watch(board, (next, prev) => {
  if (!prev || next === prev) return;
  clearSelect();
  void loadStages().then(() => {
    kanbanReload.value += 1;
    void load();
    void loadCounts();
  });
});

/** لینک‌های قدیمی ?filter=done → ستون انجام‌شده */
function migrateLegacyDoneFilter() {
  if (route.query.filter !== 'done') return false;
  const doneStage = stages.value.find((s) => s.kind === 'done');
  void router.replace({
    name: 'activities',
    query: {
      ...route.query,
      filter: 'all',
      stage: doneStage?.id,
    },
  });
  return true;
}

onMounted(() => {
  void loadUsers();
  void activityTypes.load(true);
  void loadBoards()
    .then(() => loadStages())
    .then(() => {
      if (migrateLegacyDoneFilter()) return;
      void load();
      void loadCounts();
    });
});

watch(viewMode, () => {
  clearSelect();
  boardMenuId.value = null;
  boardMenuActivity.value = null;
  menuId.value = null;
});

onUnmounted(() => {
  unbindBoardMenuDismiss();
});
</script>

<template>
  <div class="activities-page" dir="rtl" :style="pageStyle" @click="closePopovers">
    <a-flex vertical :gap="12" :style="{ flexShrink: 0 }">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <RouterLink :to="{ name: 'home' }">خانه</RouterLink>
        </a-breadcrumb-item>
        <a-breadcrumb-item>میز کار</a-breadcrumb-item>
      </a-breadcrumb>

      <a-flex justify="space-between" align="center" wrap="wrap" :gap="12">
        <a-space :size="10" align="center">
          <span
            :style="{
              width: `${token.controlHeight}px`,
              height: `${token.controlHeight}px`,
              borderRadius: `${token.borderRadius}px`,
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              background: token.colorPrimary,
              color: token.colorTextLightSolid,
              flexShrink: 0,
            }"
            aria-hidden="true"
          >
            <ScheduleOutlined />
          </span>
          <a-typography-title :level="4" :style="{ margin: 0 }">
            میز کار و فعالیت‌ها
          </a-typography-title>
        </a-space>

        <a-space wrap :size="8">
          <a-segmented
            :value="viewMode"
            :options="VIEW_OPTIONS"
            @change="onViewSegmentChange"
          />
          <a-button
            :disabled="busy"
            :loading="pageBusy"
            @click.stop="exportExcel"
          >
            <template #icon><DownloadOutlined /></template>
            خروجی اکسل
          </a-button>
          <ExcelImportFlow
            preview-path="/activities/import/preview"
            import-path="/activities/import"
            rows-import-path="/activities/import/rows"
            :client-aliases="ACTIVITY_EXCEL_ALIASES"
            :client-fields="ACTIVITY_EXCEL_FIELDS"
            :client-read-options="activityClientReadOptions"
            :disabled="busy"
            @start="onImportStart"
            @done="onImportDone"
            @fail="onImportFail"
            @settled="onImportSettled"
          >
            <template #default="{ loading: importLoading }">
              <a-button :disabled="busy" :loading="importLoading">
                <template #icon><UploadOutlined /></template>
                ورود از اکسل
              </a-button>
            </template>
          </ExcelImportFlow>
          <RouterLink :to="{ name: 'activities-calendar' }">
            <a-button>
              <template #icon><CalendarOutlined /></template>
              تقویم
            </a-button>
          </RouterLink>
          <a-button type="primary" @click.stop="activityModal = {}">
            <template #icon><PlusOutlined /></template>
            فعالیت جدید
          </a-button>
        </a-space>
      </a-flex>

      <a-flex
        wrap="wrap"
        align="center"
        :gap="8"
        :style="{ width: '100%', minWidth: 0 }"
      >
        <a-select
          v-if="boards.length"
          :value="board || undefined"
          :options="boardSelectOptions"
          placeholder="گروه فعالیت"
          :style="{ minWidth: '10rem' }"
          @change="onBoardSelectChange"
        />
        <a-dropdown v-if="canManageStages && boards.length" :trigger="['click']">
          <a-button>گروه</a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="openCreateBoard">گروه جدید</a-menu-item>
              <a-menu-item @click="openEditBoard">ویرایش این گروه</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <a-segmented
          v-if="showDeskTabs"
          v-model:value="deskModel"
          :options="DESK_TABS.map((t) => ({ value: t.key, label: t.label }))"
        />
        <a-segmented v-model:value="timeFilterModel" :options="timeSegmentOptions" />
        <a-button v-if="canManageStages" @click.stop="stagesManagerOpen = true">
          <template #icon><SettingOutlined /></template>
          مدیریت ستون‌ها
        </a-button>
        <a-button v-if="canManageStages" @click.stop="typesManagerOpen = true">
          <template #icon><SlidersOutlined /></template>
          انواع فعالیت
        </a-button>
        <a-input-search
          v-model:value="q"
          placeholder="جستجو در عنوان، مشتری، کارشناس…"
          allow-clear
          :style="{ flex: '1 1 220px', minWidth: '180px', maxWidth: '100%' }"
          @search="onSearch"
        />
        <a-dropdown
          v-model:open="filterOpen"
          :trigger="['click']"
          @click.stop
        >
          <a-button :type="activeFacetCount ? 'primary' : 'default'">
            <template #icon><FilterOutlined /></template>
            {{ filterBtnLabel }}
          </a-button>
          <template #overlay>
            <div
              :style="{
                padding: `${token.paddingSM}px`,
                background: token.colorBgElevated,
                borderRadius: `${token.borderRadius}px`,
                boxShadow: token.boxShadowSecondary,
                width: '280px',
              }"
              @click.stop
            >
              <a-form layout="vertical">
                <a-form-item label="نوع کار">
                  <a-select
                    :value="typeFilter === 'all' ? undefined : typeFilter"
                    allow-clear
                    placeholder="همه انواع"
                    :options="typeSelectOptions"
                    style="width: 100%"
                    @change="onTypeSelectChange"
                  />
                </a-form-item>
                <a-form-item label="وضعیت">
                  <a-select
                    :value="statusFilter === 'all' ? undefined : statusFilter"
                    allow-clear
                    placeholder="همه وضعیت‌ها"
                    :options="statusSelectOptions"
                    style="width: 100%"
                    @change="onStatusSelectChange"
                  />
                </a-form-item>
                <a-form-item v-if="showDeskTabs" label="کارشناس">
                  <a-select
                    :value="assigneeFilter || undefined"
                    allow-clear
                    placeholder="همه کارشناسان"
                    :options="assigneeSelectOptions"
                    style="width: 100%"
                    @change="onAssigneeSelectChange"
                  />
                </a-form-item>
                <a-button
                  v-if="activeFacetCount"
                  type="link"
                  danger
                  block
                  @click="clearFacets"
                >
                  پاک کردن فیلترها
                </a-button>
              </a-form>
            </div>
          </template>
        </a-dropdown>
      </a-flex>

      <a-alert v-if="error" type="error" show-icon :message="error" />
      <a-alert v-if="importMsg" type="success" show-icon :message="importMsg" />

      <a-alert
        v-if="selectMode"
        type="info"
        show-icon
        :message="`${toFaDigits(selectedCount)} فعالیت انتخاب شده`"
      >
        <template #action>
          <a-space>
            <a-button
              v-if="selectedCount"
              type="primary"
              danger
              @click.stop="askBulkDelete"
            >
              <template #icon><DeleteOutlined /></template>
              حذف انتخاب‌شده‌ها
            </a-button>
            <a-button @click.stop="clearSelect">انصراف از انتخاب</a-button>
          </a-space>
        </template>
      </a-alert>
    </a-flex>

    <div
      :style="{
        position: 'relative',
        flex: '1 1 auto',
        minHeight: 0,
        display: 'flex',
        flexDirection: 'column',
      }"
    >
      <div
        v-if="pageBusy"
        :style="{
          position: 'absolute',
          inset: 0,
          zIndex: 2,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: token.colorBgMask,
        }"
      >
        <a-spin :tip="busyMessage" />
      </div>

      <ActivitiesKanban
        v-if="viewMode === 'board'"
        :stages="stages"
        :params="sharedParams"
        :can-manage="canManageStages"
        :reload-key="kanbanReload"
        :select-mode="selectMode"
        :selected-ids="selectedIds"
        @changed="loadCounts"
        @stages-changed="onStagesChanged"
        @add="openAddInStage"
        @error="(msg: string) => (error = msg)"
        @menu-deal="onBoardMenu"
        @toggle-select="toggleSelect"
        @bulk-delete="askBulkDelete"
      />

      <template v-else>
        <a-tabs
          :active-key="stage"
          @change="onStageTabChange"
        >
          <a-tab-pane key="all">
            <template #tab>
              <a-space :size="6">
                <span>همه</span>
                <a-tag>{{ toFaDigits(stageCounts.total.toLocaleString('en-US')) }}</a-tag>
              </a-space>
            </template>
          </a-tab-pane>
          <a-tab-pane v-for="s in stages" :key="s.id">
            <template #tab>
              <a-space :size="6">
                <span
                  :style="{
                    display: 'inline-block',
                    width: '8px',
                    height: '8px',
                    borderRadius: '50%',
                    ...stageDotStyle(s),
                  }"
                  aria-hidden="true"
                />
                <span>{{ s.name }}</span>
                <a-tag>{{ toFaDigits((stageCounts.counts[s.id] ?? 0).toLocaleString('en-US')) }}</a-tag>
              </a-space>
            </template>
          </a-tab-pane>
        </a-tabs>

        <a-spin :spinning="loading">
          <a-empty
            v-if="listEmpty"
            :description="
              trulyEmpty
                ? 'هنوز فعالیتی ثبت نشده! اولین تماس، جلسه یا وظیفه را ثبت کنید.'
                : 'فعالیتی در این فهرست نیست. فیلتر یا جستجو را عوض کنید.'
            "
          >
            <a-space direction="vertical" align="center">
              <a-button type="primary" @click="activityModal = {}">
                {{ trulyEmpty ? 'اولین فعالیتت رو ثبت کن' : 'فعالیت جدید' }}
              </a-button>
              <a-button type="link" @click.stop="ideasOpen = !ideasOpen">
                <template #icon><BulbOutlined /></template>
                ایده‌هایی برای شروع
              </a-button>
              <a-space v-if="ideasOpen" direction="vertical">
                <a-button
                  type="text"
                  @click="activityModal = { type: 'call', title: 'تماس پیگیری' }"
                >
                  تماس پیگیری
                </a-button>
                <a-button
                  type="text"
                  @click="activityModal = { type: 'meeting', title: 'جلسه دمو' }"
                >
                  جلسه دمو
                </a-button>
                <a-button
                  type="text"
                  @click="activityModal = { type: 'task', title: 'وظیفه یادآوری' }"
                >
                  وظیفه یادآوری
                </a-button>
              </a-space>
            </a-space>
          </a-empty>

          <template v-else>
            <a-flex justify="space-between" align="center" wrap="wrap" :gap="token.marginSM">
              <a-typography-text strong>
                {{ filterLabel }} — {{ toFaDigits(total.toLocaleString('en-US')) }} فعالیت
              </a-typography-text>
              <a-space>
                <TableColumnsMenu :table-key="ACT_TABLE_KEY" align="end" />
                <RouterLink :to="{ name: 'activities-calendar' }" aria-label="تقویم">
                  <a-button type="text">
                    <template #icon><CalendarOutlined /></template>
                  </a-button>
                </RouterLink>
              </a-space>
            </a-flex>

            <a-table
              :columns="tableColumns"
              :data-source="items"
              :pagination="false"
              :row-key="(r: ActivityDto) => r.id"
              :scroll="{ x: 960 }"
              :custom-row="activityTableRow"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'select'">
                  <a-checkbox
                    :checked="selectedIds.has((record as ActivityDto).id)"
                    @click.stop
                    @change="
                      (e) =>
                        onSelectCheckboxChange(
                          (record as ActivityDto).id,
                          Boolean(e?.target?.checked),
                        )
                    "
                  />
                </template>
                <template v-else-if="column.key === 'title'">
                  <a-space align="start" :size="8">
                    <StarOutlined :style="{ color: token.colorTextQuaternary }" />
                    <div :style="{ minWidth: 0 }">
                      <a-typography-link
                        @click.stop="goActivityDetail((record as ActivityDto).id)"
                      >
                        {{ (record as ActivityDto).title }}
                      </a-typography-link>
                      <div v-if="subtitle(record as ActivityDto)">
                        <a-typography-text type="secondary">
                          {{ subtitle(record as ActivityDto) }}
                        </a-typography-text>
                      </div>
                      <a-space
                        v-if="(record as ActivityDto).tags?.length"
                        wrap
                        :size="4"
                        :style="{ marginTop: `${token.marginXXS}px` }"
                      >
                        <a-tag v-for="t in (record as ActivityDto).tags!.slice(0, 3)" :key="t">
                          #{{ t }}
                        </a-tag>
                        <a-tag v-if="(record as ActivityDto).tags!.length > 3">
                          +{{ toFaDigits((record as ActivityDto).tags!.length - 3) }}
                        </a-tag>
                      </a-space>
                    </div>
                  </a-space>
                </template>
                <template v-else-if="column.key === 'who'">
                  <a-typography-text>
                    {{
                      (record as ActivityDto).assignees?.length
                        ? (record as ActivityDto).assignees!.map((a) => a.fullName).join('، ')
                        : (record as ActivityDto).assignee?.fullName || '—'
                    }}
                  </a-typography-text>
                </template>
                <template v-else-if="column.key === 'customer'">
                  <a-space direction="vertical" :size="2">
                    <RouterLink
                      v-if="(record as ActivityDto).company"
                      :to="{
                        name: 'company-detail',
                        params: { id: (record as ActivityDto).company!.id },
                      }"
                      @click.stop
                    >
                      {{ (record as ActivityDto).company!.name }}
                    </RouterLink>
                    <RouterLink
                      v-if="(record as ActivityDto).person"
                      :to="{
                        name: 'person-detail',
                        params: { id: (record as ActivityDto).person!.id },
                      }"
                      @click.stop
                    >
                      <a-typography-text
                        :type="(record as ActivityDto).company ? 'secondary' : undefined"
                      >
                        {{ (record as ActivityDto).person!.fullName }}
                      </a-typography-text>
                    </RouterLink>
                    <a-typography-text
                      v-if="!(record as ActivityDto).company && !(record as ActivityDto).person"
                      type="secondary"
                    >
                      —
                    </a-typography-text>
                  </a-space>
                </template>
                <template v-else-if="column.key === 'type'">
                  <a-tag :style="typeColorStyle(activityTypeView(record as ActivityDto).color)">
                    {{ activityTypeView(record as ActivityDto).name }}
                  </a-tag>
                </template>
                <template v-else-if="column.key === 'when'">
                  <a-space direction="vertical" :size="0">
                    <a-typography-text
                      :type="uiStatus(record as ActivityDto) === 'overdue' ? 'danger' : undefined"
                      strong
                    >
                      {{ clockText(record as ActivityDto) }}
                    </a-typography-text>
                    <a-typography-text type="secondary">
                      {{ dayText(record as ActivityDto) }}
                    </a-typography-text>
                  </a-space>
                </template>
                <template v-else-if="column.key === 'status'">
                  <a-space direction="vertical" :size="4">
                    <a-tag :color="statusTagColor(uiStatus(record as ActivityDto))">
                      <template #icon>
                        <CheckOutlined v-if="uiStatus(record as ActivityDto) === 'done'" />
                        <ClockCircleOutlined
                          v-else-if="uiStatus(record as ActivityDto) === 'progress'"
                        />
                        <CalendarOutlined
                          v-else-if="uiStatus(record as ActivityDto) === 'planned'"
                        />
                        <WarningOutlined v-else />
                      </template>
                      {{ statusLabel[uiStatus(record as ActivityDto)] }}
                    </a-tag>
                    <a-typography-text
                      v-if="
                        (record as ActivityDto).stageId &&
                          stageById.get((record as ActivityDto).stageId!)
                      "
                      type="secondary"
                    >
                      <a-space :size="4">
                        <span
                          :style="{
                            display: 'inline-block',
                            width: '6px',
                            height: '6px',
                            borderRadius: '50%',
                            ...stageDotStyle(stageById.get((record as ActivityDto).stageId!)!),
                          }"
                        />
                        {{ stageById.get((record as ActivityDto).stageId!)!.name }}
                      </a-space>
                    </a-typography-text>
                  </a-space>
                </template>
                <template v-else-if="column.key === 'actions'">
                  <a-space @click.stop>
                    <a-button
                      v-if="selectMode && selectedIds.has((record as ActivityDto).id)"
                      type="text"
                      danger
                      aria-label="حذف انتخاب‌شده‌ها"
                      @click="askBulkDelete"
                    >
                      <template #icon><DeleteOutlined /></template>
                    </a-button>
                    <a-dropdown
                      v-else
                      :open="menuId === (record as ActivityDto).id"
                      :trigger="['click']"
                      @update:open="
                        (v) => onRowMenuOpenChange((record as ActivityDto).id, v)
                      "
                    >
                      <a-button type="text" aria-label="عملیات">
                        <template #icon><MoreOutlined /></template>
                      </a-button>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item @click="startSelect((record as ActivityDto).id)">
                            انتخاب
                          </a-menu-item>
                          <a-menu-item @click="goActivityDetail((record as ActivityDto).id)">
                            مشاهده
                          </a-menu-item>
                          <a-menu-item @click="goActivityEdit((record as ActivityDto).id)">
                            ویرایش
                          </a-menu-item>
                          <a-menu-item
                            v-if="canPromotePrior(record as ActivityDto)"
                            @click="promotePriorActivity((record as ActivityDto).id)"
                          >
                            انتقال به کار جاری
                          </a-menu-item>
                          <a-menu-item
                            v-if="(record as ActivityDto).status === 'open'"
                            @click="complete((record as ActivityDto).id)"
                          >
                            انجام شد
                          </a-menu-item>
                          <a-menu-item
                            danger
                            @click="
                              askDeleteActivity(
                                (record as ActivityDto).id,
                                (record as ActivityDto).title,
                              )
                            "
                          >
                            حذف
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </a-space>
                </template>
              </template>
            </a-table>

            <a-flex
              v-if="total"
              justify="space-between"
              align="center"
              wrap="wrap"
              :gap="token.marginSM"
              :style="{ marginTop: `${token.marginMD}px` }"
            >
              <a-pagination
                :current="page"
                :total="total"
                :page-size="pageSize"
                :show-size-changer="true"
                :page-size-options="PAGE_SIZE_OPTIONS.map(String)"
                @change="onPaginationChange"
              />
              <a-typography-text type="secondary">
                صفحه {{ toFaDigits(page) }} از {{ toFaDigits(pageCount) }}
              </a-typography-text>
            </a-flex>
          </template>
        </a-spin>
      </template>
    </div>

    <Teleport to="body">
      <div
        v-if="boardMenuId"
        :style="{
          position: 'fixed',
          zIndex: 1080,
          ...(boardMenuStyle ?? {}),
        }"
      >
        <a-menu
          :style="{ minWidth: '160px', boxShadow: token.boxShadowSecondary }"
          @click="onBoardMenuClick"
        >
          <a-menu-item key="select">انتخاب</a-menu-item>
          <a-menu-item key="view">مشاهده</a-menu-item>
          <a-menu-item key="edit">ویرایش</a-menu-item>
          <a-menu-item
            v-if="boardMenuActivity && canPromotePrior(boardMenuActivity)"
            key="promote"
          >
            انتقال به کار جاری
          </a-menu-item>
          <a-menu-item key="delete" danger>حذف</a-menu-item>
          <a-menu-item key="close">بستن</a-menu-item>
        </a-menu>
      </div>
    </Teleport>

    <a-modal
      :open="Boolean(activityModal)"
      title="فعالیت جدید"
      :footer="null"
      destroy-on-close
      width="720px"
      @cancel="activityModal = null"
    >
      <ActivityFormView
        v-if="activityModal"
        embedded
        :initial-type="activityModal.type"
        :initial-title="activityModal.title"
        :initial-stage-id="activityModal.stageId"
        :initial-board-id="board || undefined"
        @saved="onActivitySaved"
        @cancel="activityModal = null"
      />
    </a-modal>

    <a-modal
      :open="deleteActivityIds.length > 0"
      :title="deleteActivityIds.length > 1 ? 'حذف فعالیت‌ها' : 'حذف فعالیت'"
      :confirm-loading="activityDeleting"
      ok-text="حذف"
      ok-type="danger"
      cancel-text="انصراف"
      @ok="confirmDeleteActivities"
      @cancel="deleteActivityIds = []"
    >
      <a-typography-text>{{ deleteConfirmCopy }}</a-typography-text>
    </a-modal>

    <ActivityStagesManager
      v-if="canManageStages"
      :open="stagesManagerOpen"
      :stages="stages"
      :board-id="board || undefined"
      :board-name="boards.length > 1 ? currentBoard?.name : undefined"
      @close="stagesManagerOpen = false"
      @changed="onStagesChanged(); kanbanReload += 1"
    />

    <a-modal
      :open="Boolean(boardModal)"
      :title="boardModal?.mode === 'create' ? 'گروه فعالیت جدید' : 'ویرایش گروه فعالیت'"
      :confirm-loading="boardSaving"
      :ok-text="boardModal?.mode === 'create' ? 'ساخت گروه' : 'ذخیره'"
      cancel-text="انصراف"
      :ok-button-props="{ disabled: boardSaving || (boardModal?.name.trim().length ?? 0) < 2 }"
      @ok="saveBoard"
      @cancel="boardModal = null"
    >
      <a-form v-if="boardModal" layout="vertical">
        <a-form-item label="نام گروه">
          <a-input
            v-model:value="boardModal.name"
            :maxlength="80"
            placeholder="مثلاً پشتیبانی، نصب، پیگیری فروش…"
          />
        </a-form-item>
        <a-typography-text v-if="boardModal.mode === 'create'" type="secondary">
          گروه جدید با ستون‌های پیش‌فرض ساخته می‌شود و بعد می‌توانید ستون‌هایش را تغییر دهید.
        </a-typography-text>
        <a-button
          v-if="boardModal.mode === 'edit' && currentBoard && !currentBoard.isDefault"
          danger
          type="link"
          :disabled="boardSaving"
          @click="boardDeleteOpen = true"
        >
          <template #icon><DeleteOutlined /></template>
          حذف این گروه
        </a-button>
      </a-form>
    </a-modal>

    <a-modal
      :open="boardDeleteOpen"
      title="حذف گروه فعالیت"
      :confirm-loading="boardSaving"
      ok-text="حذف گروه"
      ok-type="danger"
      cancel-text="انصراف"
      @ok="deleteBoard"
      @cancel="boardDeleteOpen = false"
    >
      <a-typography-text>
        گروه «{{ currentBoard?.name }}» و ستون‌هایش حذف شود؟ فعالیت‌های این گروه حذف نمی‌شوند و به
        گروه اصلی منتقل می‌شوند.
      </a-typography-text>
    </a-modal>
    <ActivityTypesManager
      v-if="canManageStages"
      :open="typesManagerOpen"
      @close="typesManagerOpen = false"
      @changed="onTypesChanged"
    />
  </div>
</template>

<style scoped>
.activities-page {
  margin: 0;
  width: 100%;
}
</style>