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

vi.mock("@/shared/charts/EChart.jsx", () => ({
    EChart: ({ className }) => <div className={className} data-testid="multi-series-echart" />,
}));

import {
    createMultiSeriesLineOption,
    MultiSeriesLineChart,
    normalizeSeries,
} from "@/shared/charts/MultiSeriesLineChart.jsx";

test("renders the standard empty state without creating an ECharts instance", () => {
    render(<MultiSeriesLineChart ariaLabel="空趋势" categories={[]} series={[]} />);

    expect(screen.getByRole("status", { name: "空趋势" })).toHaveTextContent("当前无数据");
    expect(screen.queryByTestId("multi-series-echart")).not.toBeInTheDocument();
});

test("normalizes invalid points and configures dual axes", () => {
    const series = normalizeSeries(
        [
            { data: [1, "bad"], key: "users", name: "用户" },
            { data: [100, 200], key: "coins", name: "金币", yAxisIndex: 1 },
        ],
        2,
    );
    const option = createMultiSeriesLineOption(["2026-01-01", "2026-01-02"], series, true);

    expect(series[0].data).toEqual([1, 0]);
    expect(option.yAxis).toHaveLength(2);
    expect(option.series[1].yAxisIndex).toBe(1);
    expect(option).toMatchObject({ animation: false, animationDuration: 0, animationDurationUpdate: 0 });
});

test("renders the shared ECharts wrapper when data is available", () => {
    render(
        <MultiSeriesLineChart
            ariaLabel="活动趋势"
            categories={["2026-01-01"]}
            series={[{ data: [3], key: "users", name: "参与用户" }]}
        />,
    );

    expect(screen.getByRole("group", { name: "活动趋势" })).toBeInTheDocument();
    expect(screen.getByTestId("multi-series-echart")).toBeInTheDocument();
});
