import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { mapApiErrorMessage } from "../api/errorMessages";
import { isApiError } from "../api/types";
import {
  approveWorkflowTask,
  fetchWorkflowApprovers,
  fetchWorkflowTaskDetail,
  fetchWorkflowTasks,
  rejectWorkflowTask,
  returnWorkflowTask,
  transferWorkflowTask,
} from "../api/workflow";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Spinner } from "../components/ui/spinner";
import { Textarea } from "../components/ui/textarea";

type MobileAction = "approve" | "reject" | "return" | "transfer";

function entityLabel(entityType: string | undefined) {
  if (entityType === "leave") {
    return "请假";
  }
  if (entityType === "reimbursement") {
    return "报销";
  }
  return entityType || "未知";
}

export function MobileApprovalsPage() {
  const queryClient = useQueryClient();
  const [selectedTaskId, setSelectedTaskId] = useState("");
  const [error, setError] = useState("");
  const [comment, setComment] = useState("");
  const [transferToApproverId, setTransferToApproverId] = useState("");
  const [transferReason, setTransferReason] = useState("");

  const tasksQuery = useQuery({
    queryKey: ["mobile", "workflow", "tasks"],
    queryFn: () => fetchWorkflowTasks({ status: "pending", page: 1, pageSize: 30 }),
  });

  const detailQuery = useQuery({
    enabled: Boolean(selectedTaskId),
    queryKey: ["mobile", "workflow", "task-detail", selectedTaskId],
    queryFn: () => fetchWorkflowTaskDetail(selectedTaskId),
  });

  const approversQuery = useQuery({
    enabled: detailQuery.data?.allowedActions?.includes("transfer") ?? false,
    queryKey: ["mobile", "workflow", "approvers"],
    queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 100 }),
  });

  const actionMutation = useMutation({
    mutationFn: async (action: MobileAction) => {
      if (!selectedTaskId) {
        throw new Error("请选择任务");
      }

      if (action === "approve") {
        return approveWorkflowTask(selectedTaskId);
      }

      if (action === "reject") {
        if (!comment.trim()) {
          throw new Error("驳回必须填写意见");
        }
        return rejectWorkflowTask(selectedTaskId, comment.trim());
      }

      if (action === "return") {
        if (!comment.trim()) {
          throw new Error("退回必须填写意见");
        }
        return returnWorkflowTask(selectedTaskId, comment.trim());
      }

      if (!transferToApproverId) {
        throw new Error("请选择转审目标审批人");
      }
      if (transferReason.trim().length < 10) {
        throw new Error("转审理由至少 10 个字");
      }

      return transferWorkflowTask(selectedTaskId, transferToApproverId, transferReason.trim());
    },
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "tasks"] }),
        queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-detail", selectedTaskId] }),
      ]);
      setComment("");
      setTransferReason("");
      setTransferToApproverId("");
      setError("");
      toast.success("操作成功");
    },
    onError: (err) => {
      const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "动作执行失败";
      setError(msg);
      toast.error(msg);
    },
  });

  const pendingTasks = tasksQuery.data?.items ?? [];
  const selectedTask = detailQuery.data;
  const isLeaveTask = selectedTask?.workflowInstance?.entityType === "leave";

  return (
    <div className="space-y-4">
      <PageHeader title="移动审批" subtitle="小屏快速处理待办任务。" />

      {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 space-y-3 p-4" data-testid="mobile-approvals-list">
        <h3 className="text-base font-semibold text-zinc-900">待办任务</h3>

        {tasksQuery.isLoading ? <div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div> : null}

        {!tasksQuery.isLoading && pendingTasks.length === 0 ? (
          <p className="text-sm text-zinc-500">暂无待办任务。</p>
        ) : null}

        <div className="space-y-2">
          {pendingTasks.map((task) => (
            <button
              key={task.id}
              className={`w-full rounded-lg border px-3 py-2 text-left text-sm ${
                selectedTaskId === task.id
                  ? "border-primary bg-primary-50 text-primary"
                  : "border-zinc-200 bg-white text-zinc-800"
              }`}
              data-testid={`mobile-approvals-task-${task.id}`}
              onClick={() => setSelectedTaskId(task.id)}
              type="button"
            >
              <div className="font-medium">{task.stepName}</div>
              <div className="text-xs text-zinc-500">任务ID: {task.id}</div>
              <div className="text-xs text-zinc-500">业务: {entityLabel(task.workflowInstance?.entityType)}</div>
            </button>
          ))}
        </div>
      </div>

      <div className="card-std space-y-3 p-4" data-testid="mobile-approvals-detail">
        <h3 className="text-base font-semibold text-zinc-900">任务详情与动作</h3>

        {!selectedTaskId ? <p className="text-sm text-zinc-500">请先选择任务。</p> : null}

        {selectedTaskId && detailQuery.isLoading ? (
          <p className="text-sm text-zinc-500">加载任务详情中...</p>
        ) : null}

        {selectedTask && (
          <>
            <div className="rounded-lg border border-zinc-200 p-3 text-sm">
              <div>任务状态：{selectedTask.task.status}</div>
              <div>步骤：{selectedTask.task.stepName}</div>
              <div>对象类型：{entityLabel(selectedTask.workflowInstance?.entityType)}</div>
              {selectedTask.reimbursement ? (
                <>
                  <div>报销单号：{selectedTask.reimbursement.formNumber ?? "-"}</div>
                  <div>金额：{selectedTask.reimbursement.totalAmount ?? "-"}</div>
                  <div>提交人：{selectedTask.reimbursement.submitter?.name ?? "-"}</div>
                </>
              ) : null}
              {selectedTask.leaveRequest ? (
                <>
                  <div>假期类型：{selectedTask.leaveRequest.leaveType?.name ?? "-"}</div>
                  <div>申请人：{selectedTask.leaveRequest.owner?.name ?? "-"}</div>
                  <div>请假天数：{selectedTask.leaveRequest.requestedDays}</div>
                </>
              ) : null}
            </div>

            <Textarea
              data-testid="mobile-approvals-comment"
              onChange={(event) => setComment(event.target.value)}
              placeholder="驳回/退回意见"
              rows={3}
              value={comment}
            />

            <div className="flex flex-wrap gap-2">
              <Button
                data-testid="mobile-approvals-approve"
                disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("approve")}
                onClick={() => actionMutation.mutate("approve")}
                type="button"
              >
                通过
              </Button>
              <Button
                data-testid="mobile-approvals-reject"
                disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("reject")}
                onClick={() => actionMutation.mutate("reject")}
                type="button"
                variant="secondary"
              >
                驳回
              </Button>
              <Button
                data-testid="mobile-approvals-return"
                disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("return")}
                onClick={() => actionMutation.mutate("return")}
                type="button"
                variant="secondary"
              >
                退回
              </Button>
            </div>

            {!isLeaveTask && selectedTask.allowedActions.includes("transfer") ? (
              <div className="space-y-2 rounded-lg border border-zinc-200 p-3 text-sm">
                <p className="font-medium text-zinc-800">转审</p>
                <select
                  className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
                  data-testid="mobile-approvals-transfer-to"
                  onChange={(event) => setTransferToApproverId(event.target.value)}
                  value={transferToApproverId}
                >
                  <option value="">请选择目标审批人</option>
                  {(approversQuery.data?.items ?? []).map((approver) => (
                    <option key={approver.id} value={approver.id}>
                      {approver.name} ({approver.employeeNo})
                    </option>
                  ))}
                </select>

                <Textarea
                  data-testid="mobile-approvals-transfer-reason"
                  onChange={(event) => setTransferReason(event.target.value)}
                  placeholder="转审理由（至少10字）"
                  rows={2}
                  value={transferReason}
                />

                <Button
                  data-testid="mobile-approvals-transfer"
                  disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("transfer")}
                  onClick={() => actionMutation.mutate("transfer")}
                  type="button"
                  variant="secondary"
                >
                  提交转审
                </Button>
              </div>
            ) : null}
          </>
        )}
      </div>
    </div>
  );
}