"use client";

import { useQuery } from "@tanstack/react-query";

import { StatusBadge } from "@/components/status-badge";
import { api } from "@/lib/api";

type CallbackLog = {
  id: number;
  sourceType: string;
  sourceCode: string;
  relatedNo: string;
  verifyStatus: string;
  processStatus: string;
  errorMessage: string;
};

export default function CallbackLogsPage() {
  const query = useQuery({
    queryKey: ["callback-logs"],
    queryFn: () => api.get<CallbackLog[]>("/api/v1/admin/callback-logs"),
  });

  return (
    <section className="panel">
      <h3>回调日志</h3>
      <div className="list-grid">
        {query.data?.map((item) => (
          <div className="list-item" key={item.id}>
            <div className="toolbar">
              <strong>{item.sourceType} / {item.sourceCode}</strong>
              <StatusBadge value={item.processStatus} />
            </div>
            <div className="muted">
              关联号：{item.relatedNo || "-"} · 验签：{item.verifyStatus}
            </div>
            {item.errorMessage ? <div className="muted">错误：{item.errorMessage}</div> : null}
          </div>
        ))}
      </div>
    </section>
  );
}