import Accordion from "./index";
import { AccordionItem } from "./types";

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

const items: AccordionItem[] = [
  { anchorId: "item-1", title: "First Question", description: "Answer one" },
  { anchorId: "item-2", title: "Second Question", description: "Answer two" },
  { anchorId: "item-3", title: "Third Question", description: "Answer three" },
];

describe("Contentful Accordion", () => {
  beforeEach(() => {
    Object.defineProperty(window, "location", {
      writable: true,
      value: { hash: "" },
    });
  });

  it("renders the title as h2 by default", () => {
    render(<Accordion items={items} title="FAQ" />);
    const heading = screen.getByText("FAQ");
    expect(heading.tagName).toBe("H2");
  });

  it("renders the title as h1 when enableHeading is true", () => {
    render(<Accordion items={items} title="FAQ" enableHeading={true} />);
    const heading = screen.getByText("FAQ");
    expect(heading.tagName).toBe("H1");
  });

  it("renders all accordion item titles", () => {
    render(<Accordion items={items} title="FAQ" />);
    expect(screen.getByText("First Question")).toBeInTheDocument();
    expect(screen.getByText("Second Question")).toBeInTheDocument();
    expect(screen.getByText("Third Question")).toBeInTheDocument();
  });

  it("renders item descriptions", () => {
    render(<Accordion items={items} title="FAQ" />);
    expect(screen.getByText("Answer one")).toBeInTheDocument();
    expect(screen.getByText("Answer two")).toBeInTheDocument();
    expect(screen.getByText("Answer three")).toBeInTheDocument();
  });

  it("applies anchorId to the section", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" anchorId="faq-section" />
    );
    expect(container.querySelector("#faq-section")).toBeInTheDocument();
  });

  it("applies white background by default", () => {
    const { container } = render(<Accordion items={items} title="FAQ" />);
    expect(container.querySelector(".bg-white")).toBeInTheDocument();
  });

  it("applies navy background", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" background="navy" />
    );
    expect(
      container.querySelector('section[class*="bg-[#00002D]"]')
    ).toBeInTheDocument();
  });

  it("applies blue background", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" background="blue" />
    );
    expect(
      container.querySelector('section[class*="bg-[#07B2E2]"]')
    ).toBeInTheDocument();
  });

  it("applies green background", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" background="green" />
    );
    expect(
      container.querySelector('section[class*="bg-[#26B170]"]')
    ).toBeInTheDocument();
  });

  it("applies yellow background", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" background="yellow" />
    );
    expect(
      container.querySelector('section[class*="bg-[#F5FF1E]"]')
    ).toBeInTheDocument();
  });

  it("applies purple background", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" background="purple" />
    );
    expect(
      container.querySelector('section[class*="bg-[#931D69]"]')
    ).toBeInTheDocument();
  });

  it("applies cream500 background", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" background="cream500" />
    );
    expect(
      container.querySelector('section[class*="bg-[#FFFEEF]"]')
    ).toBeInTheDocument();
  });

  it("applies maxWidth class by default", () => {
    const { container } = render(<Accordion items={items} title="FAQ" />);
    expect(container.querySelector(".max-w-120")).toBeInTheDocument();
  });

  it("does not apply maxWidth class when maxWidth is false", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" maxWidth={false} />
    );
    expect(container.querySelector(".max-w-120")).not.toBeInTheDocument();
  });

  it("renders dividers between items but not after the last", () => {
    const { container } = render(<Accordion items={items} title="FAQ" />);
    const dividers = container.querySelectorAll(
      ".bg-bg-surface-tertiary-active"
    );
    expect(dividers).toHaveLength(items.length - 1);
  });

  it("expands items in initialExpandedItems", () => {
    render(
      <Accordion items={items} title="FAQ" initialExpandedItems={["item-1"]} />
    );
    const arrowsUp = screen.getAllByText("keyboard_arrow_up");
    expect(arrowsUp.length).toBeGreaterThanOrEqual(1);
  });

  it("auto-expands item matching URL hash when hashAutoExpand is true", () => {
    Object.defineProperty(window, "location", {
      writable: true,
      value: { hash: "#item-2" },
    });
    render(<Accordion items={items} title="FAQ" hashAutoExpand={true} />);
    expect(document.getElementById("item-2")).toBeInTheDocument();
  });

  it("does not auto-expand when hashAutoExpand is false", () => {
    Object.defineProperty(window, "location", {
      writable: true,
      value: { hash: "#item-2" },
    });
    render(<Accordion items={items} title="FAQ" hashAutoExpand={false} />);
    const arrowsDown = screen.getAllByText("keyboard_arrow_down");
    expect(arrowsDown.length).toBe(items.length);
  });

  it("does not duplicate item in expandedItems if already present", () => {
    Object.defineProperty(window, "location", {
      writable: true,
      value: { hash: "#item-1" },
    });
    render(
      <Accordion
        items={items}
        title="FAQ"
        hashAutoExpand={true}
        initialExpandedItems={["item-1"]}
      />
    );
    expect(document.getElementById("item-1")).toBeInTheDocument();
  });

  it("applies itemContainerClassName", () => {
    const { container } = render(
      <Accordion items={items} title="FAQ" itemContainerClassName="gap-4" />
    );
    expect(container.querySelector(".gap-4")).toBeInTheDocument();
  });

  it("applies descriptionMaxWidth class", () => {
    const { container } = render(
      <Accordion
        items={items}
        title="FAQ"
        descriptionMaxWidth="max-w-[500px]"
      />
    );
    expect(container.querySelector(".max-w-\\[500px\\]")).toBeInTheDocument();
  });

  it("sets id on items with anchorId", () => {
    render(<Accordion items={items} title="FAQ" />);
    expect(document.getElementById("item-1")).toBeInTheDocument();
    expect(document.getElementById("item-2")).toBeInTheDocument();
  });

  it("handles items without anchorId using index as key", () => {
    const noAnchorItems: AccordionItem[] = [
      { title: "Q1", description: "A1" },
      { title: "Q2", description: "A2" },
    ];
    render(<Accordion items={noAnchorItems} title="FAQ" />);
    expect(screen.getByText("Q1")).toBeInTheDocument();
    expect(screen.getByText("Q2")).toBeInTheDocument();
  });

  it("toggles expanded state when an accordion item button is clicked", () => {
    render(
      <Accordion items={items} title="FAQ" initialExpandedItems={["item-1"]} />
    );
    const buttons = screen.getAllByRole("button");
    fireEvent.click(buttons[0]);
    fireEvent.click(buttons[0]);
    expect(screen.getByText("First Question")).toBeInTheDocument();
  });
});