import { render, screen } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import ProductDetailsAccordion from "@/components/productpage/ProductDetailsAccordion";
import React from "react";

// Mock the Accordion components since they use Radix and might need context or specific environment
vi.mock("@/components/ui/accordion", () => ({
  Accordion: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  AccordionItem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  AccordionTrigger: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,
  AccordionContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock("@/components/ui/separator", () => ({
  Separator: () => <hr />,
}));

describe("ProductDetailsAccordion XSS vulnerability", () => {
  it("sanitizes malicious HTML in description", () => {
    const maliciousHtml = '<img src="x" onerror="alert(\'XSS\')">';
    const { container } = render(
      <ProductDetailsAccordion
        description={maliciousHtml}
        manufacturerInfo="Some info"
        structuredData={[]}
      />
    );

    // Malicious attributes should be stripped
    expect(container.innerHTML).not.toContain("onerror");
    expect(container.innerHTML).not.toContain("alert('XSS')");
    
    // But the tag itself (if safe) can remain
    const img = container.querySelector("img");
    expect(img).toBeInTheDocument();
    expect(img).toHaveAttribute("src", "x");
  });

  it("renders safe HTML in description", () => {
    const safeHtml = '<p>Safe <strong>description</strong></p>';
    const { container } = render(
      <ProductDetailsAccordion
        description={safeHtml}
        manufacturerInfo="Some info"
        structuredData={[]}
      />
    );

    // Safe HTML should be preserved by DOMPurify
    const strong = container.querySelector("strong");
    expect(strong).toBeInTheDocument();
    expect(strong?.textContent).toBe("description");
  });
});