import React from "react";
import { render } from "@testing-library/react";
import AiBadge from "../../../../../packages/dmworkbase/src/Components/AiBadge";

/**
 * Tests for Issue #215: Bot AI badge consistency
 *
 * Verifies that AiBadge component is used consistently across:
 * - @mention suggestion list (MessageInput)
 * - User info card (UserInfo)
 *
 * The unified approach is to display "AI" text badge after user names,
 * not as a robot icon overlay on avatars.
 */
describe("Bot AI Badge Consistency (Issue #215)", () => {
    describe("AiBadge for @mention list", () => {
        it("renders small size badge correctly for mention suggestions", () => {
            // MessageInput uses AiBadge with size="small" for mention suggestions
            const { container } = render(<AiBadge size="small" />);
            const badge = container.querySelector(".ai-badge");
            expect(badge).not.toBeNull();
            expect(badge?.textContent).toBe("AI");
            expect(badge?.classList.contains("ai-badge-small")).toBe(true);
        });

        it("small badge has correct class structure", () => {
            const { container } = render(<AiBadge size="small" />);
            const badge = container.querySelector(".ai-badge");
            expect(badge?.classList.contains("ai-badge")).toBe(true);
            expect(badge?.classList.contains("ai-badge-small")).toBe(true);
        });
    });

    describe("AiBadge for user info card", () => {
        it("renders default size badge correctly for user info", () => {
            // UserInfo uses AiBadge with default size
            const { container } = render(<AiBadge />);
            const badge = container.querySelector(".ai-badge");
            expect(badge).not.toBeNull();
            expect(badge?.textContent).toBe("AI");
            expect(badge?.classList.contains("ai-badge-default")).toBe(true);
        });
    });

    describe("Unified AI text badge approach", () => {
        it("both sizes render AI text content consistently", () => {
            const defaultBadge = render(<AiBadge />);
            const smallBadge = render(<AiBadge size="small" />);

            const defaultText = defaultBadge.container.querySelector(".ai-badge")?.textContent;
            const smallText = smallBadge.container.querySelector(".ai-badge")?.textContent;

            expect(defaultText).toBe("AI");
            expect(smallText).toBe("AI");
            expect(defaultText).toBe(smallText);
        });

        it("AiBadge component renders as inline span element", () => {
            const { container } = render(<AiBadge />);
            const badge = container.querySelector(".ai-badge");
            expect(badge?.tagName.toLowerCase()).toBe("span");
        });
    });

    describe("No robot.png identityIcon for bots", () => {
        it("module.ts should not set identityIcon for robot category", async () => {
            // Read the module.ts file content to verify robot.png is not used for identityIcon
            const fs = require("fs");
            const path = require("path");
            // Test runs from apps/web, so go up two levels to reach repo root
            const modulePath = path.resolve(
                process.cwd(),
                "../../packages/dmworkdatasource/src/module.ts"
            );
            const content = fs.readFileSync(modulePath, "utf8");

            // Verify robot.png is NOT set as identityIcon
            expect(content).not.toMatch(/identityIcon.*robot\.png/);

            // Verify the comment indicates AiBadge should be used instead
            expect(content).toMatch(/robot.*identit(y|ies).*AiBadge|AiBadge.*robot/i);
        });

        it("should only set identityIcon for official and visitor categories", async () => {
            const fs = require("fs");
            const path = require("path");
            // Test runs from apps/web, so go up two levels to reach repo root
            const modulePath = path.resolve(
                process.cwd(),
                "../../packages/dmworkdatasource/src/module.ts"
            );
            const content = fs.readFileSync(modulePath, "utf8");

            // identityIcon should only be used for official.png and visitor.png
            const identityIconMatches = content.match(/identityIcon\s*=\s*["'].*?["']/g) || [];
            const allowedIcons = ["official.png", "visitor.png"];

            identityIconMatches.forEach((match: string) => {
                const hasAllowedIcon = allowedIcons.some((icon) => match.includes(icon));
                expect(hasAllowedIcon).toBe(true);
            });
        });
    });
});
