import { resolveErrorMessage as resolveUserErrorMessage } from "../lib/resolveErrorMessage";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";

import {
  createPaymentAccount,
  disablePaymentAccount,
  fetchBankInstitutions,
  fetchPaymentAccounts,
  replacePaymentAccount,
  revealPaymentAccount,
  type PaymentAccount,
} from "../api/paymentAccounts";
import { fetchLegalEntities } from "../api/masterData";
import { useAuth } from "../auth/AuthContext";
import { hasAnyPermission, hasPermission } from "../auth/permissions";
import { PageHeader } from "../components/common/PageHeader";
import { resolveSingleCompanyState } from "../features/company/singleCompany";
import { PageScaffold } from "../components/patterns/PageScaffold";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { Button } from "../components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../components/ui/dialog";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Textarea } from "../components/ui/textarea";

function errorText(error: unknown) {
  return resolveUserErrorMessage(error, "操作失败");
}

export function PaymentAccountsPage() {
  const queryClient = useQueryClient();
  const { permissions } = useAuth();
  const canManage = hasPermission(permissions, "payment.account.manage");
  const canReveal = hasPermission(permissions, "payment.account.read_full");
  const canManageCompanyInformation = hasAnyPermission(permissions, ["masterdata.view", "masterdata.manage"]);
  const [editing, setEditing] = useState<PaymentAccount | null>(null);
  const [legalEntityId, setLegalEntityId] = useState("");
  const [bankInstitutionId, setBankInstitutionId] = useState("");
  const [accountName, setAccountName] = useState("");
  const [accountNumber, setAccountNumber] = useState("");
  const [revealTarget, setRevealTarget] = useState<PaymentAccount | null>(null);
  const [revealReason, setRevealReason] = useState("");
  const [revealedAccount, setRevealedAccount] = useState("");
  const [disableTarget, setDisableTarget] = useState<PaymentAccount | null>(null);

  const accountsQuery = useQuery({ queryKey: ["payment-accounts"], queryFn: fetchPaymentAccounts });
  const banksQuery = useQuery({ queryKey: ["bank-institutions"], queryFn: fetchBankInstitutions });
  const legalEntitiesQuery = useQuery({
    queryKey: ["master-data", "legal-entities", "payment-accounts"],
    queryFn: () => fetchLegalEntities({ enabled: true }),
    enabled: canManage,
  });

  const activeCompanies = legalEntitiesQuery.data?.items ?? [];
  const companyState = resolveSingleCompanyState(activeCompanies);
  const singleCompany = companyState.kind === "single" ? companyState.company : null;

  useEffect(() => {
    if (!editing && singleCompany) {
      setLegalEntityId(singleCompany.id);
    }
  }, [editing, singleCompany]);

  const resetForm = () => {
    setEditing(null);
    setLegalEntityId(singleCompany?.id ?? "");
    setBankInstitutionId("");
    setAccountName("");
    setAccountNumber("");
  };
  const refresh = () => queryClient.invalidateQueries({ queryKey: ["payment-accounts"] });

  const saveMutation = useMutation({
    mutationFn: () => {
      const payload = { legalEntityId, bankInstitutionId, accountName, accountNumber };
      return editing ? replacePaymentAccount(editing.id, payload) : createPaymentAccount(payload);
    },
    onSuccess: async () => {
      toast.success(editing ? "企业银行账户已替换，历史账户已保留" : "企业银行账户已新增");
      resetForm();
      await refresh();
    },
    onError: (error) => toast.error(errorText(error)),
  });
  const disableMutation = useMutation({
    mutationFn: disablePaymentAccount,
    onSuccess: async () => {
      setDisableTarget(null);
      toast.success("企业银行账户已停用");
      await refresh();
    },
    onError: (error) => toast.error(errorText(error)),
  });
  const revealMutation = useMutation({
    mutationFn: () => revealPaymentAccount(revealTarget!.id, revealReason.trim()),
    onSuccess: ({ accountNumber: value }) => {
      setRevealedAccount(value);
      window.setTimeout(() => revealMutation.reset(), 0);
    },
    onError: (error) => toast.error(errorText(error)),
  });

  const accounts = accountsQuery.data?.items ?? [];
  return (
    <PageScaffold>
      <PageHeader title="企业银行账户" subtitle="维护当前公司的付款来源账户；完整账号仅在填写原因后临时显示。" />
      <div className="mx-auto max-w-6xl space-y-5">
        {canManage && legalEntitiesQuery.isLoading ? (
          <SectionPanel title="企业银行账户">
            <div className="text-sm text-zinc-500">正在读取公司信息...</div>
          </SectionPanel>
        ) : null}

        {canManage && legalEntitiesQuery.isError ? (
          <SectionPanel title="企业银行账户">
            <div className="text-sm text-red-600">公司信息读取失败，请刷新后重试。</div>
          </SectionPanel>
        ) : null}

        {canManage && !legalEntitiesQuery.isLoading && !legalEntitiesQuery.isError && companyState.kind === "empty" ? (
          <SectionPanel title="先完善公司信息">
            <div className="space-y-3 text-sm text-zinc-600">
              <p>企业银行账户必须关联当前公司。请先完善公司信息，再回来录入付款账户。</p>
              {canManageCompanyInformation ? (
                <Button asChild type="button" variant="secondary">
                  <Link to="/system/master-data">完善公司信息</Link>
                </Button>
              ) : (
                <p>请联系管理员先完善公司信息。</p>
              )}
            </div>
          </SectionPanel>
        ) : null}

        {canManage && companyState.kind === "multiple" ? (
          <SectionPanel title="公司信息需要处理">
            <div className="space-y-3 text-sm text-red-600">
              <p>检测到多条启用的公司信息，系统不会猜测付款账户应关联哪一条。请先处理公司信息。</p>
              {canManageCompanyInformation ? (
                <Button asChild type="button" variant="secondary">
                  <Link to="/system/master-data">查看公司信息</Link>
                </Button>
              ) : null}
            </div>
          </SectionPanel>
        ) : null}

        {canManage && singleCompany ? (
          <SectionPanel title={editing ? "替换企业银行账户" : "新增企业银行账户"}>
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>当前公司</Label>
                <div className="input-std flex min-h-10 items-center bg-zinc-50 text-sm text-zinc-700" data-testid="payment-account-company">
                  {editing?.legalEntity.name ?? singleCompany.name}
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="payment-account-bank">开户银行</Label>
                <select id="payment-account-bank" className="select-std w-full" value={bankInstitutionId} onChange={(event) => setBankInstitutionId(event.target.value)}>
                  <option value="">请选择</option>
                  {(banksQuery.data?.items ?? []).map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
                </select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="payment-account-name">付款方账户名称</Label>
                <Input id="payment-account-name" value={accountName} onChange={(event) => setAccountName(event.target.value)} autoComplete="off" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="payment-account-number">付款方客户账号</Label>
                <Input id="payment-account-number" type="password" value={accountNumber} onChange={(event) => setAccountNumber(event.target.value)} autoComplete="new-password" />
              </div>
            </div>
            <div className="mt-4 flex gap-2">
              <Button type="button" disabled={saveMutation.isPending || !legalEntityId || !bankInstitutionId || !accountName.trim() || !accountNumber.trim()} onClick={() => saveMutation.mutate()}>{saveMutation.isPending ? "保存中..." : editing ? "确认替换" : "保存账户"}</Button>
              {editing ? <Button type="button" variant="secondary" onClick={resetForm}>取消替换</Button> : null}
            </div>
          </SectionPanel>
        ) : null}

        <SectionPanel title="账户记录">
          <div className="space-y-3">
            {accounts.map((account) => (
              <div key={account.id} className="detail-evidence-card flex flex-wrap items-center justify-between gap-4">
                <div>
                  <div className="font-medium text-zinc-900">{account.legalEntity.name} · {account.accountName}</div>
                  <div className="mt-1 text-sm text-zinc-600">{account.bankInstitution.name} · {account.accountNumberMasked ?? "-"}</div>
                  <div className="mt-1 text-xs text-zinc-500">{account.enabled ? "当前启用" : "历史/已停用"}</div>
                </div>
                <div className="flex flex-wrap gap-2">
                  {canReveal ? <Button type="button" variant="secondary" onClick={() => { setRevealTarget(account); setRevealReason(""); setRevealedAccount(""); }}>查看完整账号</Button> : null}
                  {canManage && account.enabled ? <Button type="button" variant="secondary" onClick={() => { setEditing(account); setLegalEntityId(account.legalEntity.id); setBankInstitutionId(account.bankInstitution.id); setAccountName(account.accountName); setAccountNumber(""); }}>替换</Button> : null}
                  {canManage && account.enabled ? <Button type="button" variant="destructive" disabled={disableMutation.isPending} onClick={() => setDisableTarget(account)}>停用</Button> : null}
                </div>
              </div>
            ))}
            {!accountsQuery.isLoading && !accounts.length ? <div className="text-sm text-zinc-500">尚未配置企业银行账户。</div> : null}
          </div>
        </SectionPanel>
      </div>

      <Dialog open={Boolean(revealTarget)} onOpenChange={(open) => { if (!open) { setRevealTarget(null); setRevealReason(""); setRevealedAccount(""); } }}>
        <DialogContent className="max-w-md p-5">
          <DialogHeader><DialogTitle>查看完整企业银行账号</DialogTitle><DialogDescription>本次查看会记录查看人、目标账户、时间和原因。</DialogDescription></DialogHeader>
          {revealedAccount ? <div className="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 font-mono text-sm text-amber-900 break-all">{revealedAccount}</div> : <div className="mt-4 space-y-2"><Label htmlFor="payment-account-reveal-reason">查看原因</Label><Textarea id="payment-account-reveal-reason" value={revealReason} onChange={(event) => setRevealReason(event.target.value)} maxLength={500} rows={3} /></div>}
          <DialogFooter><Button type="button" variant="secondary" onClick={() => { setRevealTarget(null); setRevealReason(""); setRevealedAccount(""); }}>关闭</Button>{!revealedAccount ? <Button type="button" disabled={revealReason.trim().length < 2 || revealMutation.isPending} onClick={() => revealMutation.mutate()}>{revealMutation.isPending ? "读取中..." : "确认查看"}</Button> : null}</DialogFooter>
        </DialogContent>
      </Dialog>
      <Dialog open={Boolean(disableTarget)} onOpenChange={(open) => { if (!open) setDisableTarget(null); }}>
        <DialogContent className="max-w-md p-5">
          <DialogHeader><DialogTitle>停用企业银行账户</DialogTitle><DialogDescription>停用后不能为新付款批次生成制单；历史批次仍保留冻结账户摘要。确认停用 {disableTarget?.legalEntity.name ?? "当前公司"} 的当前账户吗？</DialogDescription></DialogHeader>
          <DialogFooter><Button type="button" variant="secondary" onClick={() => setDisableTarget(null)}>返回</Button><Button type="button" variant="destructive" disabled={disableMutation.isPending} onClick={() => { if (disableTarget) disableMutation.mutate(disableTarget.id); }}>{disableMutation.isPending ? "停用中..." : "确认停用"}</Button></DialogFooter>
        </DialogContent>
      </Dialog>
    </PageScaffold>
  );
}

export default PaymentAccountsPage;