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

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

describe("SelectPlanButton", () => {
  const defaultProps = {
    onSelect: jest.fn(),
    speed: "500",
  };

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("renders with default props", () => {
    render(<SelectPlanButton {...defaultProps} />);
    expect(screen.getByText("Select plan")).toBeInTheDocument();
  });

  it("calls onSelect when clicked", () => {
    render(<SelectPlanButton {...defaultProps} />);
    fireEvent.click(screen.getByRole("button"));
    expect(defaultProps.onSelect).toHaveBeenCalledTimes(1);
  });

  it("applies selected styles when isSelected is true", () => {
    render(<SelectPlanButton {...defaultProps} isSelected={true} />);
    const button = screen.getByRole("button");
    expect(button.className).toContain("bg-bg-surface");
    expect(button.className).toContain("text-text");
  });

  it("applies default (unselected) styles when isSelected is false", () => {
    render(<SelectPlanButton {...defaultProps} isSelected={false} />);
    const button = screen.getByRole("button");
    expect(button.className).toContain("bg-bg-fill-brand");
    expect(button.className).toContain("text-text-brand-on-bg-fill");
  });

  it("renders the expand_circle_right icon", () => {
    render(<SelectPlanButton {...defaultProps} />);
    expect(screen.getByText("expand_circle_right")).toBeInTheDocument();
  });

  it("applies icon className for unselected state", () => {
    render(
      <SelectPlanButton
        {...defaultProps}
        isSelected={false}
        iconClassName="custom-icon"
      />
    );
    const icon = screen.getByText("expand_circle_right");
    expect(icon.className).toContain("text-icon-inverse");
    expect(icon.className).toContain("custom-icon");
  });

  it("applies icon className for selected state", () => {
    render(
      <SelectPlanButton
        {...defaultProps}
        isSelected={true}
        iconClassName="custom-icon"
      />
    );
    const icon = screen.getByText("expand_circle_right");
    expect(icon.className).toContain("text-icon");
    expect(icon.className).toContain("custom-icon");
  });

  it("sets data-track attributes on the button", () => {
    render(<SelectPlanButton {...defaultProps} speed="1000" />);
    const button = screen.getByRole("button");
    expect(button).toHaveAttribute(
      "data-track-element-name",
      "speed_plan_select_button"
    );
    expect(button).toHaveAttribute(
      "data-track-click-text",
      "Select plan speed 1000"
    );
    expect(button).toHaveAttribute(
      "data-track-element-clicked",
      "speed_plan_card"
    );
  });

  it("calls renderCheckPlans with correct arguments", () => {
    const renderCheckPlans = jest.fn(() => <div data-testid="check-plans" />);
    render(
      <SelectPlanButton
        {...defaultProps}
        speed="300"
        techType="fiber"
        isMax={true}
        cta={{ label: "Go", url: "/go" } as any}
        renderCheckPlans={renderCheckPlans}
      />
    );

    expect(renderCheckPlans).toHaveBeenCalledWith({
      speedCardConfig: expect.objectContaining({
        speed: "300",
        techType: "fiber",
        isMax: true,
        isModalOpen: false,
      }),
      cta: { label: "Go", url: "/go" },
    });
    expect(screen.getByTestId("check-plans")).toBeInTheDocument();
  });

  it("sets isModalOpen to true after click and passes setModalOpen", () => {
    let capturedConfig: any;
    const renderCheckPlans = jest.fn(args => {
      capturedConfig = args;
      return null;
    });

    const { rerender } = render(
      <SelectPlanButton {...defaultProps} renderCheckPlans={renderCheckPlans} />
    );

    // Initially modal is closed
    expect(renderCheckPlans).toHaveBeenLastCalledWith(
      expect.objectContaining({
        speedCardConfig: expect.objectContaining({ isModalOpen: false }),
      })
    );

    // Click opens modal
    fireEvent.click(screen.getByRole("button"));

    // After click, re-render happens with open=true
    expect(renderCheckPlans).toHaveBeenLastCalledWith(
      expect.objectContaining({
        speedCardConfig: expect.objectContaining({ isModalOpen: true }),
      })
    );

    // Call setModalOpen to close
    capturedConfig.speedCardConfig.setModalOpen();

    // Need rerender to capture new state
    rerender(
      <SelectPlanButton {...defaultProps} renderCheckPlans={renderCheckPlans} />
    );

    expect(renderCheckPlans).toHaveBeenLastCalledWith(
      expect.objectContaining({
        speedCardConfig: expect.objectContaining({ isModalOpen: false }),
      })
    );
  });

  it("renders without renderCheckPlans (optional)", () => {
    render(<SelectPlanButton {...defaultProps} />);
    expect(screen.getByRole("button")).toBeInTheDocument();
  });

  it("uses default iconSize of 24", () => {
    render(<SelectPlanButton {...defaultProps} />);
    const icon = screen.getByText("expand_circle_right");
    expect(icon.style.fontSize).toBe("24px");
  });

  it("uses custom iconSize", () => {
    render(<SelectPlanButton {...defaultProps} iconSize={32} />);
    const icon = screen.getByText("expand_circle_right");
    expect(icon.style.fontSize).toBe("32px");
  });
});