import { useQuery } from "@tanstack/react-query";
import { fetchApOperations } from "../api/apOperations";
import { PageHeader } from "../components/common/PageHeader";
import { RiskFlagsCard } from "../components/common/RiskFlagsCard";

export function ApOperationsPage() {
  const summaryQuery = useQuery({
    queryKey: ["ap-operations"],
    queryFn: () => fetchApOperations(),
  });

  if (summaryQuery.isLoading) {
    return <div className="card-std p-6 text-sm text-zinc-500">加载 AP 运营视图...</div>;
  }

  if (summaryQuery.isError || !summaryQuery.data) {
    return <div className="card-std p-6 text-sm text-red-600">AP 运营视图加载失败。</div>;
  }

  const data = summaryQuery.data;
  return (
    <div className="space-y-6">
      <PageHeader title="AP 运营" subtitle="财务视角查看待付款、部分匹配、异常和预算超支四类最小运营摘要。" />

      <div className="grid gap-4 md:grid-cols-4">
        <div className="card-std p-5"><div className="text-sm text-zinc-500">待付款</div><div className="mt-2 text-2xl font-bold text-zinc-900">{data.summary.pendingPaymentCount}</div></div>
        <div className="card-std p-5"><div className="text-sm text-zinc-500">部分匹配</div><div className="mt-2 text-2xl font-bold text-zinc-900">{data.summary.partialMatchCount}</div></div>
        <div className="card-std p-5"><div className="text-sm text-zinc-500">异常</div><div className="mt-2 text-2xl font-bold text-zinc-900">{data.summary.exceptionCount}</div></div>
        <div className="card-std p-5"><div className="text-sm text-zinc-500">预算超支</div><div className="mt-2 text-2xl font-bold text-zinc-900">{data.summary.budgetOverspendCount}</div></div>
      </div>

      <div className="grid gap-6 xl:grid-cols-2">
        <div className="card-std space-y-3 p-6">
          <h3 className="text-base font-semibold text-zinc-900">待付款批次</h3>
          <div className="space-y-2 text-sm">
            {data.pendingPaymentBatches.length ? data.pendingPaymentBatches.map((item) => (
              <div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3">
                <div className="font-medium text-zinc-900">{item.batchNo}</div>
                <div className="text-zinc-600">{item.name}</div>
                <div className="text-xs text-zinc-500">{item.entityType} · {item.status} · {item.totalAmount}{item.highRisk ? " · 高风险" : ""}</div>
              </div>
            )) : <div className="text-zinc-500">暂无待付款批次</div>}
          </div>
        </div>

        <div className="card-std space-y-3 p-6">
          <h3 className="text-base font-semibold text-zinc-900">异常付款项</h3>
          <div className="space-y-2 text-sm">
            {data.failedPaymentBatchItems.length ? data.failedPaymentBatchItems.map((item) => (
              <div key={item.id} className="rounded-lg border border-red-200 bg-red-50 px-3 py-3">
                <div className="font-medium text-zinc-900">{item.entityCode}</div>
                <div className="text-zinc-600">{item.failureMessage ?? item.failureCode ?? "执行失败"}</div>
                <div className="text-xs text-zinc-500">{item.amount} {item.currencyCode}</div>
              </div>
            )) : <div className="text-zinc-500">暂无失败项</div>}
          </div>
        </div>
      </div>

      <div className="grid gap-6 xl:grid-cols-2">
        <RiskFlagsCard items={data.exceptionRiskFlags} title="异常风险项" />
        <RiskFlagsCard items={data.budgetOverspendRisks} title="预算超支风险" />
      </div>

      <div className="card-std space-y-3 p-6">
        <h3 className="text-base font-semibold text-zinc-900">部分匹配与对账异常</h3>
        <div className="space-y-2 text-sm">
          {data.partialMatchItems.length ? data.partialMatchItems.map((item) => (
            <div key={item.id} className="rounded-lg border border-zinc-200 px-3 py-3">
              <div className="font-medium text-zinc-900">{item.anomalyCode ?? item.matchStatus}</div>
              <div className="text-zinc-600">订单 {item.orderAmount ?? "-"} / 交易 {item.transactionAmount ?? "-"} {item.currency}</div>
            </div>
          )) : <div className="text-zinc-500">暂无异常</div>}
        </div>
      </div>
    </div>
  );
}