import type { ColumnDef } from "@tanstack/react-table"
import { fetchMyRefundOrders } from "@/api/order"
import AccountCell from "@/components/composites/accountCell"
import OrderFilterBar from "@/components/composites/orderFilterBar"
import DataTable from "@/components/data-table"
import Page from "@/components/page"
import { useMyOrderPage } from "@/lib/hooks/useMyOrderPage"
import { useProducts } from "@/lib/hooks/useProducts"
import {
  formatDate,
  formatMoney,
  formatOrderType,
  type MyOrderQueryParams,
  type OrderFilters,
  type OrderItem,
} from "@/lib/models/order"

const mapRefundFilters = (
  filters: OrderFilters,
): Partial<MyOrderQueryParams> => ({
  BTime: filters.bTime || undefined,
  ETime: filters.eTime || undefined,
  ProductId: filters.productId === "0" ? undefined : Number(filters.productId),
  PackageId: filters.packageName === "0" ? undefined : filters.packageName,
  KeyWord: filters.keyword.trim() || undefined,
})

const columns: ColumnDef<OrderItem>[] = [
  {
    accessorKey: "CreateTime",
    header: "日期",
    cell: ({ row }) => formatDate(row.original.CreateTime),
  },
  {
    accessorKey: "OrderNo",
    header: "订单编号",
  },
  {
    accessorKey: "OrderType",
    header: "类型",
    cell: ({ row }) => formatOrderType(row.original.OrderType),
  },
  {
    accessorKey: "ProductName",
    header: "产品",
  },
  {
    accessorKey: "PackageName",
    header: "套餐",
  },
  {
    accessorKey: "Accounts",
    header: "账号",
    cell: ({ row }) => <AccountCell accounts={row.original.Accounts} />,
  },
  {
    accessorKey: "ConnectCount",
    header: "连接数",
    cell: ({ row }) => row.original.ConnectCount,
  },
  {
    accessorKey: "DayCount",
    header: "退款时长",
    cell: ({ row }) => `${row.original.DayCount}天`,
  },
  {
    accessorKey: "DayPrice",
    header: "退款单价",
    cell: ({ row }) => formatMoney(row.original.DayPrice),
  },
  {
    accessorKey: "PaymentAmount",
    header: "实付金额",
    cell: ({ row }) => formatMoney(row.original.PaymentAmount),
  },
  {
    accessorKey: "RefundAmount",
    header: "退款金额",
    cell: ({ row }) => formatMoney(row.original.RefundAmount),
  },
]

export default function RefundOrdersPage() {
  const products = useProducts()
  const {
    filters,
    patch,
    load,
    reset,
    total,
    status,
    page,
    size,
    setPage,
    changeSize,
    paged,
  } = useMyOrderPage(fetchMyRefundOrders, mapRefundFilters)

  return (
    <Page>
      <OrderFilterBar
        filters={filters}
        products={products}
        showOrderType={false}
        onPatch={patch}
        onSearch={load}
        onReset={reset}
      />

      <div className="bg-white rounded-lg p-4 flex flex-col gap-4">
        <h3 className="font-semibold text-lg">退货订单管理</h3>
        <DataTable
          data={paged}
          status={status}
          columns={columns}
          pagination={{
            page,
            size,
            total,
            onPageChange: setPage,
            onSizeChange: changeSize,
          }}
        />
      </div>
    </Page>
  )
}