import { render, screen } from "@testing-library/react";
import { expect, test, vi } from "vitest";
import { FinanceRechargeDetailList } from "./FinanceRechargeDetailList.jsx";

const baseProps = {
    bills: {
        items: [],
        page: 1,
        pageSize: 50,
        total: 0,
    },
    error: "",
    filters: {
        appCode: "",
        keyword: "",
        page: 1,
        timeRange: { endMs: "", startMs: "" },
    },
    loading: false,
    onFiltersChange: vi.fn(),
    onReload: vi.fn(),
    options: {
        apps: [
            { appCode: "lalu", appName: "lalu" },
            { appCode: "aslan", appName: "Aslan" },
        ],
    },
};

test("renders app recharge detail columns and values", () => {
    render(
        <FinanceRechargeDetailList
            {...baseProps}
            bills={{
                ...baseProps.bills,
                items: [
                    {
                        appCode: "aslan",
                        coinAmount: 90000,
                        commandId: "cmd-1",
                        createdAtMs: 1760000000000,
                        currencyCode: "SAR",
                        exchangeCoinAmount: 90000,
                        exchangeUsdMinorAmount: 999,
                        externalRef: "GPA.1",
                        id: "tx-google",
                        providerAmountMinor: 1299,
                        rechargeType: "google_play_recharge",
                        taxDeductionMinor: 195,
                        taxRate: 0.15,
                        transactionId: "tx-google",
                        usdMinorAmount: 999,
                    },
                ],
                total: 1,
            }}
        />,
    );

    expect(screen.getByRole("columnheader", { name: "APP" })).toBeInTheDocument();
    expect(screen.getByRole("columnheader", { name: "充值总额" })).toBeInTheDocument();
    expect(screen.getByRole("columnheader", { name: "充值来源" })).toBeInTheDocument();
    expect(screen.getByRole("columnheader", { name: "充值订单号" })).toBeInTheDocument();
    expect(screen.getByRole("columnheader", { name: "美金换算" })).toBeInTheDocument();
    expect(screen.getByRole("columnheader", { name: "账单金额" })).toBeInTheDocument();
    expect(screen.getByRole("columnheader", { name: "用户实付" })).toBeInTheDocument();
    expect(screen.getByRole("columnheader", { name: "三方税率扣款" })).toBeInTheDocument();
    expect(screen.getByText("Aslan")).toBeInTheDocument();
    expect(screen.getByText("90,000 金币")).toBeInTheDocument();
    expect(screen.getByText("谷歌充值")).toBeInTheDocument();
    expect(screen.getByText("tx-google")).toBeInTheDocument();
    expect(screen.getByText("cmd-1 / GPA.1")).toBeInTheDocument();
    expect(screen.getByText("90,000 金币 = USD 9.99")).toBeInTheDocument();
    expect(screen.getAllByText("SAR 12.99")).toHaveLength(2);
    expect(screen.getByText("SAR 1.95 / 15%")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /充值时间 · 中国时区/ })).toBeInTheDocument();
});

test("keeps empty recharge detail table colspan aligned with visible columns", () => {
    const { container } = render(<FinanceRechargeDetailList {...baseProps} />);

    expect(container.querySelector("tbody td")?.colSpan).toBe(9);
    expect(screen.getByText("当前无数据")).toBeInTheDocument();
});