import { useMemo, 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 { createDelegation, fetchMyDelegations, revokeDelegation } from "../api/delegations";
import { fetchWorkflowApprovers } from "../api/workflow";
import { PageHeader } from "../components/common/PageHeader";
import { TableSkeleton } from "../components/common/TableSkeleton";
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";

export function DelegationsPage() {
  const queryClient = useQueryClient();
  const [status, setStatus] = useState<"active" | "scheduled" | "expired" | "revoked" | "all">("active");
  const [delegateEmployeeId, setDelegateEmployeeId] = useState("");
  const [scope, setScope] = useState<"all" | "reimbursement_submit">("all");
  const [validTo, setValidTo] = useState("");
  const [error, setError] = useState("");

  const listQuery = useQuery({
    queryKey: ["delegations", "mine", status],
    queryFn: () => fetchMyDelegations(status),
  });

  const approversQuery = useQuery({
    queryKey: ["workflow", "approvers", "delegations"],
    queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 100 }),
  });

  const delegateOptions = useMemo(() => {
    const items = approversQuery.data?.items ?? [];
    return items.map((item) => ({
      id: item.id,
      label: `${item.name} (${item.employeeNo})`,
    }));
  }, [approversQuery.data?.items]);

  const createMutation = useMutation({
    mutationFn: () =>
      createDelegation({
        delegateEmployeeId,
        scope,
        validTo: validTo ? new Date(validTo).toISOString() : undefined,
      }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["delegations"] });
      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 revokeMutation = useMutation({
    mutationFn: (delegationId: string) => revokeDelegation(delegationId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["delegations"] });
      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);
    },
  });

  return (
    <div className="space-y-6">
      <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-4">
        <h3 className="text-base font-semibold text-zinc-900">创建委派</h3>

        <div className="grid gap-3 md:grid-cols-2">
          <label className="space-y-1 text-sm">
            <span className="font-medium text-zinc-700">委派给（审批人候选）</span>
            <select
              className="select-std"
              data-testid="delegations-create-delegate"
              onChange={(event) => setDelegateEmployeeId(event.target.value)}
              value={delegateEmployeeId}
            >
              <option value="">请选择目标员工</option>
              {delegateOptions.map((item) => (
                <option key={item.id} value={item.id}>
                  {item.label}
                </option>
              ))}
            </select>
            <p className="text-xs text-zinc-500">
              说明：当前 MVP 未接入员工搜索，这里先复用“转审候选”列表作为可选目标。
            </p>
          </label>

          <label className="space-y-1 text-sm">
            <span className="font-medium text-zinc-700">范围</span>
            <select
              className="select-std"
              data-testid="delegations-create-scope"
              onChange={(event) => setScope(event.target.value as "all" | "reimbursement_submit")}
              value={scope}
            >
              <option value="all">all</option>
              <option value="reimbursement_submit">reimbursement_submit</option>
            </select>
          </label>

          <label className="space-y-1 text-sm md:col-span-2">
            <span className="font-medium text-zinc-700">有效期结束（可选）</span>
            <Input
              data-testid="delegations-create-valid-to"
              onChange={(event) => setValidTo(event.target.value)}
              type="datetime-local"
              value={validTo}
            />
          </label>
        </div>

        <div className="flex justify-end">
          <Button
            data-testid="delegations-create-submit"
            disabled={!delegateEmployeeId || createMutation.isPending}
            onClick={() => createMutation.mutate()}
            type="button"
          >
            {createMutation.isPending ? "创建中..." : "创建委派"}
          </Button>
        </div>
      </div>

      <div className="card-std space-y-4">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <h3 className="text-base font-semibold text-zinc-900">我的委派</h3>
          <select
            className="select-std w-auto"
            data-testid="delegations-status-filter"
            onChange={(event) =>
              setStatus(event.target.value as "active" | "scheduled" | "expired" | "revoked" | "all")
            }
            value={status}
          >
            <option value="active">active</option>
            <option value="scheduled">scheduled</option>
            <option value="expired">expired</option>
            <option value="revoked">revoked</option>
            <option value="all">all</option>
          </select>
        </div>

        {listQuery.isLoading ? <TableSkeleton columns={5} rows={3} /> : null}
        {listQuery.isError ? (
          <p className="text-sm text-red-600">
            {isApiError(listQuery.error)
              ? `${listQuery.error.code}: ${mapApiErrorMessage(
                listQuery.error.code,
                listQuery.error.details,
                listQuery.error.message,
              )}`
              : "加载委派列表失败"}
          </p>
        ) : null}

        {listQuery.data ? (
          <div className="space-y-6">
            <div>
              <p className="mb-2 text-sm font-medium text-zinc-800">我发起的委派</p>
              <div className="rounded-lg border border-zinc-200">
                <Table data-testid="delegations-initiated-table">
                  <TableHeader>
                    <tr>
                      <TableHead>ID</TableHead>
                      <TableHead>delegate</TableHead>
                      <TableHead>scope</TableHead>
                      <TableHead>status</TableHead>
                      <TableHead className="w-28">操作</TableHead>
                    </tr>
                  </TableHeader>
                  <TableBody>
                    {listQuery.data.initiated.length ? (
                      listQuery.data.initiated.map((item) => (
                        <TableRow key={item.id}>
                          <TableCell className="font-mono text-xs">{item.id}</TableCell>
                          <TableCell className="font-mono text-xs">{item.delegateEmployeeId}</TableCell>
                          <TableCell>{item.scope}</TableCell>
                          <TableCell><StatusBadge status={item.status} /></TableCell>
                          <TableCell>
                            <Button
                              data-testid="delegations-revoke"
                              size="sm"
                              variant="secondary"
                              disabled={revokeMutation.isPending || item.status === "revoked"}
                              onClick={() => revokeMutation.mutate(item.id)}
                              type="button"
                            >
                              撤销
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell className="py-3 text-zinc-500" colSpan={5}>
                          暂无数据
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>

            <div>
              <p className="mb-2 text-sm font-medium text-zinc-800">我接收的委派</p>
              <div className="rounded-lg border border-zinc-200">
                <Table data-testid="delegations-received-table">
                  <TableHeader>
                    <tr>
                      <TableHead>ID</TableHead>
                      <TableHead>principal</TableHead>
                      <TableHead>scope</TableHead>
                      <TableHead>status</TableHead>
                    </tr>
                  </TableHeader>
                  <TableBody>
                    {listQuery.data.received.length ? (
                      listQuery.data.received.map((item) => (
                        <TableRow key={item.id}>
                          <TableCell className="font-mono text-xs">{item.id}</TableCell>
                          <TableCell className="font-mono text-xs">{item.principalEmployeeId}</TableCell>
                          <TableCell>{item.scope}</TableCell>
                          <TableCell><StatusBadge status={item.status} /></TableCell>
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell className="py-3 text-zinc-500" colSpan={4}>
                          暂无数据
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
}