"use client"
import { Suspense } from "react"
import { bindAdmin, getPageUsers } from "@/actions/user"
import { DataTable, useDataTable } from "@/components/data-table"
import { Button } from "@/components/ui/button"
import { useFetch } from "@/hooks/data"
import type { User } from "@/models/user"

export default function UserPage() {
  const table = useDataTable<User>((page, size) => getPageUsers({ page, size }))
  const bind = useFetch((id: number) => bindAdmin({ id }), {
    done: "用户已认领",
    fail: "用户认领失败",
  })
  return (
    <div>
      <Suspense>
        <DataTable<User>
          {...table}
          columns={[
            { header: "账号", accessorKey: "username" },
            { header: "手机", accessorKey: "phone" },
            { header: "邮箱", accessorKey: "email" },
            { header: "姓名", accessorKey: "name" },
            { header: "余额", accessorKey: "balance" },
            { header: "认证状态", accessorKey: "id_type" },
            { header: "账号状态", accessorKey: "status" },
            { header: "联系方式", accessorKey: "contact_wechat" },
            { header: "管理员", accessorKey: "admin_id" },
            { header: "最后登录时间", accessorKey: "last_login" },
            { header: "创建时间", accessorKey: "created_at" },
            {
              header: "操作",
              cell: ctx => (
                <Button
                  size={"sm"}
                  onClick={() => bind(ctx.row.original.id)}
                  disabled={ctx.row.original.admin_id !== null}
                >
                  {ctx.row.original.admin_id !== null ? "已认领" : "认领"}
                </Button>
              ),
            },
          ]}
        />
      </Suspense>
    </div>
  )
}