import type { ColumnDef } from "@tanstack/react-table"
import { useMemo, useState } from "react"
import { fetchCashOutList } from "@/api/cashOut"
import DataTable from "@/components/data-table"
import Page from "@/components/page"
import { useList } from "@/lib/hooks/useList"
import type { CashOutItem } from "@/lib/models/cashOut"

const PAGE_SIZE = 10

const columns: ColumnDef<CashOutItem>[] = [
  {
    accessorKey: "username",
    header: "用户",
  },
  {
    accessorKey: "money",
    header: "提现金额",
    cell: ({ row }) => `¥${row.original.money}`,
  },
  {
    accessorKey: "apply_reason",
    header: "提现理由",
    cell: ({ row }) => row.original.apply_reason || "--",
  },
  {
    accessorKey: "alipay_account",
    header: "支付宝账号",
  },
  {
    accessorKey: "remark",
    header: "备注",
    cell: ({ row }) => row.original.remark || "--",
  },
  {
    accessorKey: "status",
    header: "状态",
  },
  {
    accessorKey: "create_time",
    header: "提现时间",
  },
]

export default function CashOutPage() {
  const { data, status } = useList(fetchCashOutList)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(PAGE_SIZE)

  // 接口返回全量列表，本地做前端分页
  const paged = useMemo(
    () => data.slice((page - 1) * pageSize, page * pageSize),
    [data, page, pageSize],
  )

  return (
    <Page>
      <div className="bg-white rounded-lg p-4">
        <h3 className="font-semibold text-lg">提现管理</h3>
        <DataTable<CashOutItem>
          data={paged}
          status={status}
          columns={columns}
          pagination={{
            page,
            size: pageSize,
            total: data.length,
            onPageChange: setPage,
            onSizeChange: size => {
              setPageSize(size)
              setPage(1)
            },
          }}
        />
      </div>
    </Page>
  )
}