import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  completeEmployeeChecklistTask,
  createEmployeeContract,
  fetchEmployeeContracts,
  fetchEmployeeProfile,
  patchEmployeeContract,
  patchEmployeeProfile,
  regularizeEmployee,
  skipEmployeeChecklistTask,
  startEmployeeOffboarding,
  transferEmployee,
  uploadEmployeeAvatar,
  type EmployeeContract,
  type EmployeeContractType,
} from "../api/employees";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { EmployeeAvatar } from "../components/common/EmployeeAvatar";
import { PageHeader } from "../components/common/PageHeader";
import { StatusBadge } from "../components/common/StatusBadge";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
import { Textarea } from "../components/ui/textarea";
import { toast } from "sonner";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";

type ProfileTab = "profile" | "contracts";

type ContractFormState = {
  contractNo: string;
  contractType: EmployeeContractType;
  startDate: string;
  endDate: string;
  terminatedDate: string;
  attachmentPath: string;
};

const CONTRACT_TYPE_OPTIONS: Array<{ value: EmployeeContractType; label: string }> = [
  { value: "labor", label: "劳动合同" },
  { value: "nda", label: "保密协议" },
  { value: "non_compete", label: "竞业限制" },
  { value: "internship", label: "实习协议" },
];

function errorMessage(error: unknown, fallback: string) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  return error instanceof Error ? error.message : fallback;
}

function buildEmptyContractForm(): ContractFormState {
  return {
    contractNo: "",
    contractType: "labor",
    startDate: "",
    endDate: "",
    terminatedDate: "",
    attachmentPath: "",
  };
}

function contractTypeLabel(type: EmployeeContractType) {
  return CONTRACT_TYPE_OPTIONS.find((item) => item.value === type)?.label ?? type;
}

export function EmployeeProfilePage() {
  const { employeeId = "" } = useParams();
  const { permissions, me } = useAuth();
  const queryClient = useQueryClient();
  const profileQuery = useQuery({
    enabled: Boolean(employeeId),
    queryKey: ["employee-profile", employeeId],
    queryFn: () => fetchEmployeeProfile(employeeId),
  });
  const canManageEmployeeProfile = hasPermission(permissions, "system.users");
  const canEditSelfProfile = me?.id === employeeId;
  const canEditBaseFields = canManageEmployeeProfile || canEditSelfProfile;
  const canEditExtendedFields = canManageEmployeeProfile;
  const canUploadAvatar = canManageEmployeeProfile || canEditSelfProfile;
  const [activeTab, setActiveTab] = useState<ProfileTab>("profile");
  const [avatarFile, setAvatarFile] = useState<File | null>(null);
  const [avatarInputKey, setAvatarInputKey] = useState(0);
  const [editingContractId, setEditingContractId] = useState<string | null>(null);
  const [contractForm, setContractForm] = useState<ContractFormState>(buildEmptyContractForm());
  const [form, setForm] = useState({
    title: "",
    hireDate: "",
    probationEndDate: "",
    lastWorkingDate: "",
    workLocation: "",
    emergencyContactName: "",
    emergencyContactPhone: "",
    notes: "",
  });

  const contractsQuery = useQuery({
    enabled: Boolean(employeeId) && canManageEmployeeProfile,
    queryKey: ["employee-contracts", employeeId],
    queryFn: () => fetchEmployeeContracts(employeeId),
  });

  useEffect(() => {
    if (!profileQuery.data) {
      return;
    }
    setForm({
      title: profileQuery.data.employee.title ?? "",
      hireDate: profileQuery.data.employee.hireDate ?? "",
      probationEndDate: profileQuery.data.employee.probationEndDate ?? "",
      lastWorkingDate: profileQuery.data.employee.lastWorkingDate ?? "",
      workLocation: profileQuery.data.employee.workLocation ?? "",
      emergencyContactName: profileQuery.data.employee.emergencyContactName ?? "",
      emergencyContactPhone: profileQuery.data.employee.emergencyContactPhone ?? "",
      notes: profileQuery.data.employee.notes ?? "",
    });
  }, [profileQuery.data]);

  useEffect(() => {
    if (canManageEmployeeProfile || activeTab !== "contracts") {
      return;
    }
    setActiveTab("profile");
  }, [activeTab, canManageEmployeeProfile]);

  useEffect(() => {
    setAvatarFile(null);
    setAvatarInputKey((current) => current + 1);
    setEditingContractId(null);
    setContractForm(buildEmptyContractForm());
  }, [employeeId]);

  const saveMutation = useMutation({
    mutationFn: () =>
      patchEmployeeProfile(employeeId, {
        ...(canEditExtendedFields
          ? {
              ...(form.title.trim() ? { title: form.title.trim() } : {}),
              hireDate: form.hireDate || null,
              probationEndDate: form.probationEndDate || null,
              lastWorkingDate: form.lastWorkingDate || null,
            }
          : {}),
        ...(canEditBaseFields
          ? {
              workLocation: form.workLocation,
              emergencyContactName: form.emergencyContactName,
              emergencyContactPhone: form.emergencyContactPhone,
              notes: form.notes,
            }
          : {}),
      }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["employee-profile", employeeId] });
      toast.success("档案已保存");
    },
    onError: (error) => toast.error(errorMessage(error, "保存失败")),
  });

  const avatarMutation = useMutation({
    mutationFn: async () => {
      if (!avatarFile) {
        throw new Error("请先选择头像文件");
      }
      return uploadEmployeeAvatar(employeeId, avatarFile);
    },
    onSuccess: async () => {
      setAvatarFile(null);
      setAvatarInputKey((current) => current + 1);
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["employee-profile", employeeId] }),
        queryClient.invalidateQueries({ queryKey: ["employees"] }),
        queryClient.invalidateQueries({ queryKey: ["presence"] }),
        queryClient.invalidateQueries({ queryKey: ["employee-organization"] }),
      ]);
      toast.success("头像已更新");
    },
    onError: (error) => toast.error(errorMessage(error, "头像上传失败")),
  });

  const taskMutation = useMutation({
    mutationFn: ({ taskId, action }: { taskId: string; action: "complete" | "skip" }) =>
      action === "complete"
        ? completeEmployeeChecklistTask(employeeId, taskId)
        : skipEmployeeChecklistTask(employeeId, taskId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["employee-profile", employeeId] });
      toast.success("清单已更新");
    },
    onError: (error) => toast.error(errorMessage(error, "更新清单失败")),
  });

  const regularizeMutation = useMutation({
    mutationFn: () => regularizeEmployee(employeeId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["employee-profile", employeeId] });
      toast.success("已转正");
    },
    onError: (error) => toast.error(errorMessage(error, "转正失败")),
  });

  const transferMutation = useMutation({
    mutationFn: () => transferEmployee(employeeId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["employee-profile", employeeId] });
      toast.success("已记录调岗事件");
    },
    onError: (error) => toast.error(errorMessage(error, "调岗失败")),
  });

  const offboardingMutation = useMutation({
    mutationFn: () => startEmployeeOffboarding(employeeId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["employee-profile", employeeId] });
      toast.success("已发起离职");
    },
    onError: (error) => toast.error(errorMessage(error, "离职失败")),
  });

  const contractMutation = useMutation({
    mutationFn: async () => {
      const payload = {
        contractNo: contractForm.contractNo.trim(),
        contractType: contractForm.contractType,
        startDate: contractForm.startDate,
        endDate: contractForm.endDate,
        terminatedDate: contractForm.terminatedDate || null,
        attachmentPath: contractForm.attachmentPath.trim() ? contractForm.attachmentPath.trim() : null,
      };

      if (editingContractId) {
        return patchEmployeeContract(employeeId, editingContractId, payload);
      }
      return createEmployeeContract(employeeId, payload);
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["employee-contracts", employeeId] });
      setEditingContractId(null);
      setContractForm(buildEmptyContractForm());
      toast.success(editingContractId ? "合同已更新" : "合同已新增");
    },
    onError: (error) => toast.error(errorMessage(error, editingContractId ? "更新合同失败" : "新增合同失败")),
  });

  if (profileQuery.isLoading) {
    return <div className="card-std p-6 text-sm text-zinc-500">加载员工档案中...</div>;
  }

  if (profileQuery.isError || !profileQuery.data) {
    return <div className="card-std p-6 text-sm text-red-600">{errorMessage(profileQuery.error, "加载员工档案失败")}</div>;
  }

  const profile = profileQuery.data;
  const reportingChain = profile.organization.reportingChain.length
    ? profile.organization.reportingChain
    : [
        {
          id: profile.employee.id,
          employeeNo: profile.employee.employeeNo,
          name: profile.employee.name,
          title: profile.employee.title,
          status: profile.employee.status,
          avatarUrl: profile.employee.avatarUrl,
          department: profile.employee.department,
        },
      ];
  const directReports = profile.organization.directReports;
  const contracts = contractsQuery.data?.items ?? [];

  function resetContractEditor() {
    setEditingContractId(null);
    setContractForm(buildEmptyContractForm());
  }

  function startEditingContract(contract: EmployeeContract) {
    setEditingContractId(contract.id);
    setContractForm({
      contractNo: contract.contractNo,
      contractType: contract.contractType,
      startDate: contract.startDate ?? "",
      endDate: contract.endDate ?? "",
      terminatedDate: contract.terminatedDate ?? "",
      attachmentPath: contract.attachmentPath ?? "",
    });
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title={`${profile.employee.name} 档案`}
        subtitle={`${profile.employee.employeeNo} · ${profile.employee.title}`}
        actions={
          canManageEmployeeProfile ? (
            <div className="flex flex-wrap gap-2">
              <Button type="button" variant="secondary" onClick={() => regularizeMutation.mutate()} disabled={regularizeMutation.isPending}>
                转正
              </Button>
              <Button type="button" variant="secondary" onClick={() => transferMutation.mutate()} disabled={transferMutation.isPending}>
                记录调岗
              </Button>
              <Button type="button" onClick={() => offboardingMutation.mutate()} disabled={offboardingMutation.isPending}>
                发起离职
              </Button>
            </div>
          ) : null
        }
      />

      <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as ProfileTab)}>
        <TabsList className="flex w-full flex-wrap justify-start gap-1">
          <TabsTrigger value="profile">档案</TabsTrigger>
          {canManageEmployeeProfile ? <TabsTrigger value="contracts">合同</TabsTrigger> : null}
        </TabsList>

        <TabsContent value="profile" className="space-y-6">
          <div className="grid gap-6 xl:grid-cols-3">
            <div className="card-std space-y-6 p-6 xl:col-span-2">
              <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                <div className="flex items-center gap-4">
                  <EmployeeAvatar name={profile.employee.name} src={profile.employee.avatarUrl} size="xl" />
                  <div>
                    <div className="text-xl font-semibold text-zinc-900">{profile.employee.name}</div>
                    <div className="mt-1 text-sm text-zinc-500">
                      {profile.employee.employeeNo} · {profile.employee.email}
                    </div>
                    <div className="mt-3 flex flex-wrap gap-2">
                      <StatusBadge status={profile.employee.status} />
                      <StatusBadge status={profile.employee.employmentStatus} />
                    </div>
                  </div>
                </div>

                {canUploadAvatar ? (
                  <div className="w-full max-w-sm space-y-2">
                    <label className="text-sm text-zinc-500">头像上传</label>
                    <Input
                      key={avatarInputKey}
                      type="file"
                      accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                      onChange={(event) => setAvatarFile(event.target.files?.[0] ?? null)}
                    />
                    <div className="flex flex-wrap items-center gap-2">
                      <Button type="button" variant="secondary" onClick={() => avatarMutation.mutate()} disabled={!avatarFile || avatarMutation.isPending}>
                        {avatarMutation.isPending ? "上传中..." : "上传头像"}
                      </Button>
                      <div className="text-xs text-zinc-500">支持 jpg/png/webp，最大 2MB，自动裁剪为 200x200</div>
                    </div>
                  </div>
                ) : null}
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <div className="text-sm text-zinc-500">部门 / 上级</div>
                  <div className="mt-2 text-sm text-zinc-900">
                    {profile.employee.department?.name ?? "-"} / {profile.employee.directManager?.name ?? "-"}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-zinc-500">手机 / 邮箱</div>
                  <div className="mt-2 text-sm text-zinc-900">
                    {profile.employee.phone} / {profile.employee.email}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-zinc-500">入职 / 试用期</div>
                  <div className="mt-2 text-sm text-zinc-900">
                    {profile.employee.hireDate ?? "-"} / {profile.employee.probationEndDate ?? "-"}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-zinc-500">离职日期</div>
                  <div className="mt-2 text-sm text-zinc-900">{profile.employee.lastWorkingDate ?? "-"}</div>
                </div>
              </div>

              {canEditExtendedFields ? (
                <div className="grid gap-4 md:grid-cols-2">
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">职位</label>
                    <Input value={form.title} onChange={(event) => setForm((prev) => ({ ...prev, title: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">入职日期</label>
                    <Input type="date" value={form.hireDate} onChange={(event) => setForm((prev) => ({ ...prev, hireDate: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">试用期截止</label>
                    <Input type="date" value={form.probationEndDate} onChange={(event) => setForm((prev) => ({ ...prev, probationEndDate: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">离职日期</label>
                    <Input type="date" value={form.lastWorkingDate} onChange={(event) => setForm((prev) => ({ ...prev, lastWorkingDate: event.target.value }))} />
                  </div>
                </div>
              ) : null}

              {canEditBaseFields ? (
                <div className="grid gap-4 md:grid-cols-2">
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">办公地点</label>
                    <Input value={form.workLocation} onChange={(event) => setForm((prev) => ({ ...prev, workLocation: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">紧急联系人</label>
                    <Input value={form.emergencyContactName} onChange={(event) => setForm((prev) => ({ ...prev, emergencyContactName: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">紧急联系电话</label>
                    <Input value={form.emergencyContactPhone} onChange={(event) => setForm((prev) => ({ ...prev, emergencyContactPhone: event.target.value }))} />
                  </div>
                </div>
              ) : (
                <div className="grid gap-4 md:grid-cols-2">
                  <div>
                    <div className="text-sm text-zinc-500">办公地点</div>
                    <div className="mt-2 text-sm text-zinc-900">{profile.employee.workLocation ?? "-"}</div>
                  </div>
                  <div>
                    <div className="text-sm text-zinc-500">紧急联系人</div>
                    <div className="mt-2 text-sm text-zinc-900">{profile.employee.emergencyContactName ?? "-"}</div>
                  </div>
                  <div>
                    <div className="text-sm text-zinc-500">紧急联系电话</div>
                    <div className="mt-2 text-sm text-zinc-900">{profile.employee.emergencyContactPhone ?? "-"}</div>
                  </div>
                </div>
              )}

              {canEditBaseFields ? (
                <div className="grid gap-2">
                  <label className="text-sm text-zinc-500">备注</label>
                  <Textarea value={form.notes} onChange={(event) => setForm((prev) => ({ ...prev, notes: event.target.value }))} />
                </div>
              ) : (
                <div>
                  <div className="text-sm text-zinc-500">备注</div>
                  <div className="mt-2 whitespace-pre-wrap text-sm text-zinc-900">{profile.employee.notes ?? "-"}</div>
                </div>
              )}

              {canEditBaseFields ? (
                <div className="flex justify-end">
                  <Button type="button" onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}>
                    保存档案
                  </Button>
                </div>
              ) : null}
            </div>

            <div className="space-y-6">
              <div className="card-std space-y-4 p-6">
                <h3 className="text-base font-semibold text-zinc-900">离职阻塞项</h3>
                <div className="rounded-lg border border-zinc-200 p-3 text-sm">
                  资产未归还：<span className="font-medium text-zinc-900">{profile.lifecycle.blockers.openAssetCount}</span>
                </div>
                <div className="rounded-lg border border-zinc-200 p-3 text-sm">
                  待办审批任务：<span className="font-medium text-zinc-900">{profile.lifecycle.blockers.pendingWorkflowTaskCount}</span>
                </div>
                <div className="rounded-lg border border-zinc-200 p-3 text-sm">
                  可完成离职：<span className="font-medium text-zinc-900">{profile.lifecycle.blockers.canCompleteOffboarding ? "是" : "否"}</span>
                </div>
              </div>

              <div className="card-std p-6">
                <h3 className="text-base font-semibold text-zinc-900">汇报链</h3>
                <div className="mt-4 space-y-3">
                  {reportingChain.map((item, index) => (
                    <div key={item.id} className="rounded-lg border border-zinc-200 p-3 text-sm">
                      <div className="flex items-center justify-between gap-3">
                        <div className="flex items-center gap-3">
                          <EmployeeAvatar name={item.name} src={item.avatarUrl} size="sm" />
                          <div>
                            <div className="font-medium text-zinc-900">{item.name}</div>
                            <div className="mt-1 text-zinc-500">
                              {item.employeeNo} · {item.title} · {item.department?.name ?? "-"}
                            </div>
                          </div>
                        </div>
                        <StatusBadge status={item.status} />
                      </div>
                      {index === reportingChain.length - 1 ? <div className="mt-2 text-xs text-zinc-500">当前员工</div> : null}
                    </div>
                  ))}
                </div>
              </div>

              <div className="card-std p-6">
                <h3 className="text-base font-semibold text-zinc-900">直属下级</h3>
                <div className="mt-4 space-y-3">
                  {directReports.length ? (
                    directReports.map((item) => (
                      <div key={item.id} className="rounded-lg border border-zinc-200 p-3 text-sm">
                        <div className="flex items-center justify-between gap-3">
                          <div className="flex items-center gap-3">
                            <EmployeeAvatar name={item.name} src={item.avatarUrl} size="sm" />
                            <div>
                              <div className="font-medium text-zinc-900">{item.name}</div>
                              <div className="mt-1 text-zinc-500">
                                {item.employeeNo} · {item.title} · {item.department?.name ?? "-"}
                              </div>
                            </div>
                          </div>
                          <StatusBadge status={item.status} />
                        </div>
                      </div>
                    ))
                  ) : (
                    <div className="text-sm text-zinc-500">暂无直属下级</div>
                  )}
                </div>
              </div>
            </div>
          </div>

          <div className="grid gap-6 xl:grid-cols-2">
            <div className="card-std p-6">
              <h3 className="text-base font-semibold text-zinc-900">生命周期事件</h3>
              <div className="mt-4 space-y-3">
                {profile.lifecycle.events.length ? (
                  profile.lifecycle.events.map((item) => (
                    <div key={item.id} className="rounded-lg border border-zinc-200 p-3 text-sm">
                      <div className="font-medium text-zinc-900">{item.eventType}</div>
                      <div className="mt-1 text-zinc-500">生效日期：{item.effectiveDate ?? "-"}</div>
                    </div>
                  ))
                ) : (
                  <div className="text-sm text-zinc-500">暂无生命周期事件</div>
                )}
              </div>
            </div>

            <div className="card-std p-6">
              <h3 className="text-base font-semibold text-zinc-900">名下资产</h3>
              <div className="mt-4 space-y-3">
                {profile.assignedAssets.length ? (
                  profile.assignedAssets.map((item) => (
                    <div key={item.id} className="rounded-lg border border-zinc-200 p-3 text-sm">
                      <div className="font-medium text-zinc-900">
                        {item.assetNo} · {item.name}
                      </div>
                      <div className="mt-1 text-zinc-500">位置：{item.location ?? "-"} · 状态：{item.status}</div>
                    </div>
                  ))
                ) : (
                  <div className="text-sm text-zinc-500">当前无挂名资产</div>
                )}
              </div>
            </div>
          </div>

          <div className="card-std p-6">
            <h3 className="text-base font-semibold text-zinc-900">Checklist</h3>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>场景</TableHead>
                  <TableHead>任务</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {profile.lifecycle.checklistTasks.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell>{item.scene}</TableCell>
                    <TableCell>{item.title}</TableCell>
                    <TableCell>
                      <StatusBadge status={item.status} />
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button
                          size="sm"
                          type="button"
                          disabled={taskMutation.isPending || item.status !== "pending"}
                          onClick={() => taskMutation.mutate({ taskId: item.id, action: "complete" })}
                        >
                          完成
                        </Button>
                        <Button
                          size="sm"
                          variant="secondary"
                          type="button"
                          disabled={taskMutation.isPending || item.status !== "pending"}
                          onClick={() => taskMutation.mutate({ taskId: item.id, action: "skip" })}
                        >
                          跳过
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

        {canManageEmployeeProfile ? (
          <TabsContent value="contracts" className="space-y-6">
            {contractsQuery.isError ? (
              <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
                {errorMessage(contractsQuery.error, "加载合同失败")}
              </div>
            ) : null}

            <div className="grid gap-6 xl:grid-cols-[1.2fr,0.8fr]">
              <div className="card-std p-6">
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <div>
                    <h3 className="text-base font-semibold text-zinc-900">合同列表</h3>
                    <div className="mt-1 text-sm text-zinc-500">状态由终止日期与结束日期自动推导，本轮仅支持新增与编辑。</div>
                  </div>
                  <div className="text-sm text-zinc-500">{contracts.length} 份合同</div>
                </div>

                <div className="mt-4">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>合同编号</TableHead>
                        <TableHead>类型</TableHead>
                        <TableHead>状态</TableHead>
                        <TableHead>日期</TableHead>
                        <TableHead>附件路径</TableHead>
                        <TableHead>操作</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {contracts.length ? (
                        contracts.map((contract) => (
                          <TableRow key={contract.id}>
                            <TableCell>{contract.contractNo}</TableCell>
                            <TableCell>{contractTypeLabel(contract.contractType)}</TableCell>
                            <TableCell>
                              <StatusBadge status={contract.status} />
                            </TableCell>
                            <TableCell>
                              <div>{contract.startDate ?? "-"} ~ {contract.endDate ?? "-"}</div>
                              <div className="text-xs text-zinc-500">终止：{contract.terminatedDate ?? "-"}</div>
                            </TableCell>
                            <TableCell className="max-w-[220px] truncate">{contract.attachmentPath ?? "-"}</TableCell>
                            <TableCell>
                              <Button type="button" size="sm" variant="secondary" onClick={() => startEditingContract(contract)}>
                                编辑
                              </Button>
                            </TableCell>
                          </TableRow>
                        ))
                      ) : (
                        <TableRow>
                          <TableCell className="py-3 text-zinc-500" colSpan={6}>
                            {contractsQuery.isLoading ? "加载合同中..." : "暂无合同记录"}
                          </TableCell>
                        </TableRow>
                      )}
                    </TableBody>
                  </Table>
                </div>
              </div>

              <div className="card-std space-y-4 p-6">
                <div>
                  <h3 className="text-base font-semibold text-zinc-900">{editingContractId ? "编辑合同" : "新增合同"}</h3>
                  <div className="mt-1 text-sm text-zinc-500">附件本轮只保存路径字符串，不做上传。</div>
                </div>

                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-1">
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">合同编号</label>
                    <Input value={contractForm.contractNo} onChange={(event) => setContractForm((prev) => ({ ...prev, contractNo: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">合同类型</label>
                    <select
                      className="select-std"
                      value={contractForm.contractType}
                      onChange={(event) => setContractForm((prev) => ({ ...prev, contractType: event.target.value as EmployeeContractType }))}
                    >
                      {CONTRACT_TYPE_OPTIONS.map((item) => (
                        <option key={item.value} value={item.value}>
                          {item.label}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">开始日期</label>
                    <Input type="date" value={contractForm.startDate} onChange={(event) => setContractForm((prev) => ({ ...prev, startDate: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">结束日期</label>
                    <Input type="date" value={contractForm.endDate} onChange={(event) => setContractForm((prev) => ({ ...prev, endDate: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">终止日期</label>
                    <Input type="date" value={contractForm.terminatedDate} onChange={(event) => setContractForm((prev) => ({ ...prev, terminatedDate: event.target.value }))} />
                  </div>
                  <div className="grid gap-2">
                    <label className="text-sm text-zinc-500">附件路径</label>
                    <Input value={contractForm.attachmentPath} onChange={(event) => setContractForm((prev) => ({ ...prev, attachmentPath: event.target.value }))} placeholder="例如：contracts/labor/E1001.pdf" />
                  </div>
                </div>

                <div className="flex flex-wrap gap-2">
                  <Button type="button" onClick={() => contractMutation.mutate()} disabled={contractMutation.isPending}>
                    {contractMutation.isPending ? "保存中..." : editingContractId ? "保存修改" : "新增合同"}
                  </Button>
                  {editingContractId ? (
                    <Button type="button" variant="secondary" onClick={resetContractEditor}>
                      取消编辑
                    </Button>
                  ) : null}
                </div>
              </div>
            </div>
          </TabsContent>
        ) : null}
      </Tabs>
    </div>
  );
}

export default EmployeeProfilePage;