import { useCallback, useEffect, useState, type ReactNode } from "react";
import { Search, Plus, Download, MapPin, Building2, User, Phone, X, Clock, FileText, Calendar } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import { useLocation } from "react-router-dom";
import {
  checkChannelExpansionDuplicate,
  checkSalesExpansionDuplicate,
  createChannelExpansion,
  createSalesExpansion,
  decodeExpansionMultiValue,
  getExpansionCityOptions,
  getExpansionMeta,
  getExpansionOverview,
  getOpportunityMeta,
  getStoredCurrentUserId,
  updateChannelExpansion,
  updateSalesExpansion,
  type ChannelExpansionContact,
  type ChannelExpansionItem,
  type CreateChannelExpansionPayload,
  type CreateSalesExpansionPayload,
  type ExpansionDictOption,
  type ExpansionFollowUp,
  type SalesExpansionItem,
} from "@/lib/auth";
import { AdaptiveSelect } from "@/components/AdaptiveSelect";
import { useIsMobileViewport } from "@/hooks/useIsMobileViewport";
import { useIsWecomBrowser } from "@/hooks/useIsWecomBrowser";
import { cn } from "@/lib/utils";

type ExpansionItem = SalesExpansionItem | ChannelExpansionItem;
type ExpansionTab = "sales" | "channel";
type ExpansionLocationState = { tab?: ExpansionTab; selectedId?: number } | null;
type ExpansionExportFilters = {
  keyword?: string;
  intent?: string;
  officeName?: string;
  industry?: string;
  employmentStatus?: string;
  province?: string;
  certificationLevel?: string;
  channelIndustry?: string;
  channelAttribute?: string;
  establishedStartDate?: string;
  establishedEndDate?: string;
  hasRelatedProject?: string;
  relatedProjectStageCodes?: string[];
  selectedSalesFields?: SalesExportFieldKey[];
  selectedChannelFields?: ChannelExportFieldKey[];
};
type SalesExportFieldKey =
  | "employeeNo"
  | "name"
  | "phone"
  | "officeName"
  | "dept"
  | "title"
  | "industry"
  | "intent"
  | "active"
  | "hasExp"
  | "relatedProjects"
  | "relatedProjectAmount"
  | "owner"
  | "createdAt"
  | "updatedAt"
  | "followUps";
type ChannelExportFieldKey =
  | "channelCode"
  | "name"
  | "province"
  | "city"
  | "officeAddress"
  | "certificationLevel"
  | "channelIndustry"
  | "channelAttribute"
  | "internalAttribute"
  | "intent"
  | "establishedDate"
  | "revenue"
  | "size"
  | "hasDesktopExp"
  | "relatedProjects"
  | "relatedProjectAmount"
  | "contacts"
  | "notes"
  | "owner"
  | "createdAt"
  | "updatedAt"
  | "followUps";
type ExportColumnKind = "default" | "longText" | "project" | "contact" | "followup";
type ExportCellValue = string | number;
type RelatedProjectLike = {
  opportunityCode?: string;
  opportunityName?: string;
  stageCode?: string;
  stage?: string;
  amount?: number | null;
};
type ExportColumn<T, K extends string> = {
  key: K;
  label: string;
  kind?: ExportColumnKind;
  numFmt?: string;
  value: (item: T) => ExportCellValue;
};
type SalesCreateField =
  | "employeeNo"
  | "officeName"
  | "candidateName"
  | "mobile"
  | "targetDept"
  | "industry"
  | "title"
  | "intentLevel"
  | "employmentStatus";
type ChannelField =
  | "channelName"
  | "province"
  | "city"
  | "officeAddress"
  | "channelIndustry"
  | "certificationLevel"
  | "annualRevenue"
  | "staffSize"
  | "contactEstablishedDate"
  | "intentLevel"
  | "channelAttribute"
  | "channelAttributeCustom"
  | "internalAttribute"
  | "contacts";
function createEmptyChannelContact(): ChannelExpansionContact {
  return {
    name: "",
    mobile: "",
    title: "",
  };
}

const CHANNEL_REVENUE_LABEL = "年度营业额(万元)";
const EXPANSION_EXPORT_PREFERENCES_STORAGE_KEY = "crm:expansion-export-preferences";

const defaultSalesForm: CreateSalesExpansionPayload = {
  employeeNo: "",
  candidateName: "",
  officeName: "",
  mobile: "",
  industry: "",
  title: "",
  intentLevel: "medium",
  hasDesktopExp: false,
  employmentStatus: "active",
};

const defaultChannelForm: CreateChannelExpansionPayload = {
  channelCode: "",
  channelName: "",
  province: "",
  city: "",
  officeAddress: "",
  channelIndustry: [],
  certificationLevel: "",
  contactEstablishedDate: "",
  intentLevel: "medium",
  hasDesktopExp: false,
  channelAttribute: [],
  channelAttributeCustom: "",
  internalAttribute: [],
  stage: "initial_contact",
  remark: "",
  contacts: [createEmptyChannelContact()],
};

function isOtherOption(option?: ExpansionDictOption) {
  const candidate = `${option?.label ?? ""}${option?.value ?? ""}`.toLowerCase();
  return candidate.includes("其他") || candidate.includes("其它") || candidate.includes("other");
}

function normalizeOptionalText(value?: string) {
  const trimmed = value?.trim();
  return trimmed ? trimmed : undefined;
}

function loadExpansionExportPreferences(): ExpansionExportFilters {
  if (typeof window === "undefined") {
    return {};
  }
  try {
    const rawValue = window.localStorage.getItem(EXPANSION_EXPORT_PREFERENCES_STORAGE_KEY);
    if (!rawValue) {
      return {};
    }
    const parsed = JSON.parse(rawValue);
    return typeof parsed === "object" && parsed ? parsed as ExpansionExportFilters : {};
  } catch {
    return {};
  }
}

function persistExpansionExportPreferences(filters: ExpansionExportFilters) {
  if (typeof window === "undefined") {
    return;
  }
  try {
    window.localStorage.setItem(EXPANSION_EXPORT_PREFERENCES_STORAGE_KEY, JSON.stringify(filters));
  } catch {
    // ignore storage failures
  }
}

function dedupeExpansionItemsById<T extends { id?: number | string | null }>(items: T[]) {
  const seenIds = new Set<number | string>();
  return items.filter((item) => {
    if (item.id === null || item.id === undefined) {
      return true;
    }
    if (seenIds.has(item.id)) {
      return false;
    }
    seenIds.add(item.id);
    return true;
  });
}

function getFieldInputClass(hasError: boolean) {
  return cn(
    "crm-input-box crm-input-text w-full border bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:bg-slate-900/50",
    hasError
      ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10"
      : "border-slate-200 dark:border-slate-800",
  );
}

function normalizeExportText(value?: string | number | boolean | null) {
  if (value === null || value === undefined) {
    return "";
  }
  const normalized = String(value).replace(/\r?\n/g, " ").trim();
  if (!normalized || normalized === "无") {
    return "";
  }
  return normalized;
}

function normalizeExportNumber(value?: string | number | null) {
  if (value === null || value === undefined) {
    return undefined;
  }
  if (typeof value === "number") {
    return Number.isFinite(value) ? value : undefined;
  }
  const normalized = value.replace(/[¥,\s]|人/g, "").trim();
  if (!normalized) {
    return undefined;
  }
  const parsed = Number(normalized);
  return Number.isFinite(parsed) ? parsed : undefined;
}

function normalizeExportFilterText(value?: string | number | boolean | null) {
  return normalizeExportText(value).toLowerCase();
}

function matchesExportKeyword(value: string, keyword?: string) {
  const normalizedKeyword = normalizeExportFilterText(keyword);
  return !normalizedKeyword || value.toLowerCase().includes(normalizedKeyword);
}

function matchesTextFilter(value: string | undefined, filterValue?: string) {
  const normalizedFilter = normalizeExportFilterText(filterValue);
  if (!normalizedFilter) {
    return true;
  }
  return normalizeExportFilterText(value).includes(normalizedFilter);
}

function matchesDateRange(value?: string, startDate?: string, endDate?: string) {
  const normalizedValue = normalizeExportText(value).slice(0, 10);
  if (!normalizedValue) {
    return !startDate && !endDate;
  }
  if (startDate && normalizedValue < startDate) {
    return false;
  }
  if (endDate && normalizedValue > endDate) {
    return false;
  }
  return true;
}

function hasRelatedProjects(projects?: Array<{ amount?: number }>) {
  return Boolean(projects?.length);
}

function matchesRelatedProjectFilter(projects: Array<{ amount?: number }> | undefined, filterValue?: string) {
  if (filterValue === "yes") {
    return hasRelatedProjects(projects);
  }
  if (filterValue === "no") {
    return !hasRelatedProjects(projects);
  }
  return true;
}

function normalizeMultiSelectValues(values?: string[]) {
  return Array.from(new Set((values ?? []).map((value) => value?.trim()).filter((value): value is string => Boolean(value))));
}

function getDictOptionValue(option?: ExpansionDictOption) {
  const value = option?.value?.trim() || option?.label?.trim() || "";
  return value;
}

function getDictOptionLabel(option?: ExpansionDictOption) {
  return option?.label?.trim() || option?.value?.trim() || "";
}

function isLostProjectStageOption(option?: ExpansionDictOption) {
  const value = getDictOptionValue(option).toLowerCase();
  const label = getDictOptionLabel(option).toLowerCase();
  return value === "lost" || value.includes("丢单") || label.includes("丢单") || value.includes("放弃") || label.includes("放弃");
}

function getDefaultRelatedProjectStageCodes(options: ExpansionDictOption[]) {
  const orderedValues = options.map(getDictOptionValue).filter(Boolean);
  const preferredValues = options.filter((option) => !isLostProjectStageOption(option)).map(getDictOptionValue).filter(Boolean);
  return normalizeMultiSelectValues(preferredValues.length > 0 ? preferredValues : orderedValues);
}

function applyDefaultRelatedProjectStageFilters(filters: ExpansionExportFilters, options: ExpansionDictOption[]) {
  if (filters.relatedProjectStageCodes !== undefined) {
    return {
      ...filters,
      relatedProjectStageCodes: normalizeMultiSelectValues(filters.relatedProjectStageCodes),
    };
  }
  if (options.length <= 0) {
    return filters;
  }
  return {
    ...filters,
    relatedProjectStageCodes: getDefaultRelatedProjectStageCodes(options),
  };
}

function areSameStringSets(leftValues?: string[], rightValues?: string[]) {
  const left = normalizeMultiSelectValues(leftValues).sort();
  const right = normalizeMultiSelectValues(rightValues).sort();
  return left.length === right.length && left.every((value, index) => value === right[index]);
}

function filterRelatedProjectsByStage<T extends RelatedProjectLike>(projects: T[] | undefined, selectedStageCodes?: string[]) {
  const projectList = projects ?? [];
  if (selectedStageCodes === undefined) {
    return projectList;
  }

  const normalizedStageCodes = new Set(normalizeMultiSelectValues(selectedStageCodes));
  if (normalizedStageCodes.size <= 0) {
    return [];
  }

  return projectList.filter((project) => {
    const projectStageCode = project.stageCode?.trim();
    const projectStageLabel = project.stage?.trim();
    return (projectStageCode && normalizedStageCodes.has(projectStageCode))
      || (projectStageLabel && normalizedStageCodes.has(projectStageLabel));
  });
}

function withFilteredSalesRelatedProjects(item: SalesExpansionItem, filters: ExpansionExportFilters): SalesExpansionItem {
  return {
    ...item,
    relatedProjects: filterRelatedProjectsByStage(item.relatedProjects, filters.relatedProjectStageCodes),
  };
}

function withFilteredChannelRelatedProjects(item: ChannelExpansionItem, filters: ExpansionExportFilters): ChannelExpansionItem {
  return {
    ...item,
    relatedProjects: filterRelatedProjectsByStage(item.relatedProjects, filters.relatedProjectStageCodes),
  };
}

function matchesSalesExportFilters(item: SalesExpansionItem, filters: ExpansionExportFilters) {
  const keywordText = [
    item.employeeNo,
    item.name,
    item.owner,
    item.phone,
    item.officeName,
    item.dept,
    item.title,
    item.industry,
    item.intent,
    item.relatedProjects?.map((project) => `${project.opportunityCode ?? ""} ${project.opportunityName ?? ""}`).join(" "),
    item.followUps?.map((followUp) => `${followUp.content ?? ""} ${followUp.evaluationContent ?? ""} ${followUp.nextPlan ?? ""}`).join(" "),
  ].map(normalizeExportText).filter(Boolean).join(" ");

  if (!matchesExportKeyword(keywordText, filters.keyword)) {
    return false;
  }
  if (!matchesTextFilter(item.intent || item.intentLevel, filters.intent)) {
    return false;
  }
  if (!matchesTextFilter(item.officeName, filters.officeName)) {
    return false;
  }
  if (!matchesTextFilter(item.industry, filters.industry)) {
    return false;
  }
  if (filters.employmentStatus === "active" && item.active !== true && item.employmentStatus !== "active") {
    return false;
  }
  if (filters.employmentStatus === "inactive" && item.active !== false && item.employmentStatus !== "inactive") {
    return false;
  }
  return matchesRelatedProjectFilter(item.relatedProjects, filters.hasRelatedProject);
}

function matchesChannelExportFilters(item: ChannelExpansionItem, filters: ExpansionExportFilters) {
  const keywordText = [
    item.channelCode,
    item.name,
    item.owner,
    item.province,
    item.city,
    item.officeAddress,
    item.certificationLevel,
    item.channelIndustry,
    item.channelAttribute,
    item.internalAttribute,
    item.intent,
    item.primaryContactName,
    item.primaryContactMobile,
    item.contacts?.map((contact) => `${contact.name ?? ""} ${contact.mobile ?? ""} ${contact.title ?? ""}`).join(" "),
    item.relatedProjects?.map((project) => `${project.opportunityCode ?? ""} ${project.opportunityName ?? ""}`).join(" "),
    item.followUps?.map((followUp) => `${followUp.content ?? ""} ${followUp.evaluationContent ?? ""} ${followUp.nextPlan ?? ""}`).join(" "),
  ].map(normalizeExportText).filter(Boolean).join(" ");

  if (!matchesExportKeyword(keywordText, filters.keyword)) {
    return false;
  }
  if (!matchesTextFilter(item.intent || item.intentLevel, filters.intent)) {
    return false;
  }
  if (!matchesTextFilter(item.province, filters.province)) {
    return false;
  }
  if (!matchesTextFilter(item.certificationLevel, filters.certificationLevel)) {
    return false;
  }
  if (!matchesTextFilter(item.channelIndustry, filters.channelIndustry)) {
    return false;
  }
  if (!matchesTextFilter(item.channelAttribute, filters.channelAttribute)) {
    return false;
  }
  if (!matchesDateRange(item.establishedDate, filters.establishedStartDate, filters.establishedEndDate)) {
    return false;
  }
  return matchesRelatedProjectFilter(item.relatedProjects, filters.hasRelatedProject);
}

function formatExportBoolean(value?: boolean, trueLabel = "是", falseLabel = "否") {
  if (value === null || value === undefined) {
    return "";
  }
  return value ? trueLabel : falseLabel;
}

function formatExportFollowUps(followUps?: ExpansionFollowUp[]) {
  if (!followUps?.length) {
    return "";
  }
  return followUps
    .map((followUp) => {
      const summary = getExpansionFollowUpSummary(followUp);
      const lines = [
        [normalizeExportText(followUp.date), normalizeExportText(followUp.type)].filter(Boolean).join(" "),
        normalizeExportText(summary.visitStartTime) ? `拜访时间：${normalizeExportText(summary.visitStartTime)}` : "",
        normalizeExportText(summary.evaluationContent) ? `沟通内容：${normalizeExportText(summary.evaluationContent)}` : "",
        normalizeExportText(summary.nextPlan) ? `后续规划：${normalizeExportText(summary.nextPlan)}` : "",
      ].filter(Boolean);
      return lines.join("\n");
    })
    .filter(Boolean)
    .join("\n\n");
}

function formatExportProjectCell(project?: { opportunityCode?: string; opportunityName?: string; amount?: number | null }) {
  if (!project) {
    return "";
  }
  const segments = [
    normalizeExportText(project.opportunityCode) ? `编码：${normalizeExportText(project.opportunityCode)}` : "",
    normalizeExportText(project.opportunityName) ? `项目名称：${normalizeExportText(project.opportunityName)}` : "",
    project.amount === null || project.amount === undefined ? "" : `金额：${formatAmount(Number(project.amount))}`,
  ].filter(Boolean);
  return segments.join("｜");
}

function formatExportProjectListCell(projects?: Array<{ opportunityCode?: string; opportunityName?: string; amount?: number | null }>) {
  if (!projects?.length) {
    return "";
  }

  return projects
    .map((project) => {
      const content = formatExportProjectCell(project);
      return content || "";
    })
    .filter(Boolean)
    .join("\n");
}

function formatExportContactCell(contact?: { name?: string | null; mobile?: string | null; title?: string | null }) {
  if (!contact) {
    return "";
  }

  const segments = [
    normalizeExportText(contact.name) ? `姓名：${normalizeExportText(contact.name)}` : "",
    normalizeExportText(contact.mobile) ? `联系电话：${normalizeExportText(contact.mobile)}` : "",
    normalizeExportText(contact.title) ? `职位：${normalizeExportText(contact.title)}` : "",
  ].filter(Boolean);
  return segments.join("｜");
}

function formatExportContactListCell(contacts?: Array<{ name?: string | null; mobile?: string | null; title?: string | null }>) {
  if (!contacts?.length) {
    return "";
  }

  return contacts
    .map((contact) => {
      const content = formatExportContactCell(contact);
      return content || "";
    })
    .filter(Boolean)
    .join("\n");
}

function getExcelDisplayWidth(value?: string | null) {
  if (!value) {
    return 0;
  }

  return Array.from(value).reduce((total, char) => total + (/[\u4e00-\u9fff\u3400-\u4dbf\uff00-\uffef]/.test(char) ? 2 : 1), 0);
}

function getExcelWrappedLineCount(value: string | null | undefined, columnWidth: number) {
  if (!value) {
    return 1;
  }

  const safeWidth = Math.max(1, Math.floor(columnWidth));
  return value.split("\n").reduce((total, line) => {
    const lineWidth = Math.max(1, getExcelDisplayWidth(line));
    return total + Math.max(1, Math.ceil(lineWidth / safeWidth));
  }, 0);
}

function formatExportFilenameTime(date = new Date()) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}${month}${day}_${hours}${minutes}${seconds}`;
}

function downloadExcelFile(filename: string, content: BlobPart) {
  const blob = new Blob([content], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  const objectUrl = window.URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = objectUrl;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(objectUrl);
}

const salesExportColumns: Array<ExportColumn<SalesExpansionItem, SalesExportFieldKey>> = [
  { key: "employeeNo", label: "工号", value: (item) => normalizeExportText(item.employeeNo) },
  { key: "name", label: "姓名", value: (item) => normalizeExportText(item.name) },
  { key: "phone", label: "联系方式", value: (item) => normalizeExportText(item.phone) },
  { key: "officeName", label: "代表处/办事处", value: (item) => normalizeExportText(item.officeName) },
  { key: "dept", label: "所属部门", value: (item) => normalizeExportText(item.dept) },
  { key: "title", label: "职务", value: (item) => normalizeExportText(item.title) },
  { key: "industry", label: "所属行业", value: (item) => normalizeExportText(item.industry) },
  { key: "intent", label: "合作意向", value: (item) => normalizeExportText(item.intent) },
  { key: "active", label: "销售是否在职", value: (item) => (item.active === null || item.active === undefined ? "" : item.active ? "是" : "否") },
  { key: "hasExp", label: "销售以前是否做过云桌面项目", value: (item) => formatExportBoolean(item.hasExp) },
  { key: "relatedProjects", label: "跟进的云桌面项目", kind: "project", value: (item) => formatExportProjectListCell(item.relatedProjects) },
  { key: "relatedProjectAmount", label: "跟进项目金额", numFmt: "#,##0.00", value: (item) => sumRelatedProjectAmount(item.relatedProjects) ?? "" },
  { key: "owner", label: "创建人", value: (item) => normalizeExportText(item.owner) },
  { key: "createdAt", label: "创建时间", value: (item) => normalizeExportText(item.createdAt) },
  { key: "updatedAt", label: "更新修改时间", value: (item) => normalizeExportText(item.updatedAt) },
  { key: "followUps", label: "跟进记录", kind: "followup", value: (item) => formatExportFollowUps(item.followUps) },
];

const defaultSalesExportFields: SalesExportFieldKey[] = [
  "employeeNo",
  "name",
  "phone",
  "officeName",
  "dept",
  "title",
  "industry",
  "intent",
  "active",
  "hasExp",
  "relatedProjects",
  "followUps",
];

const channelExportColumns: Array<ExportColumn<ChannelExpansionItem, ChannelExportFieldKey>> = [
  { key: "name", label: "渠道名称", value: (item) => normalizeExportText(item.name) },
  { key: "province", label: "省份", value: (item) => normalizeExportText(item.province) },
  { key: "officeAddress", label: "办公地址", kind: "longText", value: (item) => normalizeExportText(item.officeAddress) },
  { key: "channelIndustry", label: "聚焦行业", value: (item) => normalizeExportText(item.channelIndustry) },
  { key: "certificationLevel", label: "汇智内部认证级别", value: (item) => normalizeExportText(item.certificationLevel) },
  { key: "channelAttribute", label: "渠道属性", value: (item) => normalizeExportText(item.channelAttribute) },
  { key: "internalAttribute", label: "新华三内部属性", value: (item) => normalizeExportText(item.internalAttribute) },
  { key: "intent", label: "合作意向", value: (item) => normalizeExportText(item.intent) },
  { key: "establishedDate", label: "建立联系时间", value: (item) => normalizeExportText(item.establishedDate) },
  { key: "revenue", label: "年度营业额", numFmt: "#,##0.00", value: (item) => normalizeExportNumber(item.revenue ?? item.annualRevenue) ?? "" },
  { key: "size", label: "人员规模", numFmt: "#,##0", value: (item) => normalizeExportNumber(item.size) ?? "" },
  { key: "hasDesktopExp", label: "以前是否做过云桌面项目", value: (item) => formatExportBoolean(item.hasDesktopExp) },
  { key: "relatedProjects", label: "跟进的云桌面项目", kind: "project", value: (item) => formatExportProjectListCell(item.relatedProjects) },
  { key: "contacts", label: "人员信息", kind: "contact", value: (item) => formatExportContactListCell(item.contacts) },
  { key: "followUps", label: "跟进记录", kind: "followup", value: (item) => formatExportFollowUps(item.followUps) },
  { key: "channelCode", label: "编码", value: (item) => normalizeExportText(item.channelCode) },
  { key: "city", label: "市", value: (item) => normalizeExportText(item.city) },
  { key: "relatedProjectAmount", label: "跟进项目金额", numFmt: "#,##0.00", value: (item) => sumRelatedProjectAmount(item.relatedProjects) ?? "" },
  { key: "notes", label: "备注说明", kind: "longText", value: (item) => normalizeExportText(item.notes) },
  { key: "owner", label: "创建人", value: (item) => normalizeExportText(item.owner) },
  { key: "createdAt", label: "创建时间", value: (item) => normalizeExportText(item.createdAt) },
  { key: "updatedAt", label: "更新修改时间", value: (item) => normalizeExportText(item.updatedAt) },
];

const defaultChannelExportFields: ChannelExportFieldKey[] = [
  "name",
  "province",
  "officeAddress",
  "channelIndustry",
  "certificationLevel",
  "channelAttribute",
  "internalAttribute",
  "intent",
  "establishedDate",
  "revenue",
  "size",
  "hasDesktopExp",
  "relatedProjects",
  "contacts",
  "followUps",
];

function resolveSelectedExpansionFields<K extends string>(selectedFields: K[] | undefined, defaultFields: K[]) {
  return selectedFields === undefined ? defaultFields : selectedFields;
}

function buildExportRows<T, K extends string>(items: T[], columns: Array<ExportColumn<T, K>>) {
  return items.map((item) => columns.map((column) => column.value(item)));
}

function validateSalesCreateForm(form: CreateSalesExpansionPayload) {
  const errors: Partial<Record<SalesCreateField, string>> = {};

  if (!form.employeeNo?.trim()) {
    errors.employeeNo = "请填写工号";
  }
  if (!form.officeName?.trim()) {
    errors.officeName = "请选择代表处 / 办事处";
  }
  if (!form.candidateName?.trim()) {
    errors.candidateName = "请填写姓名";
  }
  if (!form.mobile?.trim()) {
    errors.mobile = "请填写联系方式";
  }
  if (!form.targetDept?.trim()) {
    errors.targetDept = "请填写所属部门";
  }
  if (!form.industry?.trim()) {
    errors.industry = "请选择所属行业";
  }
  if (!form.title?.trim()) {
    errors.title = "请填写职务";
  }
  if (!form.intentLevel?.trim()) {
    errors.intentLevel = "请选择合作意向";
  }
  if (!form.employmentStatus?.trim()) {
    errors.employmentStatus = "请选择销售是否在职";
  }

  return errors;
}

function validateChannelForm(form: CreateChannelExpansionPayload, channelOtherOptionValue?: string) {
  const errors: Partial<Record<ChannelField, string>> = {};
  const invalidContactRows: number[] = [];

  if (!form.channelName?.trim()) {
    errors.channelName = "请填写渠道名称";
  }
  if (!form.province?.trim()) {
    errors.province = "请选择省份";
  }
  if (!form.city?.trim()) {
    errors.city = "请选择市";
  }
  if (!form.officeAddress?.trim()) {
    errors.officeAddress = "请填写办公地址";
  }
  if (!form.certificationLevel?.trim()) {
    errors.certificationLevel = "请选择汇智内部认证级别";
  }
  if ((form.channelIndustry?.length ?? 0) <= 0) {
    errors.channelIndustry = "请选择聚焦行业";
  }
  if (!form.annualRevenue || form.annualRevenue <= 0) {
    errors.annualRevenue = `请填写${CHANNEL_REVENUE_LABEL}`;
  }
  if (!form.staffSize || form.staffSize <= 0) {
    errors.staffSize = "请填写人员规模";
  }
  if (!form.contactEstablishedDate?.trim()) {
    errors.contactEstablishedDate = "请选择建立联系时间";
  }
  if (!form.intentLevel?.trim()) {
    errors.intentLevel = "请选择合作意向";
  }
  if ((form.channelAttribute?.length ?? 0) <= 0) {
    errors.channelAttribute = "请选择渠道属性";
  }
  if (channelOtherOptionValue && form.channelAttribute?.includes(channelOtherOptionValue) && !form.channelAttributeCustom?.trim()) {
    errors.channelAttributeCustom = "请选择“其它”后请补充具体渠道属性";
  }
  if ((form.internalAttribute?.length ?? 0) <= 0) {
    errors.internalAttribute = "请选择新华三内部属性";
  }

  const contacts = form.contacts ?? [];
  if (contacts.length <= 0) {
    errors.contacts = "请至少填写一位渠道联系人";
    invalidContactRows.push(0);
  } else {
    contacts.forEach((contact, index) => {
      const hasName = Boolean(contact.name?.trim());
      const hasMobile = Boolean(contact.mobile?.trim());
      const hasTitle = Boolean(contact.title?.trim());
      if (!hasName || !hasMobile || !hasTitle) {
        invalidContactRows.push(index);
      }
    });
    if (invalidContactRows.length > 0) {
      errors.contacts = "请完整填写每位渠道联系人的姓名、联系电话和职位";
    }
  }

  return { errors, invalidContactRows };
}

function normalizeSalesPayload(payload: CreateSalesExpansionPayload): CreateSalesExpansionPayload {
  return {
    employeeNo: payload.employeeNo.trim(),
    candidateName: payload.candidateName.trim(),
    officeName: normalizeOptionalText(payload.officeName),
    mobile: normalizeOptionalText(payload.mobile),
    email: normalizeOptionalText(payload.email),
    targetDept: normalizeOptionalText(payload.targetDept),
    industry: normalizeOptionalText(payload.industry),
    title: normalizeOptionalText(payload.title),
    intentLevel: normalizeOptionalText(payload.intentLevel) ?? "medium",
    stage: normalizeOptionalText(payload.stage) ?? "initial_contact",
    hasDesktopExp: Boolean(payload.hasDesktopExp),
    inProgress: payload.inProgress ?? true,
    employmentStatus: normalizeOptionalText(payload.employmentStatus) ?? "active",
    expectedJoinDate: normalizeOptionalText(payload.expectedJoinDate),
    remark: normalizeOptionalText(payload.remark),
  };
}

function normalizeChannelPayload(payload: CreateChannelExpansionPayload): CreateChannelExpansionPayload {
  return {
    channelCode: normalizeOptionalText(payload.channelCode),
    officeAddress: normalizeOptionalText(payload.officeAddress),
    channelIndustry: Array.from(new Set((payload.channelIndustry ?? []).map((value) => value?.trim()).filter((value): value is string => Boolean(value)))),
    channelName: payload.channelName.trim(),
    province: normalizeOptionalText(payload.province),
    city: normalizeOptionalText(payload.city),
    certificationLevel: normalizeOptionalText(payload.certificationLevel),
    annualRevenue: payload.annualRevenue || undefined,
    staffSize: payload.staffSize || undefined,
    contactEstablishedDate: normalizeOptionalText(payload.contactEstablishedDate),
    intentLevel: normalizeOptionalText(payload.intentLevel) ?? "medium",
    hasDesktopExp: Boolean(payload.hasDesktopExp),
    channelAttribute: Array.from(new Set((payload.channelAttribute ?? []).map((value) => value?.trim()).filter((value): value is string => Boolean(value)))),
    channelAttributeCustom: normalizeOptionalText(payload.channelAttributeCustom),
    internalAttribute: Array.from(new Set((payload.internalAttribute ?? []).map((value) => value?.trim()).filter((value): value is string => Boolean(value)))),
    stage: normalizeOptionalText(payload.stage) ?? "initial_contact",
    remark: normalizeOptionalText(payload.remark),
    contacts: (payload.contacts ?? [])
      .map((contact) => ({
        name: normalizeOptionalText(contact.name),
        mobile: normalizeOptionalText(contact.mobile),
        title: normalizeOptionalText(contact.title),
      }))
      .filter((contact) => contact.name || contact.mobile || contact.title),
  };
}

function normalizeOptionValue(rawValue: string | undefined, options: ExpansionDictOption[]) {
  const trimmed = rawValue?.trim();
  if (!trimmed) {
    return "";
  }

  const matched = options.find((option) => option.value === trimmed || option.label === trimmed);
  return matched?.value ?? trimmed;
}

function normalizeMultiOptionValues(rawValue: string | undefined, options: ExpansionDictOption[]) {
  const { values } = decodeExpansionMultiValue(rawValue);
  return Array.from(new Set(values.map((value) => normalizeOptionValue(value, options)).filter(Boolean)));
}

function ModalShell({
  title,
  subtitle,
  onClose,
  children,
  footer,
}: {
  title: string;
  subtitle: string;
  onClose: () => void;
  children: ReactNode;
  footer: ReactNode;
}) {
  const isMobileViewport = useIsMobileViewport();
  const isWecomBrowser = useIsWecomBrowser();
  const disableMobileMotion = isMobileViewport || isWecomBrowser;

  return (
    <>
      <motion.div
        initial={disableMobileMotion ? false : { opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={disableMobileMotion ? undefined : { opacity: 0 }}
        onClick={onClose}
        className={cn("fixed inset-0 z-[70] bg-slate-900/35 dark:bg-slate-950/70", !disableMobileMotion && "backdrop-blur-sm")}
      />
      <motion.div
        initial={disableMobileMotion ? false : { opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={disableMobileMotion ? undefined : { opacity: 0, y: 20 }}
        transition={disableMobileMotion ? { duration: 0 } : undefined}
        className="fixed inset-0 z-[80] px-0 pb-0 pt-[env(safe-area-inset-top)] sm:p-6"
      >
        <div className="mx-auto flex h-[calc(100dvh-env(safe-area-inset-top))] w-full items-end sm:h-full sm:max-w-3xl sm:items-center">
          <div className="flex h-[92dvh] w-full flex-col overflow-hidden rounded-t-3xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-900 sm:h-full sm:rounded-3xl">
            <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800 sm:px-6">
              <div>
                <h2 className="text-base font-semibold text-slate-900 dark:text-white sm:text-lg">{title}</h2>
                <p className="mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400">{subtitle}</p>
              </div>
              <button onClick={onClose} className="rounded-full p-2 text-slate-400 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800">
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="flex-1 overflow-y-auto px-5 py-5 sm:px-6">{children}</div>
            <div className="border-t border-slate-100 px-5 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-4 dark:border-slate-800 sm:px-6 sm:pb-4">{footer}</div>
          </div>
        </div>
      </motion.div>
    </>
  );
}

function DetailItem({
  label,
  value,
  icon,
  className = "",
}: {
  label: string;
  value: ReactNode;
  icon?: ReactNode;
  className?: string;
}) {
  return (
    <div className={`crm-detail-item ${className}`.trim()}>
      <p className="crm-detail-label">
        {icon}
        {label}
      </p>
      <div className="crm-detail-value">{value}</div>
    </div>
  );
}

function RequiredMark() {
  return <span className="ml-1 text-rose-500">*</span>;
}

function ExpansionExportFilterModal({
  activeTab,
  initialFilters,
  exporting,
  exportError,
  officeOptions,
  industryOptions,
  provinceOptions,
  certificationLevelOptions,
  channelAttributeOptions,
  relatedProjectStageOptions,
  onClose,
  onConfirm,
}: {
  activeTab: ExpansionTab;
  initialFilters: ExpansionExportFilters;
  exporting: boolean;
  exportError: string;
  officeOptions: ExpansionDictOption[];
  industryOptions: ExpansionDictOption[];
  provinceOptions: ExpansionDictOption[];
  certificationLevelOptions: ExpansionDictOption[];
  channelAttributeOptions: ExpansionDictOption[];
  relatedProjectStageOptions: ExpansionDictOption[];
  onClose: () => void;
  onConfirm: (filters: ExpansionExportFilters) => void;
}) {
  const normalizedInitialFilters = applyDefaultRelatedProjectStageFilters(initialFilters, relatedProjectStageOptions);
  const [draftFilters, setDraftFilters] = useState<ExpansionExportFilters>(normalizedInitialFilters);
  const isSalesTab = activeTab === "sales";
  const selectedSalesFields = resolveSelectedExpansionFields(draftFilters.selectedSalesFields, defaultSalesExportFields);
  const selectedChannelFields = resolveSelectedExpansionFields(draftFilters.selectedChannelFields, defaultChannelExportFields);
  const activeFieldOptions = isSalesTab ? salesExportColumns : channelExportColumns;
  const selectedFieldKeys = isSalesTab ? selectedSalesFields : selectedChannelFields;
  const defaultRelatedProjectStageCodes = getDefaultRelatedProjectStageCodes(relatedProjectStageOptions);
  const relatedProjectStageFilterOptions = relatedProjectStageOptions
    .map((option) => {
      const value = getDictOptionValue(option);
      const label = getDictOptionLabel(option);
      return value && label ? { value, label } : null;
    })
    .filter((option): option is { value: string; label: string } => Boolean(option));
  const selectedRelatedProjectStageCodes = normalizeMultiSelectValues(draftFilters.relatedProjectStageCodes);

  useEffect(() => {
    setDraftFilters(applyDefaultRelatedProjectStageFilters(initialFilters, relatedProjectStageOptions));
  }, [initialFilters, relatedProjectStageOptions]);

  const hasDraftFilters = Boolean(
    draftFilters.keyword
      || draftFilters.intent
      || draftFilters.officeName
      || draftFilters.industry
      || draftFilters.employmentStatus
      || draftFilters.province
      || draftFilters.certificationLevel
      || draftFilters.channelIndustry
      || draftFilters.channelAttribute
      || draftFilters.establishedStartDate
      || draftFilters.establishedEndDate
      || draftFilters.hasRelatedProject,
  ) || !areSameStringSets(selectedRelatedProjectStageCodes, defaultRelatedProjectStageCodes) || (isSalesTab
    ? JSON.stringify(selectedSalesFields) !== JSON.stringify(defaultSalesExportFields)
    : JSON.stringify(selectedChannelFields) !== JSON.stringify(defaultChannelExportFields));
  const hasSelectedFields = selectedFieldKeys.length > 0;
  const toggleField = (fieldKey: string) => {
    if (isSalesTab) {
      setDraftFilters((current) => {
        const currentFields = resolveSelectedExpansionFields(current.selectedSalesFields, defaultSalesExportFields);
        const nextFields = currentFields.includes(fieldKey as SalesExportFieldKey)
          ? currentFields.filter((item) => item !== fieldKey)
          : [...currentFields, fieldKey as SalesExportFieldKey];
        return { ...current, selectedSalesFields: nextFields };
      });
      return;
    }
    setDraftFilters((current) => {
      const currentFields = resolveSelectedExpansionFields(current.selectedChannelFields, defaultChannelExportFields);
      const nextFields = currentFields.includes(fieldKey as ChannelExportFieldKey)
        ? currentFields.filter((item) => item !== fieldKey)
        : [...currentFields, fieldKey as ChannelExportFieldKey];
      return { ...current, selectedChannelFields: nextFields };
    });
  };
  const handleRelatedProjectStageToggle = (stageCode: string) => {
    setDraftFilters((current) => {
      const currentStageCodes = normalizeMultiSelectValues(current.relatedProjectStageCodes);
      const nextStageCodeSet = currentStageCodes.includes(stageCode)
        ? new Set(currentStageCodes.filter((value) => value !== stageCode))
        : new Set([...currentStageCodes, stageCode]);
      const orderedStageCodes = relatedProjectStageFilterOptions
        .map((option) => option.value)
        .filter((value) => nextStageCodeSet.has(value));
      return { ...current, relatedProjectStageCodes: orderedStageCodes };
    });
  };
  const handleFilterChange = (key: keyof ExpansionExportFilters, value: string) => {
    setDraftFilters((current) => ({ ...current, [key]: value }));
  };
  const renderOption = (option: ExpansionDictOption) => {
    const value = option.label || option.value || "";
    return value ? <option key={value} value={value}>{value}</option> : null;
  };
  const toSearchableOptions = (options: ExpansionDictOption[], allLabel: string) => [
    { value: "", label: allLabel },
    ...options
      .map((option) => {
        const value = option.label || option.value || "";
        return value ? { value, label: value } : null;
      })
      .filter((option): option is { value: string; label: string } => Boolean(option)),
  ];

  return (
    <ModalShell
      title={`导出${isSalesTab ? "销售人员拓展" : "渠道拓展"}记录`}
      subtitle="选择条件后导出 Excel；不填条件则导出全部可见权限范围内的数据。"
      onClose={onClose}
      footer={(
        <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-between">
          <button
            type="button"
            onClick={() => setDraftFilters((current) => ({
              ...applyDefaultRelatedProjectStageFilters({}, relatedProjectStageOptions),
              selectedSalesFields: resolveSelectedExpansionFields(current.selectedSalesFields, defaultSalesExportFields),
              selectedChannelFields: resolveSelectedExpansionFields(current.selectedChannelFields, defaultChannelExportFields),
            }))}
            disabled={!hasDraftFilters}
            className="crm-btn crm-btn-secondary disabled:cursor-not-allowed disabled:opacity-60"
          >
            清空条件
          </button>
          <button
            type="button"
            onClick={() => onConfirm(draftFilters)}
            disabled={exporting || !hasSelectedFields}
            className="crm-btn crm-btn-primary disabled:cursor-not-allowed disabled:opacity-60"
          >
            {exporting ? "导出中..." : "确认导出"}
          </button>
        </div>
      )}
    >
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <label className="space-y-1.5 sm:col-span-2">
          <span className="text-sm font-medium text-slate-700 dark:text-slate-300">关键词</span>
          <input
            value={draftFilters.keyword ?? ""}
            onChange={(event) => handleFilterChange("keyword", event.target.value)}
            placeholder={isSalesTab ? "搜索姓名、工号、电话、行业、项目" : "搜索渠道、联系人、地区、项目"}
            className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
          />
        </label>
        <label className="space-y-1.5">
          <span className="text-sm font-medium text-slate-700 dark:text-slate-300">合作意向</span>
          <AdaptiveSelect
            value={draftFilters.intent ?? ""}
            options={[
              { value: "", label: "全部合作意向" },
              { value: "高", label: "高意向" },
              { value: "中", label: "中意向" },
              { value: "低", label: "低意向" },
            ]}
            placeholder="全部合作意向"
            sheetTitle="选择合作意向"
            className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
            onChange={(value) => handleFilterChange("intent", value)}
          />
        </label>
        <label className="space-y-1.5">
          <span className="text-sm font-medium text-slate-700 dark:text-slate-300">关联项目</span>
          <AdaptiveSelect
            value={draftFilters.hasRelatedProject ?? ""}
            options={[
              { value: "", label: "全部" },
              { value: "yes", label: "有关联项目" },
              { value: "no", label: "无关联项目" },
            ]}
            placeholder="全部"
            sheetTitle="选择关联项目"
            className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
            onChange={(value) => handleFilterChange("hasRelatedProject", value)}
          />
        </label>
        <div className="space-y-3 rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/40 sm:col-span-2">
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <p className="text-sm font-medium text-slate-700 dark:text-slate-300">关联项目阶段</p>
              <p className="text-xs text-slate-500 dark:text-slate-400">多选，默认排除已丢单/已放弃阶段。</p>
            </div>
            {relatedProjectStageFilterOptions.length > 0 ? (
              <div className="flex flex-wrap gap-2">
                <button
                  type="button"
                  onClick={() => setDraftFilters((current) => ({ ...current, relatedProjectStageCodes: defaultRelatedProjectStageCodes }))}
                  className="rounded-full border border-slate-200 px-3 py-1 text-xs font-medium text-slate-600 transition-colors hover:bg-white dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
                >
                  恢复默认
                </button>
                <button
                  type="button"
                  onClick={() => setDraftFilters((current) => ({ ...current, relatedProjectStageCodes: relatedProjectStageFilterOptions.map((option) => option.value) }))}
                  className="rounded-full border border-slate-200 px-3 py-1 text-xs font-medium text-slate-600 transition-colors hover:bg-white dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
                >
                  全选阶段
                </button>
                <button
                  type="button"
                  onClick={() => setDraftFilters((current) => ({ ...current, relatedProjectStageCodes: [] }))}
                  className="rounded-full border border-slate-200 px-3 py-1 text-xs font-medium text-slate-600 transition-colors hover:bg-white dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
                >
                  全部取消
                </button>
              </div>
            ) : null}
          </div>
          {relatedProjectStageFilterOptions.length > 0 ? (
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
              {relatedProjectStageFilterOptions.map((option) => {
                const checked = selectedRelatedProjectStageCodes.includes(option.value);
                return (
                  <label key={option.value} className={cn(
                    "flex items-center gap-3 rounded-xl border px-3 py-2 text-sm transition-colors",
                    checked
                      ? "border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/10 dark:text-violet-300"
                      : "border-slate-200 bg-white text-slate-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300",
                  )}>
                    <input
                      type="checkbox"
                      checked={checked}
                      onChange={() => handleRelatedProjectStageToggle(option.value)}
                      className="h-4 w-4 rounded border-slate-300 text-violet-600 focus:ring-violet-500"
                    />
                    <span>{option.label}</span>
                  </label>
                );
              })}
            </div>
          ) : (
            <p className="text-xs text-slate-500 dark:text-slate-400">未加载到阶段字典，导出时不会按关联项目阶段过滤。</p>
          )}
        </div>
        <div className="space-y-3 rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/40 sm:col-span-2">
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <p className="text-sm font-medium text-slate-700 dark:text-slate-300">导出字段</p>
              <p className="text-xs text-slate-500 dark:text-slate-400">默认已按模板字段勾选，可取消不需要导出的字段。</p>
            </div>
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                onClick={() => setDraftFilters((current) => ({
                  ...current,
                  selectedSalesFields: isSalesTab ? salesExportColumns.map((column) => column.key) : current.selectedSalesFields,
                  selectedChannelFields: isSalesTab ? current.selectedChannelFields : channelExportColumns.map((column) => column.key),
                }))}
                className="rounded-full border border-slate-200 px-3 py-1 text-xs font-medium text-slate-600 transition-colors hover:bg-white dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
              >
                全选字段
              </button>
              <button
                type="button"
                onClick={() => setDraftFilters((current) => ({
                  ...current,
                  selectedSalesFields: isSalesTab ? defaultSalesExportFields : current.selectedSalesFields,
                  selectedChannelFields: isSalesTab ? current.selectedChannelFields : defaultChannelExportFields,
                }))}
                className="rounded-full border border-slate-200 px-3 py-1 text-xs font-medium text-slate-600 transition-colors hover:bg-white dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
              >
                恢复模板默认
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
            {activeFieldOptions.map((field) => {
              const checked = selectedFieldKeys.includes(field.key);
              return (
                <label key={field.key} className={cn(
                  "flex items-center gap-3 rounded-xl border px-3 py-2 text-sm transition-colors",
                  checked
                    ? "border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-500/30 dark:bg-violet-500/10 dark:text-violet-300"
                    : "border-slate-200 bg-white text-slate-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300",
                )}>
                  <input
                    type="checkbox"
                    checked={checked}
                    onChange={() => toggleField(field.key)}
                    className="h-4 w-4 rounded border-slate-300 text-violet-600 focus:ring-violet-500"
                  />
                  <span>{field.label}</span>
                </label>
              );
            })}
          </div>
          {!hasSelectedFields ? <p className="text-xs text-rose-500">请至少保留一个导出字段</p> : null}
        </div>

        {isSalesTab ? (
          <>
            <label className="space-y-1.5">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">代表处 / 办事处</span>
              <AdaptiveSelect
                value={draftFilters.officeName ?? ""}
                options={toSearchableOptions(officeOptions, "全部代表处 / 办事处")}
                placeholder="全部代表处 / 办事处"
                sheetTitle="选择代表处 / 办事处"
                searchable
                searchPlaceholder="搜索代表处 / 办事处"
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                onChange={(value) => handleFilterChange("officeName", value)}
              />
            </label>
            <label className="space-y-1.5">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">所属行业</span>
              <AdaptiveSelect
                value={draftFilters.industry ?? ""}
                options={toSearchableOptions(industryOptions, "全部行业")}
                placeholder="全部行业"
                sheetTitle="选择所属行业"
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                onChange={(value) => handleFilterChange("industry", value)}
              />
            </label>
            <label className="space-y-1.5 sm:col-span-2">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">销售是否在职</span>
              <AdaptiveSelect
                value={draftFilters.employmentStatus ?? ""}
                options={[
                  { value: "", label: "全部" },
                  { value: "active", label: "在职" },
                  { value: "inactive", label: "离职" },
                ]}
                placeholder="全部"
                sheetTitle="选择在职状态"
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                onChange={(value) => handleFilterChange("employmentStatus", value)}
              />
            </label>
          </>
        ) : (
          <>
            <label className="space-y-1.5">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">省份</span>
              <AdaptiveSelect
                value={draftFilters.province ?? ""}
                options={toSearchableOptions(provinceOptions, "全部省份")}
                placeholder="全部省份"
                sheetTitle="选择省份"
                searchable
                searchPlaceholder="搜索省份"
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                onChange={(value) => handleFilterChange("province", value)}
              />
            </label>
            <label className="space-y-1.5">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">汇智内部认证级别</span>
              <AdaptiveSelect
                value={draftFilters.certificationLevel ?? ""}
                options={toSearchableOptions(certificationLevelOptions, "全部汇智内部认证级别")}
                placeholder="全部汇智内部认证级别"
                sheetTitle="选择汇智内部认证级别"
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                onChange={(value) => handleFilterChange("certificationLevel", value)}
              />
            </label>
            <label className="space-y-1.5">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">聚焦行业</span>
              <AdaptiveSelect
                value={draftFilters.channelIndustry ?? ""}
                options={toSearchableOptions(industryOptions, "全部行业")}
                placeholder="全部行业"
                sheetTitle="选择聚焦行业"
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                onChange={(value) => handleFilterChange("channelIndustry", value)}
              />
            </label>
            <label className="space-y-1.5">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">渠道属性</span>
              <AdaptiveSelect
                value={draftFilters.channelAttribute ?? ""}
                options={toSearchableOptions(channelAttributeOptions, "全部渠道属性")}
                placeholder="全部渠道属性"
                sheetTitle="选择渠道属性"
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
                onChange={(value) => handleFilterChange("channelAttribute", value)}
              />
            </label>
            <label className="space-y-1.5">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">建立联系开始日期</span>
              <input
                type="date"
                value={draftFilters.establishedStartDate ?? ""}
                onChange={(event) => handleFilterChange("establishedStartDate", event.target.value)}
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
              />
            </label>
            <label className="space-y-1.5">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">建立联系结束日期</span>
              <input
                type="date"
                value={draftFilters.establishedEndDate ?? ""}
                onChange={(event) => handleFilterChange("establishedEndDate", event.target.value)}
                className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50"
              />
            </label>
          </>
        )}
      </div>
      {exportError ? <div className="crm-alert crm-alert-error mt-4">{exportError}</div> : null}
    </ModalShell>
  );
}

export default function Expansion() {
  const currentUserId = getStoredCurrentUserId();
  const location = useLocation();
  const isMobileViewport = useIsMobileViewport();
  const isWecomBrowser = useIsWecomBrowser();
  const disableMobileMotion = isMobileViewport || isWecomBrowser;
  const [activeTab, setActiveTab] = useState<ExpansionTab>("sales");
  const [selectedItem, setSelectedItem] = useState<ExpansionItem | null>(null);
  const [keyword, setKeyword] = useState("");
  const [salesData, setSalesData] = useState<SalesExpansionItem[]>([]);
  const [channelData, setChannelData] = useState<ChannelExpansionItem[]>([]);
  const [officeOptions, setOfficeOptions] = useState<ExpansionDictOption[]>([]);
  const [industryOptions, setIndustryOptions] = useState<ExpansionDictOption[]>([]);
  const [provinceOptions, setProvinceOptions] = useState<ExpansionDictOption[]>([]);
  const [certificationLevelOptions, setCertificationLevelOptions] = useState<ExpansionDictOption[]>([]);
  const [createCityOptions, setCreateCityOptions] = useState<ExpansionDictOption[]>([]);
  const [editCityOptions, setEditCityOptions] = useState<ExpansionDictOption[]>([]);
  const [channelAttributeOptions, setChannelAttributeOptions] = useState<ExpansionDictOption[]>([]);
  const [internalAttributeOptions, setInternalAttributeOptions] = useState<ExpansionDictOption[]>([]);
  const [relatedProjectStageOptions, setRelatedProjectStageOptions] = useState<ExpansionDictOption[]>([]);
  const [nextChannelCode, setNextChannelCode] = useState("");
  const channelOtherOptionValue = channelAttributeOptions.find(isOtherOption)?.value ?? "";
  const [refreshTick, setRefreshTick] = useState(0);

  const [createOpen, setCreateOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [exportFilterOpen, setExportFilterOpen] = useState(false);
  const [exportFilters, setExportFilters] = useState<ExpansionExportFilters>(() => loadExpansionExportPreferences());
  const [salesDuplicateChecking, setSalesDuplicateChecking] = useState(false);
  const [channelDuplicateChecking, setChannelDuplicateChecking] = useState(false);
  const [createError, setCreateError] = useState("");
  const [editError, setEditError] = useState("");
  const [exportError, setExportError] = useState("");
  const [salesDuplicateMessage, setSalesDuplicateMessage] = useState("");
  const [channelDuplicateMessage, setChannelDuplicateMessage] = useState("");
  const [salesCreateFieldErrors, setSalesCreateFieldErrors] = useState<Partial<Record<SalesCreateField, string>>>({});
  const [salesEditFieldErrors, setSalesEditFieldErrors] = useState<Partial<Record<SalesCreateField, string>>>({});
  const [channelCreateFieldErrors, setChannelCreateFieldErrors] = useState<Partial<Record<ChannelField, string>>>({});
  const [channelEditFieldErrors, setChannelEditFieldErrors] = useState<Partial<Record<ChannelField, string>>>({});
  const [invalidCreateChannelContactRows, setInvalidCreateChannelContactRows] = useState<number[]>([]);
  const [invalidEditChannelContactRows, setInvalidEditChannelContactRows] = useState<number[]>([]);
  const [salesDetailTab, setSalesDetailTab] = useState<"projects" | "followups">("projects");
  const [channelDetailTab, setChannelDetailTab] = useState<"projects" | "contacts" | "followups">("projects");
  const canEditSelectedItem = Boolean(selectedItem && currentUserId !== undefined && selectedItem.ownerUserId === currentUserId);

  const [salesForm, setSalesForm] = useState<CreateSalesExpansionPayload>(defaultSalesForm);
  const [channelForm, setChannelForm] = useState<CreateChannelExpansionPayload>(defaultChannelForm);
  const [editSalesForm, setEditSalesForm] = useState<CreateSalesExpansionPayload>(defaultSalesForm);
  const [editChannelForm, setEditChannelForm] = useState<CreateChannelExpansionPayload>(defaultChannelForm);
  const hasForegroundModal = createOpen || editOpen || exportFilterOpen;

  const loadMeta = useCallback(async () => {
    const data = await getExpansionMeta();
    setOfficeOptions(data.officeOptions ?? []);
    setIndustryOptions(data.industryOptions ?? []);
    setProvinceOptions(data.provinceOptions ?? []);
    setCertificationLevelOptions(data.certificationLevelOptions ?? []);
    setChannelAttributeOptions(data.channelAttributeOptions ?? []);
    setInternalAttributeOptions(data.internalAttributeOptions ?? []);
    setNextChannelCode(data.nextChannelCode ?? "");
    return data;
  }, []);

  useEffect(() => {
    let cancelled = false;

    async function loadRelatedProjectStageDict() {
      try {
        const data = await getOpportunityMeta();
        if (!cancelled) {
          setRelatedProjectStageOptions(data.stageOptions ?? []);
        }
      } catch {
        if (!cancelled) {
          setRelatedProjectStageOptions([]);
        }
      }
    }

    void loadRelatedProjectStageDict();

    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => {
    if (relatedProjectStageOptions.length <= 0) {
      return;
    }
    setExportFilters((current) => (
      current.relatedProjectStageCodes === undefined
        ? applyDefaultRelatedProjectStageFilters(current, relatedProjectStageOptions)
        : current
    ));
  }, [relatedProjectStageOptions]);

  const loadCityOptions = useCallback(async (provinceName?: string, isEdit = false) => {
    const setter = isEdit ? setEditCityOptions : setCreateCityOptions;
    const normalizedProvinceName = provinceName?.trim();
    if (!normalizedProvinceName) {
      setter([]);
      return [];
    }

    try {
      const options = await getExpansionCityOptions(normalizedProvinceName);
      setter(options ?? []);
      return options ?? [];
    } catch {
      setter([]);
      return [];
    }
  }, []);

  useEffect(() => {
    const requestedTab = (location.state as ExpansionLocationState)?.tab;
    if (requestedTab === "sales" || requestedTab === "channel") {
      setActiveTab(requestedTab);
    }
  }, [location.state]);

  useEffect(() => {
    const requestedState = location.state as ExpansionLocationState;
    const requestedTab = requestedState?.tab;
    const requestedId = requestedState?.selectedId;
    if (!requestedId) {
      return;
    }

    if (requestedTab === "sales") {
      const matched = salesData.find((item) => item.id === requestedId);
      if (matched) {
        setSelectedItem(matched);
      }
      return;
    }

    if (requestedTab === "channel") {
      const matched = channelData.find((item) => item.id === requestedId);
      if (matched) {
        setSelectedItem(matched);
      }
      return;
    }

    const matched = salesData.find((item) => item.id === requestedId) ?? channelData.find((item) => item.id === requestedId) ?? null;
    if (matched) {
      setSelectedItem(matched);
    }
  }, [location.state, salesData, channelData]);

  useEffect(() => {
    let cancelled = false;

    async function loadMetaOptions() {
      try {
        const data = await loadMeta();
        if (!cancelled) {
          setOfficeOptions(data.officeOptions ?? []);
          setIndustryOptions(data.industryOptions ?? []);
          setProvinceOptions(data.provinceOptions ?? []);
          setCertificationLevelOptions(data.certificationLevelOptions ?? []);
          setChannelAttributeOptions(data.channelAttributeOptions ?? []);
          setInternalAttributeOptions(data.internalAttributeOptions ?? []);
          setNextChannelCode(data.nextChannelCode ?? "");
        }
      } catch {
        if (!cancelled) {
          setOfficeOptions([]);
          setIndustryOptions([]);
          setProvinceOptions([]);
          setCertificationLevelOptions([]);
          setChannelAttributeOptions([]);
          setInternalAttributeOptions([]);
          setNextChannelCode("");
        }
      }
    }

    void loadMetaOptions();

    return () => {
      cancelled = true;
    };
  }, [loadMeta]);

  useEffect(() => {
    let cancelled = false;

    async function loadExpansionData() {
      try {
        const data = await getExpansionOverview(keyword);
        if (cancelled) {
          return;
        }

        setSalesData(dedupeExpansionItemsById(data.salesItems ?? []));
        setChannelData(dedupeExpansionItemsById(data.channelItems ?? []));
        setSelectedItem(null);
      } catch {
        if (!cancelled) {
          setSalesData([]);
          setChannelData([]);
          setSelectedItem(null);
        }
      }
    }

    void loadExpansionData();

    return () => {
      cancelled = true;
    };
  }, [keyword, refreshTick]);

  const followUpRecords: ExpansionFollowUp[] = selectedItem?.followUps ?? [];

  useEffect(() => {
    if (selectedItem?.type === "sales") {
      setSalesDetailTab("projects");
    } else if (selectedItem?.type === "channel") {
      setChannelDetailTab("projects");
    }
  }, [selectedItem]);

  useEffect(() => {
    if (!createOpen || activeTab !== "sales") {
      setSalesDuplicateChecking(false);
      return;
    }

    const normalizedEmployeeNo = salesForm.employeeNo.trim();
    if (!normalizedEmployeeNo) {
      setSalesDuplicateChecking(false);
      setSalesDuplicateMessage("");
      return;
    }

    let cancelled = false;
    const timer = window.setTimeout(async () => {
      setSalesDuplicateChecking(true);
      try {
        const result = await checkSalesExpansionDuplicate(normalizedEmployeeNo);
        if (!cancelled) {
          setSalesDuplicateMessage(result.duplicated ? result.message || "工号重复，请确认该人员是否已存在！" : "");
        }
      } catch {
        if (!cancelled) {
          setSalesDuplicateMessage("");
        }
      } finally {
        if (!cancelled) {
          setSalesDuplicateChecking(false);
        }
      }
    }, 400);

    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [activeTab, createOpen, salesForm.employeeNo]);

  useEffect(() => {
    if (!createOpen || activeTab !== "channel") {
      setChannelDuplicateChecking(false);
      return;
    }

    const normalizedChannelName = channelForm.channelName.trim();
    if (!normalizedChannelName) {
      setChannelDuplicateChecking(false);
      setChannelDuplicateMessage("");
      return;
    }

    let cancelled = false;
    const timer = window.setTimeout(async () => {
      setChannelDuplicateChecking(true);
      try {
        const result = await checkChannelExpansionDuplicate(normalizedChannelName);
        if (!cancelled) {
          setChannelDuplicateMessage(result.duplicated ? result.message || "渠道重复，请确认该渠道是否已存在！" : "");
        }
      } catch {
        if (!cancelled) {
          setChannelDuplicateMessage("");
        }
      } finally {
        if (!cancelled) {
          setChannelDuplicateChecking(false);
        }
      }
    }, 400);

    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [activeTab, channelForm.channelName, createOpen]);

  const handleSalesChange = <K extends keyof CreateSalesExpansionPayload>(key: K, value: CreateSalesExpansionPayload[K]) => {
    setSalesForm((current) => ({ ...current, [key]: value }));
    if (key === "employeeNo") {
      setSalesDuplicateMessage("");
      setSalesDuplicateChecking(false);
    }
    if (key in salesCreateFieldErrors) {
      setSalesCreateFieldErrors((current) => {
        const next = { ...current };
        delete next[key as SalesCreateField];
        return next;
      });
    }
  };

  const handleChannelChange = <K extends keyof CreateChannelExpansionPayload>(key: K, value: CreateChannelExpansionPayload[K]) => {
    setChannelForm((current) => ({ ...current, [key]: value }));
    if (key === "channelName") {
      setChannelDuplicateMessage("");
      setChannelDuplicateChecking(false);
    }
    if (key in channelCreateFieldErrors) {
      setChannelCreateFieldErrors((current) => {
        const next = { ...current };
        delete next[key as ChannelField];
        return next;
      });
    }
  };

  const handleEditSalesChange = <K extends keyof CreateSalesExpansionPayload>(key: K, value: CreateSalesExpansionPayload[K]) => {
    setEditSalesForm((current) => ({ ...current, [key]: value }));
    if (key in salesEditFieldErrors) {
      setSalesEditFieldErrors((current) => {
        const next = { ...current };
        delete next[key as SalesCreateField];
        return next;
      });
    }
  };

  const handleEditChannelChange = <K extends keyof CreateChannelExpansionPayload>(key: K, value: CreateChannelExpansionPayload[K]) => {
    setEditChannelForm((current) => ({ ...current, [key]: value }));
    if (key in channelEditFieldErrors) {
      setChannelEditFieldErrors((current) => {
        const next = { ...current };
        delete next[key as ChannelField];
        return next;
      });
    }
  };

  const handleChannelContactChange = (index: number, key: keyof ChannelExpansionContact, value: string, isEdit = false) => {
    const setter = isEdit ? setEditChannelForm : setChannelForm;
    setter((current) => {
      const nextContacts = [...(current.contacts ?? [])];
      const target = { ...(nextContacts[index] ?? createEmptyChannelContact()), [key]: value };
      nextContacts[index] = target;
      return { ...current, contacts: nextContacts };
    });
    if (isEdit) {
      setChannelEditFieldErrors((current) => {
        if (!current.contacts) {
          return current;
        }
        const next = { ...current };
        delete next.contacts;
        return next;
      });
      setInvalidEditChannelContactRows((current) => current.filter((rowIndex) => rowIndex !== index));
      return;
    }
    setChannelCreateFieldErrors((current) => {
      if (!current.contacts) {
        return current;
      }
      const next = { ...current };
      delete next.contacts;
      return next;
    });
    setInvalidCreateChannelContactRows((current) => current.filter((rowIndex) => rowIndex !== index));
  };

  const addChannelContact = (isEdit = false) => {
    const setter = isEdit ? setEditChannelForm : setChannelForm;
    setter((current) => ({
      ...current,
      contacts: [...(current.contacts ?? []), createEmptyChannelContact()],
    }));
  };

  const removeChannelContact = (index: number, isEdit = false) => {
    const setter = isEdit ? setEditChannelForm : setChannelForm;
    setter((current) => {
      const currentContacts = current.contacts ?? [];
      const nextContacts = currentContacts.filter((_, contactIndex) => contactIndex !== index);
      return {
        ...current,
        contacts: nextContacts.length > 0 ? nextContacts : [createEmptyChannelContact()],
      };
    });
  };

  const resetCreateState = () => {
    setCreateOpen(false);
    setCreateError("");
    setSalesDuplicateChecking(false);
    setChannelDuplicateChecking(false);
    setSalesDuplicateMessage("");
    setChannelDuplicateMessage("");
    setSalesCreateFieldErrors({});
    setChannelCreateFieldErrors({});
    setInvalidCreateChannelContactRows([]);
    setSalesForm(defaultSalesForm);
    setChannelForm(defaultChannelForm);
    setCreateCityOptions([]);
  };

  const resetEditState = () => {
    setEditOpen(false);
    setEditError("");
    setSalesEditFieldErrors({});
    setChannelEditFieldErrors({});
    setInvalidEditChannelContactRows([]);
    setEditSalesForm(defaultSalesForm);
    setEditChannelForm(defaultChannelForm);
    setEditCityOptions([]);
  };

  const handleOpenCreate = async () => {
    setCreateError("");
    setSalesCreateFieldErrors({});
    setChannelCreateFieldErrors({});
    setInvalidCreateChannelContactRows([]);
    try {
      await loadMeta();
    } catch {}
    setCreateCityOptions([]);
    setCreateOpen(true);
  };

  const handleOpenEdit = async () => {
    if (!selectedItem) {
      return;
    }
    if (!canEditSelectedItem) {
      return;
    }

    setEditError("");
    let latestIndustryOptions = industryOptions;
    let latestCertificationLevelOptions = certificationLevelOptions;
    try {
      const meta = await loadMeta();
      latestIndustryOptions = meta.industryOptions ?? [];
      latestCertificationLevelOptions = meta.certificationLevelOptions ?? [];
    } catch {}

    if (selectedItem.type === "sales") {
      setSalesEditFieldErrors({});
      setEditSalesForm({
        employeeNo: selectedItem.employeeNo === "无" ? "" : selectedItem.employeeNo ?? "",
        candidateName: selectedItem.name ?? "",
        officeName: selectedItem.officeCode ?? "",
        mobile: selectedItem.phone === "无" ? "" : selectedItem.phone ?? "",
        targetDept: selectedItem.dept === "无" ? "" : selectedItem.dept ?? selectedItem.targetDept ?? "",
        industry: selectedItem.industryCode ?? "",
        title: selectedItem.title === "无" ? "" : selectedItem.title ?? "",
        intentLevel: selectedItem.intentLevel ?? "medium",
        hasDesktopExp: Boolean(selectedItem.hasExp),
        employmentStatus: selectedItem.active ? "active" : "left",
      });
    } else {
      const parsedChannelAttributes = decodeExpansionMultiValue(selectedItem.channelAttributeCode);
      const parsedInternalAttributes = decodeExpansionMultiValue(selectedItem.internalAttributeCode);
      const normalizedProvinceName = selectedItem.province === "无" ? "" : selectedItem.province ?? "";
      const normalizedCityName = selectedItem.city === "无" ? "" : selectedItem.city ?? "";
      setChannelEditFieldErrors({});
      setInvalidEditChannelContactRows([]);
      setEditChannelForm({
        channelCode: selectedItem.channelCode ?? "",
        channelName: selectedItem.name ?? "",
        province: normalizedProvinceName,
        city: normalizedCityName,
        officeAddress: selectedItem.officeAddress === "无" ? "" : selectedItem.officeAddress ?? "",
        channelIndustry: normalizeMultiOptionValues(
          selectedItem.channelIndustryCode ?? (selectedItem.channelIndustry === "无" ? "" : selectedItem.channelIndustry),
          latestIndustryOptions,
        ),
        certificationLevel: normalizeOptionValue(
          selectedItem.certificationLevel === "无" ? "" : selectedItem.certificationLevel,
          latestCertificationLevelOptions,
        ) || "",
        annualRevenue: selectedItem.annualRevenue ? Number(selectedItem.annualRevenue) : undefined,
        staffSize: selectedItem.size ?? undefined,
        contactEstablishedDate: selectedItem.establishedDate === "无" ? "" : selectedItem.establishedDate ?? "",
        intentLevel: selectedItem.intentLevel ?? "medium",
        hasDesktopExp: Boolean(selectedItem.hasDesktopExp),
        channelAttribute: parsedChannelAttributes.values,
        channelAttributeCustom: parsedChannelAttributes.customText,
        internalAttribute: parsedInternalAttributes.values,
        stage: selectedItem.stageCode ?? "initial_contact",
        remark: selectedItem.notes === "无" ? "" : selectedItem.notes ?? "",
        contacts: (selectedItem.contacts?.length ?? 0) > 0
          ? selectedItem.contacts?.map((contact) => ({
              name: contact.name === "无" ? "" : contact.name ?? "",
              mobile: contact.mobile === "无" ? "" : contact.mobile ?? "",
              title: contact.title === "无" ? "" : contact.title ?? "",
            }))
          : [createEmptyChannelContact()],
      });
      void loadCityOptions(normalizedProvinceName, true);
    }
    setEditOpen(true);
  };

  const handleCreateSubmit = async () => {
    if (submitting) {
      return;
    }

    setCreateError("");
    if (activeTab === "sales") {
      const validationErrors = validateSalesCreateForm(salesForm);
      if (Object.keys(validationErrors).length > 0) {
        setSalesCreateFieldErrors(validationErrors);
        setCreateError("请先完整填写销售人员拓展必填字段");
        return;
      }
    } else {
      const { errors: validationErrors, invalidContactRows } = validateChannelForm(channelForm, channelOtherOptionValue);
      if (Object.keys(validationErrors).length > 0) {
        setChannelCreateFieldErrors(validationErrors);
        setInvalidCreateChannelContactRows(invalidContactRows);
        setCreateError("请先完整填写渠道拓展必填字段");
        return;
      }
    }

    if (activeTab === "sales") {
      const duplicateResult = await checkSalesExpansionDuplicate(salesForm.employeeNo.trim());
      if (duplicateResult.duplicated) {
        const duplicateMessage = duplicateResult.message || "工号重复，请确认该人员是否已存在！";
        setSalesDuplicateMessage(duplicateMessage);
        setSalesCreateFieldErrors((current) => ({ ...current, employeeNo: duplicateMessage }));
        setCreateError(duplicateMessage);
        return;
      }
    } else {
      const duplicateResult = await checkChannelExpansionDuplicate(channelForm.channelName.trim());
      if (duplicateResult.duplicated) {
        const duplicateMessage = duplicateResult.message || "渠道重复，请确认该渠道是否已存在！";
        setChannelDuplicateMessage(duplicateMessage);
        setChannelCreateFieldErrors((current) => ({ ...current, channelName: duplicateMessage }));
        setCreateError(duplicateMessage);
        return;
      }
    }

    setSubmitting(true);

    try {
      if (activeTab === "sales") {
        await createSalesExpansion(normalizeSalesPayload(salesForm));
      } else {
        await createChannelExpansion(normalizeChannelPayload(channelForm));
      }

      resetCreateState();
      setRefreshTick((current) => current + 1);
    } catch (error) {
      setCreateError(error instanceof Error ? error.message : "新增失败");
    } finally {
      setSubmitting(false);
    }
  };

  const handleEditSubmit = async () => {
    if (!selectedItem || submitting) {
      return;
    }
    if (!canEditSelectedItem) {
      setEditError("仅可编辑本人创建的数据");
      return;
    }

    setEditError("");
    if (selectedItem.type === "sales") {
      const validationErrors = validateSalesCreateForm(editSalesForm);
      if (Object.keys(validationErrors).length > 0) {
        setSalesEditFieldErrors(validationErrors);
        setEditError("请先完整填写销售人员拓展必填字段");
        return;
      }
    } else {
      const { errors: validationErrors, invalidContactRows } = validateChannelForm(editChannelForm, channelOtherOptionValue);
      if (Object.keys(validationErrors).length > 0) {
        setChannelEditFieldErrors(validationErrors);
        setInvalidEditChannelContactRows(invalidContactRows);
        setEditError("请先完整填写渠道拓展必填字段");
        return;
      }
    }

    setSubmitting(true);

    try {
      if (selectedItem.type === "sales") {
        await updateSalesExpansion(selectedItem.id, normalizeSalesPayload(editSalesForm));
      } else {
        await updateChannelExpansion(selectedItem.id, normalizeChannelPayload(editChannelForm));
      }

      resetEditState();
      setSelectedItem(null);
      setRefreshTick((current) => current + 1);
    } catch (error) {
      setEditError(error instanceof Error ? error.message : "编辑失败");
    } finally {
      setSubmitting(false);
    }
  };

  const renderEmpty = () => (
    <div className="crm-empty-panel">
      暂无拓展数据，先新增一条试试。
    </div>
  );

  const renderFollowUpTimeline = () => {
    if (followUpRecords.length <= 0) {
      return (
        <div className="crm-empty-panel">
          暂无跟进记录
        </div>
      );
    }

    return (
      <div className="relative space-y-6 border-l-2 border-slate-100 pl-4 dark:border-slate-800">
        {followUpRecords.map((record) => {
          const summary = getExpansionFollowUpSummary(record);
          return (
          <div key={record.id} className="relative">
            <div className="absolute -left-[21px] mt-1.5 h-2.5 w-2.5 rounded-full bg-violet-500 ring-4 ring-white dark:ring-slate-900" />
            <div className="rounded-xl border border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/20">
              <div className="grid grid-cols-1 gap-3 rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm dark:border-amber-500/20 dark:bg-amber-500/10 sm:grid-cols-3">
                <div><p className="mb-1 text-xs text-amber-700 dark:text-amber-300">拜访时间</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{summary.visitStartTime}</p></div>
                <div><p className="mb-1 text-xs text-amber-700 dark:text-amber-300">沟通内容</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{summary.evaluationContent}</p></div>
                <div><p className="mb-1 text-xs text-amber-700 dark:text-amber-300">后续规划</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{summary.nextPlan}</p></div>
              </div>
              <p className="mt-2 text-xs text-slate-400">跟进人: {record.user || "无"}<span className="ml-3">{record.date || "无"}</span></p>
            </div>
          </div>
        )})}
      </div>
    );
  };

  const handleTabChange = (tab: ExpansionTab) => {
    setActiveTab(tab);
    setSelectedItem(null);
    setExportError("");
  };

  const handleExport = async (filters: ExpansionExportFilters) => {
    if (exporting) {
      return;
    }

    const isSalesTab = activeTab === "sales";
    const normalizedFilters = applyDefaultRelatedProjectStageFilters(filters, relatedProjectStageOptions);
    setExporting(true);
    setExportError("");
    setExportFilters(normalizedFilters);
    persistExpansionExportPreferences(normalizedFilters);

    try {
      const overview = await getExpansionOverview("");
      const exportSalesItems = dedupeExpansionItemsById(overview.salesItems ?? [])
        .map((item) => withFilteredSalesRelatedProjects(item, normalizedFilters))
        .filter((item) => matchesSalesExportFilters(item, normalizedFilters));
      const exportChannelItems = dedupeExpansionItemsById(overview.channelItems ?? [])
        .map((item) => withFilteredChannelRelatedProjects(item, normalizedFilters))
        .filter((item) => matchesChannelExportFilters(item, normalizedFilters));
      const exportItems = isSalesTab ? exportSalesItems : exportChannelItems;
      const selectedSalesFieldKeys = resolveSelectedExpansionFields(normalizedFilters.selectedSalesFields, defaultSalesExportFields);
      const selectedChannelFieldKeys = resolveSelectedExpansionFields(normalizedFilters.selectedChannelFields, defaultChannelExportFields);
      const selectedFieldKeys = isSalesTab ? selectedSalesFieldKeys : selectedChannelFieldKeys;
      if (exportItems.length <= 0) {
        throw new Error(`当前筛选条件下暂无可导出的${isSalesTab ? "销售人员拓展" : "渠道拓展"}数据`);
      }
      if (selectedFieldKeys.length <= 0) {
        throw new Error("请至少选择一个导出字段");
      }

      const ExcelJS = await import("exceljs");
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet(isSalesTab ? "销售人员拓展" : "渠道拓展");
      const salesColumns = salesExportColumns.filter((column) => selectedSalesFieldKeys.includes(column.key));
      const channelColumns = channelExportColumns.filter((column) => selectedChannelFieldKeys.includes(column.key));
      const columns = isSalesTab ? salesColumns : channelColumns;
      const headers = columns.map((column) => column.label);
      const rows = isSalesTab
        ? buildExportRows(exportSalesItems, salesColumns)
        : buildExportRows(exportChannelItems, channelColumns);

      worksheet.addRow(headers);
      rows.forEach((row) => {
        worksheet.addRow(row);
      });

      worksheet.views = [{ state: "frozen", ySplit: 1 }];
      worksheet.getRow(1).height = 24;
      worksheet.getRow(1).font = { bold: true };
      worksheet.getRow(1).alignment = { vertical: "middle", horizontal: "center" };
      const columnWidths = columns.map((column, index) => {
        const columnValues = rows.map((row) => row[index]).filter((value): value is string => typeof value === "string");
        if (column.kind === "followup") {
          return 42;
        }
        if (column.kind === "project" || column.kind === "contact") {
          return Math.min(
            80,
            Math.max(
              16,
              getExcelDisplayWidth(column.label) + 2,
              columnValues.reduce((maxWidth, value) => {
                const longestLineWidth = value.split("\n").reduce((lineMax, line) => Math.max(lineMax, getExcelDisplayWidth(line)), 0);
                return Math.max(maxWidth, longestLineWidth + 2);
              }, 0),
            ),
          );
        }
        if (column.kind === "longText") {
          return 24;
        }
        if (column.label.includes("渠道属性") || column.label.includes("内部属性") || column.label.includes("聚焦行业")) {
          return 18;
        }
        return 16;
      });

      columns.forEach((columnConfig, index) => {
        const column = worksheet.getColumn(index + 1);
        column.width = columnWidths[index];
        if (columnConfig.numFmt) {
          column.numFmt = columnConfig.numFmt;
        }
        column.alignment = {
          vertical: "top",
          horizontal: "left",
          wrapText: columnConfig.kind === "followup" || columnConfig.kind === "project" || columnConfig.kind === "contact",
        };
      });

      worksheet.eachRow((row, rowNumber) => {
        row.eachCell((cell, columnNumber) => {
          cell.border = {
            top: { style: "thin", color: { argb: "FFE2E8F0" } },
            left: { style: "thin", color: { argb: "FFE2E8F0" } },
            bottom: { style: "thin", color: { argb: "FFE2E8F0" } },
            right: { style: "thin", color: { argb: "FFE2E8F0" } },
          };
          cell.alignment = {
            vertical: "top",
            horizontal: rowNumber === 1 ? "center" : "left",
            wrapText: rowNumber > 1 && (columns[columnNumber - 1]?.kind === "followup" || columns[columnNumber - 1]?.kind === "project" || columns[columnNumber - 1]?.kind === "contact"),
          };
        });
        if (rowNumber > 1) {
          const wrappedLineCount = columns.reduce((maxLineCount, column, index) => {
            if (column.kind !== "project" && column.kind !== "contact" && column.kind !== "followup") {
              return maxLineCount;
            }
            const cellValue = row.getCell(index + 1).value;
            const text = typeof cellValue === "string" ? cellValue : "";
            return Math.max(maxLineCount, getExcelWrappedLineCount(text, columnWidths[index]));
          }, 1);
          row.height = Math.max(22, wrappedLineCount * 16);
        }
      });

      const buffer = await workbook.xlsx.writeBuffer();
      const filename = `${isSalesTab ? "销售人员拓展" : "渠道拓展"}_${formatExportFilenameTime()}.xlsx`;
      downloadExcelFile(filename, buffer);
      setExportFilterOpen(false);
    } catch (error) {
      setExportError(error instanceof Error ? error.message : "导出失败，请稍后重试");
    } finally {
      setExporting(false);
    }
  };

  const renderSalesForm = (
    form: CreateSalesExpansionPayload,
    onChange: <K extends keyof CreateSalesExpansionPayload>(key: K, value: CreateSalesExpansionPayload[K]) => void,
    fieldErrors?: Partial<Record<SalesCreateField, string>>,
    isEdit = false,
  ) => (
    <div className="crm-form-grid">
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">工号<RequiredMark /></span>
        <input value={form.employeeNo} onChange={(e) => onChange("employeeNo", e.target.value)} className={getFieldInputClass(Boolean(fieldErrors?.employeeNo))} />
        {fieldErrors?.employeeNo ? <p className="text-xs text-rose-500">{fieldErrors.employeeNo}</p> : null}
        {!fieldErrors?.employeeNo && !isEdit && salesDuplicateMessage ? <p className="text-xs text-rose-500">{salesDuplicateMessage}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">代表处 / 办事处<RequiredMark /></span>
        <AdaptiveSelect
          value={form.officeName || ""}
          placeholder="请选择"
          sheetTitle="代表处 / 办事处"
          searchable
          searchPlaceholder="搜索代表处 / 办事处"
          options={[
            { value: "", label: "请选择" },
            ...officeOptions.map((option) => ({
              value: option.value ?? "",
              label: option.label || "无",
            })),
          ]}
          className={cn(
            fieldErrors?.officeName ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("officeName", value || undefined)}
        />
        {fieldErrors?.officeName ? <p className="text-xs text-rose-500">{fieldErrors.officeName}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">姓名<RequiredMark /></span>
        <input value={form.candidateName} onChange={(e) => onChange("candidateName", e.target.value)} className={getFieldInputClass(Boolean(fieldErrors?.candidateName))} />
        {fieldErrors?.candidateName ? <p className="text-xs text-rose-500">{fieldErrors.candidateName}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">联系方式<RequiredMark /></span>
        <input value={form.mobile} onChange={(e) => onChange("mobile", e.target.value)} className={getFieldInputClass(Boolean(fieldErrors?.mobile))} />
        {fieldErrors?.mobile ? <p className="text-xs text-rose-500">{fieldErrors.mobile}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">所属部门<RequiredMark /></span>
        <input
          value={form.targetDept || ""}
          onChange={(e) => onChange("targetDept", e.target.value)}
          placeholder="办事处/地市"
          className={getFieldInputClass(Boolean(fieldErrors?.targetDept))}
        />
        {fieldErrors?.targetDept ? <p className="text-xs text-rose-500">{fieldErrors.targetDept}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">所属行业<RequiredMark /></span>
        <AdaptiveSelect
          value={form.industry || ""}
          placeholder="请选择"
          sheetTitle="所属行业"
          options={[
            { value: "", label: "请选择" },
            ...industryOptions.map((option) => ({
              value: option.value ?? "",
              label: option.label || "无",
            })),
          ]}
          className={cn(
            fieldErrors?.industry ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("industry", value || undefined)}
        />
        {fieldErrors?.industry ? <p className="text-xs text-rose-500">{fieldErrors.industry}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">职务<RequiredMark /></span>
        <input value={form.title} onChange={(e) => onChange("title", e.target.value)} className={getFieldInputClass(Boolean(fieldErrors?.title))} />
        {fieldErrors?.title ? <p className="text-xs text-rose-500">{fieldErrors.title}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">合作意向<RequiredMark /></span>
        <AdaptiveSelect
          value={form.intentLevel}
          sheetTitle="合作意向"
          options={[
            { value: "high", label: "高" },
            { value: "medium", label: "中" },
            { value: "low", label: "低" },
          ]}
          className={cn(
            fieldErrors?.intentLevel ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("intentLevel", value)}
        />
        {fieldErrors?.intentLevel ? <p className="text-xs text-rose-500">{fieldErrors.intentLevel}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">销售是否在职<RequiredMark /></span>
        <AdaptiveSelect
          value={form.employmentStatus}
          sheetTitle="销售是否在职"
          options={[
            { value: "active", label: "是" },
            { value: "left", label: "否" },
          ]}
          className={cn(
            fieldErrors?.employmentStatus ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("employmentStatus", value)}
        />
        {fieldErrors?.employmentStatus ? <p className="text-xs text-rose-500">{fieldErrors.employmentStatus}</p> : null}
      </label>
      <label className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3 dark:border-slate-800">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">销售以前是否做过云桌面项目</span>
        <input type="checkbox" checked={Boolean(form.hasDesktopExp)} onChange={(e) => onChange("hasDesktopExp", e.target.checked)} />
      </label>
      <label className="space-y-2 sm:col-span-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">跟进的云桌面项目</span>
        <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-900/30 dark:text-slate-400">
          首次新增不需要填写，关联商机后会自动按列表展示项目编码、项目名称和项目金额。
        </div>
      </label>
    </div>
  );

  const renderChannelForm = (
    form: CreateChannelExpansionPayload,
    onChange: <K extends keyof CreateChannelExpansionPayload>(key: K, value: CreateChannelExpansionPayload[K]) => void,
    isEdit = false,
    fieldErrors?: Partial<Record<ChannelField, string>>,
    invalidContactRows: number[] = [],
  ) => {
    const cityOptions = isEdit ? editCityOptions : createCityOptions;
    const cityDisabled = !form.province?.trim();

    return (
    <div className="crm-form-grid">
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">编码</span>
        <input
          value={form.channelCode || (isEdit ? "" : nextChannelCode || "系统自动生成")}
          readOnly
          className="crm-input-box-readonly crm-input-text w-full border border-slate-200 bg-slate-50 text-slate-500 outline-none dark:border-slate-800 dark:bg-slate-900/30 dark:text-slate-400"
        />
      </label>
      <label className="space-y-2 sm:col-span-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">渠道名称<RequiredMark /></span>
        <input value={form.channelName} onChange={(e) => onChange("channelName", e.target.value)} className={getFieldInputClass(Boolean(fieldErrors?.channelName))} />
        {fieldErrors?.channelName ? <p className="text-xs text-rose-500">{fieldErrors.channelName}</p> : null}
        {!fieldErrors?.channelName && !isEdit && channelDuplicateMessage ? <p className="text-xs text-rose-500">{channelDuplicateMessage}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">省份<RequiredMark /></span>
        <AdaptiveSelect
          value={form.province || ""}
          placeholder="请选择"
          sheetTitle="省份"
          searchable
          searchPlaceholder="搜索省份"
          options={[
            { value: "", label: "请选择" },
            ...provinceOptions.map((option) => ({
              value: option.value ?? "",
              label: option.label || "无",
            })),
          ]}
          className={cn(
            fieldErrors?.province ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => {
            const nextProvince = value || undefined;
            onChange("province", nextProvince);
            onChange("city", undefined);
            void loadCityOptions(nextProvince, isEdit);
          }}
        />
        {fieldErrors?.province ? <p className="text-xs text-rose-500">{fieldErrors.province}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">市<RequiredMark /></span>
        <AdaptiveSelect
          value={form.city || ""}
          placeholder={cityDisabled ? "请先选择省份" : "请选择"}
          sheetTitle="市"
          searchable
          searchPlaceholder="搜索市"
          disabled={cityDisabled}
          options={[
            { value: "", label: "请选择" },
            ...cityOptions.map((option) => ({
              value: option.value ?? "",
              label: option.label || "无",
            })),
          ]}
          className={cn(
            fieldErrors?.city ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("city", value || undefined)}
        />
        {fieldErrors?.city ? <p className="text-xs text-rose-500">{fieldErrors.city}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">办公地址<RequiredMark /></span>
        <input value={form.officeAddress || ""} onChange={(e) => onChange("officeAddress", e.target.value)} className={getFieldInputClass(Boolean(fieldErrors?.officeAddress))} />
        {fieldErrors?.officeAddress ? <p className="text-xs text-rose-500">{fieldErrors.officeAddress}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">聚焦行业<RequiredMark /></span>
        <AdaptiveSelect
          multiple
          value={form.channelIndustry || []}
          placeholder="请选择"
          sheetTitle="聚焦行业"
          options={industryOptions.map((option) => ({
            value: option.value ?? "",
            label: option.label || "无",
          }))}
          className={cn(
            fieldErrors?.channelIndustry ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("channelIndustry", value)}
        />
        {fieldErrors?.channelIndustry ? <p className="text-xs text-rose-500">{fieldErrors.channelIndustry}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">汇智内部认证级别<RequiredMark /></span>
        <AdaptiveSelect
          value={form.certificationLevel || ""}
          placeholder="请选择"
          sheetTitle="汇智内部认证级别"
          options={[
            { value: "", label: "请选择" },
            ...certificationLevelOptions.map((option) => ({
              value: option.value ?? "",
              label: option.label || "无",
            })),
          ]}
          className={cn(
            fieldErrors?.certificationLevel ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("certificationLevel", value || undefined)}
        />
        {fieldErrors?.certificationLevel ? <p className="text-xs text-rose-500">{fieldErrors.certificationLevel}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">{CHANNEL_REVENUE_LABEL}<RequiredMark /></span>
        <input
          type="number"
          min="0.01"
          step="0.01"
          placeholder="请输入万元"
          value={form.annualRevenue ?? ""}
          onChange={(e) => onChange("annualRevenue", e.target.value ? Number(e.target.value) : undefined)}
          className={getFieldInputClass(Boolean(fieldErrors?.annualRevenue))}
        />
        {fieldErrors?.annualRevenue ? <p className="text-xs text-rose-500">{fieldErrors.annualRevenue}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">人员规模<RequiredMark /></span>
        <input type="number" value={form.staffSize ?? ""} onChange={(e) => onChange("staffSize", e.target.value ? Number(e.target.value) : undefined)} className={getFieldInputClass(Boolean(fieldErrors?.staffSize))} />
        {fieldErrors?.staffSize ? <p className="text-xs text-rose-500">{fieldErrors.staffSize}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">建立联系时间<RequiredMark /></span>
        <input type="date" value={form.contactEstablishedDate || ""} onChange={(e) => onChange("contactEstablishedDate", e.target.value)} className={getFieldInputClass(Boolean(fieldErrors?.contactEstablishedDate))} />
        {fieldErrors?.contactEstablishedDate ? <p className="text-xs text-rose-500">{fieldErrors.contactEstablishedDate}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">合作意向<RequiredMark /></span>
        <AdaptiveSelect
          value={form.intentLevel || "medium"}
          sheetTitle="合作意向"
          options={[
            { value: "high", label: "高" },
            { value: "medium", label: "中" },
            { value: "low", label: "低" },
          ]}
          className={cn(
            fieldErrors?.intentLevel ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("intentLevel", value)}
        />
        {fieldErrors?.intentLevel ? <p className="text-xs text-rose-500">{fieldErrors.intentLevel}</p> : null}
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">渠道属性<RequiredMark /></span>
        <AdaptiveSelect
          multiple
          value={form.channelAttribute || []}
          placeholder="请选择"
          sheetTitle="渠道属性"
          options={channelAttributeOptions.map((option) => ({
            value: option.value ?? "",
            label: option.label || "无",
          }))}
          className={cn(
            fieldErrors?.channelAttribute ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => {
            onChange("channelAttribute", value);
            if (!channelOtherOptionValue || !value.includes(channelOtherOptionValue)) {
              onChange("channelAttributeCustom", "");
            }
          }}
        />
        {fieldErrors?.channelAttribute ? <p className="text-xs text-rose-500">{fieldErrors.channelAttribute}</p> : null}
      </label>
      {channelOtherOptionValue && (form.channelAttribute ?? []).includes(channelOtherOptionValue) ? (
        <label className="space-y-2">
          <span className="text-sm font-medium text-slate-700 dark:text-slate-300">其它渠道属性<RequiredMark /></span>
          <input
            value={form.channelAttributeCustom || ""}
            onChange={(e) => onChange("channelAttributeCustom", e.target.value)}
            placeholder="请输入具体渠道属性"
            className={getFieldInputClass(Boolean(fieldErrors?.channelAttributeCustom))}
          />
          {fieldErrors?.channelAttributeCustom ? <p className="text-xs text-rose-500">{fieldErrors.channelAttributeCustom}</p> : null}
        </label>
      ) : null}
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">新华三内部属性<RequiredMark /></span>
        <AdaptiveSelect
          multiple
          value={form.internalAttribute || []}
          placeholder="请选择"
          sheetTitle="新华三内部属性"
          options={internalAttributeOptions.map((option) => ({
            value: option.value ?? "",
            label: option.label || "无",
          }))}
          className={cn(
            fieldErrors?.internalAttribute ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "",
          )}
          onChange={(value) => onChange("internalAttribute", value)}
        />
        {fieldErrors?.internalAttribute ? <p className="text-xs text-rose-500">{fieldErrors.internalAttribute}</p> : null}
      </label>
      <label className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3 dark:border-slate-800">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">以前是否做过云桌面项目</span>
        <input type="checkbox" checked={Boolean(form.hasDesktopExp)} onChange={(e) => onChange("hasDesktopExp", e.target.checked)} />
      </label>
      <div className="crm-form-section sm:col-span-2">
        <div className="crm-form-section-header">
          <span className="text-sm font-semibold text-slate-800 dark:text-slate-200">人员信息<RequiredMark /></span>
          <button type="button" onClick={() => addChannelContact(isEdit)} className="rounded-lg bg-white px-3 py-1.5 text-xs font-medium text-violet-600 shadow-sm dark:bg-slate-800 dark:text-violet-400">
            添加人员
          </button>
        </div>
        <div className="crm-section-stack">
          {(form.contacts ?? []).map((contact, index) => (
            <div key={`${isEdit ? "edit" : "create"}-${index}`} className="grid grid-cols-1 gap-3 rounded-xl border border-slate-200 bg-white p-3 sm:grid-cols-[1fr_1fr_1fr_auto] dark:border-slate-700 dark:bg-slate-900/50">
              <input value={contact.name || ""} onChange={(e) => handleChannelContactChange(index, "name", e.target.value, isEdit)} placeholder="人员姓名" className={cn("w-full rounded-lg border bg-white px-3 py-2 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:bg-slate-900/50", invalidContactRows.includes(index) ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "border-slate-200 dark:border-slate-800")} />
              <input value={contact.mobile || ""} onChange={(e) => handleChannelContactChange(index, "mobile", e.target.value, isEdit)} placeholder="联系电话" className={cn("w-full rounded-lg border bg-white px-3 py-2 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:bg-slate-900/50", invalidContactRows.includes(index) ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "border-slate-200 dark:border-slate-800")} />
              <input value={contact.title || ""} onChange={(e) => handleChannelContactChange(index, "title", e.target.value, isEdit)} placeholder="职位" className={cn("w-full rounded-lg border bg-white px-3 py-2 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:bg-slate-900/50", invalidContactRows.includes(index) ? "border-rose-400 bg-rose-50/60 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/70 dark:bg-rose-500/10" : "border-slate-200 dark:border-slate-800")} />
              <button type="button" onClick={() => removeChannelContact(index, isEdit)} className="crm-btn-danger rounded-lg px-3 py-2 text-sm font-medium">
                删除
              </button>
            </div>
          ))}
        </div>
        {fieldErrors?.contacts ? <p className="text-xs text-rose-500">{fieldErrors.contacts}</p> : null}
      </div>
      <label className="space-y-2 sm:col-span-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">跟进的云桌面项目</span>
        <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-900/30 dark:text-slate-400">
          通过商机里的“关联渠道”自动带入项目编码、项目名称和项目金额。
        </div>
      </label>
      <label className="space-y-2 sm:col-span-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">备注说明</span>
        <textarea rows={4} value={form.remark} onChange={(e) => onChange("remark", e.target.value)} className="crm-input-box crm-input-text w-full border border-slate-200 bg-white outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50" />
      </label>
    </div>
  );
  };

  return (
    <div className="crm-page-stack">
      <header className="crm-page-header">
        <div className="crm-page-heading">
          <h1 className="crm-page-title">拓展管理</h1>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => {
              setExportError("");
              setExportFilterOpen(true);
            }}
            disabled={exporting}
            className={cn("crm-btn-sm crm-btn-secondary flex items-center gap-2 disabled:cursor-not-allowed disabled:opacity-60", disableMobileMotion ? "active:scale-100" : "active:scale-95")}
          >
            <Download className="crm-icon-md" />
            <span className="hidden sm:inline">{exporting ? "导出中..." : "导出"}</span>
          </button>
          <button
            onClick={handleOpenCreate}
            className={cn("crm-btn-sm crm-btn-primary flex items-center gap-2", disableMobileMotion ? "active:scale-100" : "active:scale-95")}
          >
            <Plus className="crm-icon-md" />
            <span className="hidden sm:inline">新增</span>
          </button>
        </div>
      </header>

      <div className={cn("crm-filter-bar flex", !disableMobileMotion && "backdrop-blur-sm")}>
        <button
          onClick={() => handleTabChange("sales")}
          className={`flex-1 rounded-lg py-2 text-sm font-medium transition-colors duration-200 ${
            activeTab === "sales" ? "bg-white text-violet-600 shadow-sm dark:bg-slate-800 dark:text-violet-400" : "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
          }`}
        >
          销售人员拓展
        </button>
        <button
          onClick={() => handleTabChange("channel")}
          className={`flex-1 rounded-lg py-2 text-sm font-medium transition-colors duration-200 ${
            activeTab === "channel" ? "bg-white text-violet-600 shadow-sm dark:bg-slate-800 dark:text-violet-400" : "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
          }`}
        >
          渠道拓展
        </button>
      </div>

      <div className="group relative">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-violet-500" />
        <input
          type="text"
          placeholder="搜索工号、姓名、渠道名称、行业..."
          value={keyword}
          onChange={(event) => {
            setKeyword(event.target.value);
            setExportError("");
          }}
          className="crm-input-box crm-input-text w-full border border-slate-200 bg-white pl-10 text-slate-900 outline-none transition-all focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50 dark:text-white"
        />
      </div>

      {exportError ? <div className="crm-alert crm-alert-error">{exportError}</div> : null}

      <div className="crm-list-stack">
        {activeTab === "sales" ? (
          salesData.length > 0 ? (
            salesData.map((item, i) => {
              const isOwnedByCurrentUser = currentUserId !== undefined && item.ownerUserId === currentUserId;
              return (
                <motion.div
                  initial={disableMobileMotion ? false : { opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={disableMobileMotion ? { duration: 0 } : { delay: i * 0.05 }}
                  key={item.id}
                  onClick={() => setSelectedItem(item)}
                  className={cn(
                    "crm-card crm-card-pad relative rounded-2xl transition-shadow transition-colors",
                    isOwnedByCurrentUser
                      ? "cursor-pointer hover:border-violet-100 hover:shadow-md dark:hover:border-violet-900/50"
                      : "cursor-pointer border-slate-100 bg-slate-50/45 hover:border-slate-200 hover:shadow-sm dark:border-slate-800/80 dark:bg-slate-900/35 dark:hover:border-slate-700",
                  )}
                >
                  {isOwnedByCurrentUser ? (
                    <div className="pointer-events-none absolute inset-x-5 top-0 h-1.5 rounded-b-full bg-gradient-to-r from-violet-400/85 via-fuchsia-400/70 to-indigo-400/85 shadow-[0_6px_16px_rgba(124,58,237,0.18)] dark:from-violet-400/70 dark:via-fuchsia-400/55 dark:to-indigo-400/70" />
                  ) : null}
                  <div className="flex items-start gap-3">
                    <div className="min-w-0 flex-1">
                      <h3 className="break-anywhere text-base font-semibold text-slate-900 dark:text-white sm:text-lg">{item.name || "无"}</h3>
                      <p className="break-anywhere mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400 sm:text-sm">{item.officeName || "无"} · {item.dept || "无"} · {item.title || "无"}</p>
                      <div className="mt-2 flex flex-wrap items-center gap-2">
                        <span
                          className={cn(
                            "rounded-full border px-2.5 py-1 text-[11px] font-semibold leading-none",
                            isOwnedByCurrentUser
                              ? "border-emerald-200 bg-emerald-50 text-emerald-600 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300"
                              : "border-slate-200 bg-slate-50 text-slate-500 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-300",
                          )}
                        >
                          {isOwnedByCurrentUser ? "我的" : "只读"}
                        </span>
                        <span className={`crm-pill shrink-0 ${item.active ? "crm-pill-emerald" : "crm-pill-neutral"}`}>
                          {item.active ? "在职" : "离职"}
                        </span>
                      </div>
                    </div>
                  </div>
              <div className="mt-4 grid grid-cols-1 gap-y-3 text-xs sm:grid-cols-2 sm:text-sm">
                <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <span className="text-slate-400 dark:text-slate-500">意向:</span>
                  <span className={item.intent === "高" ? "font-medium text-rose-600 dark:text-rose-400" : ""}>{item.intent || "无"}</span>
                </div>
                <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <span className="text-slate-400 dark:text-slate-500">跟进项目金额:</span>
                  {formatRelatedProjectAmount(item.relatedProjects)}
                </div>
                <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <span className="text-slate-400 dark:text-slate-500">创建人:</span>
                  <span className="font-medium text-slate-900 dark:text-white">{item.owner || "无"}</span>
                </div>
              </div>
                </motion.div>
              );
            })
          ) : renderEmpty()
        ) : channelData.length > 0 ? (
          channelData.map((item, i) => {
            const isOwnedByCurrentUser = currentUserId !== undefined && item.ownerUserId === currentUserId;
            return (
              <motion.div
                initial={disableMobileMotion ? false : { opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={disableMobileMotion ? { duration: 0 } : { delay: i * 0.05 }}
                key={item.id}
                onClick={() => setSelectedItem(item)}
                className={cn(
                  "crm-card crm-card-pad relative rounded-2xl transition-shadow transition-colors",
                  isOwnedByCurrentUser
                    ? "cursor-pointer hover:border-violet-100 hover:shadow-md dark:hover:border-violet-900/50"
                    : "cursor-pointer border-slate-100 bg-slate-50/45 hover:border-slate-200 hover:shadow-sm dark:border-slate-800/80 dark:bg-slate-900/35 dark:hover:border-slate-700",
                )}
              >
                {isOwnedByCurrentUser ? (
                  <div className="pointer-events-none absolute inset-x-5 top-0 h-1.5 rounded-b-full bg-gradient-to-r from-violet-400/85 via-fuchsia-400/70 to-indigo-400/85 shadow-[0_6px_16px_rgba(124,58,237,0.18)] dark:from-violet-400/70 dark:via-fuchsia-400/55 dark:to-indigo-400/70" />
                ) : null}
                <div className="flex items-start gap-3">
                  <div className="min-w-0 flex-1">
                    <h3 className="break-anywhere text-base font-semibold text-slate-900 dark:text-white sm:text-lg">{item.name || "无"}</h3>
                    <p className="break-anywhere mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400 sm:text-sm">
                      {item.province || "无"} · {item.city || "无"} · {item.certificationLevel || "无"}
                    </p>
                    <div className="mt-2 flex flex-wrap items-center gap-2">
                      <span
                        className={cn(
                          "rounded-full border px-2.5 py-1 text-[11px] font-semibold leading-none",
                          isOwnedByCurrentUser
                            ? "border-emerald-200 bg-emerald-50 text-emerald-600 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300"
                            : "border-slate-200 bg-slate-50 text-slate-500 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-300",
                        )}
                      >
                        {isOwnedByCurrentUser ? "我的" : "只读"}
                      </span>
                      <span className={`crm-pill shrink-0 ${item.intent === "高" ? "crm-pill-rose" : item.intent === "中" ? "crm-pill-amber" : "crm-pill-neutral"}`}>
                        {item.intent ? `${item.intent}意向` : "未评估"}
                      </span>
                    </div>
                  </div>
                </div>
              <div className="mt-4 grid grid-cols-1 gap-y-3 text-xs sm:grid-cols-2 sm:text-sm">
                <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <span className="text-slate-400 dark:text-slate-500">建立联系:</span>
                  {item.establishedDate || "无"}
                </div>
                <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <span className="text-slate-400 dark:text-slate-500">跟进项目金额:</span>
                  {formatRelatedProjectAmount(item.relatedProjects)}
                </div>
                <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <span className="text-slate-400 dark:text-slate-500">创建人:</span>
                  <span className="font-medium text-slate-900 dark:text-white">{item.owner || "无"}</span>
                </div>
              </div>
              </motion.div>
            );
          })
        ) : renderEmpty()}
      </div>

      <AnimatePresence>
        {exportFilterOpen && (
          <ExpansionExportFilterModal
            activeTab={activeTab}
            initialFilters={applyDefaultRelatedProjectStageFilters(exportFilters, relatedProjectStageOptions)}
            exporting={exporting}
            exportError={exportError}
            officeOptions={officeOptions}
            industryOptions={industryOptions}
            provinceOptions={provinceOptions}
            certificationLevelOptions={certificationLevelOptions}
            channelAttributeOptions={channelAttributeOptions}
            relatedProjectStageOptions={relatedProjectStageOptions}
            onClose={() => setExportFilterOpen(false)}
            onConfirm={(filters) => void handleExport(filters)}
          />
        )}

        {createOpen && (
          <ModalShell
            title={`新增${activeTab === "sales" ? "销售人员拓展" : "渠道拓展"}`}
            subtitle="支持电脑和手机填写，提交后自动刷新列表。"
            onClose={resetCreateState}
            footer={(
              <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <button onClick={resetCreateState} className="crm-btn crm-btn-secondary">取消</button>
                <button onClick={() => void handleCreateSubmit()} disabled={submitting} className="crm-btn crm-btn-primary disabled:cursor-not-allowed disabled:opacity-60">{submitting ? "提交中..." : "确认新增"}</button>
              </div>
            )}
          >
            {activeTab === "sales" ? renderSalesForm(salesForm, handleSalesChange, salesCreateFieldErrors, false) : renderChannelForm(channelForm, handleChannelChange, false, channelCreateFieldErrors, invalidCreateChannelContactRows)}
            {createError ? <div className="crm-alert crm-alert-error mt-4">{createError}</div> : null}
          </ModalShell>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {editOpen && selectedItem && (
          <ModalShell
            title={`编辑${selectedItem.type === "sales" ? "销售人员拓展" : "渠道拓展"}`}
            subtitle="修改后会实时更新本人名下的拓展资料。"
            onClose={resetEditState}
            footer={(
              <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <button onClick={resetEditState} className="crm-btn crm-btn-secondary">取消</button>
                <button onClick={() => void handleEditSubmit()} disabled={submitting} className="crm-btn crm-btn-primary disabled:cursor-not-allowed disabled:opacity-60">{submitting ? "保存中..." : "保存修改"}</button>
              </div>
            )}
          >
            {selectedItem.type === "sales" ? renderSalesForm(editSalesForm, handleEditSalesChange, salesEditFieldErrors, true) : renderChannelForm(editChannelForm, handleEditChannelChange, true, channelEditFieldErrors, invalidEditChannelContactRows)}
            {editError ? <div className="crm-alert crm-alert-error mt-4">{editError}</div> : null}
          </ModalShell>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {selectedItem && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setSelectedItem(null)}
              className={`fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm transition-opacity dark:bg-slate-900/60 ${
                hasForegroundModal ? "pointer-events-none opacity-30" : ""
              }`}
            />
            <motion.div
              initial={{ x: "100%", y: 0 }}
              animate={{ x: 0, y: 0 }}
              exit={{ x: "100%", y: 0 }}
              transition={{ type: "spring", damping: 25, stiffness: 200 }}
              className={`fixed inset-x-0 bottom-0 z-50 flex h-[88dvh] w-full flex-col overflow-hidden rounded-t-3xl border border-slate-200 bg-white shadow-2xl transition-opacity dark:border-slate-800 dark:bg-slate-900 sm:inset-y-0 sm:right-0 sm:left-auto sm:h-full sm:max-w-2xl lg:max-w-3xl sm:rounded-none sm:rounded-l-3xl sm:border-l ${
                hasForegroundModal ? "pointer-events-none opacity-20" : ""
              }`}
            >
              <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800 sm:px-6">
                <div className="flex items-center gap-3">
                  <div className="h-1.5 w-10 rounded-full bg-slate-200 sm:hidden dark:bg-slate-700" />
                  <h2 className="text-base font-semibold text-slate-900 dark:text-white sm:text-lg">{selectedItem.type === "sales" ? "销售拓展详情" : "渠道拓展详情"}</h2>
                </div>
                  <button onClick={() => setSelectedItem(null)} className="rounded-full p-2 text-slate-400 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800">
                    <X className="crm-icon-lg" />
                </button>
              </div>

              <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5 sm:px-6">
                <div className="crm-modal-stack">
                <div>
                  {selectedItem.type === "sales" ? (
                    <p className="text-xs font-medium uppercase tracking-[0.18em] text-slate-400 dark:text-slate-500">工号 {selectedItem.employeeNo || "无"}</p>
                  ) : (
                    <p className="text-xs font-medium uppercase tracking-[0.18em] text-slate-400 dark:text-slate-500">{selectedItem.channelCode || "未编码"}</p>
                  )}
                  <h3 className="break-anywhere text-lg font-bold text-slate-900 dark:text-white sm:text-xl">{selectedItem.name || "无"}</h3>
                  <p className="break-anywhere mt-1 text-xs leading-5 text-slate-500 dark:text-slate-400 sm:text-sm">
                    {selectedItem.type === "sales"
                      ? `${selectedItem.officeName || "无"} · ${selectedItem.dept || "无"} · ${selectedItem.title || "无"}`
                      : `${selectedItem.province || "无"} · ${selectedItem.city || "无"} · ${selectedItem.channelIndustry || "无"} · ${selectedItem.certificationLevel || "无"}`}
                  </p>
                  <div className="mt-3 flex flex-wrap gap-2">
                    {selectedItem.type === "sales" ? (
                      <span className={`crm-pill ${selectedItem.active ? "crm-pill-emerald" : "crm-pill-neutral"}`}>
                        {selectedItem.active ? "在职" : "离职"}
                      </span>
                    ) : null}
                  </div>
                </div>

                <div className="crm-section-stack">
                  <h4 className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                    <FileText className="crm-icon-md text-violet-500" />
                    基本信息
                  </h4>
                  <div className="crm-detail-grid text-sm sm:grid-cols-2">
                    {selectedItem.type === "sales" ? (
                      <>
                        <DetailItem label="工号" value={selectedItem.employeeNo || "无"} />
                        <DetailItem label="代表处 / 办事处" value={selectedItem.officeName || "无"} />
                        <DetailItem label="联系方式" value={selectedItem.phone || "无"} icon={<Phone className="h-3 w-3" />} />
                        <DetailItem label="所属部门" value={selectedItem.dept || "无"} />
                        <DetailItem label="所属行业" value={selectedItem.industry || "无"} icon={<Building2 className="h-3 w-3" />} />
                        <DetailItem label="职务" value={selectedItem.title || "无"} />
                        <DetailItem label="合作意向" value={selectedItem.intent || "无"} />
                        <DetailItem label="销售以前是否做过云桌面项目" value={selectedItem.hasExp ? "是" : "否"} />
                        <DetailItem label="销售是否在职" value={selectedItem.active ? "是" : "否"} />
                      </>
                    ) : (
                      <>
                        <DetailItem label="编码" value={selectedItem.channelCode || "无"} />
                        <DetailItem label="省份" value={selectedItem.province || "无"} />
                        <DetailItem label="市" value={selectedItem.city || "无"} />
                        <DetailItem label="汇智内部认证级别" value={selectedItem.certificationLevel || "无"} />
                        <DetailItem label="办公地址" value={selectedItem.officeAddress || "无"} className="sm:col-span-2" />
                        <DetailItem label="聚焦行业" value={selectedItem.channelIndustry || "无"} icon={<Building2 className="h-3 w-3" />} />
                        <DetailItem label={CHANNEL_REVENUE_LABEL} value={selectedItem.revenue || "无"} />
                        <DetailItem label="人员规模" value={`${selectedItem.size ?? 0}人`} />
                        <DetailItem label="建立联系时间" value={selectedItem.establishedDate || "无"} icon={<Calendar className="h-3 w-3" />} />
                        <DetailItem label="合作意向" value={selectedItem.intent || "无"} />
                        <DetailItem label="以前是否做过云桌面项目" value={selectedItem.hasDesktopExp ? "是" : "否"} />
                        <DetailItem label="渠道属性" value={selectedItem.channelAttribute || "无"} />
                        <DetailItem label="新华三内部属性" value={selectedItem.internalAttribute || "无"} />
                      </>
                    )}
                    {selectedItem.type !== "sales" ? <DetailItem label="备注说明" value={selectedItem.notes || "无"} className="sm:col-span-2" /> : null}
                  </div>
                </div>

                {selectedItem.type === "sales" ? (
                  <div className="crm-section-stack">
                    <div className="flex rounded-2xl border border-slate-200 bg-slate-50 p-1 dark:border-slate-800 dark:bg-slate-800/40">
                      <button
                        type="button"
                        onClick={() => setSalesDetailTab("projects")}
                        className={`flex-1 rounded-xl px-4 py-2 text-sm font-medium transition-colors ${
                          salesDetailTab === "projects"
                            ? "bg-white text-violet-600 shadow-sm dark:bg-slate-900 dark:text-violet-400"
                            : "text-slate-500 dark:text-slate-400"
                        }`}
                      >
                        跟进项目
                      </button>
                      <button
                        type="button"
                        onClick={() => setSalesDetailTab("followups")}
                        className={`flex-1 rounded-xl px-4 py-2 text-sm font-medium transition-colors ${
                          salesDetailTab === "followups"
                            ? "bg-white text-violet-600 shadow-sm dark:bg-slate-900 dark:text-violet-400"
                            : "text-slate-500 dark:text-slate-400"
                        }`}
                      >
                        跟进记录
                      </button>
                    </div>

                    {salesDetailTab === "projects" ? (
                      <div className="crm-section-stack">
                        {(selectedItem.relatedProjects?.length ?? 0) > 0 ? (
                          <div className="crm-list-stack">
                            {selectedItem.relatedProjects?.map((project) => (
                              <div
                                key={project.opportunityId}
                                className="crm-detail-grid text-sm sm:grid-cols-3"
                              >
                                <DetailItem label="项目编码" value={project.opportunityCode || "无"} />
                                <DetailItem label="项目名称" value={project.opportunityName || "未命名项目"} />
                                <DetailItem label="项目金额" value={`¥${new Intl.NumberFormat("zh-CN").format(Number(project.amount || 0))}`} />
                              </div>
                            ))}
                          </div>
                        ) : (
                          <div className="crm-empty-panel">
                            暂无关联项目
                          </div>
                        )}
                      </div>
                    ) : (
                      <div className="crm-section-stack">
                        <h4 className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                          <Clock className="crm-icon-md text-violet-500" />
                          跟进记录
                        </h4>
                        {renderFollowUpTimeline()}
                      </div>
                    )}
                  </div>
                ) : (
                  <div className="crm-section-stack">
                    <div className="flex rounded-2xl border border-slate-200 bg-slate-50 p-1 dark:border-slate-800 dark:bg-slate-800/40">
                      <button
                        type="button"
                        onClick={() => setChannelDetailTab("projects")}
                        className={`flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-colors ${
                          channelDetailTab === "projects"
                            ? "bg-white text-violet-600 shadow-sm dark:bg-slate-900 dark:text-violet-400"
                            : "text-slate-500 dark:text-slate-400"
                        }`}
                      >
                        跟进项目
                      </button>
                      <button
                        type="button"
                        onClick={() => setChannelDetailTab("contacts")}
                        className={`flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-colors ${
                          channelDetailTab === "contacts"
                            ? "bg-white text-violet-600 shadow-sm dark:bg-slate-900 dark:text-violet-400"
                            : "text-slate-500 dark:text-slate-400"
                        }`}
                      >
                        人员信息
                      </button>
                      <button
                        type="button"
                        onClick={() => setChannelDetailTab("followups")}
                        className={`flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-colors ${
                          channelDetailTab === "followups"
                            ? "bg-white text-violet-600 shadow-sm dark:bg-slate-900 dark:text-violet-400"
                            : "text-slate-500 dark:text-slate-400"
                        }`}
                      >
                        跟进记录
                      </button>
                    </div>

                    {channelDetailTab === "projects" ? (
                      (selectedItem.relatedProjects?.length ?? 0) > 0 ? (
                        <div className="crm-list-stack">
                          {selectedItem.relatedProjects?.map((project) => (
                            <div
                              key={project.opportunityId}
                              className="crm-detail-grid text-sm sm:grid-cols-3"
                            >
                              <DetailItem label="项目编码" value={project.opportunityCode || "无"} />
                              <DetailItem label="项目名称" value={project.opportunityName || "未命名项目"} />
                              <DetailItem label="项目金额" value={`¥${new Intl.NumberFormat("zh-CN").format(Number(project.amount || 0))}`} />
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div className="crm-empty-panel">
                          暂无关联项目
                        </div>
                      )
                    ) : null}

                    {channelDetailTab === "contacts" ? (
                      (selectedItem.contacts?.length ?? 0) > 0 ? (
                        <div className="space-y-3">
                          {selectedItem.contacts?.map((contact, index) => (
                            <div key={`${contact.name || "contact"}-${index}`} className="grid grid-cols-1 gap-3 rounded-xl border border-slate-100 bg-slate-50/50 p-4 text-sm dark:border-slate-800 dark:bg-slate-800/20 sm:grid-cols-3">
                              <div><p className="mb-1 text-slate-500 dark:text-slate-400">人员姓名</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.name || "无"}</p></div>
                              <div><p className="mb-1 text-slate-500 dark:text-slate-400">联系电话</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.mobile || "无"}</p></div>
                              <div><p className="mb-1 text-slate-500 dark:text-slate-400">职位</p><p className="break-anywhere font-medium text-slate-900 dark:text-white">{contact.title || "无"}</p></div>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div className="crm-empty-panel">
                          暂无人员信息
                        </div>
                      )
                    ) : null}

                    {channelDetailTab === "followups" ? (
                      renderFollowUpTimeline()
                    ) : null}
                  </div>
                )}
              </div>
              </div>

              <div className="w-full shrink-0 border-t border-slate-200/80 bg-slate-50/95 backdrop-blur dark:border-slate-800/80 dark:bg-slate-900/90">
                <div className="px-4 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-4 sm:p-4">
                  {!canEditSelectedItem ? (
                    <p className="mb-3 text-xs text-slate-400 dark:text-slate-500">当前记录非本人创建，仅支持查看详情，不能编辑。</p>
                  ) : null}
                  <div className="grid grid-cols-1 gap-3">
                    <button
                      type="button"
                      onClick={() => void handleOpenEdit()}
                      disabled={!canEditSelectedItem}
                      title={canEditSelectedItem ? "编辑资料" : "仅本人可操作"}
                      className="crm-btn crm-btn-secondary inline-flex h-11 w-full items-center justify-center disabled:cursor-not-allowed disabled:opacity-60"
                    >
                      {canEditSelectedItem ? "编辑资料" : "仅本人可操作"}
                    </button>
                  </div>
                </div>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}

function formatAmount(value: number) {
  return `¥${new Intl.NumberFormat("zh-CN").format(value)}`;
}

function sumRelatedProjectAmount(projects?: Array<{ amount?: number }>) {
  if (!projects || projects.length === 0) {
    return undefined;
  }
  const totalAmount = projects.reduce((sum, project) => sum + Number(project.amount || 0), 0);
  return Number.isFinite(totalAmount) ? totalAmount : undefined;
}

function formatRelatedProjectAmount(projects?: Array<{ amount?: number }>) {
  const totalAmount = sumRelatedProjectAmount(projects);
  if (totalAmount === undefined) {
    return "无";
  }
  return formatAmount(totalAmount);
}

function getExpansionFollowUpSummary(record: {
  type?: string;
  date?: string;
  content?: string;
  visitStartTime?: string;
  evaluationContent?: string;
  nextPlan?: string;
}) {
  const content = record.content || "";
  const parsedVisit = extractFollowUpField(content, "拜访时间");
  const parsedEvaluation = extractFollowUpField(content, "沟通内容");
  const parsedPlan = extractFollowUpField(content, "后续规划");
  const fallbackVisitStartTime = record.type === "工作日报" && record.date
    ? record.date.slice(0, 10)
    : undefined;

  return {
    visitStartTime: normalizeFollowUpDisplayValue(formatFollowUpDateValue(
      pickFollowUpValue(record.visitStartTime, parsedVisit, fallbackVisitStartTime),
    )),
    evaluationContent: normalizeFollowUpDisplayValue(
      pickFollowUpValue(record.evaluationContent, parsedEvaluation),
    ),
    nextPlan: normalizeFollowUpDisplayValue(
      pickFollowUpValue(record.nextPlan, parsedPlan),
    ),
  };
}

function pickFollowUpValue(...values: Array<string | undefined>) {
  return values.find((value) => {
    const normalized = value?.trim();
    return normalized && normalized !== "无";
  });
}

function formatFollowUpDateValue(value?: string) {
  const normalized = value?.trim();
  if (!normalized) {
    return undefined;
  }
  const match = normalized.match(/^(\d{4}-\d{2}-\d{2})/);
  return match ? match[1] : normalized;
}

function extractFollowUpField(content: string, label: string) {
  const normalized = content.replace(/\r/g, "");
  const escapedLabel = label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const match = normalized.match(new RegExp(`${escapedLabel}：([^\\n]+)`));
  return match?.[1]?.trim();
}

function normalizeFollowUpDisplayValue(value?: string) {
  const normalized = value?.trim();
  return normalized ? normalized : "无";
}