import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";
import {
  cancelPaymentBatch,
  createPaymentBatch,
  executePaymentBatch,
  fetchPaymentBatches,
  reviewPaymentBatch,
  updatePaymentBatchItem,
  type PaymentBatch,
  type PaymentBatchEntityType,
  type PaymentChannel,
} from "../api/paymentBatches";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { RiskFlagsCard } from "../components/common/RiskFlagsCard";
import { toast } from "sonner";

const PAYMENT_CHANNEL_OPTIONS: PaymentChannel[] = ["bank", "alipay", "wechat", "cash", "other"];

function batchStatusLabel(value: string) {
  if (value === "draft") return "草稿";
  if (value === "reviewed") return "已复核";
  if (value === "executed") return "已执行";
  if (value === "failed") return "执行失败";
  if (value === "cancelled") return "已取消";
  return value || "-";
}

function entityTypeLabel(value: string) {
  if (value === "reimbursement") return "报销";
  if (value === "travel_order") return "差旅订单";
  return value || "-";
}

function resolveError(error: unknown) {
  return isApiError(error)
    ? `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`
    : error instanceof Error
      ? error.message
      : "操作失败";
}

export function PaymentBatchesPage() {
  const queryClient = useQueryClient();
  const { permissions } = useAuth();
  const [searchParams, setSearchParams] = useSearchParams();
  const canManageBatch = hasPermission(permissions, "payment.batch.manage");
  const canReviewBatch = hasPermission(permissions, "risk.review.manage");
  const [entityType, setEntityType] = useState<PaymentBatchEntityType>("reimbursement");
  const [name, setName] = useState("");
  const [entityIds, setEntityIds] = useState("");
  const [defaultPaymentDate, setDefaultPaymentDate] = useState("");
  const [defaultPaymentChannel, setDefaultPaymentChannel] = useState<PaymentChannel | "">("");
  const [voucherPrefix, setVoucherPrefix] = useState("");
  const [error, setError] = useState("");

  const listQuery = useQuery({
    queryKey: ["payment-batches"],
    queryFn: () => fetchPaymentBatches(),
  });

  const selectedBatchId = searchParams.get("id") ?? "";
  const selectedBatch = useMemo<PaymentBatch | null>(() => {
    const items = listQuery.data?.items ?? [];
    return items.find((item) => item.id === selectedBatchId) ?? items[0] ?? null;
  }, [listQuery.data?.items, selectedBatchId]);

  useEffect(() => {
    if (!selectedBatch) {
      return;
    }
    if (selectedBatch.id === selectedBatchId) {
      return;
    }
    const next = new URLSearchParams(searchParams);
    next.set("id", selectedBatch.id);
    setSearchParams(next, { replace: true });
  }, [searchParams, selectedBatch, selectedBatchId, setSearchParams]);

  const canEditSelectedBatch = canManageBatch && selectedBatch?.status === "draft";
  const canReviewSelectedBatch =
    canReviewBatch &&
    !!selectedBatch &&
    (
      (selectedBatch.status === "draft" && selectedBatch.reviewRequirement.nextStep === "first_review") ||
      (selectedBatch.status === "reviewed" && selectedBatch.reviewRequirement.nextStep === "second_review")
    );
  const canExecuteSelectedBatch =
    canManageBatch &&
    !!selectedBatch &&
    ["reviewed", "failed"].includes(selectedBatch.status) &&
    selectedBatch.reviewRequirement.nextStep === "ready_for_execute";
  const canCancelSelectedBatch =
    canManageBatch &&
    !!selectedBatch &&
    !["executed", "cancelled"].includes(selectedBatch.status);

  const refresh = async () => {
    await queryClient.invalidateQueries({ queryKey: ["payment-batches"] });
    await queryClient.invalidateQueries({ queryKey: ["ap-operations"] });
  };

  const createMutation = useMutation({
    mutationFn: async () =>
      createPaymentBatch({
        entityType,
        name: name.trim() || `${entityType}-batch`,
        entityIds: entityIds.split(/[\s,]+/).map((item) => item.trim()).filter(Boolean),
        defaultPaymentDate: defaultPaymentDate || undefined,
        defaultPaymentChannel: defaultPaymentChannel || undefined,
        voucherPrefix: voucherPrefix || undefined,
      }),
    onSuccess: async ({ item }) => {
      setError("");
      const next = new URLSearchParams(searchParams);
      next.set("id", item.id);
      setSearchParams(next, { replace: true });
      await refresh();
      toast.success("付款批次已创建");
    },
    onError: (err) => {
      const message = resolveError(err);
      setError(message);
      toast.error(message);
    },
  });

  const reviewMutation = useMutation({
    mutationFn: async (batchId: string) => {
      const batch = listQuery.data?.items.find((item) => item.id === batchId);
      const resolveRiskFlagIds = (batch?.items ?? []).flatMap((item) => item.openRiskFlags.map((flag) => flag.id));
      return reviewPaymentBatch(batchId, { resolveRiskFlagIds });
    },
    onSuccess: async ({ item }) => {
      setError("");
      await refresh();
      toast.success(item.reviewRequirement.nextStep === "ready_for_execute" ? "付款批次复核完成" : "付款批次已完成首轮复核");
    },
    onError: (err) => {
      const message = resolveError(err);
      setError(message);
      toast.error(message);
    },
  });

  const executeMutation = useMutation({
    mutationFn: executePaymentBatch,
    onSuccess: async () => {
      setError("");
      await refresh();
      toast.success("付款批次已执行");
    },
    onError: (err) => {
      const message = resolveError(err);
      setError(message);
      toast.error(message);
    },
  });

  const cancelMutation = useMutation({
    mutationFn: cancelPaymentBatch,
    onSuccess: async () => {
      setError("");
      await refresh();
      toast.success("付款批次已取消");
    },
    onError: (err) => {
      const message = resolveError(err);
      setError(message);
      toast.error(message);
    },
  });

  const updateItemMutation = useMutation({
    mutationFn: async (payload: { batchId: string; itemId: string; paymentVoucherNoOverride?: string | null; paymentDateOverride?: string | null; paymentChannelOverride?: PaymentChannel | null }) =>
      updatePaymentBatchItem(payload.batchId, payload.itemId, {
        paymentVoucherNoOverride: payload.paymentVoucherNoOverride,
        paymentDateOverride: payload.paymentDateOverride,
        paymentChannelOverride: payload.paymentChannelOverride,
      }),
    onSuccess: async () => {
      setError("");
      await refresh();
      toast.success("批次项已更新");
    },
    onError: (err) => {
      const message = resolveError(err);
      setError(message);
      toast.error(message);
    },
  });

  return (
    <div className="space-y-6">
      <PageHeader title="支付批次" subtitle="财务批量付款、复核与执行；高风险批次达到 5 万元后需完成二次复核。" />

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

      <div className="grid gap-6 xl:grid-cols-[360px,1fr]">
        <div className="card-std space-y-4 p-6">
          <h3 className="text-base font-semibold text-zinc-900">新建批次</h3>
          {!canManageBatch ? (
            <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600">
              当前账号仅可查看批次并执行复核，创建与编辑入口仅对付款批次管理员开放。
            </div>
          ) : null}
          <div className="space-y-2">
            <Label>实体类型</Label>
            <select
              className="select-std"
              value={entityType}
              disabled={!canManageBatch}
              onChange={(event) => setEntityType(event.target.value as PaymentBatchEntityType)}
            >
              <option value="reimbursement">报销付款</option>
              <option value="travel_order">差旅订单付款</option>
            </select>
          </div>
          <div className="space-y-2">
            <Label>批次名称</Label>
            <Input
              value={name}
              disabled={!canManageBatch}
              onChange={(event) => setName(event.target.value)}
              placeholder="例如：2026Q2-财务付款批次-01"
            />
          </div>
          <div className="space-y-2">
            <Label>实体 ID</Label>
            <textarea
              className="min-h-28 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm disabled:bg-zinc-50"
              value={entityIds}
              disabled={!canManageBatch}
              onChange={(event) => setEntityIds(event.target.value)}
              placeholder="用逗号或换行分隔 reimbursement / travel_order ID"
            />
          </div>
          <div className="grid gap-3 md:grid-cols-2">
            <div className="space-y-2">
              <Label>默认付款日期</Label>
              <Input
                type="date"
                value={defaultPaymentDate}
                disabled={!canManageBatch}
                onChange={(event) => setDefaultPaymentDate(event.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label>默认渠道</Label>
              <select
                className="select-std"
                value={defaultPaymentChannel}
                disabled={!canManageBatch}
                onChange={(event) => setDefaultPaymentChannel((event.target.value as PaymentChannel | "") || "") }
              >
                <option value="">不设置</option>
                {PAYMENT_CHANNEL_OPTIONS.map((item) => <option key={item} value={item}>{item}</option>)}
              </select>
            </div>
          </div>
          <div className="space-y-2">
            <Label>凭证前缀</Label>
            <Input
              value={voucherPrefix}
              disabled={!canManageBatch}
              onChange={(event) => setVoucherPrefix(event.target.value)}
              placeholder="例如 PBX"
            />
          </div>
          <Button type="button" disabled={createMutation.isPending || !canManageBatch} onClick={() => createMutation.mutate()}>
            {createMutation.isPending ? "创建中..." : "创建批次"}
          </Button>
        </div>

        <div className="space-y-6">
          <div className="card-std p-6">
            <h3 className="mb-3 text-base font-semibold text-zinc-900">批次列表</h3>
            <div className="space-y-2">
              {(listQuery.data?.items ?? []).map((item) => (
                <button
                  key={item.id}
                  type="button"
                  className={selectedBatch?.id === item.id ? "w-full rounded-lg border border-primary bg-primary/5 px-3 py-3 text-left" : "w-full rounded-lg border border-zinc-200 px-3 py-3 text-left hover:bg-zinc-50"}
                  onClick={() => {
                    const next = new URLSearchParams(searchParams);
                    next.set("id", item.id);
                    setSearchParams(next, { replace: true });
                  }}
                >
                  <div className="flex items-center justify-between gap-3">
                    <div className="font-medium text-zinc-900">{item.batchNo}</div>
                    <div className="text-xs uppercase text-zinc-500">{item.status}</div>
                  </div>
                  <div className="mt-1 text-sm text-zinc-600">{item.name}</div>
                  <div className="mt-1 text-xs text-zinc-500">
                    金额 {item.totalAmount}
                    {item.highRisk ? " · 高风险" : ""}
                    {` · 复核 ${item.reviewRequirement.completedReviewCount}/${item.reviewRequirement.requiredReviewCount}`}
                  </div>
                </button>
              ))}
              {!listQuery.data?.items?.length ? <div className="text-sm text-zinc-500">暂无支付批次</div> : null}
            </div>
          </div>

          {selectedBatch ? (
            <div className="space-y-6">
              <div className="card-std space-y-3 p-6">
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <div>
                    <div className="text-xs text-zinc-500">{selectedBatch.batchNo}</div>
                    <div className="flex flex-wrap items-center gap-2">
                      <div className="text-lg font-semibold text-zinc-900">{selectedBatch.name}</div>
                      {selectedBatch.highRisk ? (
                        <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">高风险</span>
                      ) : null}
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {canReviewBatch ? (
                      <Button
                        type="button"
                        variant="secondary"
                        disabled={reviewMutation.isPending || !canReviewSelectedBatch}
                        onClick={() => reviewMutation.mutate(selectedBatch.id)}
                      >
                        {selectedBatch.reviewRequirement.nextStep === "second_review" ? "二次复核" : "复核"}
                      </Button>
                    ) : null}
                    {canManageBatch ? (
                      <Button
                        type="button"
                        disabled={executeMutation.isPending || !canExecuteSelectedBatch}
                        onClick={() => executeMutation.mutate(selectedBatch.id)}
                      >
                        执行
                      </Button>
                    ) : null}
                    {canManageBatch ? (
                      <Button
                        type="button"
                        variant="secondary"
                        disabled={cancelMutation.isPending || !canCancelSelectedBatch}
                        onClick={() => cancelMutation.mutate(selectedBatch.id)}
                      >
                        取消
                      </Button>
                    ) : null}
                  </div>
                </div>
                <div className="grid gap-3 text-sm md:grid-cols-3 xl:grid-cols-6">
                  <div>状态：{batchStatusLabel(selectedBatch.status)}</div>
                  <div>实体：{entityTypeLabel(selectedBatch.entityType)}</div>
                  <div>总金额：{selectedBatch.totalAmount}</div>
                  <div>默认日期：{selectedBatch.defaultPaymentDate ?? "-"}</div>
                  <div>默认渠道：{selectedBatch.defaultPaymentChannel ?? "-"}</div>
                  <div>复核进度：{selectedBatch.reviewRequirement.completedReviewCount}/{selectedBatch.reviewRequirement.requiredReviewCount}</div>
                </div>
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3 text-sm text-zinc-600">
                  当前要求：{selectedBatch.reviewRequirement.requiredReviewCount === 2 ? `批次金额达到 ${selectedBatch.reviewRequirement.thresholdAmount}，需两轮复核` : "单轮复核后可执行"}。
                  下一步：{selectedBatch.reviewRequirement.nextStep === "first_review" ? "等待首轮复核" : selectedBatch.reviewRequirement.nextStep === "second_review" ? "等待二次复核" : "可执行"}。
                  {selectedBatch.reviewedBy ? ` 首轮复核人：${selectedBatch.reviewedBy}` : ""}
                  {selectedBatch.secondaryReviewedBy ? ` 二次复核人：${selectedBatch.secondaryReviewedBy}` : ""}
                </div>
              </div>

              <div className="card-std space-y-4 p-6">
                <h3 className="text-base font-semibold text-zinc-900">批次项</h3>
                <div className="space-y-4">
                  {selectedBatch.items.map((item) => (
                    <div key={item.id} className="rounded-lg border border-zinc-200 p-4">
                      <div className="flex flex-wrap items-center justify-between gap-3">
                        <div>
                          <div className="font-medium text-zinc-900">{item.entityCode}</div>
                          <div className="text-sm text-zinc-600">{item.entityTitle}</div>
                        </div>
                        <div className="text-sm text-zinc-600">{item.amount} {item.currencyCode} · {item.status}</div>
                      </div>
                      <div className="mt-3 grid gap-3 md:grid-cols-4">
                        <Input
                          defaultValue={item.paymentVoucherNoOverride ?? ""}
                          placeholder="凭证号"
                          disabled={!canEditSelectedBatch || item.status !== "pending"}
                          onBlur={(event) => updateItemMutation.mutate({ batchId: selectedBatch.id, itemId: item.id, paymentVoucherNoOverride: event.target.value || null })}
                        />
                        <Input
                          type="date"
                          defaultValue={item.paymentDateOverride ?? ""}
                          disabled={!canEditSelectedBatch || item.status !== "pending"}
                          onBlur={(event) => updateItemMutation.mutate({ batchId: selectedBatch.id, itemId: item.id, paymentDateOverride: event.target.value || null })}
                        />
                        <select
                          className="select-std"
                          defaultValue={item.paymentChannelOverride ?? ""}
                          disabled={!canEditSelectedBatch || item.status !== "pending"}
                          onChange={(event) => updateItemMutation.mutate({ batchId: selectedBatch.id, itemId: item.id, paymentChannelOverride: (event.target.value as PaymentChannel | "") || null })}
                        >
                          <option value="">默认渠道</option>
                          {PAYMENT_CHANNEL_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
                        </select>
                        <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm text-zinc-600">失败：{item.failureMessage ?? "-"}</div>
                      </div>
                      <RiskFlagsCard items={item.openRiskFlags} title="关联开放风险" />
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}