import React from "react";
import { ShapeBackgroundWrapper } from "./index";

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

describe("ShapeBackgroundWrapper", () => {
  describe("Rendering with show=true (default)", () => {
    it("renders children inside shape-bg-content wrapper", () => {
      render(
        <ShapeBackgroundWrapper background="white">
          <p>Child content</p>
        </ShapeBackgroundWrapper>
      );
      expect(screen.getByText("Child content")).toBeInTheDocument();
      expect(
        screen.getByText("Child content").closest(".shape-bg-content")
      ).toBeInTheDocument();
    });

    it("renders the outer container with shape-bg class", () => {
      const { container } = render(
        <ShapeBackgroundWrapper background="white">
          <span>Test</span>
        </ShapeBackgroundWrapper>
      );
      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
    });

    it("renders content div with z-[1] for layering above SVG", () => {
      const { container } = render(
        <ShapeBackgroundWrapper background="white">
          <span>Layered</span>
        </ShapeBackgroundWrapper>
      );
      const content = container.querySelector(".shape-bg-content");
      expect(content).toHaveClass("relative", "z-[1]");
    });
  });

  describe("Rendering with show=false", () => {
    it("renders children without shape-bg wrapper", () => {
      const { container } = render(
        <ShapeBackgroundWrapper show={false} background="navy">
          <p>Hidden shape</p>
        </ShapeBackgroundWrapper>
      );
      expect(screen.getByText("Hidden shape")).toBeInTheDocument();
      expect(container.querySelector(".shape-bg")).not.toBeInTheDocument();
    });

    it("does not render any SVG when show is false", () => {
      const { container } = render(
        <ShapeBackgroundWrapper show={false} path="path1" background="white">
          <span>No SVG</span>
        </ShapeBackgroundWrapper>
      );
      expect(container.querySelector("svg")).not.toBeInTheDocument();
    });

    it("applies className when show is false", () => {
      const { container } = render(
        <ShapeBackgroundWrapper show={false} className="custom-class">
          <span>Styled</span>
        </ShapeBackgroundWrapper>
      );
      expect(container.firstChild).toHaveClass("custom-class");
    });

    it("applies custom background style when show is false and background is non-theme", () => {
      const { container } = render(
        <ShapeBackgroundWrapper
          show={false}
          background="linear-gradient(red, blue)"
        >
          <span>Gradient</span>
        </ShapeBackgroundWrapper>
      );
      expect(container.firstChild).toHaveStyle({
        background: "linear-gradient(red, blue)",
      });
    });
  });

  describe("SVG path rendering", () => {
    it("renders path1 SVG when path='path1'", () => {
      const { container } = render(
        <ShapeBackgroundWrapper path="path1" background="white">
          <span>Path1</span>
        </ShapeBackgroundWrapper>
      );
      const svgs = container.querySelectorAll("svg");
      expect(svgs).toHaveLength(1);
      expect(svgs[0]).toHaveAttribute("width", "2262");
      expect(svgs[0]).toHaveAttribute("height", "4359");
    });

    it("renders path2 SVG by default", () => {
      const { container } = render(
        <ShapeBackgroundWrapper background="white">
          <span>Default path</span>
        </ShapeBackgroundWrapper>
      );
      const svgs = container.querySelectorAll("svg");
      expect(svgs).toHaveLength(1);
      expect(svgs[0]).toHaveAttribute("width", "3739");
      expect(svgs[0]).toHaveAttribute("height", "3666");
    });

    it("renders path3 SVG when path='path3'", () => {
      const { container } = render(
        <ShapeBackgroundWrapper path="path3" background="white">
          <span>Path3</span>
        </ShapeBackgroundWrapper>
      );
      const svgs = container.querySelectorAll("svg");
      expect(svgs).toHaveLength(1);
      expect(svgs[0]).toHaveAttribute("width", "3044");
      expect(svgs[0]).toHaveAttribute("height", "3248");
    });

    it("renders path4 SVG when path='path4'", () => {
      const { container } = render(
        <ShapeBackgroundWrapper path="path4" background="white">
          <span>Path4</span>
        </ShapeBackgroundWrapper>
      );
      const svgs = container.querySelectorAll("svg");
      expect(svgs).toHaveLength(1);
      expect(svgs[0]).toHaveAttribute("width", "3739");
      expect(svgs[0]).toHaveAttribute("height", "3666");
    });

    it("does not render SVG for unrecognized path value", () => {
      const { container } = render(
        <ShapeBackgroundWrapper path={"path5" as any} background="white">
          <span>Unknown</span>
        </ShapeBackgroundWrapper>
      );
      expect(container.querySelector("svg")).not.toBeInTheDocument();
    });

    it("marks SVG with aria-hidden and focusable=false", () => {
      const { container } = render(
        <ShapeBackgroundWrapper path="path1" background="white">
          <span>Accessible</span>
        </ShapeBackgroundWrapper>
      );
      const svg = container.querySelector("svg")!;
      expect(svg).toHaveAttribute("aria-hidden", "true");
      expect(svg).toHaveAttribute("focusable", "false");
    });

    it("applies pointer-events-none to SVG", () => {
      const { container } = render(
        <ShapeBackgroundWrapper path="path2" background="white">
          <span>Non-interactive</span>
        </ShapeBackgroundWrapper>
      );
      const svg = container.querySelector("svg")!;
      expect(svg).toHaveClass("pointer-events-none");
    });
  });

  describe("Background themes", () => {
    it.each([
      ["blue", "bg-[#07B2E2]"],
      ["green", "bg-[#26B170]"],
      ["yellow", "bg-[#F5FF1E]"],
      ["purple", "bg-[#931D69]"],
      ["white", "bg-white"],
      ["navy", "bg-[#00002D]"],
    ] as const)("applies %s background class", (bg, expectedClass) => {
      const { container } = render(
        <ShapeBackgroundWrapper background={bg}>
          <span>BG Test</span>
        </ShapeBackgroundWrapper>
      );
      const outer = container.querySelector(".shape-bg")!;
      expect(outer.className).toContain(expectedClass);
    });

    it("applies inline style for custom (non-theme) background", () => {
      const { container } = render(
        <ShapeBackgroundWrapper background="#FF5733">
          <span>Custom BG</span>
        </ShapeBackgroundWrapper>
      );
      const outer = container.querySelector(".shape-bg") as HTMLElement;
      expect(outer.style.background).toBe("rgb(255, 87, 51)");
    });

    it("falls back to bg-white when no background provided", () => {
      const { container } = render(
        <ShapeBackgroundWrapper>
          <span>No BG</span>
        </ShapeBackgroundWrapper>
      );
      const outer = container.querySelector(".shape-bg")!;
      expect(outer.className).toContain("bg-white");
    });
  });

  describe("Fill color (SVG)", () => {
    it.each([
      ["blue", "text-[#07B2E2]"],
      ["green", "text-[#26B170]"],
      ["yellow", "text-[#F5FF1E]"],
      ["purple", "text-[#931D69]"],
      ["white", "text-white"],
      ["navy", "text-[#00002D]"],
    ] as const)("applies %s fill color to SVG", (fill, expectedClass) => {
      const { container } = render(
        <ShapeBackgroundWrapper fill={fill} background="white">
          <span>Fill</span>
        </ShapeBackgroundWrapper>
      );
      const svg = container.querySelector("svg")!;
      expect(svg.className.baseVal).toContain(expectedClass);
    });

    it("defaults to yellow fill when fill not specified", () => {
      const { container } = render(
        <ShapeBackgroundWrapper background="white">
          <span>Default fill</span>
        </ShapeBackgroundWrapper>
      );
      const svg = container.querySelector("svg")!;
      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
    });

    it("falls back to yellow for unrecognized fill value", () => {
      const { container } = render(
        <ShapeBackgroundWrapper fill="magenta" background="white">
          <span>Unknown fill</span>
        </ShapeBackgroundWrapper>
      );
      const svg = container.querySelector("svg")!;
      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
    });
  });

  describe("className prop", () => {
    it("applies custom className to shape-bg wrapper", () => {
      const { container } = render(
        <ShapeBackgroundWrapper className="extra-class" background="white">
          <span>Classy</span>
        </ShapeBackgroundWrapper>
      );
      const outer = container.querySelector(".shape-bg")!;
      expect(outer).toHaveClass("extra-class");
    });

    it("handles undefined className without errors", () => {
      const { container } = render(
        <ShapeBackgroundWrapper background="white">
          <span>No class</span>
        </ShapeBackgroundWrapper>
      );
      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
    });
  });

  describe("maxFit prop", () => {
    it("applies max-content class when maxFit is true", () => {
      const { container } = render(
        <ShapeBackgroundWrapper maxFit={true} background="white">
          <span>Max fit</span>
        </ShapeBackgroundWrapper>
      );
      const outer = container.querySelector(".shape-bg")!;
      expect(outer.className).toContain("max-content");
    });

    it("does not apply max-content when maxFit is false/undefined", () => {
      const { container } = render(
        <ShapeBackgroundWrapper background="white">
          <span>No max fit</span>
        </ShapeBackgroundWrapper>
      );
      const outer = container.querySelector(".shape-bg")!;
      expect(outer.className).not.toContain("max-content");
    });
  });
});