import { cloneElement, isValidElement, useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { fetchLegalEntities } from "../api/masterData";
import { fetchBankInstitutions } from "../api/paymentAccounts";
import { createLoanRepayment, downloadLoanEvidence, fetchCompanyLoans, fetchLoanIdentities, fetchLoanLenders,
  fetchLoanRepayments, saveLoanAction, uploadLoanEvidence, type CompanyLoan, type LoanLender } from "../api/companyLoans";
import { ListWorkspace, WorkspaceHeader, HeaderActionGroup } from "../components/patterns/ListWorkspace";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../components/ui/dialog";
import { resolveErrorMessage } from "../lib/resolveErrorMessage";
import { formatDisplayDate } from "../lib/displayFormat";
import { downloadBlob } from "../lib/download";

const evidenceLabels: Record<string, string> = { agreement: "协议或借款确认书", incoming: "原借入凭据",
  accounting_confirmation: "余额核对材料", adjustment: "系统外已还本金依据" };
const stateLabels: Record<string, string> = { draft: "待付款复核", reviewed: "待付款", executed: "已付款", cancelled: "已取消", failed: "登记未完成" };
type Mode = "lender" | "identity" | "account" | "loan" | "confirm" | "repay" | "download" | null;
const selectClass = "min-h-11 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm";
function Field({ label, children }: { label: string; children: ReactNode }) {
  const id = useId();
  return <div className="grid gap-1.5 text-sm"><Label htmlFor={id}>{label}</Label>
    {isValidElement<{ id?: string }>(children) ? cloneElement(children, { id }) : children}</div>;
}

export function CompanyLoansPage() {
  const { me, permissions } = useAuth(); const navigate = useNavigate(); const cache = useQueryClient();
  const paymentPath = useLocation().pathname.startsWith("/mobile/") ? "/mobile/payment-batches" : "/payment-batches";
  const mounted = useRef(true);
  useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
  const allowed = Boolean(me?.roleCodes.some((role) => ["finance", "finance_mgr"].includes(role))) && hasPermission(permissions, "loan.manage");
  const [page, setPage] = useState(1); const [lenderPage, setLenderPage] = useState(1); const [repayPage, setRepayPage] = useState(1);
  const [tab, setTab] = useState<"loans" | "lenders" | "repayments">("loans");
  const [mode, setMode] = useState<Mode>(null); const [selectedLender, setSelectedLender] = useState<LoanLender | null>(null);
  const [selectedLoan, setSelectedLoan] = useState<CompanyLoan | null>(null);
  const [evidence, setEvidence] = useState<{ loanId: string; id: string; name: string } | null>(null);
  const [lenderId, setLenderId] = useState(""); const [identitySearch, setIdentitySearch] = useState("");
  const [amounts, setAmounts] = useState<Record<string, string>>({});
  const [candidatePage, setCandidatePage] = useState(1);
  const [requestKey, setRequestKey] = useState(() => crypto.randomUUID());
  const identity = useRef(me?.id); identity.current = me?.id;
  const loans = useQuery({ queryKey: ["company-loans", me?.id, page], queryFn: ({ signal }) => fetchCompanyLoans(page, undefined, signal), enabled: allowed });
  const lenders = useQuery({ queryKey: ["loan-lenders", me?.id, lenderPage], queryFn: ({ signal }) => fetchLoanLenders(lenderPage, signal), enabled: allowed });
  const repayments = useQuery({ queryKey: ["loan-repayments", me?.id, repayPage], queryFn: ({ signal }) => fetchLoanRepayments(repayPage, signal), enabled: allowed });
  const candidates = useQuery({ queryKey: ["company-loans", me?.id, "candidates", lenderId, candidatePage],
    queryFn: ({ signal }) => fetchCompanyLoans(candidatePage, lenderId, signal), enabled: allowed && mode === "repay" && Boolean(lenderId) });
  const companies = useQuery({ queryKey: ["loan-companies", me?.id], queryFn: () => fetchLegalEntities({ enabled: true }), enabled: allowed && mode === "lender" });
  const banks = useQuery({ queryKey: ["loan-banks", me?.id], queryFn: fetchBankInstitutions, enabled: allowed && ["lender", "account"].includes(mode ?? "") });
  const people = useQuery({ queryKey: ["loan-identities", me?.id, identitySearch], queryFn: ({ signal }) => fetchLoanIdentities(identitySearch, signal), enabled: allowed && mode === "identity" });
  const mutation = useMutation({ mutationFn: async (action: () => Promise<unknown>) => action(), onSuccess: async () => {
    await Promise.all(["company-loans", "loan-lenders", "loan-repayments", "payment-batches"].map((key) => cache.invalidateQueries({ queryKey: [key] })));
  } });
  useEffect(() => { setMode(null); setSelectedLender(null); setSelectedLoan(null); setAmounts({}); }, [me?.id]);
  function open(next: Mode, lender: LoanLender | null = null, loan: CompanyLoan | null = null) {
    mutation.reset(); setRequestKey(crypto.randomUUID()); setMode(next); setSelectedLender(lender); setSelectedLoan(loan);
    setLenderId(lender?.id ?? ""); setAmounts({}); setIdentitySearch(""); setCandidatePage(1);
  }
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault(); const values = new FormData(event.currentTarget);
    const text = (key: string) => String(values.get(key) ?? "").trim();
    const actorId = me?.id;
    mutation.mutate(async () => {
      if (mode === "lender") await saveLoanAction("/loan-lenders", { requestKey, legalEntityId: text("company"), name: text("name"),
        bankInstitutionId: text("bank"), bankName: text("bankName"), bankAccount: text("account"), accountName: text("accountName") });
      if (mode === "account" && selectedLender) await saveLoanAction(`/loan-lenders/${selectedLender.id}/account`, {
        expectedVersion: selectedLender.accountVersion, bankInstitutionId: text("bank"), bankName: text("bankName"),
        bankAccount: text("account"), accountName: text("accountName"),
      }, "PATCH");
      if (mode === "identity" && selectedLender) await saveLoanAction(`/loan-lenders/${selectedLender.id}/identity-confirmation`, {
        expectedVersion: selectedLender.identityVersion, employeeId: text("employee") === "external" ? null : text("employee"),
        externalPersonConfirmed: text("employee") === "external", reason: text("reason"),
      });
      if (mode === "loan") await saveLoanAction("/company-loans", { requestKey, lenderId: text("lender"), originReference: text("origin"),
        originalPrincipal: text("principal"), openingOutstandingPrincipal: text("opening"), receivedDate: text("received"), balanceAsOf: text("asOf"),
        historicalEntry: text("entry") === "historical" });
      if (mode === "confirm" && selectedLoan) await saveLoanAction(`/company-loans/${selectedLoan.id}/confirm`, {
        expectedVersion: selectedLoan.version, accountingConfirmationRef: text("reference"),
      });
      if (mode === "download" && evidence) {
        const response = await downloadLoanEvidence(evidence.loanId, evidence.id, text("reason"));
        if (mounted.current && identity.current === actorId) downloadBlob(response.blob, response.filename ?? evidence.name);
      }
      if (mode === "repay") {
        const response = await createLoanRepayment({ requestKey, lenderId, reason: text("reason"),
          allocations: Object.entries(amounts).filter(([, amount]) => amount.trim()).map(([loanId, amount]) => ({ loanId, amount: amount.trim() })) });
        if (mounted.current && identity.current === actorId) navigate(`${paymentPath}?id=${encodeURIComponent(response.item.id)}`);
      }
      if (mounted.current && identity.current === actorId) setMode(null);
    });
  }
  if (!allowed) return <p role="alert">当前账号无借款台账权限。</p>;
  const error = mutation.error ?? loans.error ?? lenders.error ?? repayments.error ?? companies.error ?? banks.error ?? people.error;
  const current = tab === "loans" ? loans : tab === "lenders" ? lenders : repayments;
  const modalQueryBlocked = mode === "lender" ? !companies.isSuccess || !banks.isSuccess : mode === "account" ? !banks.isSuccess : mode === "identity" ? !people.isSuccess : mode === "loan" ? !lenders.isSuccess : mode === "repay" ? !lenders.isSuccess || !candidates.isSuccess : false;
  const currentPage = tab === "loans" ? page : tab === "lenders" ? lenderPage : repayPage;
  const setCurrentPage = tab === "loans" ? setPage : tab === "lenders" ? setLenderPage : setRepayPage;
  return <ListWorkspace>
    <WorkspaceHeader title="公司借款" subtitle="记录公司向个人借入及归还的人民币本金。余额以核对截止日及 OA 登记为依据，未核实不代表已结清。"
      actions={<HeaderActionGroup><Button variant="outline" onClick={() => open("lender")}>登记出借人</Button>
        <Button onClick={() => open("loan")}>登记借入</Button><Button variant="outline" onClick={() => open("repay")}>申请还本</Button></HeaderActionGroup>} />
    <div className="flex flex-wrap gap-2" role="tablist" aria-label="借款台账视图">
      {([["loans", "借款台账"], ["lenders", "出借人"], ["repayments", "还款记录"]] as const).map(([key, label]) =>
        <Button key={key} role="tab" aria-selected={tab === key} variant={tab === key ? "default" : "outline"} onClick={() => setTab(key)}>{label}</Button>)}
    </div>
    {error && !mode ? <p role="alert" className="text-sm text-red-700">{resolveErrorMessage(error)}</p> : null}
    {current.isPending ? <p role="status">加载中…</p> : null}
    {current.isSuccess && !current.data.items.length ? <p className="card-std p-4">暂无记录；不能据此判断银行实际借还款情况。</p> : null}
    {tab === "loans" && loans.isSuccess ? loans.data.items.map((loan) => <section key={loan.id} className="card-std min-w-0 space-y-3 p-4">
      <div className="flex flex-wrap justify-between gap-2"><h2 className="font-semibold break-all">{loan.lender.name} · {loan.loanNo}</h2>
        <span>{loan.confirmationStatus === "confirmed" ? "余额已确认" : "余额待核实"}</span></div>
      <p className="text-sm text-zinc-600">{loan.lender.legalEntityName} · 借入 {formatDisplayDate(loan.receivedDate)} · 核对截至 {formatDisplayDate(loan.balanceAsOf)} · {loan.historicalEntry ? "历史登记" : "当期借入"}</p>
      <div className="detail-fact-grid text-sm">
        {[["原本金", loan.originalPrincipal], ["未还本金", loan.outstanding], ["待付款占用", loan.reserved], ["可申请还本", loan.available]].map(([label, value]) =>
          <div key={label} className="detail-fact-card"><div className="detail-fact-card__label">{label}</div><div className="detail-fact-card__value">¥{value}</div></div>)}
      </div>
      <p className="break-words text-sm">原借入凭据：{loan.originReference}</p>
      <details><summary className="min-h-11 cursor-pointer py-3 text-sm font-medium">借款材料与余额确认</summary>
        <div className="grid gap-3 md:grid-cols-2">{Object.entries(evidenceLabels).map(([kind, label]) => <div key={kind} className="rounded-md border p-3">
          <Label htmlFor={`${loan.id}-${kind}`}>{label}</Label>
          <Input id={`${loan.id}-${kind}`} type="file" className="mt-2" accept=".pdf,.png,.jpg,.jpeg,.webp" disabled={mutation.isPending}
            onChange={(event) => { const file = event.currentTarget.files?.[0]; event.currentTarget.value = "";
              if (file) mutation.mutate(() => uploadLoanEvidence(loan.id, kind, file)); }} />
          {loan.evidences.filter((e) => e.kind === kind && !e.archivedAt).map((e) => <Button key={e.id} variant="link" className="max-w-full whitespace-normal break-all"
            onClick={() => { setEvidence({ loanId: loan.id, id: e.id, name: e.originalName }); open("download"); }}>{e.originalName}</Button>)}
        </div>)}</div>
        {loan.confirmationStatus !== "confirmed" ? <Button className="mt-3" onClick={() => open("confirm", loan.lender, loan)}>确认期初余额</Button> : null}
      </details>
    </section>) : null}
    {tab === "lenders" && lenders.isSuccess ? lenders.data.items.map((lender) => <section key={lender.id} className="card-std space-y-3 p-4">
      <h2 className="font-semibold">{lender.name} · {lender.legalEntityName}</h2>
      <p className="break-words text-sm">{lender.bankName} · {lender.bankAccountMasked ?? "账户不可用"} · {lender.identityStatus === "verified" ? "身份已核实" : "身份待核实"}</p>
      <div className="flex flex-wrap gap-2"><Button variant="outline" onClick={() => open("identity", lender)}>核实身份关联</Button>
        <Button variant="outline" onClick={() => open("account", lender)}>更新收款资料</Button></div>
    </section>) : null}
    {tab === "repayments" && repayments.isSuccess ? repayments.data.items.map((repayment) => <section key={repayment.id} className="card-std space-y-2 p-4">
      <h2 className="font-semibold break-all">{repayment.lenderName} · {repayment.repaymentNo}</h2>
      <p>¥{repayment.amount} · {stateLabels[repayment.status] ?? "待核对"}</p>
      {repayment.bankResultState === "unknown" ? <p className="text-sm text-amber-800">银行结果待查证，额度保持占用，请勿重复付款。</p> : null}
      <p className="text-sm">会计交接：{repayment.accountingHandoffRef ?? "待交接"}</p>
      <Link className="inline-flex min-h-11 items-center text-primary underline" to={`${paymentPath}?id=${encodeURIComponent(repayment.paymentBatchId)}`}>查看还款分配、付款与回单</Link>
    </section>) : null}
    <div className="flex items-center gap-3"><Button variant="outline" disabled={currentPage <= 1} onClick={() => setCurrentPage(currentPage - 1)}>上一页</Button>
      <span>第 {currentPage} 页</span><Button variant="outline" disabled={!current.data || currentPage * 30 >= current.data.total} onClick={() => setCurrentPage(currentPage + 1)}>下一页</Button></div>
    <Dialog open={mode !== null} onOpenChange={(opened) => { if (!opened && !mutation.isPending) setMode(null); }}>
      <DialogContent className="max-h-[90dvh] overflow-y-auto"><DialogHeader><DialogTitle>
        {({ lender: "登记出借人", account: "更新收款资料", identity: "核实身份关联", loan: "登记借入", confirm: "确认期初余额", repay: "申请归还本金", download: "下载借款材料" } as Record<string, string>)[mode ?? ""]}
      </DialogTitle><DialogDescription>{mode === "repay" ? "同一公司和出借人可合并多笔借款，提交后进入独立付款复核。" :
        mode === "confirm" ? "请根据凭据与代账核对余额。确认后不能覆盖修改，系统外已还本金须有依据。" :
        mode === "account" ? "更新后须重新确认身份，原未付申请失效，请安全取消后重新申请。" : "仅录入已核对的业务事实；敏感材料仅供有权人员查阅。"}</DialogDescription></DialogHeader>
        <form onSubmit={submit} className="grid gap-4">
          {error ? <p role="alert" className="text-sm text-red-700">{resolveErrorMessage(error)}</p> : null}
          {mode === "lender" ? <><Field label="公司主体"><select required name="company" className={selectClass}><option value="">请选择</option>{companies.data?.items.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select></Field>
            <Field label="出借人姓名"><Input name="name" required maxLength={120} /></Field></> : null}
          {mode === "lender" || mode === "account" ? <><Field label="收款银行"><select name="bank" required className={selectClass} defaultValue={selectedLender?.bankInstitutionId ?? ""}><option value="">请选择</option>{banks.data?.items.filter((b) => b.code === "CCB").map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}</select></Field>
            <Field label="开户行名称"><Input name="bankName" required maxLength={200} defaultValue={selectedLender?.bankName} /></Field>
            <Field label="账户名"><Input name="accountName" required maxLength={120} autoComplete="off" /></Field>
            <Field label="收款账号"><Input name="account" required inputMode="numeric" pattern="[0-9]{10,30}" autoComplete="off" /></Field></> : null}
          {mode === "identity" ? <><Field label="检索 OA 人员"><Input value={identitySearch} onChange={(e) => setIdentitySearch(e.target.value)} placeholder="姓名或员工编号" /></Field>
            <Field label="出借人对应身份"><select key={identitySearch} name="employee" required className={selectClass} defaultValue=""><option value="">请选择已核实身份</option><option value="external">已核实：非员工且没有关联 OA 账号</option>
              {people.data?.items.map((p) => <option key={p.id} value={p.id}>{p.name} · {p.employeeNo}</option>)}</select></Field></> : null}
          {mode === "loan" ? <><Field label="出借人"><select required name="lender" className={selectClass}><option value="">请选择本页已登记出借人</option>{lenders.data?.items.map((l) => <option key={l.id} value={l.id}>{l.name} · {l.legalEntityName}</option>)}</select></Field>
            <Field label="原借入凭据唯一引用"><Input name="origin" required maxLength={200} /></Field>
            <Field label="原始本金"><Input name="principal" required inputMode="decimal" pattern="[0-9]{1,12}(\.[0-9]{1,2})?" /></Field>
            <Field label="核对日未还本金"><Input name="opening" required inputMode="decimal" pattern="[0-9]{1,12}(\.[0-9]{1,2})?" /></Field>
            <Field label="实际到账日期"><Input name="received" required type="date" /></Field><Field label="余额核对截止日"><Input name="asOf" required type="date" /></Field>
            <Field label="登记性质"><select name="entry" className={selectClass}><option value="historical">历史借入登记</option><option value="current">当期实际借入</option></select></Field></> : null}
          {mode === "confirm" ? <><p>原本金 ¥{selectedLoan?.originalPrincipal}，核对日未还 ¥{selectedLoan?.openingOutstandingPrincipal}</p>
            <Field label="代账余额确认引用"><Input required name="reference" minLength={2} maxLength={200} /></Field></> : null}
          {mode === "repay" ? <><Field label="出借人"><select required className={selectClass} value={lenderId} onChange={(e) => { setLenderId(e.target.value); setAmounts({}); setCandidatePage(1); }}><option value="">请选择</option>
            {lenders.data?.items.map((l) => <option key={l.id} value={l.id}>{l.name} · {l.legalEntityName}</option>)}</select></Field>
            <p className="text-sm text-zinc-600">填写已确认借款的分配金额，留空表示本次不归还。翻页保留已填写金额。</p>
            {candidates.error ? <p role="alert">{resolveErrorMessage(candidates.error)}</p> : null}
            {candidates.isSuccess ? candidates.data.items.filter((l) => l.lender.id === lenderId && l.confirmationStatus === "confirmed").map((l) => <Field key={l.id} label={`${l.originReference}（可还 ¥${l.available}）`}>
              <Input aria-label={`分配 ${l.originReference}`} inputMode="decimal" pattern="[0-9]{1,12}(\.[0-9]{1,2})?" value={amounts[l.id] ?? ""} onChange={(e) => setAmounts({ ...amounts, [l.id]: e.target.value })} /></Field>) : null}</> : null}
          {mode === "repay" && lenderId ? <div className="flex flex-wrap items-center gap-2"><Button type="button" variant="outline" disabled={candidatePage === 1} onClick={() => setCandidatePage(candidatePage - 1)}>上一页借款</Button>
            <span>第 {candidatePage} 页 · 已填 {Object.values(amounts).filter((v) => v.trim()).length} 笔</span><Button type="button" variant="outline" disabled={!candidates.data || candidatePage * 30 >= candidates.data.total} onClick={() => setCandidatePage(candidatePage + 1)}>下一页借款</Button></div> : null}
          {["identity", "repay", "download"].includes(mode ?? "") ? <Field label={mode === "download" ? "下载用途" : "说明"}><Input name="reason" required minLength={2} maxLength={500} /></Field> : null}
          <Button type="submit" disabled={mutation.isPending || modalQueryBlocked || mode === "repay" && !Object.values(amounts).some((v) => v.trim())}>{mutation.isPending ? "处理中…" : mode === "repay" ? "提交还款申请" : "确认"}</Button>
        </form>
      </DialogContent>
    </Dialog>
  </ListWorkspace>;
}