"use client"
import { format } from "date-fns"
import { CheckCircle, Clock, XCircle } from "lucide-react"
import { Suspense } from "react"
import { getPageTrade } from "@/actions/trade"
import { DataTable, useDataTable } from "@/components/data-table"
import type { Trade } from "@/models/trade"

export default function TradePage() {
  const table = useDataTable<Trade>((page, size) =>
    getPageTrade({ page, size }),
  )

  return (
    <Suspense>
      <DataTable<Trade>
        {...table}
        columns={[
          { header: "ID", accessorKey: "id" },
          { header: "套餐号", accessorKey: "inner_no" },
          {
            header: "支付方式",
            accessorKey: "method",
            cell: ({ row }) => {
              const methodMap: Record<number, string> = {
                1: "支付宝",
                2: "微信",
                3: "其他",
                4: "支付宝",
                5: "微信",
              }
              return (
                <div>{methodMap[row.original.method as number] || "未知"}</div>
              )
            },
          },
          {
            header: "支付金额",
            accessorKey: "payment",
            cell: ({ row }) => {
              const payment =
                typeof row.original.payment === "string"
                  ? parseFloat(row.original.payment)
                  : row.original.payment || 0
              return (
                <div className="flex gap-1">
                  <span
                    className={
                      payment > 0 ? "text-green-500" : "text-orange-500"
                    }
                  >
                    ￥{payment.toFixed(2)}
                  </span>
                </div>
              )
            },
          },
          {
            header: "支付平台",
            accessorKey: "platform",
            cell: ({ row }) => {
              const platform = row.original.platform
              if (!platform) return <span>-</span>
              return (
                <div className="flex items-center gap-2">
                  {platform === 1 ? (
                    <span>电脑网站</span>
                  ) : platform === 2 ? (
                    <span>手机网站</span>
                  ) : (
                    <span>-</span>
                  )}
                </div>
              )
            },
          },
          // { header: "已退款", accessorKey: "refunded" },
          {
            header: "支付状态",
            accessorKey: "status",
            cell: ({ row }) => {
              const status = row.original.status

              switch (status) {
                case 0:
                  return (
                    <div className="flex items-center gap-2 text-yellow-600">
                      <Clock className="h-4 w-4" />
                      <span>待支付</span>
                    </div>
                  )
                case 1:
                  return (
                    <div className="flex items-center gap-2 text-green-600">
                      <CheckCircle className="h-4 w-4" />
                      <span>支付成功</span>
                    </div>
                  )
                case 2:
                  return (
                    <div className="flex items-center gap-2 text-gray-500">
                      <XCircle className="h-4 w-4" />
                      <span>取消支付</span>
                    </div>
                  )
                default:
                  return <span className="text-gray-400">-</span>
              }
            },
          },
          { header: "购买套餐", accessorKey: "subject" },
          { header: "类型", accessorKey: "type" },
          {
            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>
  )
}