import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { fetchExpenseTypes } from "../api/expenseTypes";
import { exportReimbursementJournal, previewReimbursementJournal } from "../api/integrations";
import {
  createReimbursementItem,
  deleteReimbursementItem,
  fetchReimbursementDetail,
  payReimbursement,
  submitReimbursement,
  updateReimbursementItem,
  withdrawReimbursement,
  type ReimbursementItem,
} from "../api/reimbursements";
import { toast } from "sonner";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { CardSkeleton } from "../components/common/CardSkeleton";
import { ConfirmDialog } from "../components/common/ConfirmDialog";
import { PageHeader } from "../components/common/PageHeader";
import { AiSuggestionCard } from "../components/ai/AiSuggestionCard";
import { Button } from "../components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
import { ReimbursementActions, type PayPayload } from "./reimbursement-detail/ReimbursementActions";
import {
  ReimbursementItemEditor,
  type ItemEditorInitialValues,
  type ItemEditorSaveData,
} from "./reimbursement-detail/ReimbursementItemEditor";

type ItemEditorState = { mode: "create" } | { mode: "edit"; itemId: string } | null;

function formatDateTime(value: string | null) {
  if (!value) return "-";
  return value.slice(0, 19).replace("T", " ");
}

export function ReimbursementDetailPage() {
  const { reimbursementId = "" } = useParams();
  const { permissions } = useAuth();
  const queryClient = useQueryClient();

  const [actionError, setActionError] = useState("");

  const [itemEditor, setItemEditor] = useState<ItemEditorState>(null);
  const [itemError, setItemError] = useState("");
  const [confirmDeleteItemId, setConfirmDeleteItemId] = useState("");
  const [editorInitialValues, setEditorInitialValues] = useState<ItemEditorInitialValues>({
    expenseTypeId: "",
    expenseDate: "",
    amount: "",
    description: "",
  });

  const detailQuery = useQuery({
    enabled: Boolean(reimbursementId),
    queryKey: ["reimbursements", reimbursementId],
    queryFn: () => fetchReimbursementDetail(reimbursementId),
  });

  const expenseTypesQuery = useQuery({
    queryKey: ["expenseTypes", "enabled"],
    queryFn: () => fetchExpenseTypes({ enabled: true }),
  });


  const canManageIntegration = hasPermission(permissions, "integration.manage");

  const erpPreviewQuery = useQuery({
    enabled: Boolean(reimbursementId) && canManageIntegration && detailQuery.data?.status === "paid",
    queryKey: ["reimbursements", reimbursementId, "erp-journal-preview"],
    queryFn: () => previewReimbursementJournal(reimbursementId),
  });

  const mutation = useMutation({
    mutationFn: async (params: { action: "submit" } | { action: "withdraw"; comment: string } | { action: "pay"; payload: PayPayload }) => {
      if (!reimbursementId) {
        throw new Error("missing reimbursementId");
      }

      if (params.action === "submit") {
        return submitReimbursement(reimbursementId);
      }

      if (params.action === "withdraw") {
        return withdrawReimbursement(reimbursementId, params.comment);
      }

      return payReimbursement(reimbursementId, {
        paymentVoucherNo: params.payload.paymentVoucherNo || undefined,
        paymentDate: params.payload.paymentDate || undefined,
        paymentChannel: params.payload.paymentChannel,
      });
    },
    onSuccess: async (_data, params) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["reimbursements"] }),
        queryClient.invalidateQueries({ queryKey: ["reimbursements", reimbursementId] }),
      ]);
      setActionError("");
      const actionMessages: Record<string, string> = { submit: "已提交", withdraw: "已撤回", pay: "付款成功" };
      toast.success(actionMessages[params.action] ?? "操作成功");
    },
    onError: (error) => {
      if (isApiError(error)) {
        const msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
        setActionError(msg);
        toast.error(msg);
        return;
      }

      if (error instanceof Error) {
        setActionError(error.message);
        toast.error(error.message);
        return;
      }

      setActionError("操作失败，请稍后重试");
      toast.error("操作失败，请稍后重试");
    },
  });

  const itemSaveMutation = useMutation({
    mutationFn: async (data: ItemEditorSaveData) => {
      if (!reimbursementId) {
        throw new Error("missing reimbursementId");
      }
      if (!itemEditor) {
        throw new Error("missing itemEditor");
      }

      const payload = {
        expenseTypeId: data.expenseTypeId,
        expenseDate: data.expenseDate,
        amount: data.amount,
        description: data.description.trim() || undefined,
      };

      if (itemEditor.mode === "create") {
        return createReimbursementItem(reimbursementId, payload);
      }

      return updateReimbursementItem(reimbursementId, itemEditor.itemId, payload);
    },
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["reimbursements"] }),
        queryClient.invalidateQueries({ queryKey: ["reimbursements", reimbursementId] }),
      ]);
      setItemEditor(null);
      setItemError("");
      toast.success("明细已保存");
    },
    onError: (error) => {
      if (isApiError(error)) {
        const msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
        setItemError(msg);
        toast.error(msg);
        return;
      }

      if (error instanceof Error) {
        setItemError(error.message);
        toast.error(error.message);
        return;
      }

      setItemError("保存明细失败，请稍后重试");
      toast.error("保存明细失败，请稍后重试");
    },
  });

  const itemDeleteMutation = useMutation({
    mutationFn: async (itemId: string) => {
      if (!reimbursementId) {
        throw new Error("missing reimbursementId");
      }

      return deleteReimbursementItem(reimbursementId, itemId);
    },
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["reimbursements"] }),
        queryClient.invalidateQueries({ queryKey: ["reimbursements", reimbursementId] }),
      ]);
      setItemError("");
      toast.success("明细已删除");
    },
    onError: (error) => {
      if (isApiError(error)) {
        const msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
        setItemError(msg);
        toast.error(msg);
        return;
      }

      if (error instanceof Error) {
        setItemError(error.message);
        toast.error(error.message);
        return;
      }

      setItemError("删除明细失败，请稍后重试");
      toast.error("删除明细失败，请稍后重试");
    },
  });

  const erpExportMutation = useMutation({
    mutationFn: async () => {
      if (!reimbursementId) {
        throw new Error("missing reimbursementId");
      }
      return exportReimbursementJournal(reimbursementId, true);
    },
    onSuccess: async (result) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["reimbursements", reimbursementId, "erp-journal-preview"] }),
        queryClient.invalidateQueries({ queryKey: ["reimbursements", reimbursementId] }),
      ]);
      setActionError("");
      const suffix = result.requeued ? "已重入队" : result.duplicated ? "已复用现有队列" : "已入队";
      toast.success(`ERP 导出${suffix}`);
    },
    onError: (error) => {
      if (isApiError(error)) {
        const msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
        setActionError(msg);
        toast.error(msg);
        return;
      }

      if (error instanceof Error) {
        setActionError(error.message);
        toast.error(error.message);
        return;
      }

      setActionError("ERP 导出失败，请稍后重试");
      toast.error("ERP 导出失败，请稍后重试");
    },
  });

  if (!reimbursementId) {
    return (
      <div className="card-std p-6">
        <p className="text-sm text-red-600">缺少 reimbursementId 参数。</p>
      </div>
    );
  }

  if (detailQuery.isLoading) {
    return <CardSkeleton lines={8} />;
  }

  if (detailQuery.isError || !detailQuery.data) {
    const message = isApiError(detailQuery.error)
      ? `${detailQuery.error.code}: ${mapApiErrorMessage(
          detailQuery.error.code,
          detailQuery.error.details,
          detailQuery.error.message,
        )}`
      : "加载报销详情失败";

    return (
      <div className="card-std space-y-3 p-6">
        <p className="text-sm text-red-600">{message}</p>
        <Button asChild variant="secondary">
          <Link to="/reimbursements">返回报销列表</Link>
        </Button>
      </div>
    );
  }

  const detail = detailQuery.data;
  const budgetHint = detail.budgetHint;
  const canPay = hasPermission(permissions, "expense.finance.pay");
  const canEditItems = ["draft", "rejected"].includes(detail.status);

  const expenseTypes = expenseTypesQuery.data?.items ?? [];

  const computeEditorDefaults = (item?: ReimbursementItem): ItemEditorInitialValues => {
    const defaultDate =
      item?.expenseDate ??
      detail.reimbursementDate ??
      new Date().toISOString().slice(0, 10);

    const defaultExpenseTypeId =
      item?.expenseTypeId ?? expenseTypes[0]?.id ?? "";

    return {
      expenseDate: defaultDate,
      expenseTypeId: defaultExpenseTypeId,
      amount: item?.amount ?? "",
      description: item?.description ?? "",
    };
  };

  const startCreateItem = () => {
    setItemEditor({ mode: "create" });
    setEditorInitialValues(computeEditorDefaults());
    setItemError("");
  };

  const startEditItem = (item: ReimbursementItem) => {
    setItemEditor({ mode: "edit", itemId: item.id });
    setEditorInitialValues(computeEditorDefaults(item));
    setItemError("");
  };

  const handleItemSave = (data: ItemEditorSaveData) => {
    itemSaveMutation.mutate(data);
  };

  const handleItemCancel = () => {
    setItemEditor(null);
    setItemError("");
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title={`报销详情 ${detail.formNumber ?? detail.id}`}
        subtitle={`状态：${detail.status}`}
        actions={
          <Button asChild variant="secondary" data-testid="reimbursement-back">
            <Link to="/reimbursements">返回列表</Link>
          </Button>
        }
      />

      <div className="card-std space-y-2 p-6 text-sm" data-testid="reimbursement-summary">
        <div>报销ID：{detail.id}</div>
        <div>报销日期：{detail.reimbursementDate ?? "-"}</div>
        <div>金额：{detail.totalAmount ?? "-"}</div>
        <div>提交人：{detail.submitter?.name ?? "-"}</div>
        <div>报销人：{detail.owner?.name ?? "-"}</div>
        <div>说明：{detail.description || "-"}</div>
      </div>

      {budgetHint ? (
        <div className="card-std space-y-2 p-6 text-sm" data-testid="reimbursement-budget-hint">
          <h3 className="text-base font-semibold text-zinc-900">预算提示</h3>
          <div>预算池：{budgetHint.budgetCode} / {budgetHint.budgetName}</div>
          <div>
            本次提交后预计占用：{budgetHint.nextUsedAmount} / {budgetHint.allocatedAmount}
            （{budgetHint.nextUsagePercent.toFixed(2)}%）
          </div>
          <div>控制模式：{budgetHint.controlMode}</div>
          {budgetHint.exceedsBudget && budgetHint.controlMode === "block" ? (
            <p className="rounded-md border border-red-200 bg-red-50 px-2 py-1 text-red-600">
              当前金额将超出预算上限，提交时会被阻断（block 模式）。
            </p>
          ) : budgetHint.exceedsThreshold ? (
            <p className="rounded-md border border-amber-200 bg-amber-50 px-2 py-1 text-amber-700">
              当前金额已达到预算预警阈值，提交后会记录预算预警审计。
            </p>
          ) : (
            <p className="text-zinc-500">当前预算充足，可继续提交。</p>
          )}
        </div>
      ) : null}


      {canManageIntegration && detail.status === "paid" ? (
        <div className="card-std space-y-4 p-6" data-testid="reimbursement-erp-export">
          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
            <div className="space-y-1">
              <h3 className="text-base font-semibold text-zinc-900">ERP 导出</h3>
              <p className="text-sm text-zinc-500">已付款报销单会按标准凭证切片通过 Outbox 异步发送到 ERP。</p>
            </div>
            <Button onClick={() => erpExportMutation.mutate()} disabled={erpExportMutation.isPending}>
              {erpExportMutation.isPending ? "导出中..." : "导出到 ERP"}
            </Button>
          </div>

          {erpPreviewQuery.isLoading ? <p className="text-sm text-zinc-500">正在加载凭证切片预览...</p> : null}
          {erpPreviewQuery.isError ? (
            <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
              {isApiError(erpPreviewQuery.error)
                ? `${erpPreviewQuery.error.code}: ${mapApiErrorMessage(
                    erpPreviewQuery.error.code,
                    erpPreviewQuery.error.details,
                    erpPreviewQuery.error.message,
                  )}`
                : "加载 ERP 导出预览失败"}
            </p>
          ) : null}

          {erpPreviewQuery.data ? (
            <div className="grid gap-4 lg:grid-cols-2 text-sm">
              <div className="rounded-lg border border-zinc-200 p-4 space-y-2">
                <h4 className="font-medium text-zinc-900">凭证切片</h4>
                <div>类型：{erpPreviewQuery.data.journal.journalType}</div>
                <div>单号：{erpPreviewQuery.data.journal.documentNo ?? "-"}</div>
                <div>金额：{erpPreviewQuery.data.journal.totalAmount ?? "-"}</div>
                <div>法体：{erpPreviewQuery.data.journal.dimensions.legalEntityCode ?? "-"}</div>
                <div>成本中心：{erpPreviewQuery.data.journal.dimensions.costCenterCode ?? "-"}</div>
                <div>付款凭证号：{erpPreviewQuery.data.journal.paymentVoucherNo ?? "-"}</div>
                <div>付款日期：{erpPreviewQuery.data.journal.paymentDate ?? "-"}</div>
              </div>
              <div className="rounded-lg border border-zinc-200 p-4 space-y-2">
                <h4 className="font-medium text-zinc-900">导出状态</h4>
                <div>外部ID：{erpPreviewQuery.data.exportState.externalId ?? "-"}</div>
                <div>Outbox：{erpPreviewQuery.data.exportState.lastOutboxId ?? "-"}</div>
                <div>队列状态：{erpPreviewQuery.data.exportState.lastOutboxStatus ?? "-"}</div>
                <div>最近导出：{formatDateTime(erpPreviewQuery.data.exportState.exportedAt)}</div>
                <div className="break-all">最近错误：{erpPreviewQuery.data.exportState.lastError ?? "-"}</div>
              </div>
            </div>
          ) : null}
        </div>
      ) : null}

      <AiSuggestionCard targetType="reimbursement" targetId={detail.id} />

      <div className="card-std space-y-4 p-6" data-testid="reimbursement-items">
        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
          <div className="space-y-1">
            <h3 className="text-base font-semibold text-zinc-900">报销明细</h3>
            <p className="text-xs text-zinc-500">明细变更会自动重算总金额。</p>
          </div>

          {canEditItems ? (
            <Button
              data-testid="reimbursement-item-add"
              disabled={itemSaveMutation.isPending || itemDeleteMutation.isPending}
              onClick={startCreateItem}
              type="button"
              variant="secondary"
            >
              新增明细
            </Button>
          ) : (
            <p className="text-xs text-zinc-500">当前状态不可编辑明细</p>
          )}
        </div>

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

        <div className="rounded-lg border border-zinc-200">
          <Table data-testid="reimbursement-items-table">
            <TableHeader>
              <tr>
                <TableHead>费用类型</TableHead>
                <TableHead>发生日期</TableHead>
                <TableHead>金额</TableHead>
                <TableHead>说明</TableHead>
                <TableHead className="w-32">操作</TableHead>
              </tr>
            </TableHeader>
            <TableBody>
              {detail.items.length ? (
                detail.items.map((item) => (
                  <TableRow data-testid="reimbursement-item-row" key={item.id}>
                    <TableCell>
                      <div className="font-medium text-zinc-900">
                        {item.expenseType?.name ?? item.expenseTypeId}
                      </div>
                      <div className="text-xs text-zinc-500">{item.expenseType?.code ?? "-"}</div>
                    </TableCell>
                    <TableCell>{item.expenseDate ?? "-"}</TableCell>
                    <TableCell>{item.amount}</TableCell>
                    <TableCell>{item.description ?? "-"}</TableCell>
                    <TableCell>
                      {canEditItems ? (
                        <div className="flex flex-wrap gap-2">
                          <Button
                            data-testid="reimbursement-item-edit"
                            size="sm"
                            type="button"
                            variant="secondary"
                            onClick={() => startEditItem(item)}
                          >
                            编辑
                          </Button>
                          <Button
                            data-testid="reimbursement-item-delete"
                            size="sm"
                            type="button"
                            variant="secondary"
                            disabled={itemDeleteMutation.isPending}
                            onClick={() => setConfirmDeleteItemId(item.id)}
                          >
                            删除
                          </Button>
                        </div>
                      ) : null}
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell className="py-3 text-zinc-500" colSpan={5}>
                    暂无明细
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        {itemEditor ? (
          <ReimbursementItemEditor
            mode={itemEditor.mode}
            expenseTypes={expenseTypes}
            expenseTypesLoading={expenseTypesQuery.isLoading}
            expenseTypesError={expenseTypesQuery.isError}
            initialValues={editorInitialValues}
            onSave={handleItemSave}
            onCancel={handleItemCancel}
            isPending={itemSaveMutation.isPending}
          />
        ) : null}
      </div>

      <ReimbursementActions
        status={detail.status}
        canPay={canPay}
        actionError={actionError}
        isPending={mutation.isPending}
        onSubmit={() => mutation.mutate({ action: "submit" })}
        onWithdraw={(comment) => mutation.mutate({ action: "withdraw", comment })}
        onPay={(payload) => mutation.mutate({ action: "pay", payload })}
      />

      <div className="card-std space-y-2 p-6" data-testid="reimbursement-invoices">
        <h3 className="text-base font-semibold text-zinc-900">关联票据</h3>
        {(detail.invoices ?? []).length ? (
          <div className="space-y-2 text-sm">
            {detail.invoices.map((item) => (
              <div className="rounded-lg border border-zinc-200 px-3 py-2" key={item.id}>
                <div className="font-medium text-zinc-900">{item.id}</div>
                <div className="text-zinc-600">
                  状态 {item.status} / 发票 {item.invoiceCode || "-"}-{item.invoiceNumber || "-"}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <p className="text-sm text-zinc-500">暂无关联票据</p>
        )}
      </div>

      <ConfirmDialog
        open={Boolean(confirmDeleteItemId)}
        onOpenChange={(open) => { if (!open) setConfirmDeleteItemId(""); }}
        title="确认删除该明细？"
        variant="destructive"
        confirmLabel="删除"
        onConfirm={() => { itemDeleteMutation.mutate(confirmDeleteItemId); }}
      />
    </div>
  );
}