import { describe, it, expect, beforeEach, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { WidgetConfigDialog } from "../WidgetConfigDialog";

// jsdom has no window.matchMedia; default to desktop (matches: false).
function setMatchMedia(matches: boolean) {
	window.matchMedia = ((query: string) => ({
		matches: query.includes("768") ? matches : false,
		media: query,
		onchange: null,
		addEventListener: () => {},
		removeEventListener: () => {},
		addListener: () => {},
		removeListener: () => {},
		dispatchEvent: () => false,
	})) as unknown as typeof window.matchMedia;
}

vi.mock("../../hooks/useWidgets", () => ({
	useWidgetInstances: () => ({ data: [] }),
	useWidgetReferences: () => ({ data: [] }),
	useSaveWidgetInstance: () => ({ mutateAsync: vi.fn(), isPending: false }),
	useDeleteWidgetInstance: () => ({ mutateAsync: vi.fn(), isPending: false }),
	useCreateWidgetReference: () => ({ mutateAsync: vi.fn() }),
	useDeleteWidgetReference: () => ({ mutateAsync: vi.fn() }),
	useDetachWidgetReference: () => ({ mutateAsync: vi.fn() }),
	useUpdateWidgetReference: () => ({ mutateAsync: vi.fn() }),
}));

vi.mock("../../hooks/useServices", () => ({
	useServiceInstances: () => ({ data: [] }),
}));

vi.mock("../../hooks/useSettings", () => ({
	useTasks: () => ({ data: [] }),
}));

beforeEach(() => setMatchMedia(false));

describe("WidgetConfigDialog (desktop)", () => {
	it("renders a Dialog with the dashboard widgets title at md+", () => {
		render(<WidgetConfigDialog open={true} onClose={() => {}} />);
		expect(
			screen.getByRole("heading", { name: "Dashboard widgets" }),
		).toBeInTheDocument();
	});
});

describe("WidgetConfigDialog (mobile SheetForm — slice 8)", () => {
	beforeEach(() => setMatchMedia(true));

	it("renders a SheetForm with the dashboard widgets title below md", () => {
		render(<WidgetConfigDialog open={true} onClose={() => {}} />);
		expect(screen.getByText("Dashboard widgets")).toBeInTheDocument();
		// List mode footer: "Done" button closes.
		expect(screen.getByRole("button", { name: "Done" })).toBeInTheDocument();
	});

	it("prompts before discarding a widget draft (R4.5)", async () => {
		const { userEvent } = await import("@testing-library/user-event");
		render(<WidgetConfigDialog open={true} onClose={() => {}} />);

		// Enter draft mode by clicking an "Add widget" button.
		await userEvent.click(screen.getByRole("button", { name: /Backups/i }));

		// Now in draft mode — Cancel should prompt before resetting.
		await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
		expect(
			screen.getByRole("heading", { name: "Discard changes?" }),
		).toBeInTheDocument();
	});
});