import { createRef } from "react";
import { render, screen } from "@testing-library/react";
import { Trust } from ".";

describe("Trust", () => {
  it("should render without errors", () => {
    render(<Trust locale="en-US" variant="micro-combo" theme="dark" />);
  });

  it("should render locale prop as data-locale attribute", () => {
    const { container } = render(
      <Trust locale="en-US" variant="micro-combo" theme="dark" />,
    );

    expect(container.firstChild).not.toHaveAttribute("locale", "en-US");
    expect(container.firstChild).toHaveAttribute("data-locale", "en-US");
  });

  it("should render stars prop as data-stars attribute", () => {
    const { container } = render(
      <Trust locale="en-US" variant="micro-combo" theme="dark" stars="4,5" />,
    );

    expect(container.firstChild).not.toHaveAttribute("stars", "4,5");
    expect(container.firstChild).toHaveAttribute("data-stars", "4,5");
  });

  describe("horizontal variant", () => {
    it("should include related class names", () => {
      const { container } = render(
        <Trust locale="en-US" variant="horizontal" theme="light" />,
      );

      expect(container.firstChild).toHaveClass(
        "mobius mobius-trust --is-light --is-variant-horizontal",
      );
    });
  });

  describe("semantic HTML and accessibility", () => {
    it("renders a <div> element by default", () => {
      const { container } = render(
        <Trust locale="en-US" variant="micro-combo" theme="dark" />,
      );
      expect(container.firstChild?.nodeName).toBe("DIV");
    });

    it("renders with the specified elementType", () => {
      const { container } = render(
        <Trust
          locale="en-US"
          variant="micro-combo"
          theme="dark"
          elementType="section"
        />,
      );
      expect(container.firstChild?.nodeName).toBe("SECTION");
    });

    it("contains a Trustpilot link with target='_blank'", () => {
      render(<Trust locale="en-US" variant="micro-combo" theme="dark" />);
      const link = screen.getByRole("link", { name: "Trustpilot" });
      expect(link).toHaveAttribute("target", "_blank");
    });

    it("Trustpilot link has rel='noopener noreferrer' for security", () => {
      render(<Trust locale="en-US" variant="micro-combo" theme="dark" />);
      const link = screen.getByRole("link", { name: "Trustpilot" });
      expect(link).toHaveAttribute("rel", "noopener noreferrer");
    });

    it("includes Trustpilot data attributes for the widget", () => {
      const { container } = render(
        <Trust locale="en-US" variant="micro-combo" theme="dark" />,
      );
      expect(container.firstChild).toHaveAttribute("data-businessunit-id");
      expect(container.firstChild).toHaveAttribute("data-template-id");
      expect(container.firstChild).toHaveAttribute("data-theme", "dark");
    });
  });

  it("forwards ref", () => {
    const ref = createRef<HTMLDivElement>();
    render(
      <Trust ref={ref} locale="en-US" variant="micro-combo" theme="dark" />,
    );
    expect(ref.current).toBeInstanceOf(HTMLDivElement);
  });
});
