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 { MY_ORDER_PAGE_SIZE, useMyOrderPage } from "@/lib/hooks/useMyOrderPage"
import { useProducts } from "@/lib/hooks/useProducts"
import {
  formatDate,
  formatMoney,
  type OrderItem,
  totalConnections,
} from "@/lib/models/order"

const columns: ColumnDef<OrderItem>[] = [
  {
    accessorKey: "CreateTime",
    header: "日期",
    cell: ({ row }) => formatDate(row.original.CreateTime),
  },
  {
    accessorKey: "OrderNo",
    header: "订单编号",
  },
  {
    accessorKey: "ProductName",
    header: "产品",
  },
  {
    accessorKey: "PackageName",
    header: "套餐",
  },
  {
    accessorKey: "Accounts",
    header: "账号",
    cell: ({ row }) => <AccountCell accounts={row.original.Accounts} />,
  },
  {
    accessorKey: "ConnectCount",
    header: "连接数",
    cell: ({ row }) => totalConnections(row.original),
  },
  {
    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, total, status, page, setPage, paged } =
    useMyOrderPage(fetchMyRefundOrders)

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

      <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: MY_ORDER_PAGE_SIZE,
            total,
            onPageChange: setPage,
          }}
        />
      </div>
    </Page>
  )
}