/**
 * Tests for WorldMap component.
 *
 * Verifies that hovering a country shows a tooltip with the country name and ban count.
 */

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

// Mock react-simple-maps to avoid fetching real TopoJSON and to control geometry.
vi.mock("react-simple-maps", () => ({
  ComposableMap: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  ZoomableGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  Geography: ({ children }: { children?: React.ReactNode }) => <g>{children}</g>,
  useGeographies: () => ({
    geographies: [{ rsmKey: "geo-1", id: 840 }],
    path: { centroid: () => [10, 10] },
  }),
}));

import { WorldMap } from "../WorldMap";

describe("WorldMap", () => {
  it("shows a tooltip with country name and ban count on hover", () => {
    render(
      <FluentProvider theme={webLightTheme}>
        <WorldMap
          countries={{ US: 42 }}
          countryNames={{ US: "United States" }}
          selectedCountry={null}
          onSelectCountry={vi.fn()}
        />
      </FluentProvider>,
    );

    // Tooltip should not be present initially
    expect(screen.queryByRole("tooltip")).toBeNull();

    const countryButton = screen.getByRole("button", { name: /US: 42 bans/i });
    fireEvent.mouseEnter(countryButton, { clientX: 10, clientY: 10 });

    const tooltip = screen.getByRole("tooltip");
    expect(tooltip).toHaveTextContent("United States");
    expect(tooltip).toHaveTextContent("42 bans");
    expect(tooltip).toHaveStyle({ left: "22px", top: "22px" });

    fireEvent.mouseLeave(countryButton);
    expect(screen.queryByRole("tooltip")).toBeNull();
  });
});