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";
import type { UseMapDataResult } from "../../hooks/useMapData";

let lastArgs: { range: string; origin: string } = { range: "", origin: "" };
let dataState: UseMapDataResult = {
  countries: {},
  countryNames: {},
  bans: [],
  total: 0,
  loading: false,
  error: null,
  refresh: () => {},
};

function getLastArgs(): { range: string; origin: string } {
  return lastArgs;
}

function setMapData(newState: Partial<typeof dataState>): void {
  dataState = { ...dataState, ...newState };
}

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

vi.mock("../../api/config", () => ({
  fetchMapColorThresholds: vi.fn(() => ({
    threshold_low: 10,
    threshold_medium: 50,
    threshold_high: 100,
  })),
}));

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(getLastArgs()).toEqual({ range: "24h", origin: "all" });

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

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

  it("supports pagination with 100 items per page and reset on filter changes", async () => {
    const user = userEvent.setup();

    const bans: import("../../types/map").MapBanItem[] = Array.from({ length: 120 }, (_, index) => ({
      ip: "192.0.2." + String(index),
      jail: "ssh",
      banned_at: new Date(Date.now() - index * 1000).toISOString(),
      service: null,
      country_code: "US",
      country_name: "United States",
      asn: null,
      org: null,
      ban_count: 1,
      origin: "selfblock",
    }));

    setMapData({
      countries: { US: 120 },
      countryNames: { US: "United States" },
      bans,
      total: 120,
      loading: false,
      error: null,
    });

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

    expect(await screen.findByText(/Page 1 of 2/i)).toBeInTheDocument();
    expect(screen.getByText(/Showing 100 of 120 filtered bans/i)).toBeInTheDocument();

    await user.click(screen.getByRole("button", { name: /Next page/i }));
    expect(await screen.findByText(/Page 2 of 2/i)).toBeInTheDocument();

    await user.click(screen.getByRole("button", { name: /Previous page/i }));
    expect(await screen.findByText(/Page 1 of 2/i)).toBeInTheDocument();

    // Page size selector should adjust pagination
    await user.selectOptions(screen.getByRole("combobox", { name: /Page size/i }), "25");
    expect(await screen.findByText(/Page 1 of 5/i)).toBeInTheDocument();
    expect(screen.getByText(/Showing 25 of 120 filtered bans/i)).toBeInTheDocument();

    // Changing filter keeps page reset to 1
    await user.click(screen.getByRole("button", { name: /Blocklist/i }));
    expect(getLastArgs().origin).toBe("blocklist");
    expect(await screen.findByText(/Page 1 of 5/i)).toBeInTheDocument();
  });
});
