hyb-oa/client/src/pages/DepartmentsPage.tsx

import { useMemo, useState } from "react";
import { Link, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";
import {
  archiveDepartment,
  createDepartment,
  fetchDepartments,
  type DepartmentItem,
} from "../api/departments";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Card } from "../components/ui/card";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";

export function DepartmentsPage() {
  const queryClient = useQueryClient();
  const [searchParams, setSearchParams] = useSearchParams();

  const includeArchivedRaw = searchParams.get("includeArchived") ?? "0";
  const includeArchived = includeArchivedRaw === "1" || includeArchivedRaw === "true";

  const [name, setName] = useState("");
  const [parentId, setParentId] = useState<string>("");
  const [error, setError] = useState("");

  const listQuery = useQuery({
    queryKey: ["departments", includeArchived],
    queryFn: () => fetchDepartments({ includeArchived }),
  });

  const departments = listQuery.data?.items ?? [];

  const departmentById = useMemo(() => {
    const map = new Map<string, DepartmentItem>();
    for (const dept of departments) {
      map.set(dept.id, dept);
    }
    return map;
  }, [departments]);

  const createMutation = useMutation({
    mutationFn: () =>
      createDepartment({
        name: name.trim(),
        parentId: parentId ? parentId : null,
      }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["departments"] });
      setName("");
      setParentId("");
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
        return;
      }
      setError(err instanceof Error ? err.message : "创建部门失败");
    },
  });

  const archiveMutation = useMutation({
    mutationFn: (departmentId: string) => archiveDepartment(departmentId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["departments"] });
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
        return;
      }
      setError(err instanceof Error ? err.message : "归档部门失败");
    },
  });

  return (
    <div className="space-y-6">
      <PageHeader
        title="部门管理"
        subtitle="维护部门层级，用于员工归属与审批链路解析。"
        actions={
          <Button asChild variant="secondary" data-testid="departments-back">
            <Link to="/system/users">返回用户管理</Link>
          </Button>
        }
      />

      {error ? (
        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
          {error}
        </p>
      ) : null}

      <Card className="space-y-4 p-6">
        <div className="flex items-center justify-between gap-3">
          <h3 className="text-base font-semibold text-slate-900">新建部门</h3>
          <Button
            data-testid="departments-toggle-archived"
            variant="secondary"
            type="button"
            onClick={() =>
              setSearchParams({
                includeArchived: includeArchived ? "0" : "1",
              })
            }
          >
            {includeArchived ? "隐藏归档" : "显示归档"}
          </Button>
        </div>

        <div className="grid gap-3 md:grid-cols-3">
          <div className="space-y-1">
            <Label htmlFor="deptName">部门名称</Label>
            <Input
              id="deptName"
              data-testid="departments-create-name"
              placeholder="研发部"
              value={name}
              onChange={(event) => setName(event.target.value)}
            />
          </div>

          <div className="space-y-1">
            <Label htmlFor="deptParent">上级部门（可选）</Label>
            <select
              id="deptParent"
              data-testid="departments-create-parent"
              className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
              value={parentId}
              onChange={(event) => setParentId(event.target.value)}
            >
              <option value="">无</option>
              {departments
                .filter((item) => !item.archivedAt)
                .map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
            </select>
          </div>

          <div className="flex items-end">
            <Button
              data-testid="departments-create-submit"
              disabled={createMutation.isPending || !name.trim()}
              onClick={() => createMutation.mutate()}
              type="button"
            >
              {createMutation.isPending ? "创建中..." : "创建"}
            </Button>
          </div>
        </div>
      </Card>

      <Card className="space-y-4 p-6">
        <h3 className="text-base font-semibold text-slate-900">部门列表</h3>

        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}

        {listQuery.isError ? (
          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
            {isApiError(listQuery.error)
              ? `${listQuery.error.code}: ${mapApiErrorMessage(
                  listQuery.error.code,
                  listQuery.error.details,
                  listQuery.error.message,
                )}`
              : "加载部门列表失败"}
          </p>
        ) : null}

        {!listQuery.isLoading && !listQuery.isError ? (
          <div className="rounded-lg border border-slate-200">
            <Table data-testid="departments-table">
              <TableHeader>
                <tr>
                  <TableHead>名称</TableHead>
                  <TableHead>上级部门</TableHead>
                  <TableHead>归档时间</TableHead>
                  <TableHead className="w-32">操作</TableHead>
                </tr>
              </TableHeader>
              <TableBody>
                {departments.length ? (
                  departments.map((item) => {
                    const parentName = item.parentId ? departmentById.get(item.parentId)?.name ?? "-" : "-";
                    return (
                      <TableRow data-testid="department-row" key={item.id}>
                        <TableCell>
                          <div className="font-medium text-slate-900">{item.name}</div>
                          <div className="text-xs text-slate-500 font-mono">{item.id}</div>
                        </TableCell>
                        <TableCell>{parentName}</TableCell>
                        <TableCell className="text-xs text-slate-600">
                          {item.archivedAt ? item.archivedAt.slice(0, 19).replace("T", " ") : "-"}
                        </TableCell>
                        <TableCell>
                          {!item.archivedAt ? (
                            <Button
                              data-testid="department-archive"
                              size="sm"
                              variant="secondary"
                              type="button"
                              disabled={archiveMutation.isPending}
                              onClick={() => {
                                if (!window.confirm(`确认归档部门「${item.name}」？归档后不可用于新员工。`)) {
                                  return;
                                }
                                archiveMutation.mutate(item.id);
                              }}
                            >
                              归档
                            </Button>
                          ) : (
                            <span className="text-xs text-slate-500">已归档</span>
                          )}
                        </TableCell>
                      </TableRow>
                    );
                  })
                ) : (
                  <TableRow>
                    <TableCell className="py-3 text-slate-500" colSpan={4}>
                      暂无部门
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
        ) : null}
      </Card>
    </div>
  );
}