import { describe, expect, it, 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 { MapPage } from "../MapPage";

const mockFetchMapColorThresholds = vi.fn(async () => ({
  threshold_low: 10,
  threshold_medium: 50,
  threshold_high: 100,
}));

let lastArgs: { range: string; origin: string } = { range: "", origin: "" };
const mockUseMapData = vi.fn((range: string, origin: string) => {
  lastArgs = { range, origin };
  return {
    countries: {},
    countryNames: {},
    bans: [],
    total: 0,
    loading: false,
    error: null,
    refresh: vi.fn(),
  };
});

vi.mock("../hooks/useMapData", () => ({
  useMapData: (range: string, origin: string) => mockUseMapData(range, origin),
}));

vi.mock("../api/config", async () => ({
  fetchMapColorThresholds: mockFetchMapColorThresholds,
}));

vi.mock("../components/WorldMap", () => ({
  WorldMap: () => <div data-testid="world-map" />,
}));

describe("MapPage", () => {
  it("renders DashboardFilterBar and updates data when filters change", async () => {
    const user = userEvent.setup();

    render(
      <FluentProvider theme={webLightTheme}>
        <MapPage />
      </FluentProvider>,
    );

    // Initial load should call useMapData with default filters.
    expect(lastArgs).toEqual({ range: "24h", origin: "all" });

    await user.click(screen.getByRole("button", { name: /Last 7 days/i }));
    expect(lastArgs.range).toBe("7d");

    await user.click(screen.getByRole("button", { name: /Blocklist/i }));
    expect(lastArgs.origin).toBe("blocklist");
  });
});