import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import { ServicePage } from "../ServicePage";
import type { ServiceInstance } from "../../types";

const instance: ServiceInstance = {
	id: "svc-1",
	service_type: "jellyfin",
	name: "Main Jellyfin",
	config: { base_url: "https://jf.example.com", user_id: "u1" },
	secrets_set: { api_key: true },
	enabled: true,
	created_at: 1_700_000_000,
	updated_at: 1_700_000_000,
};

// typeInfo no longer needed on ServicePage (config moved to Settings).

const secondInstance: ServiceInstance = {
	...instance,
	id: "svc-2",
	name: "Backup Jellyfin",
};

vi.mock("../../hooks/useServices", () => ({
	useServiceInstances: () => ({
		data: (window as unknown as { __svcInstances?: ServiceInstance[] })
			?.__svcInstances ?? [instance],
	}),
}));

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

vi.mock("../../components/WidgetConfigDialog", () => ({
	WidgetConfigDialog: () => null,
}));

vi.mock("../../components/WidgetInstance", () => ({
	WidgetInstanceCard: () => null,
}));

vi.mock("../../integrations/registry", () => ({
	getServiceBinding: () => ({
		name: "Jellyfin",
		description: "Media server",
		widgets: [],
	}),
}));

function renderServicePage(path: string) {
	return render(
		<MemoryRouter initialEntries={[path]}>
			<Routes>
				<Route
					path="/services/:serviceType/:serviceId"
					element={<ServicePage />}
				/>
			</Routes>
		</MemoryRouter>,
	);
}

describe("ServicePage tab skeleton", () => {
	it("renders Overview + Media + Requests + Widgets for jellyfin", () => {
		renderServicePage("/services/jellyfin/svc-1");
		expect(screen.getByRole("tab", { name: "Overview" })).toBeInTheDocument();
		expect(screen.getByRole("tab", { name: "Media" })).toBeInTheDocument();
		expect(screen.getByRole("tab", { name: "Requests" })).toBeInTheDocument();
		expect(screen.getByRole("tab", { name: "Widgets" })).toBeInTheDocument();
	});

	it("does NOT render Config tab (moved to Settings)", () => {
		renderServicePage("/services/jellyfin/svc-1");
		expect(
			screen.queryByRole("tab", { name: "Config" }),
		).not.toBeInTheDocument();
	});

	it("does NOT render Media/Requests for non-jellyfin types", () => {
		const sshInstance = { ...instance, service_type: "ssh_tasks", id: "ssh-1" };
		(
			window as unknown as { __svcInstances: ServiceInstance[] }
		).__svcInstances = [sshInstance];
		renderServicePage("/services/ssh_tasks/ssh-1");
		expect(screen.getByRole("tab", { name: "Files" })).toBeInTheDocument();
		expect(screen.getByRole("tab", { name: "Actions" })).toBeInTheDocument();
		expect(
			screen.queryByRole("tab", { name: "Media" }),
		).not.toBeInTheDocument();
	});

	it("shows instance tabs when >1 enabled sibling of same type", () => {
		(
			window as unknown as { __svcInstances: ServiceInstance[] }
		).__svcInstances = [instance, secondInstance];
		renderServicePage("/services/jellyfin/svc-1");
		expect(
			screen.getByRole("tab", { name: "Main Jellyfin" }),
		).toBeInTheDocument();
		expect(
			screen.getByRole("tab", { name: "Backup Jellyfin" }),
		).toBeInTheDocument();
	});

	it("hides instance tabs when only one instance", () => {
		(
			window as unknown as { __svcInstances: ServiceInstance[] }
		).__svcInstances = [instance];
		renderServicePage("/services/jellyfin/svc-1");
		expect(
			screen.queryByRole("tab", { name: "Main Jellyfin" }),
		).not.toBeInTheDocument();
	});

	it("clicking an instance tab navigates to that instance", async () => {
		const user = userEvent.setup();
		(
			window as unknown as { __svcInstances: ServiceInstance[] }
		).__svcInstances = [instance, secondInstance];
		renderServicePage("/services/jellyfin/svc-1");
		await user.click(screen.getByRole("tab", { name: "Backup Jellyfin" }));
		// The test router would navigate; we can't assert URL directly without
		// a useNavigate mock, but the click should not throw.
	});
});
