import "@testing-library/jest-dom";

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

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

jest.mock("@shared/components/text", () => ({
  Text: ({ children, as, ...props }: any) => {
    const Tag = as || "span";
    return <Tag {...props}>{children}</Tag>;
  },
}));

describe("ComparisonTable", () => {
  const defaultProps = {
    title: "Compare Plans",
    disclaimer: <span>* Terms and conditions apply</span>,
    table: (
      <table data-testid="comparison-table-content">
        <thead>
          <tr>
            <th>Feature</th>
            <th>Basic</th>
            <th>Pro</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Speed</td>
            <td>100 Mbps</td>
            <td>500 Mbps</td>
          </tr>
        </tbody>
      </table>
    ),
  };

  it("renders the component container", () => {
    const { container } = render(<ComparisonTable {...defaultProps} />);
    expect(container.querySelector(".component-container")).toBeInTheDocument();
  });

  it("renders the title as h2", () => {
    render(<ComparisonTable {...defaultProps} />);
    const title = screen.getByText("Compare Plans");
    expect(title.tagName).toBe("H2");
  });

  it("renders the table content", () => {
    render(<ComparisonTable {...defaultProps} />);
    expect(screen.getByTestId("comparison-table-content")).toBeInTheDocument();
  });

  it("renders the disclaimer text", () => {
    render(<ComparisonTable {...defaultProps} />);
    expect(
      screen.getByText("* Terms and conditions apply")
    ).toBeInTheDocument();
  });

  it("applies max-w-120 class when maxWidth is true (default)", () => {
    const { container } = render(<ComparisonTable {...defaultProps} />);
    const inner = container.querySelector(".component-container > div");
    expect(inner?.className).toContain("max-w-120");
    expect(inner?.className).toContain("xl:mx-auto");
  });

  it("does not apply max-w-120 class when maxWidth is false", () => {
    const { container } = render(
      <ComparisonTable {...defaultProps} maxWidth={false} />
    );
    const inner = container.querySelector(".component-container > div");
    expect(inner?.className).not.toContain("max-w-120");
    expect(inner?.className).not.toContain("xl:mx-auto");
  });

  it("renders comparison-table-container", () => {
    const { container } = render(<ComparisonTable {...defaultProps} />);
    expect(
      container.querySelector(".comparison-table-container")
    ).toBeInTheDocument();
  });

  it("renders without title", () => {
    const { container } = render(
      <ComparisonTable {...defaultProps} title={undefined} />
    );
    expect(container.querySelector(".component-container")).toBeInTheDocument();
    expect(screen.queryByText("Compare Plans")).not.toBeInTheDocument();
  });

  it("renders without disclaimer", () => {
    const { container } = render(
      <ComparisonTable {...defaultProps} disclaimer={undefined} />
    );
    expect(container.querySelector(".component-container")).toBeInTheDocument();
  });

  it("renders table as a ReactNode", () => {
    const customTable = <div data-testid="custom-table">Custom content</div>;
    render(<ComparisonTable {...defaultProps} table={customTable} />);
    expect(screen.getByTestId("custom-table")).toBeInTheDocument();
  });

  it("renders with correct CSS structure", () => {
    const { container } = render(<ComparisonTable {...defaultProps} />);
    const tableContainer = container.querySelector(
      ".comparison-table-container"
    );
    expect(tableContainer?.className).toContain("mt-5");
    expect(tableContainer?.className).toContain("p-5");
  });
});