import React from "react";
import { describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import EarningsChart, { type ChartBar } from "@/components/home/EarningsChart";

vi.mock("recharts", () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  BarChart: ({
    children,
    data,
  }: {
    children: React.ReactNode;
    data: Array<{ month: string; value: number; fill: string }>;
  }) => (
    <div data-testid="bar-chart" data-chart-data={JSON.stringify(data)}>
      {children}
    </div>
  ),
  Bar: ({
    shape: Shape,
  }: {
    shape?: React.ComponentType<{
      payload?: { fill: string };
      x?: number;
      y?: number;
      width?: number;
      height?: number;
    }>;
  }) => (
    <div data-testid="bar">
      {Shape ? (
        <>
          <Shape
            payload={{ fill: "#FCD704" }}
            x={10}
            y={20}
            width={30}
            height={80}
          />
          <Shape x={10} y={20} width={30} height={80} />
        </>
      ) : null}
    </div>
  ),
  XAxis: () => null,
  YAxis: ({
    tickFormatter,
  }: {
    tickFormatter?: (value: number) => string;
  }) => {
    tickFormatter?.(1500);
    return null;
  },
  Tooltip: ({
    content,
  }: {
    content: React.ReactElement;
  }) => (
    <div data-testid="tooltip">
      {React.cloneElement(content, {
        active: false,
        payload: [],
        label: "فارغ",
      } as Record<string, unknown>)}
      {React.cloneElement(content, {
        active: true,
        payload: [{ value: undefined }],
        label: "يناير",
      } as Record<string, unknown>)}
    </div>
  ),
  CartesianGrid: () => null,
  Rectangle: (props: { fill?: string }) => (
    <rect data-testid="rectangle" data-fill={props.fill ?? ""} />
  ),
}));

function buildBars(overrides: Partial<ChartBar>[] = []): ChartBar[] {
  const defaults: ChartBar[] = [
    { label: "يناير", profit: 2500, is_current: true },
    { label: "فبراير", profit: 1800, is_current: false },
  ];
  return defaults.map((bar, index) => ({
    ...bar,
    ...(overrides[index] ?? {}),
  }));
}

describe("EarningsChart", () => {
  it("renders the empty state when there are no bars", () => {
    render(<EarningsChart bars={[]} currency="SAR" rangeMonths={6} />);

    expect(screen.getByText("الأرباح الشهرية")).toBeInTheDocument();
    expect(screen.getByText("آخر 6 أشهر")).toBeInTheDocument();
    expect(screen.getByText("لا توجد بيانات لعرضها")).toBeInTheDocument();
    expect(screen.queryByTestId("bar-chart")).not.toBeInTheDocument();
  });

  it("renders the chart with transformed bar data for current and prior months", () => {
    render(
      <EarningsChart
        bars={buildBars()}
        currency="SAR"
        rangeMonths={12}
      />,
    );

    const chart = screen.getByTestId("bar-chart");
    const chartData = JSON.parse(chart.getAttribute("data-chart-data") ?? "[]");

    expect(chartData).toEqual([
      { month: "يناير", value: 2500, fill: "#FCD704" },
      { month: "فبراير", value: 1800, fill: "rgba(252,215,4,0.25)" },
    ]);
    expect(screen.getByTestId("responsive-container")).toBeInTheDocument();
    expect(screen.getByTestId("bar")).toBeInTheDocument();
  });

  it("renders tooltip content with formatted currency", () => {
    render(
      <EarningsChart
        bars={[{ label: "مارس", profit: 3200, is_current: true }]}
        currency="SAR"
        rangeMonths={3}
      />,
    );

    expect(screen.getByTestId("tooltip")).toBeInTheDocument();
    expect(screen.getByText("يناير")).toBeInTheDocument();
    expect(screen.getByText("0 ريال")).toBeInTheDocument();
  });

  it("renders custom bar shapes including the default fill fallback", () => {
    render(
      <EarningsChart
        bars={[{ label: "أبريل", profit: 0, is_current: false }]}
        currency="SAR"
        rangeMonths={1}
      />,
    );

    const rectangles = screen.getAllByTestId("rectangle");
    expect(rectangles[0]).toHaveAttribute("data-fill", "#FCD704");
    expect(rectangles[1]).toHaveAttribute("data-fill", "#FCD704");
  });
});