import { useEffect, useRef, useState } from "react";
import { useMutation, useQuery } from "@tanstack/react-query";
import {
  fetchReceiptVerification, saveReceiptVerification, reviewReceiptVerification, checkReceiptDocument,
  type ReceiptVerificationPage,
} from "../../api/paymentBatches";
import { resolveErrorMessage } from "../../lib/resolveErrorMessage";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";

const FIELD_NAMES = ["小写金额", "币别", "付款人账号", "收款人账号", "凭证号", "单据状态"] as const;
const CHANGE_LABELS: Record<string, string> = {
  amount: "金额", currency: "币种", payerAccount: "付款账号", payeeAccount: "收款账号",
  reference: "交易参考", transactionStatus: "交易状态", paymentProof: "付款凭证依据",
};

function PageFacts({ page }: { page?: ReceiptVerificationPage }) {
  return <div className="space-y-1 break-all text-sm text-zinc-600">
    <div>金额：{page?.amount ?? "未识别"} · 币种：{page?.currency ?? "未识别"}</div>
    <div>付款账号：{page?.payerAccountMasked ?? "未识别"}</div>
    <div>收款账号：{page?.payeeAccountMasked ?? "未识别"}</div>
    <div>交易参考：{page?.reference ?? "未识别"}</div>
    <div>状态：{page?.document?.proof?.basis === "booked_debit" ? "已记账支出（人工核对）" :
      ({ success: "成功", failed: "失败", pending: "受理或处理中" }[page?.transactionStatus ?? ""] ?? "未确认")}</div>
    <div>凭证性质：{{ bank_receipt: "银行正式回单", non_final: "非最终回执", unknown: "需核对原件" }[page?.document?.kind ?? "unknown"]}</div>
    {page?.document?.proof ? <div>付款依据：{page.document.proof.basis === "booked_debit" ?
      `正式回单记载已记账支出，记账日期 ${page.document.proof.bookedOn}` : "正式回单原件明确显示付款成功"}</div> : null}
  </div>;
}

type Props = {
  actorId: string; batchId: string; attachmentId: string; makerId: string | null;
  canManage: boolean; canReview: boolean; relatedParty?: boolean;
  items: { id: string; label: string }[];
  onClose: () => void; onChanged: () => void;
};

export function PaymentReceiptVerificationDialog(props: Props) {
  const mounted = useRef(true);
  useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
  const [selections, setSelections] = useState<Record<number, string>>({});
  const [editing, setEditing] = useState<Record<number, boolean>>({});
  const [changes, setChanges] = useState<Record<number, Record<string, string>>>({});
  const [reason, setReason] = useState("");
  const [proofs, setProofs] = useState<Record<number, { basis: "" | "explicit_success" | "booked_debit"; bookedOn: string; checked: boolean }>>({});
  const query = useQuery({
    queryKey: ["receipt-verification", props.actorId, props.batchId, props.attachmentId],
    queryFn: ({ signal }) => fetchReceiptVerification(props.batchId, props.attachmentId, signal),
    enabled: Boolean(props.actorId), staleTime: 0, gcTime: 0,
    refetchOnWindowFocus: false, refetchOnReconnect: false, retry: false,
  });
  const detail = query.data?.item;
  const changed = () => {
    if (!mounted.current) return;
    props.onChanged();
    props.onClose();
  };
  const save = useMutation({
    mutationFn: () => saveReceiptVerification(props.batchId, props.attachmentId, {
      expectedVersion: detail!.version, ...(reason.trim() ? { reason: reason.trim() } : {}),
      pages: Array.from({ length: detail!.pagesExpected }, (_unused, index) => {
        const pageNumber = index + 1;
        const fields = Object.entries(changes[pageNumber] ?? {}).filter(([, value]) => value.trim())
          .map(([Name, Value]) => ({ Name, Value }));
        const proof = proofs[pageNumber];
        if (proof?.basis === "booked_debit") {
          const status = fields.find((field) => field.Name === "单据状态");
          if (status) status.Value = ""; else fields.push({ Name: "单据状态", Value: "" });
        }
        return { pageNumber, itemId: selections[pageNumber] ?? "", ...(fields.length ? { fields } : {}),
          ...(proof?.basis ? { paymentProof: { basis: proof.basis, originalChecked: true as const, note: reason.trim(),
            ...(proof.basis === "booked_debit" ? { bookedOn: proof.bookedOn } : {}) } } : {}) };
      }),
    }),
    onSuccess: changed,
  });
  const review = useMutation({
    mutationFn: (decision: "approve" | "reject") => reviewReceiptVerification(
      props.batchId, props.attachmentId, detail!.proposal!.id,
      { expectedVersion: detail!.version, decision, reason: reason.trim() },
    ),
    onSuccess: changed,
  });
  const inspect = useMutation({
    mutationFn: () => checkReceiptDocument(props.batchId, props.attachmentId, detail!.version),
    onSuccess: changed,
  });
  const busy = save.isPending || review.isPending || inspect.isPending;
  const pageCount = detail && Number.isInteger(detail.pagesExpected) && detail.pagesExpected > 0 &&
    detail.pagesExpected <= 20 ? detail.pagesExpected : 0;
  const editable = props.canManage && detail && !detail.documentInspectionRequired && ["needs_review", "ocr_failed"].includes(detail.state) && !query.isError;
  const reviewable = props.canReview && detail?.canReview === true && detail?.proposal?.status === "pending_review" &&
    props.actorId !== detail.proposal.proposedBy && props.actorId !== props.makerId && !query.isError;
  const blocked = (page?: ReceiptVerificationPage) => page?.document?.kind === "non_final" ||
    page?.document?.direction === "credit" || Boolean(page?.document?.issues.length);
  const needsProof = (page?: ReceiptVerificationPage) => page?.document?.kind !== "bank_receipt" || !page.document.explicitSuccess;
  const complete = pageCount > 0 && Array.from({ length: pageCount }, (_unused, index) => {
    const n = index + 1; const page = detail?.pages.find((entry) => entry.pageNumber === n); const proof = proofs[n];
    return selections[n] && !blocked(page) && (!needsProof(page) || (proof?.basis && proof.checked &&
      reason.trim().length >= 5 && (proof.basis !== "booked_debit" || /^\d{4}-\d{2}-\d{2}$/.test(proof.bookedOn))));
  }).every(Boolean);
  const hasCorrections = Object.values(changes).some((fields) => Object.values(fields).some((value) => value.trim()));
  const error = query.error ?? save.error ?? review.error ?? inspect.error;
  return <Dialog open onOpenChange={(open) => { if (!open && !busy) props.onClose(); }}>
    <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-2xl">
      <DialogHeader>
        <DialogTitle>回单核验</DialogTitle>
        <DialogDescription>核对原回单与付款明细。账号仅显示掩码；需要核对完整内容时请使用回单“在线查看”。核验不代表银行验真，也不会自动登记付款。</DialogDescription>
      </DialogHeader>
      {query.isPending ? <p role="status">正在加载核验信息…</p> : null}
      {error ? <div role="alert" className="space-y-2 text-sm text-red-600">
        <p>{resolveErrorMessage(error)}</p>
        <Button variant="secondary" disabled={busy} onClick={() => {
          setSelections({}); setChanges({}); setEditing({}); setProofs({}); setReason(""); save.reset(); review.reset(); inspect.reset();
          void query.refetch();
        }}>刷新核验信息</Button>
      </div> : null}
      {detail?.documentInspectionRequired ? <div role="status" className="space-y-2 rounded-lg border p-3 text-sm">
        <p>旧核验尚未记录凭证性质。更新后会保留原记录，并要求重新核对原件；不会重新发送文件识别。</p>
        {props.canManage && !query.isError ? <Button variant="secondary" disabled={busy || query.isFetching}
          onClick={() => inspect.mutate()}>{inspect.isPending ? "检查中…" : "更新凭证核验"}</Button> : null}
      </div> : null}
      {detail && !pageCount ? <p role="status">尚无完整页数，请先重新识别或上传可读取的原回单。</p> : null}
      {Array.from({ length: pageCount }, (_unused, index) => index + 1).map((pageNumber) => {
        const original = detail?.pages.find((page) => page.pageNumber === pageNumber);
        const proposed = detail?.proposal?.pages.find((page) => page.pageNumber === pageNumber);
        return <section key={pageNumber} className="space-y-3 rounded-lg border p-3">
          <h3 className="font-medium">第{pageNumber}页 · 原识别结果</h3>
          <PageFacts page={original} />
          {blocked(original) ? <p role="status" className="text-sm text-red-600">这份材料不能证明本笔付款完成。请提供对应的正式付款回单；不能通过更正字段覆盖非最终说明、收付方向或交易矛盾。</p> : null}
          {proposed ? <div className="space-y-2 border-t pt-3">
            <h4 className="font-medium">人工核验结果</h4>
            <PageFacts page={proposed} />
            <p className="text-sm">对应明细：{props.items.find((item) => item.id === proposed.itemId)?.label ?? "当前明细不可用"}</p>
            <p className="text-sm">更正字段：{detail?.proposal?.changedFields.find((entry) => entry.pageNumber === pageNumber)?.fields.map((field) => CHANGE_LABELS[field] ?? "字段").join("、") || "未更正，仅关联"}</p>
          </div> : null}
          {editable && !blocked(original) ? <>
            <label className="block space-y-1 text-sm">
              <span>第{pageNumber}页对应付款明细</span>
              <select className="min-h-11 w-full rounded-md border bg-white px-3" disabled={busy}
                value={selections[pageNumber] ?? ""} onChange={(event) =>
                  setSelections((current) => ({ ...current, [pageNumber]: event.target.value }))}>
                <option value="">请选择对应明细</option>
                {props.items.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}
              </select>
            </label>
            {needsProof(original) ? <div className="space-y-3 rounded-md border p-3 text-sm">
              <label className="block space-y-1">
                <span>第{pageNumber}页付款凭证依据</span>
                <select className="min-h-11 w-full rounded-md border bg-white px-3" disabled={busy}
                  value={proofs[pageNumber]?.basis ?? ""} onChange={(event) => setProofs((current) => ({ ...current,
                    [pageNumber]: { bookedOn: current[pageNumber]?.bookedOn ?? "", checked: false,
                      basis: event.target.value as "" | "explicit_success" | "booked_debit" } }))}>
                  <option value="">请先查看原件，再选择依据</option>
                  <option value="explicit_success">正式回单原件明确显示付款成功</option>
                  <option value="booked_debit">正式回单记载公司已记账支出</option>
                </select>
              </label>
              {proofs[pageNumber]?.basis === "booked_debit" ? <label className="block space-y-1">
                <span>第{pageNumber}页原件记账日期</span>
                <Input type="date" disabled={busy} value={proofs[pageNumber]?.bookedOn ?? ""}
                  onChange={(event) => setProofs((current) => ({ ...current,
                    [pageNumber]: { ...current[pageNumber], bookedOn: event.target.value } }))} />
              </label> : null}
              <label className="flex min-h-11 items-start gap-2">
                <input type="checkbox" className="mt-1" disabled={busy || !proofs[pageNumber]?.basis}
                  checked={proofs[pageNumber]?.checked ?? false} onChange={(event) => setProofs((current) => ({ ...current,
                    [pageNumber]: { ...current[pageNumber], checked: event.target.checked } }))} />
                <span>已查看第{pageNumber}页完整原件，确认为本公司付款的正式回单，无非最终依据说明或矛盾；核验说明中填写原件依据。</span>
              </label>
              <p className="text-xs text-zinc-500">记账支出不要求补填“交易成功”。凭证性质或资金方向不能确认时，请先补证。</p>
            </div> : null}
            <Button type="button" variant="secondary" disabled={busy} onClick={() => {
              setEditing((current) => ({ ...current, [pageNumber]: !current[pageNumber] }));
              if (editing[pageNumber]) setChanges((current) => ({ ...current, [pageNumber]: {} }));
            }}>{editing[pageNumber] ? "取消本页更正" : "更正识别"}</Button>
            {editing[pageNumber] ? <div className="space-y-3">
              <p className="text-xs text-zinc-500">只填写要更正的字段，其他字段保留原识别值。更正后需要{props.relatedParty ? "公司代表确认" : "独立复核"}。</p>
              {FIELD_NAMES.filter((name) => name !== "单据状态" || proofs[pageNumber]?.basis !== "booked_debit").map((name) => <label key={name} className="block space-y-1 text-sm">
                <span>第{pageNumber}页更正{name}</span>
                {name === "单据状态" ? <select className="min-h-11 w-full rounded-md border bg-white px-3"
                  disabled={busy} value={changes[pageNumber]?.[name] ?? ""} onChange={(event) =>
                    setChanges((current) => ({ ...current, [pageNumber]: { ...current[pageNumber], [name]: event.target.value } }))}>
                  <option value="">不更正</option><option value="交易成功">原件明确显示交易成功</option>
                </select> : <Input autoComplete="off" disabled={busy} maxLength={256}
                  placeholder="不更正则留空" value={changes[pageNumber]?.[name] ?? ""}
                  onChange={(event) => setChanges((current) => ({
                    ...current, [pageNumber]: { ...current[pageNumber], [name]: event.target.value },
                  }))} />}
              </label>)}
            </div> : null}
          </> : null}
        </section>;
      })}
      {detail?.proposal ? <p className="whitespace-pre-wrap break-words text-sm">核验说明：{detail.proposal.reason}</p> : null}
      {detail?.proposal?.status === "pending_review" && !reviewable ?
        <p role="status" className="text-sm text-zinc-600">{props.relatedParty ? "等待有当前授权的公司代表确认；上传人、录入人和制单人不能自审。" : "等待有资格的独立审批人复核；经办人和报销参与人不能自审。"}</p> : null}
      {editable || reviewable ? <label className="block space-y-1 text-sm">
        <span>{reviewable ? "复核说明" : "更正说明（仅关联可留空）"}</span>
        <Textarea value={reason} maxLength={500} disabled={busy} onChange={(event) => setReason(event.target.value)} />
      </label> : null}
      <DialogFooter className="flex-wrap gap-2">
        <Button variant="secondary" disabled={busy} onClick={props.onClose}>关闭</Button>
        {editable ? <Button disabled={busy || query.isFetching || !complete || (hasCorrections && !reason.trim())}
          onClick={() => save.mutate()}>{save.isPending ? "保存中…" : "保存核验"}</Button> : null}
        {reviewable ? <>
          <Button variant="secondary" disabled={busy || query.isFetching || !reason.trim()} onClick={() => review.mutate("reject")}>不通过</Button>
          <Button disabled={busy || query.isFetching || !reason.trim() || detail?.documentInspectionRequired || detail?.pages.some(blocked)} onClick={() => review.mutate("approve")}>{props.relatedParty ? "公司代表确认" : "确认复核"}</Button>
        </> : null}
      </DialogFooter>
    </DialogContent>
  </Dialog>;
}