import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { RequestsTab } from "../RequestsTab";
import {
	useJellyseerrStats,
	useJellyseerRequests,
} from "../../../hooks/useJellyseer";
import type { JellyseerStatsResponse } from "../../../api/jellyseerr";
import type { ServiceInstance } from "../../../types";

// Mock both hooks so the tab + its table render without a QueryClientProvider.
vi.mock("../../../hooks/useJellyseer", () => ({
	useJellyseerrStats: vi.fn(),
	useJellyseerRequests: vi.fn(),
}));
const mockUseJellyseerrStats = vi.mocked(useJellyseerrStats);
const mockUseJellyseerRequests = vi.mocked(useJellyseerRequests);
type StatsResult = ReturnType<typeof useJellyseerrStats>;
type RequestsResult = ReturnType<typeof useJellyseerRequests>;

function mockStats(result: {
	data: JellyseerStatsResponse | undefined;
	isLoading: boolean;
	error: Error | null;
}) {
	// UseQueryResult has many fields; cast the partial we care about.
	mockUseJellyseerrStats.mockReturnValue(result as unknown as StatsResult);
	mockUseJellyseerRequests.mockReturnValue({
		data: [],
		isLoading: false,
		error: null,
	} as unknown as RequestsResult);
}

function makeInstance(
	config: Record<string, unknown>,
	secrets_set: Record<string, boolean> = {},
): ServiceInstance {
	return {
		id: "jellyfin-1",
		service_type: "jellyfin",
		name: "Main Jellyfin",
		config,
		secrets_set,
		enabled: true,
		created_at: 1_700_000_000,
		updated_at: 1_700_000_000,
	};
}

describe("RequestsTab", () => {
	it("shows empty-state CTA when Jellyseerr is not configured", () => {
		mockStats({ data: undefined, isLoading: false, error: null });
		render(
			<RequestsTab
				instance={makeInstance({
					base_url: "https://jf.example.com",
					user_id: "u1",
				})}
			/>,
		);
		expect(screen.getByText(/not configured/i)).toBeInTheDocument();
		expect(screen.getByText(/jellyseerr_url/i)).toBeInTheDocument();
	});

	it("shows empty-state when only URL is set (api key secret missing)", () => {
		mockStats({ data: undefined, isLoading: false, error: null });
		render(
			<RequestsTab
				instance={makeInstance({
					jellyseerr_url: "https://requests.example.com",
				})}
			/>,
		);
		expect(screen.getByText(/not configured/i)).toBeInTheDocument();
	});

	it("shows the configured Jellyseerr URL and the stats grid", () => {
		mockStats({
			data: {
				stats: [
					{ key: "pending", label: "Pending", value: 3 },
					{ key: "total", label: "Total", value: 42 },
				],
				recent: [
					{
						id: 1,
						name: "Inception",
						type: "movie",
						status: "pending",
						media_status: "available",
					},
				],
			},
			isLoading: false,
			error: null,
		});
		render(
			<RequestsTab
				instance={makeInstance(
					{ jellyseerr_url: "https://requests.example.com" },
					{ jellyseerr_api_key: true },
				)}
			/>,
		);
		expect(
			screen.getByText("https://requests.example.com"),
		).toBeInTheDocument();
		expect(screen.queryByText(/not configured/i)).not.toBeInTheDocument();
		expect(screen.getByText("Pending")).toBeInTheDocument();
		expect(screen.getByText("3")).toBeInTheDocument();
	});

	it("surfaces a fetch error", () => {
		mockStats({ data: undefined, isLoading: false, error: new Error("boom") });
		render(
			<RequestsTab
				instance={makeInstance(
					{ jellyseerr_url: "https://requests.example.com" },
					{ jellyseerr_api_key: true },
				)}
			/>,
		);
		expect(screen.getByText(/boom/i)).toBeInTheDocument();
	});
});
