import RoleItem from "@ax/components/UserRolesAndSites/RoleItem";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import type { IRole } from "@ax/types";

import { cleanup, render, screen } from "@testing-library/react";
import { ThemeProvider } from "styled-components";

afterEach(cleanup);

const mockRole = (overrides?: Partial<IRole>): IRole => ({
	id: 1,
	name: "Admin",
	hex: "#5057FF",
	description: "Admin role",
	permissions: {
		totalPermissions: "10",
		sitePermissions: [],
		globalPermissions: [],
	},
	active: true,
	users: null,
	editable: true,
	...overrides,
});

describe("RoleItem Component", () => {
	describe("Rendering", () => {
		it("should render title", () => {
			const props = {
				title: "Global Permissions",
				description: "You can access to Global data",
				roles: [],
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("Global Permissions")).toBeTruthy();
		});

		it("should render description", () => {
			const props = {
				title: "Global Permissions",
				description: "You can access to Global data",
				roles: [],
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("You can access to Global data")).toBeTruthy();
		});

		it("should render with multiple roles", () => {
			const roles = [
				mockRole({ id: 1, name: "Editor", hex: "#5057FF" }),
				mockRole({ id: 2, name: "Viewer", hex: "#FF0000" }),
			];
			const props = {
				title: "Site Permissions",
				description: "You have the following roles",
				roles,
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("Site Permissions")).toBeTruthy();
			expect(screen.getByText("You have the following roles")).toBeTruthy();
		});

		it("should render with empty roles array", () => {
			const props = {
				title: "Empty Roles",
				description: "No roles assigned",
				roles: [],
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("Empty Roles")).toBeTruthy();
			expect(screen.getByText("No roles assigned")).toBeTruthy();
		});
	});

	describe("Super Admin Mode", () => {
		it("should render Super-admin label when isSuperAdmin is true", () => {
			const props = {
				title: "You are a Super admin",
				description: "You have full access to all features",
				roles: [],
				isSuperAdmin: true,
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("You are a Super admin")).toBeTruthy();
		});

		it("should not render regular roles when isSuperAdmin is true", () => {
			const roles = [mockRole({ id: 1, name: "Editor" })];
			const props = {
				title: "You are a Super admin",
				description: "You have full access to all features",
				roles,
				isSuperAdmin: true,
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("You are a Super admin")).toBeTruthy();
		});
	});

	describe("Edge Cases", () => {
		it("should handle single role", () => {
			const roles = [mockRole({ id: 1, name: "Admin", hex: "#5057FF" })];
			const props = {
				title: "Your Role",
				description: "Single role assignment",
				roles,
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("Your Role")).toBeTruthy();
		});

		it("should handle many roles", () => {
			const roles = Array.from({ length: 10 }, (_, i) => mockRole({ id: i + 1, name: `Role ${i + 1}` }));
			const props = {
				title: "Many Roles",
				description: "Multiple role assignment",
				roles,
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("Many Roles")).toBeTruthy();
		});

		it("should default isSuperAdmin to false when not provided", () => {
			const roles = [mockRole({ id: 1, name: "Editor" })];
			const props = {
				title: "Editor Access",
				description: "You are an editor",
				roles,
				// isSuperAdmin not provided
			};

			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<RoleItem {...props} />
				</ThemeProvider>,
			);

			expect(screen.getByText("Editor Access")).toBeTruthy();
		});
	});
});
