// @vitest-environment jsdom

import { fireEvent, render, screen } from "@testing-library/react";
import type { ReactNode } from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { makeTrendMetric, makeTrendsPayload, makeTrendsRegion } from "../test-helpers";
import { TrendsSection } from "./trends-section";

const tooltipSpy = vi.hoisted(() => vi.fn());

vi.mock("recharts", () => ({
  ResponsiveContainer: ({ children }: { children: ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  LineChart: ({ children }: { children: ReactNode }) => <div>{children}</div>,
  Line: ({ name }: { name: string }) => <div data-testid="trend-line">{name}</div>,
  XAxis: () => <div />,
  YAxis: () => <div />,
  CartesianGrid: () => <div />,
  Tooltip: (props: unknown) => {
    tooltipSpy(props);
    return <div data-testid="trend-tooltip" />;
  },
}));

describe("TrendsSection", () => {
  beforeEach(() => {
    tooltipSpy.mockClear();
  });

  it("updates range and triggers refresh", () => {
    const setRangeMinutes = vi.fn();
    const onRefresh = vi.fn();

    render(
      <TrendsSection
        trends={null}
        trendsLoading={false}
        rangeMinutes={60}
        setRangeMinutes={setRangeMinutes}
        onRefresh={onRefresh}
        xAxisTicksBuilder={() => []}
      />
    );

    fireEvent.change(screen.getByLabelText("Time range"), { target: { value: "120" } });
    fireEvent.click(screen.getByRole("button", { name: "Refresh Trends" }));

    expect(setRangeMinutes).toHaveBeenCalledWith(120);
    expect(onRefresh).toHaveBeenCalledTimes(1);
  });

  it("shows query error prompt and renders trend metric cards", () => {
    const trends = makeTrendsPayload({
      regions: [
        makeTrendsRegion({
          regionId: "nextgen:aws:prod:prod-aws-us-west-2-ng",
          regionName: "us-west-2-ng",
          status: "ready",
        }),
        makeTrendsRegion({
          regionId: "nextgen:aws:prod:prod-aws-us-east-1-ng",
          regionName: "us-east-1-ng",
          status: "query-error",
          errorMessage: "VictoriaMetrics query failed",
        }),
      ],
      metrics: [
        makeTrendMetric({ metricKey: "cpuRequestUsage" }),
        makeTrendMetric({ metricKey: "uptimeSeconds" }),
      ],
    });

    render(
      <TrendsSection
        trends={trends}
        trendsLoading={false}
        rangeMinutes={60}
        setRangeMinutes={() => {}}
        onRefresh={() => {}}
        xAxisTicksBuilder={() => [1, 2]}
      />
    );

    expect(screen.getByText("VictoriaMetrics query failed for 1 region.")).toBeInTheDocument();
    expect(screen.getByText("CPU Request Usage")).toBeInTheDocument();
    expect(screen.queryByText("Process Uptime")).not.toBeInTheDocument();
    expect(screen.getAllByTestId("trend-line").map((line) => line.textContent)).toEqual([
      "aws/us-west-2-ng",
    ]);
  });

  it("keeps trend tooltips inside chart bounds horizontally", () => {
    const trends = makeTrendsPayload({
      regions: [
        makeTrendsRegion({
          regionId: "nextgen:aws:prod:prod-aws-us-west-2-ng",
          regionName: "us-west-2-ng",
          status: "ready",
        }),
      ],
      metrics: [makeTrendMetric({ metricKey: "cpuRequestUsage" })],
    });

    render(
      <TrendsSection
        trends={trends}
        trendsLoading={false}
        rangeMinutes={60}
        setRangeMinutes={() => {}}
        onRefresh={() => {}}
        xAxisTicksBuilder={() => [1, 2]}
      />
    );

    expect(tooltipSpy).toHaveBeenCalled();
    const props = tooltipSpy.mock.calls[0][0] as {
      allowEscapeViewBox?: { x?: boolean; y?: boolean };
      reverseDirection?: { x?: boolean; y?: boolean };
    };
    expect(props.allowEscapeViewBox).toEqual({ x: false, y: true });
    expect(props.reverseDirection).toEqual({ x: false, y: true });
  });

  it("prevents trend tooltips from stealing chart hover events", () => {
    const trends = makeTrendsPayload({
      regions: [
        makeTrendsRegion({
          regionId: "nextgen:aws:prod:prod-aws-us-west-2-ng",
          regionName: "us-west-2-ng",
          status: "ready",
        }),
      ],
      metrics: [makeTrendMetric({ metricKey: "cpuRequestUsage" })],
    });

    render(
      <TrendsSection
        trends={trends}
        trendsLoading={false}
        rangeMinutes={60}
        setRangeMinutes={() => {}}
        onRefresh={() => {}}
        xAxisTicksBuilder={() => [1, 2]}
      />
    );

    expect(tooltipSpy).toHaveBeenCalled();
    const props = tooltipSpy.mock.calls[0][0] as {
      wrapperStyle?: { pointerEvents?: string };
    };
    expect(props.wrapperStyle?.pointerEvents).toBe("none");
  });
});