"use client"
import { format } from "date-fns"
import { CreditCard } from "lucide-react"
import { Suspense } from "react"
import { getPageBill } from "@/actions/bill"
import { DataTable, useDataTable } from "@/components/data-table"
import type { Billing } from "@/models/billing"

export default function BillingPage() {
  const table = useDataTable<Billing>((page, size) =>
    getPageBill({ page, size }),
  )

  return (
    <Suspense>
      <DataTable<Billing>
        {...table}
        columns={[
          { header: "ID", accessorKey: "id" },
          { header: "账单号", accessorKey: "bill_no" },
          {
            header: "账单详情",
            accessorKey: "info",
            cell: ({ row }) => {
              const bill = row.original

              return (
                <div className="flex items-center gap-2">
                  {/* 类型展示 */}
                  <div className="shrink-0">
                    {bill.type === 1 && (
                      <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
                        <CreditCard size={16} />
                        <span>消费</span>
                      </div>
                    )}
                    {bill.type === 2 && (
                      <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
                        <CreditCard size={16} />
                        <span>退款</span>
                      </div>
                    )}
                    {bill.type === 3 && (
                      <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
                        <CreditCard size={16} />
                        <span>充值</span>
                      </div>
                    )}
                  </div>

                  {/* 账单详情 */}
                  <div className="text-sm">{bill.info}</div>
                </div>
              )
            },
          },
          {
            header: "支付信息",
            accessorKey: "amount",
            cell: ({ row }) => {
              const amount =
                typeof row.original.amount === "string"
                  ? parseFloat(row.original.amount)
                  : row.original.amount || 0
              return (
                <div className="flex gap-1">
                  <span
                    className={
                      amount > 0 ? "text-green-500" : "text-orange-500"
                    }
                  >
                    ￥{amount.toFixed(2)}
                  </span>
                </div>
              )
            },
          },
          // { header: "资源数量", accessorKey: "resource_id" },
          {
            header: "创建时间",
            accessorKey: "created_at",
            cell: ({ row }) =>
              format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
          },
          {
            header: "更新时间",
            accessorKey: "updated_at",
            cell: ({ row }) =>
              format(new Date(row.original.updated_at), "yyyy-MM-dd HH:mm"),
          },
        ]}
      />
    </Suspense>
  )
}