import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { ChartStateWrapper } from "../ChartStateWrapper";

function wrap(ui: React.ReactElement) {
  return render(
    <FluentProvider theme={webLightTheme}>{ui}</FluentProvider>,
  );
}

describe("ChartStateWrapper", () => {
  it("renders a spinner when isLoading is true", () => {
    wrap(
      <ChartStateWrapper
        isLoading={true}
        error={null}
        onRetry={vi.fn()}
        isEmpty={false}
      >
        <div>chart</div>
      </ChartStateWrapper>,
    );
    expect(screen.getByRole("progressbar")).toBeInTheDocument();
    expect(screen.queryByText("chart")).not.toBeInTheDocument();
  });

  it("renders an error bar with retry button when error is set", () => {
    const onRetry = vi.fn();
    wrap(
      <ChartStateWrapper
        isLoading={false}
        error="Network error"
        onRetry={onRetry}
        isEmpty={false}
      >
        <div>chart</div>
      </ChartStateWrapper>,
    );
    expect(screen.getByText("Network error")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
    expect(screen.queryByText("chart")).not.toBeInTheDocument();
  });

  it("calls onRetry when Retry button is clicked", async () => {
    const onRetry = vi.fn();
    const user = userEvent.setup();
    wrap(
      <ChartStateWrapper
        isLoading={false}
        error="Oops"
        onRetry={onRetry}
        isEmpty={false}
      >
        <div>chart</div>
      </ChartStateWrapper>,
    );
    await user.click(screen.getByRole("button", { name: /retry/i }));
    expect(onRetry).toHaveBeenCalledOnce();
  });

  it("renders the empty message when isEmpty is true", () => {
    wrap(
      <ChartStateWrapper
        isLoading={false}
        error={null}
        onRetry={vi.fn()}
        isEmpty={true}
        emptyMessage="Nothing here."
      >
        <div>chart</div>
      </ChartStateWrapper>,
    );
    expect(screen.getByText("Nothing here.")).toBeInTheDocument();
    expect(screen.queryByText("chart")).not.toBeInTheDocument();
  });

  it("renders children when not loading, no error, and not empty", () => {
    wrap(
      <ChartStateWrapper
        isLoading={false}
        error={null}
        onRetry={vi.fn()}
        isEmpty={false}
      >
        <div>chart content</div>
      </ChartStateWrapper>,
    );
    expect(screen.getByText("chart content")).toBeInTheDocument();
  });

  it("prioritises error state over loading state", () => {
    wrap(
      <ChartStateWrapper
        isLoading={true}
        error="Some error"
        onRetry={vi.fn()}
        isEmpty={false}
      >
        <div>chart</div>
      </ChartStateWrapper>,
    );
    expect(screen.getByText("Some error")).toBeInTheDocument();
    expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
  });

  it("uses default empty message when none is provided", () => {
    wrap(
      <ChartStateWrapper
        isLoading={false}
        error={null}
        onRetry={vi.fn()}
        isEmpty={true}
      >
        <div>chart</div>
      </ChartStateWrapper>,
    );
    expect(
      screen.getByText("No bans in this time range."),
    ).toBeInTheDocument();
  });
});
