"use client";

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

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

type InviteRelation = {
  id: number;
  inviterUserId: number;
  inviteeUserId: number;
  rewardStatus: string;
  rewardPoints: number;
};

export default function InviteRelationsPage() {
  const query = useQuery({
    queryKey: ["admin-invite-relations"],
    queryFn: () => api.get<InviteRelation[]>("/api/v1/admin/invite-relations"),
  });

  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.inviterUserId} to 被邀请人 {item.inviteeUserId}
              </strong>
              <StatusBadge value={item.rewardStatus} />
            </div>
            <div className="muted">奖励积分：{item.rewardPoints}</div>
          </div>
        ))}
      </div>
    </section>
  );
}