// Component tests for the Phase 10 in-game shell sidebar. Validates
// the default selected tab, the Calculator / Inspector / Order
// switching, the empty-state copy that matches the IA section, and
// the `?sidebar=` URL seed convention used by the mobile bottom-tabs.

import "@testing-library/jest-dom/vitest";
import { fireEvent, render } from "@testing-library/svelte";
import {
	beforeEach,
	describe,
	expect,
	test,
	vi,
} from "vitest";

import { i18n } from "../src/lib/i18n/index.svelte";

const pageMock = vi.hoisted(() => ({
	url: new URL("http://localhost/games/g1/map"),
	params: { id: "g1" } as Record<string, string>,
}));

vi.mock("$app/state", () => ({
	page: pageMock,
}));

import Sidebar from "../src/lib/sidebar/sidebar.svelte";

beforeEach(() => {
	i18n.resetForTests("en");
	pageMock.url = new URL("http://localhost/games/g1/map");
});

describe("game-shell sidebar", () => {
	test("renders the inspector tab content by default", () => {
		const ui = render(Sidebar, {
			props: { open: false, onClose: () => {} },
		});
		expect(ui.getByTestId("sidebar-tool-inspector")).toBeInTheDocument();
		expect(ui.getByTestId("sidebar-tool-inspector")).toHaveTextContent(
			"select an object on the map",
		);
		expect(ui.getByTestId("sidebar")).toHaveAttribute(
			"data-active-tab",
			"inspector",
		);
	});

	test("switching tabs updates the rendered tool", async () => {
		const ui = render(Sidebar, {
			props: { open: false, onClose: () => {} },
		});
		await fireEvent.click(ui.getByTestId("sidebar-tab-calculator"));
		expect(ui.getByTestId("sidebar-tool-calculator")).toBeInTheDocument();
		expect(ui.queryByTestId("sidebar-tool-inspector")).toBeNull();
		expect(ui.queryByTestId("sidebar-tool-order")).toBeNull();

		await fireEvent.click(ui.getByTestId("sidebar-tab-order"));
		expect(ui.getByTestId("sidebar-tool-order")).toBeInTheDocument();
		expect(ui.queryByTestId("sidebar-tool-calculator")).toBeNull();
	});

	test("empty-state copy matches the IA section verbatim", () => {
		const ui = render(Sidebar, {
			props: { open: false, onClose: () => {} },
		});
		expect(ui.getByTestId("sidebar-tool-inspector")).toHaveTextContent(
			"select an object on the map",
		);
	});

	test("?sidebar=calc seeds the calculator tab on first mount", () => {
		pageMock.url = new URL("http://localhost/games/g1/map?sidebar=calc");
		const ui = render(Sidebar, {
			props: { open: false, onClose: () => {} },
		});
		expect(ui.getByTestId("sidebar-tool-calculator")).toBeInTheDocument();
		expect(ui.getByTestId("sidebar")).toHaveAttribute(
			"data-active-tab",
			"calculator",
		);
	});

	test("?sidebar=order seeds the order tab on first mount", () => {
		pageMock.url = new URL("http://localhost/games/g1/map?sidebar=order");
		const ui = render(Sidebar, {
			props: { open: false, onClose: () => {} },
		});
		expect(ui.getByTestId("sidebar-tool-order")).toBeInTheDocument();
	});

	test("close button calls the onClose prop", async () => {
		const onClose = vi.fn();
		const ui = render(Sidebar, { props: { open: true, onClose } });
		await fireEvent.click(ui.getByTestId("sidebar-close"));
		expect(onClose).toHaveBeenCalledTimes(1);
	});
});