import React from "react";
import { describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

vi.mock("recharts", () => {
  const Chart = ({
    children,
    data,
    type,
  }: {
    children: React.ReactNode;
    data: unknown;
    type: string;
  }) => <div data-testid={`${type}-chart`} data-chart-data={JSON.stringify(data)}>{children}</div>;
  return {
    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
    AreaChart: (props: { children: React.ReactNode; data: unknown }) => <Chart {...props} type="area" />,
    BarChart: (props: { children: React.ReactNode; data: unknown }) => <Chart {...props} type="bar" />,
    Area: () => null,
    Bar: () => null,
    XAxis: () => null,
    YAxis: () => null,
    CartesianGrid: () => null,
    Tooltip: ({ content }: { content: React.ReactElement }) => (
      <div>
        {React.cloneElement(content as React.ReactElement<Record<string, unknown>>, {
          active: false,
          payload: [],
        })}
        {React.cloneElement(content as React.ReactElement<Record<string, unknown>>, {
          active: true,
          label: "يناير",
          payload: [{ name: "current", value: 1200, color: "#FCD704" }],
        })}
        {React.cloneElement(content as React.ReactElement<Record<string, unknown>>, {
          active: true,
          label: "فبراير",
          payload: [{ name: "prev", value: 800, color: "#888" }],
        })}
      </div>
    ),
  };
});

import MonthlyCompareChart from "@/components/earnings/MonthlyCompareChart";

describe("MonthlyCompareChart", () => {
  it("renders transformed area data and its active tooltip", () => {
    render(
      <MonthlyCompareChart
        data={{ labels: ["يناير", "فبراير"], current_year: [1200], previous_year: [900, 800] }}
      />,
    );

    expect(screen.getByTestId("area-chart").dataset.chartData).toBe(
      JSON.stringify([
        { month: "يناير", current: 1200, prev: 900 },
        { month: "فبراير", current: 0, prev: 800 },
      ]),
    );
    expect(screen.getByText("يناير")).toBeInTheDocument();
    expect(screen.getByText("1,200 ريال — هذا العام")).toBeInTheDocument();
  });

  it("fills missing previous_year points with zero", () => {
    render(
      <MonthlyCompareChart
        data={{ labels: ["يناير", "فبراير"], current_year: [1200, 500], previous_year: [900] }}
      />,
    );
    expect(screen.getByTestId("area-chart").dataset.chartData).toBe(
      JSON.stringify([
        { month: "يناير", current: 1200, prev: 900 },
        { month: "فبراير", current: 500, prev: 0 },
      ]),
    );
  });

  it("toggles the visualization from area to bars", async () => {
    const user = userEvent.setup();
    render(
      <MonthlyCompareChart
        data={{ labels: ["يناير"], current_year: [1200], previous_year: [900] }}
      />,
    );

    await user.click(screen.getByRole("button", { name: "أعمدة" }));

    expect(screen.getByTestId("bar-chart")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "أعمدة" })).toHaveClass("bg-[#FCD704]");
  });
});