import { useEffect, useState, type ReactNode } from "react";
import { Search, Plus, MapPin, Building2, User, Phone, X, Clock, FileText, Mail, Calendar } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import {
  createChannelExpansion,
  createExpansionFollowUp,
  createSalesExpansion,
  getExpansionMeta,
  getExpansionOverview,
  updateChannelExpansion,
  updateSalesExpansion,
  type ChannelExpansionItem,
  type CreateChannelExpansionPayload,
  type CreateExpansionFollowUpPayload,
  type CreateSalesExpansionPayload,
  type DepartmentOption,
  type ExpansionFollowUp,
  type SalesExpansionItem,
} from "@/lib/auth";

type ExpansionItem = SalesExpansionItem | ChannelExpansionItem;
type ExpansionTab = "sales" | "channel";

const defaultSalesForm: CreateSalesExpansionPayload = {
  candidateName: "",
  mobile: "",
  email: "",
  industry: "",
  title: "",
  intentLevel: "medium",
  stage: "initial_contact",
  hasDesktopExp: false,
  inProgress: true,
  employmentStatus: "active",
  expectedJoinDate: "",
  remark: "",
};

const defaultChannelForm: CreateChannelExpansionPayload = {
  channelName: "",
  province: "",
  industry: "",
  contactName: "",
  contactTitle: "",
  contactMobile: "",
  stage: "initial_contact",
  landedFlag: false,
  expectedSignDate: "",
  remark: "",
};

function toDateTimeLocalValue(date = new Date()) {
  const timezoneOffset = date.getTimezoneOffset() * 60000;
  return new Date(date.getTime() - timezoneOffset).toISOString().slice(0, 16);
}

const defaultFollowUpForm: CreateExpansionFollowUpPayload = {
  followUpType: "电话沟通",
  content: "",
  nextAction: "",
  followUpTime: toDateTimeLocalValue(),
};

function ModalShell({
  title,
  subtitle,
  onClose,
  children,
  footer,
}: {
  title: string;
  subtitle: string;
  onClose: () => void;
  children: ReactNode;
  footer: ReactNode;
}) {
  return (
    <>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={onClose}
        className="fixed inset-0 z-[70] bg-slate-900/35 backdrop-blur-sm dark:bg-slate-950/70"
      />
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 20 }}
        className="fixed inset-0 z-[80] p-0 sm:p-6"
      >
        <div className="mx-auto flex h-full w-full items-end 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-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
                <p className="mt-1 text-xs 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 py-4 dark:border-slate-800 sm:px-6">{footer}</div>
          </div>
        </div>
      </motion.div>
    </>
  );
}

export default function Expansion() {
  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 [departments, setDepartments] = useState<DepartmentOption[]>([]);
  const [refreshTick, setRefreshTick] = useState(0);

  const [createOpen, setCreateOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  const [followUpOpen, setFollowUpOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [createError, setCreateError] = useState("");
  const [editError, setEditError] = useState("");
  const [followUpError, setFollowUpError] = useState("");

  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 [followUpForm, setFollowUpForm] = useState<CreateExpansionFollowUpPayload>(defaultFollowUpForm);
  const hasForegroundModal = createOpen || editOpen || followUpOpen;

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

    async function loadMeta() {
      try {
        const data = await getExpansionMeta();
        if (!cancelled) {
          setDepartments(data.departments ?? []);
        }
      } catch {
        if (!cancelled) {
          setDepartments([]);
        }
      }
    }

    void loadMeta();

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

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

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

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

    void loadExpansionData();

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

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

  const handleSalesChange = <K extends keyof CreateSalesExpansionPayload>(key: K, value: CreateSalesExpansionPayload[K]) => {
    setSalesForm((current) => ({ ...current, [key]: value }));
  };

  const handleChannelChange = <K extends keyof CreateChannelExpansionPayload>(key: K, value: CreateChannelExpansionPayload[K]) => {
    setChannelForm((current) => ({ ...current, [key]: value }));
  };

  const handleEditSalesChange = <K extends keyof CreateSalesExpansionPayload>(key: K, value: CreateSalesExpansionPayload[K]) => {
    setEditSalesForm((current) => ({ ...current, [key]: value }));
  };

  const handleEditChannelChange = <K extends keyof CreateChannelExpansionPayload>(key: K, value: CreateChannelExpansionPayload[K]) => {
    setEditChannelForm((current) => ({ ...current, [key]: value }));
  };

  const handleFollowUpChange = <K extends keyof CreateExpansionFollowUpPayload>(key: K, value: CreateExpansionFollowUpPayload[K]) => {
    setFollowUpForm((current) => ({ ...current, [key]: value }));
  };

  const resetCreateState = () => {
    setCreateOpen(false);
    setCreateError("");
    setSalesForm(defaultSalesForm);
    setChannelForm(defaultChannelForm);
  };

  const resetEditState = () => {
    setEditOpen(false);
    setEditError("");
    setEditSalesForm(defaultSalesForm);
    setEditChannelForm(defaultChannelForm);
  };

  const resetFollowUpState = () => {
    setFollowUpOpen(false);
    setFollowUpError("");
    setFollowUpForm({
      ...defaultFollowUpForm,
      followUpTime: toDateTimeLocalValue(),
    });
  };

  const handleOpenCreate = () => {
    setCreateError("");
    setCreateOpen(true);
  };

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

    setEditError("");
    if (selectedItem.type === "sales") {
      setEditSalesForm({
        candidateName: selectedItem.name ?? "",
        mobile: selectedItem.phone === "无" ? "" : selectedItem.phone ?? "",
        email: selectedItem.email === "无" ? "" : selectedItem.email ?? "",
        targetDeptId: selectedItem.targetDeptId,
        industry: selectedItem.industry === "无" ? "" : selectedItem.industry ?? "",
        title: selectedItem.title === "无" ? "" : selectedItem.title ?? "",
        intentLevel: selectedItem.intentLevel ?? "medium",
        stage: selectedItem.stageCode ?? "initial_contact",
        hasDesktopExp: Boolean(selectedItem.hasExp),
        inProgress: Boolean(selectedItem.inProgress),
        employmentStatus: selectedItem.employmentStatus ?? "active",
        expectedJoinDate: selectedItem.expectedJoinDate === "无" ? "" : selectedItem.expectedJoinDate ?? "",
        remark: selectedItem.notes === "无" ? "" : selectedItem.notes ?? "",
      });
    } else {
      setEditChannelForm({
        channelName: selectedItem.name ?? "",
        province: selectedItem.province === "无" ? "" : selectedItem.province ?? "",
        industry: selectedItem.industry === "无" ? "" : selectedItem.industry ?? "",
        annualRevenue: selectedItem.annualRevenue ? Number(selectedItem.annualRevenue) : undefined,
        staffSize: selectedItem.size ?? undefined,
        contactName: selectedItem.contact === "无" ? "" : selectedItem.contact ?? "",
        contactTitle: selectedItem.contactTitle === "无" ? "" : selectedItem.contactTitle ?? "",
        contactMobile: selectedItem.phone === "无" ? "" : selectedItem.phone ?? "",
        stage: selectedItem.stageCode ?? "initial_contact",
        landedFlag: Boolean(selectedItem.landed),
        expectedSignDate: selectedItem.expectedSignDate === "无" ? "" : selectedItem.expectedSignDate ?? "",
        remark: selectedItem.notes === "无" ? "" : selectedItem.notes ?? "",
      });
    }
    setEditOpen(true);
  };

  const handleOpenFollowUp = () => {
    if (!selectedItem) {
      return;
    }
    setFollowUpError("");
    setFollowUpForm({
      followUpType: "电话沟通",
      content: "",
      nextAction: "",
      followUpTime: toDateTimeLocalValue(),
    });
    setFollowUpOpen(true);
  };

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

    setSubmitting(true);
    setCreateError("");

    try {
      if (activeTab === "sales") {
        await createSalesExpansion({
          ...salesForm,
          expectedJoinDate: salesForm.expectedJoinDate || undefined,
          targetDeptId: salesForm.targetDeptId || undefined,
        });
      } else {
        await createChannelExpansion({
          ...channelForm,
          annualRevenue: channelForm.annualRevenue || undefined,
          staffSize: channelForm.staffSize || undefined,
          expectedSignDate: channelForm.expectedSignDate || undefined,
        });
      }

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

  const handleEditSubmit = async () => {
    if (!selectedItem || submitting) {
      return;
    }

    setSubmitting(true);
    setEditError("");

    try {
      if (selectedItem.type === "sales") {
        await updateSalesExpansion(selectedItem.id, {
          ...editSalesForm,
          expectedJoinDate: editSalesForm.expectedJoinDate || undefined,
          targetDeptId: editSalesForm.targetDeptId || undefined,
        });
      } else {
        await updateChannelExpansion(selectedItem.id, {
          ...editChannelForm,
          annualRevenue: editChannelForm.annualRevenue || undefined,
          staffSize: editChannelForm.staffSize || undefined,
          expectedSignDate: editChannelForm.expectedSignDate || undefined,
        });
      }

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

  const handleFollowUpSubmit = async () => {
    if (!selectedItem || submitting) {
      return;
    }

    setSubmitting(true);
    setFollowUpError("");

    try {
      await createExpansionFollowUp(selectedItem.type, selectedItem.id, {
        ...followUpForm,
        nextAction: followUpForm.nextAction || undefined,
        followUpTime: new Date(followUpForm.followUpTime).toISOString(),
      });

      resetFollowUpState();
      setSelectedItem(null);
      setRefreshTick((current) => current + 1);
    } catch (error) {
      setFollowUpError(error instanceof Error ? error.message : "新增跟进失败");
    } finally {
      setSubmitting(false);
    }
  };

  const renderEmpty = () => (
    <div className="rounded-2xl border border-slate-100 bg-white p-10 text-center text-sm text-slate-400 shadow-sm backdrop-blur-sm dark:border-slate-800 dark:bg-slate-900/50 dark:text-slate-500">
      暂无
    </div>
  );

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

  const renderSalesForm = (
    form: CreateSalesExpansionPayload,
    onChange: <K extends keyof CreateSalesExpansionPayload>(key: K, value: CreateSalesExpansionPayload[K]) => void,
  ) => (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">候选人姓名</span>
        <input value={form.candidateName} onChange={(e) => onChange("candidateName", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">联系电话</span>
        <input value={form.mobile} onChange={(e) => onChange("mobile", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2 sm:col-span-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">邮箱</span>
        <input value={form.email} onChange={(e) => onChange("email", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">目标部门</span>
        <select value={form.targetDeptId ?? ""} onChange={(e) => onChange("targetDeptId", e.target.value ? Number(e.target.value) : undefined)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50">
          <option value="">请选择</option>
          {departments.map((dept) => (
            <option key={dept.id} value={dept.id}>
              {dept.name || "无"}
            </option>
          ))}
        </select>
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">负责行业</span>
        <input value={form.industry} onChange={(e) => onChange("industry", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">岗位名称</span>
        <input value={form.title} onChange={(e) => onChange("title", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">意向度</span>
        <select value={form.intentLevel} onChange={(e) => onChange("intentLevel", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50">
          <option value="high">高</option>
          <option value="medium">中</option>
          <option value="low">低</option>
        </select>
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">阶段</span>
        <select value={form.stage} onChange={(e) => onChange("stage", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50">
          <option value="initial_contact">初步沟通</option>
          <option value="solution_discussion">方案交流</option>
          <option value="bidding">招投标</option>
          <option value="business_negotiation">商务谈判</option>
          <option value="won">已成交</option>
          <option value="lost">已放弃</option>
        </select>
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">人员状态</span>
        <select value={form.employmentStatus} onChange={(e) => onChange("employmentStatus", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50">
          <option value="active">在职</option>
          <option value="left">离职</option>
          <option value="joined">已入职</option>
          <option value="abandoned">已放弃</option>
        </select>
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">预计入职</span>
        <input type="date" value={form.expectedJoinDate} onChange={(e) => onChange("expectedJoinDate", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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="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="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.inProgress)} onChange={(e) => onChange("inProgress", 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>
        <textarea rows={4} value={form.remark} onChange={(e) => onChange("remark", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50" />
      </label>
    </div>
  );

  const renderChannelForm = (
    form: CreateChannelExpansionPayload,
    onChange: <K extends keyof CreateChannelExpansionPayload>(key: K, value: CreateChannelExpansionPayload[K]) => void,
  ) => (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <label className="space-y-2 sm:col-span-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">渠道名称</span>
        <input value={form.channelName} onChange={(e) => onChange("channelName", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">省份</span>
        <input value={form.province} onChange={(e) => onChange("province", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">行业</span>
        <input value={form.industry} onChange={(e) => onChange("industry", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">年营收</span>
        <input type="number" value={form.annualRevenue ?? ""} onChange={(e) => onChange("annualRevenue", e.target.value ? Number(e.target.value) : undefined)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">公司人数</span>
        <input type="number" value={form.staffSize ?? ""} onChange={(e) => onChange("staffSize", e.target.value ? Number(e.target.value) : undefined)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">联系人</span>
        <input value={form.contactName} onChange={(e) => onChange("contactName", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">联系人职务</span>
        <input value={form.contactTitle} onChange={(e) => onChange("contactTitle", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">联系电话</span>
        <input value={form.contactMobile} onChange={(e) => onChange("contactMobile", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">阶段</span>
        <select value={form.stage} onChange={(e) => onChange("stage", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50">
          <option value="initial_contact">初步接触</option>
          <option value="solution_discussion">方案交流</option>
          <option value="business_negotiation">合作洽谈</option>
          <option value="bidding">招投标</option>
          <option value="won">已合作</option>
          <option value="lost">已终止</option>
        </select>
      </label>
      <label className="space-y-2">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">预计签约</span>
        <input type="date" value={form.expectedSignDate} onChange={(e) => onChange("expectedSignDate", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3 sm:col-span-2 dark:border-slate-800">
        <span className="text-sm font-medium text-slate-700 dark:text-slate-300">是否已落地</span>
        <input type="checkbox" checked={Boolean(form.landedFlag)} onChange={(e) => onChange("landedFlag", 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>
        <textarea rows={4} value={form.remark} onChange={(e) => onChange("remark", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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="space-y-6">
      <header className="flex items-center justify-between gap-3">
        <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">拓展管理</h1>
        <button
          onClick={handleOpenCreate}
          className="flex items-center gap-2 rounded-xl bg-violet-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-violet-700 active:scale-95"
        >
          <Plus className="h-4 w-4" />
          <span className="hidden sm:inline">新增</span>
        </button>
      </header>

      <div className="flex rounded-xl border border-slate-200/50 bg-slate-100 p-1 backdrop-blur-sm dark:border-slate-800/50 dark:bg-slate-900/50">
        <button
          onClick={() => handleTabChange("sales")}
          className={`flex-1 rounded-lg py-2 text-sm font-medium transition-all 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-all 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)}
          className="w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50 dark:text-white dark:placeholder:text-slate-500"
        />
      </div>

      <div className="space-y-4">
        {activeTab === "sales" ? (
          salesData.length > 0 ? (
            salesData.map((item, i) => (
              <motion.div
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.05 }}
                key={item.id}
                onClick={() => setSelectedItem(item)}
                className="cursor-pointer rounded-2xl border border-slate-100 bg-white p-5 shadow-sm backdrop-blur-sm transition-all hover:border-violet-100 hover:shadow-md dark:border-slate-800 dark:bg-slate-900/50 dark:hover:border-violet-900/50"
              >
                <div className="flex items-start justify-between">
                  <div>
                    <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{item.name || "无"}</h3>
                    <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{item.dept || "无"} · {item.title || "无"}</p>
                  </div>
                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${item.active ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400" : "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300"}`}>
                    {item.active ? "在职" : "离职"}
                  </span>
                </div>
                <div className="mt-4 grid grid-cols-2 gap-y-3 text-sm">
                  <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                    <Building2 className="h-4 w-4 text-slate-400 dark:text-slate-500" />
                    {item.industry || "无"}
                  </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={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>
                    {item.stage || "无"}
                  </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>
                    {item.hasExp ? "有" : "无"}
                  </div>
                </div>
                <div className="mt-4 flex justify-end border-t border-slate-50 pt-3 dark:border-slate-800/50">
                  <button className="text-sm font-medium text-violet-600 transition-colors hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300">查看详情与跟进</button>
                </div>
              </motion.div>
            ))
          ) : renderEmpty()
        ) : channelData.length > 0 ? (
          channelData.map((item, i) => (
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.05 }}
              key={item.id}
              onClick={() => setSelectedItem(item)}
              className="cursor-pointer rounded-2xl border border-slate-100 bg-white p-5 shadow-sm backdrop-blur-sm transition-all hover:border-violet-100 hover:shadow-md dark:border-slate-800 dark:bg-slate-900/50 dark:hover:border-violet-900/50"
            >
              <div className="flex items-start justify-between">
                <div>
                  <h3 className="text-lg font-semibold text-slate-900 dark:text-white">{item.name || "无"}</h3>
                  <div className="mt-1 flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
                    <MapPin className="h-3.5 w-3.5" />
                    {item.province || "无"}
                  </div>
                </div>
                <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${item.landed ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400" : "bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400"}`}>
                  {item.landed ? "已落地" : "未落地"}
                </span>
              </div>
              <div className="mt-4 grid grid-cols-2 gap-y-3 text-sm">
                <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <Building2 className="h-4 w-4 text-slate-400 dark:text-slate-500" />
                  {item.industry || "无"}
                </div>
                <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <User className="h-4 w-4 text-slate-400 dark:text-slate-500" />
                  {item.contact || "无"}
                </div>
                <div className="col-span-2 flex items-center gap-2 text-slate-600 dark:text-slate-300">
                  <Phone className="h-4 w-4 text-slate-400 dark:text-slate-500" />
                  {item.phone || "无"}
                </div>
                <div className="col-span-2 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.stage || "无"}</span>
                </div>
              </div>
              <div className="mt-4 flex justify-end border-t border-slate-50 pt-3 dark:border-slate-800/50">
                <button className="text-sm font-medium text-violet-600 transition-colors hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300">查看详情与跟进</button>
              </div>
            </motion.div>
          ))
        ) : renderEmpty()}
      </div>

      <AnimatePresence>
        {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="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700">取消</button>
                <button onClick={() => void handleCreateSubmit()} disabled={submitting} className="rounded-xl bg-violet-600 px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-violet-700 disabled:cursor-not-allowed disabled:opacity-60">{submitting ? "提交中..." : "确认新增"}</button>
              </div>
            )}
          >
            {activeTab === "sales" ? renderSalesForm(salesForm, handleSalesChange) : renderChannelForm(channelForm, handleChannelChange)}
            {createError ? <div className="mt-4 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-600 dark:border-rose-900/50 dark:bg-rose-500/10 dark:text-rose-300">{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="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700">取消</button>
                <button onClick={() => void handleEditSubmit()} disabled={submitting} className="rounded-xl bg-violet-600 px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-violet-700 disabled:cursor-not-allowed disabled:opacity-60">{submitting ? "保存中..." : "保存修改"}</button>
              </div>
            )}
          >
            {selectedItem.type === "sales" ? renderSalesForm(editSalesForm, handleEditSalesChange) : renderChannelForm(editChannelForm, handleEditChannelChange)}
            {editError ? <div className="mt-4 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-600 dark:border-rose-900/50 dark:bg-rose-500/10 dark:text-rose-300">{editError}</div> : null}
          </ModalShell>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {followUpOpen && selectedItem && (
          <ModalShell
            title="新增跟进"
            subtitle="仅允许为当前登录人名下的拓展对象写入跟进记录。"
            onClose={resetFollowUpState}
            footer={(
              <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
                <button onClick={resetFollowUpState} className="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700">取消</button>
                <button onClick={() => void handleFollowUpSubmit()} disabled={submitting} className="rounded-xl bg-violet-600 px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-violet-700 disabled:cursor-not-allowed disabled:opacity-60">{submitting ? "提交中..." : "确认提交"}</button>
              </div>
            )}
          >
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <label className="space-y-2">
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">跟进类型</span>
                <select value={followUpForm.followUpType} onChange={(e) => handleFollowUpChange("followUpType", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50">
                  <option value="电话沟通">电话沟通</option>
                  <option value="拜访面谈">拜访面谈</option>
                  <option value="微信触达">微信触达</option>
                  <option value="方案沟通">方案沟通</option>
                  <option value="其他">其他</option>
                </select>
              </label>
              <label className="space-y-2">
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">跟进时间</span>
                <input type="datetime-local" value={followUpForm.followUpTime} onChange={(e) => handleFollowUpChange("followUpTime", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2 sm:col-span-2">
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">跟进内容</span>
                <textarea rows={5} value={followUpForm.content} onChange={(e) => handleFollowUpChange("content", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm 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-2 sm:col-span-2">
                <span className="text-sm font-medium text-slate-700 dark:text-slate-300">下一步动作</span>
                <input value={followUpForm.nextAction} onChange={(e) => handleFollowUpChange("nextAction", e.target.value)} className="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50" />
              </label>
            </div>
            {followUpError ? <div className="mt-4 rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-600 dark:border-rose-900/50 dark:bg-rose-500/10 dark:text-rose-300">{followUpError}</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 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-md 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-lg font-semibold text-slate-900 dark:text-white">{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="h-5 w-5" />
                </button>
              </div>

              <div className="flex-1 space-y-8 overflow-y-auto px-5 py-5 sm:px-6">
                <div>
                  <h3 className="text-xl font-bold text-slate-900 dark:text-white">{selectedItem.name || "无"}</h3>
                  <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                    {selectedItem.type === "sales"
                      ? `${selectedItem.dept || "无"} · ${selectedItem.title || "无"}`
                      : `${selectedItem.province || "无"} · ${selectedItem.industry || "无"}`}
                  </p>
                  <div className="mt-3 flex gap-2">
                    <span className="rounded-full bg-violet-50 px-2.5 py-1 text-xs font-medium text-violet-600 dark:bg-violet-500/10 dark:text-violet-400">
                      {selectedItem.stage || "无"}
                    </span>
                    {selectedItem.type === "sales" ? (
                      <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${selectedItem.active ? "bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400" : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400"}`}>
                        {selectedItem.active ? "在职" : "离职"}
                      </span>
                    ) : (
                      <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${selectedItem.landed ? "bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400" : "bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400"}`}>
                        {selectedItem.landed ? "已落地" : "未落地"}
                      </span>
                    )}
                  </div>
                </div>

                <div className="space-y-3">
                  <h4 className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                    <FileText className="h-4 w-4 text-violet-500" />
                    基本信息
                  </h4>
                  <div className="grid grid-cols-2 gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-4 text-sm dark:border-slate-800 dark:bg-slate-800/20">
                    {selectedItem.type === "sales" ? (
                      <>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 flex items-center gap-1 text-slate-500 dark:text-slate-400"><Phone className="h-3 w-3" /> 联系电话</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.phone || "无"}</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 flex items-center gap-1 text-slate-500 dark:text-slate-400"><Mail className="h-3 w-3" /> 邮箱</p><p className="truncate font-medium text-slate-900 dark:text-white" title={selectedItem.email}>{selectedItem.email || "无"}</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 flex items-center gap-1 text-slate-500 dark:text-slate-400"><Building2 className="h-3 w-3" /> 负责行业</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.industry || "无"}</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 text-slate-500 dark:text-slate-400">云桌面经验</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.hasExp ? "有" : "无"}</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 text-slate-500 dark:text-slate-400">意向度</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.intent || "无"}</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 flex items-center gap-1 text-slate-500 dark:text-slate-400"><Calendar className="h-3 w-3" /> 预计入职</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.expectedJoinDate || "无"}</p></div>
                      </>
                    ) : (
                      <>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 flex items-center gap-1 text-slate-500 dark:text-slate-400"><User className="h-3 w-3" /> 联系人</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.contact || "无"} ({selectedItem.contactTitle || "无"})</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 flex items-center gap-1 text-slate-500 dark:text-slate-400"><Phone className="h-3 w-3" /> 联系电话</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.phone || "无"}</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 text-slate-500 dark:text-slate-400">营收规模</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.revenue || "无"}</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 text-slate-500 dark:text-slate-400">公司人数</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.size ?? 0}人</p></div>
                        <div className="col-span-2 sm:col-span-1"><p className="mb-1 flex items-center gap-1 text-slate-500 dark:text-slate-400"><Calendar className="h-3 w-3" /> 预计签约</p><p className="font-medium text-slate-900 dark:text-white">{selectedItem.expectedSignDate || "无"}</p></div>
                      </>
                    )}
                    <div className="col-span-2"><p className="mb-1 text-slate-500 dark:text-slate-400">备注说明</p><p className="leading-relaxed font-medium text-slate-900 dark:text-white">{selectedItem.notes || "无"}</p></div>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <h4 className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
                      <Clock className="h-4 w-4 text-violet-500" />
                      跟进记录
                    </h4>
                    <button onClick={handleOpenFollowUp} className="text-xs font-medium text-violet-600 hover:text-violet-700 dark:text-violet-400">
                      添加记录
                    </button>
                  </div>
                  {followUpRecords.length > 0 ? (
                    <div className="relative space-y-6 border-l-2 border-slate-100 pl-4 dark:border-slate-800">
                      {followUpRecords.map((record) => (
                        <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="mb-2 flex items-center justify-between">
                              <span className="rounded bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-600 dark:bg-violet-500/10 dark:text-violet-400">{record.type || "无"}</span>
                              <span className="text-xs text-slate-400">{record.date || "无"}</span>
                            </div>
                            <p className="text-sm leading-relaxed text-slate-700 dark:text-slate-300">{record.content || "无"}</p>
                            <p className="mt-2 text-xs text-slate-400">跟进人: {record.user || "无"}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="rounded-xl border border-slate-100 bg-slate-50/50 p-6 text-center text-sm text-slate-400 dark:border-slate-800 dark:bg-slate-800/20 dark:text-slate-500">
                      暂无
                    </div>
                  )}
                </div>
              </div>

              <div className="sticky bottom-0 bg-slate-50/95 p-4 backdrop-blur sm:static dark:bg-slate-900/90">
                <div className="flex flex-col gap-3 sm:flex-row">
                  <button onClick={handleOpenEdit} className="flex-1 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700">
                    编辑资料
                  </button>
                  <button onClick={handleOpenFollowUp} className="flex-1 rounded-xl bg-violet-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-violet-700">
                    写跟进
                  </button>
                </div>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  );
}