import { resolveErrorMessage as resolveUserErrorMessage } from "../lib/resolveErrorMessage";
import { useMemo, useState } from "react";
import { Link, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { isApiError } from "../api/types";
import {
  archiveDepartment,
  createDepartment,
  fetchDepartments,
  updateDepartment,
  type DepartmentItem,
  type DepartmentTreeNode,
} from "../api/departments";
import { StatusBadge } from "../components/common/StatusBadge";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../components/ui/dialog";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
import { toast } from "sonner";
import { TableSkeleton } from "../components/common/TableSkeleton";
import { ConfirmDialog } from "../components/common/ConfirmDialog";

function mapDepartmentErrorMessage(error: unknown, fallback: string) {
  if (!isApiError(error)) {
    return resolveUserErrorMessage(error, fallback);
  }

  if (error.code === "VALID_001") {
    if (error.details?.parentId === "not_found") {
      return "上级部门不存在。";
    }
    if (error.details?.parentId === "archived") {
      return "上级部门已归档，无法继续使用。";
    }
    if (error.details?.parentId === "self_not_allowed") {
      return "上级部门不能选择自身。";
    }
    if (error.details?.parentId === "cycle_not_allowed") {
      return "上级部门不能形成循环层级。";
    }
    if (error.details?.status === "archived") {
      return "已归档部门不可编辑。";
    }
    if (error.details?.department === "has_children") {
      return "当前部门存在下级节点，无法归档。";
    }
    if (error.details?.department === "has_active_employees") {
      return "当前部门仍有在职员工，无法归档。";
    }
  }

  return resolveUserErrorMessage(error);
}

function flattenDepartmentTree(nodes: DepartmentTreeNode[], depth = 0): Array<{ id: string; label: string }> {
  const items: Array<{ id: string; label: string }> = [];
  for (const node of nodes) {
    items.push({ id: node.id, label: `${"　".repeat(depth)}${node.name}` });
    items.push(...flattenDepartmentTree(node.children, depth + 1));
  }
  return items;
}

function DepartmentTreeView({ nodes, depth = 0 }: { nodes: DepartmentTreeNode[]; depth?: number }) {
  if (!nodes.length) {
    return null;
  }

  return (
    <div className="space-y-3">
      {nodes.map((node) => (
        <div key={node.id} className="space-y-3">
          <div
            className="flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2"
            style={{ marginLeft: `${depth * 20}px` }}
          >
            <div className="min-w-0 flex-1">
              <div className="font-medium text-zinc-900">{node.name}</div>
              <div className="text-xs text-zinc-500 font-mono">{node.id}</div>
            </div>
            {node.archivedAt ? <StatusBadge status="archived" /> : null}
          </div>
          {node.children.length ? <DepartmentTreeView nodes={node.children} depth={depth + 1} /> : null}
        </div>
      ))}
    </div>
  );
}

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 [confirmArchive, setConfirmArchive] = useState<{ id: string; name: string } | null>(null);
  const [editDepartment, setEditDepartment] = useState<DepartmentItem | null>(null);
  const [editName, setEditName] = useState("");
  const [editParentId, setEditParentId] = useState("");

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

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

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

  const departmentOptions = useMemo(
    () => flattenDepartmentTree(departmentTree).filter((item) => !departmentById.get(item.id)?.archivedAt),
    [departmentById, departmentTree],
  );

  const createMutation = useMutation({
    mutationFn: () =>
      createDepartment({
        name: name.trim(),
        parentId: parentId ? parentId : null,
      }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["departments"] });
      setName("");
      setParentId("");
      setError("");
      toast.success("部门已创建");
    },
    onError: (err) => {
      const msg = mapDepartmentErrorMessage(err, "创建部门失败");
      setError(msg);
      toast.error(msg);
    },
  });

  const editMutation = useMutation({
    mutationFn: () => {
      if (!editDepartment) {
        throw new Error("未选择待编辑部门");
      }
      return updateDepartment(editDepartment.id, {
        name: editName.trim(),
        parentId: editParentId ? editParentId : null,
      });
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["departments"] });
      setEditDepartment(null);
      setEditName("");
      setEditParentId("");
      setError("");
      toast.success("部门已更新");
    },
    onError: (err) => {
      const msg = mapDepartmentErrorMessage(err, "更新部门失败");
      setError(msg);
      toast.error(msg);
    },
  });

  const archiveMutation = useMutation({
    mutationFn: (departmentId: string) => archiveDepartment(departmentId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["departments"] });
      setError("");
      toast.success("已归档");
    },
    onError: (err) => {
      const msg = mapDepartmentErrorMessage(err, "归档部门失败");
      setError(msg);
      toast.error(msg);
    },
  });

  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}

      <div className="card-std p-6 space-y-4">
        <div className="flex items-center justify-between gap-3">
          <h3 className="text-base font-semibold text-zinc-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="select-std"
              value={parentId}
              onChange={(event) => setParentId(event.target.value)}
            >
              <option value="">无</option>
              {departmentOptions.map((item) => (
                <option key={item.id} value={item.id}>
                  {item.label}
                </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>
      </div>

      <div className="card-std p-6 space-y-4">
        <h3 className="text-base font-semibold text-zinc-900">部门树形视图</h3>
        {listQuery.isLoading ? <TableSkeleton columns={1} rows={4} /> : null}
        {!listQuery.isLoading && !listQuery.isError ? (
          departmentTree.length ? (
            <DepartmentTreeView nodes={departmentTree} />
          ) : (
            <p className="text-sm text-zinc-500">暂无部门层级</p>
          )
        ) : null}
      </div>

      <div className="card-std p-6 space-y-4">
        <h3 className="text-base font-semibold text-zinc-900">部门列表</h3>

        {listQuery.isLoading ? <TableSkeleton columns={4} rows={4} /> : null}

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

        {!listQuery.isLoading && !listQuery.isError ? (
          <div className="rounded-lg border border-zinc-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-zinc-900">{item.name}</div>
                          <div className="text-xs text-zinc-500 font-mono">{item.id}</div>
                        </TableCell>
                        <TableCell>{parentName}</TableCell>
                        <TableCell className="text-xs text-zinc-600">
                          {item.archivedAt ? item.archivedAt.slice(0, 19).replace("T", " ") : "-"}
                        </TableCell>
                        <TableCell>
                          {!item.archivedAt ? (
                            <div className="flex flex-wrap gap-2">
                              <Button
                                size="sm"
                                variant="secondary"
                                type="button"
                                onClick={() => {
                                  setEditDepartment(item);
                                  setEditName(item.name);
                                  setEditParentId(item.parentId ?? "");
                                }}
                              >
                                编辑
                              </Button>
                              <Button
                                data-testid="department-archive"
                                size="sm"
                                variant="secondary"
                                type="button"
                                disabled={archiveMutation.isPending}
                                onClick={() => setConfirmArchive({ id: item.id, name: item.name })}
                              >
                                归档
                              </Button>
                            </div>
                          ) : (
                            <span className="text-xs text-zinc-500">已归档</span>
                          )}
                        </TableCell>
                      </TableRow>
                    );
                  })
                ) : (
                  <TableRow>
                    <TableCell className="py-3 text-zinc-500" colSpan={4}>
                      暂无部门
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
        ) : null}
      </div>

      <ConfirmDialog
        open={Boolean(confirmArchive)}
        title="确认归档"
        description={`确认归档部门「${confirmArchive?.name ?? ""}」？归档后不可用于新员工。`}
        variant="destructive"
        onConfirm={async () => {
          if (confirmArchive) archiveMutation.mutate(confirmArchive.id);
        }}
        onOpenChange={(open) => { if (!open) setConfirmArchive(null); }}
      />

      <Dialog
        open={Boolean(editDepartment)}
        onOpenChange={(open) => {
          if (!open) {
            setEditDepartment(null);
            setEditName("");
            setEditParentId("");
          }
        }}
      >
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>编辑部门</DialogTitle>
            <DialogDescription>修改部门名称或上级部门，保存后列表和树形视图会同步刷新。</DialogDescription>
          </DialogHeader>

          <div className="grid gap-4">
            <div className="space-y-1">
              <Label htmlFor="editDeptName">部门名称</Label>
              <Input
                id="editDeptName"
                value={editName}
                onChange={(event) => setEditName(event.target.value)}
              />
            </div>

            <div className="space-y-1">
              <Label htmlFor="editDeptParent">上级部门</Label>
              <select
                id="editDeptParent"
                className="select-std"
                value={editParentId}
                onChange={(event) => setEditParentId(event.target.value)}
              >
                <option value="">无</option>
                {departmentOptions
                  .filter((item) => item.id !== editDepartment?.id)
                  .map((item) => (
                    <option key={item.id} value={item.id}>
                      {item.label}
                    </option>
                  ))}
              </select>
            </div>
          </div>

          <DialogFooter>
            <Button
              variant="secondary"
              type="button"
              onClick={() => {
                setEditDepartment(null);
                setEditName("");
                setEditParentId("");
              }}
            >
              取消
            </Button>
            <Button
              type="button"
              disabled={editMutation.isPending || !editDepartment || !editName.trim()}
              onClick={() => editMutation.mutate()}
            >
              {editMutation.isPending ? "保存中..." : "保存"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}