"use client"
import { format } from "date-fns"
import { Suspense } from "react"
import { bindAdmin, getPageUsers } from "@/actions/user"
import { DataTable, useDataTable } from "@/components/data-table"
import { Badge } from "@/components/ui/badge"
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",
              cell: ({ row }) => {
                const balance =
                  typeof row.original.balance === "string"
                    ? parseFloat(row.original.balance)
                    : row.original.balance || 0
                return (
                  <div className="flex gap-1">
                    <span
                      className={
                        balance > 0 ? "text-green-500" : "text-orange-500"
                      }
                    >
                      ￥{balance.toFixed(2)}
                    </span>
                  </div>
                )
              },
            },
            {
              header: "认证状态",
              accessorKey: "id_type",
              cell: ({ row }) => {
                const status = row.original.id_type
                return (
                  <Badge
                    variant={status === 1 ? "default" : "secondary"}
                    className={
                      status === 1
                        ? "bg-green-100 text-green-800"
                        : "bg-gray-100 text-gray-800"
                    }
                  >
                    {status === 1 ? "已认证" : "未认证"}
                  </Badge>
                )
              },
            },
            {
              header: "账号状态",
              accessorKey: "status",
              cell: ({ row }) => {
                const status = row.original.status
                return status === 1 ? "正常" : ""
              },
            },
            { header: "联系方式", accessorKey: "contact_wechat" },
            { header: "管理员", accessorKey: "admin_id" },
            {
              header: "最后登录时间",
              accessorKey: "last_login",
              cell: ({ row }) =>
                format(new Date(row.original.last_login), "yyyy-MM-dd HH:mm"),
            },
            {
              header: "创建时间",
              accessorKey: "created_at",
              cell: ({ row }) =>
                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
            },
            {
              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>
  )
}