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

// Mock react-phone-number-input
jest.unstable_mockModule("react-phone-number-input", () => ({
  __esModule: true,
  default: ({ value, onChange, disabled, placeholder, id, className }) => (
    <input
      data-testid="phone-input"
      value={value || ""}
      onChange={(e) => onChange(e.target.value)}
      disabled={disabled}
      placeholder={placeholder}
      id={id}
      className={className}
    />
  ),
}));

// Import after mocking
const { default: PhoneNumberInput } = await import(
  "../pages/GlobalConfig/Inputs/PhoneNumberInput.js"
);

describe("PhoneNumberInput Component", () => {
  const mockField = {
    Id: 1,
    ProValue: "+1234567890",
    Placeholder: "Enter phone number",
  };

  const mockOnChange = jest.fn();

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

  it("renders the phone input", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(screen.getByTestId("phone-input")).toBeInTheDocument();
  });

  it("displays the initial value", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(screen.getByTestId("phone-input")).toHaveValue("+1234567890");
  });

  it("displays placeholder text", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(screen.getByTestId("phone-input")).toHaveAttribute(
      "placeholder",
      "Enter phone number"
    );
  });

  it("handles onChange event", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    const input = screen.getByTestId("phone-input");
    fireEvent.change(input, { target: { value: "+9876543210" } });
    expect(mockOnChange).toHaveBeenCalledWith("+9876543210");
  });

  it("renders disabled state", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={true}
      />
    );
    expect(screen.getByTestId("phone-input")).toBeDisabled();
  });

  it("renders enabled state", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(screen.getByTestId("phone-input")).not.toBeDisabled();
  });

  it("renders with phone-number-input class", () => {
    const { container } = render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(container.querySelector(".phone-number-input")).toBeInTheDocument();
  });

  it("displays error class when error prop is true", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
        error={true}
      />
    );
    expect(screen.getByTestId("phone-input")).toHaveClass("phone-input-error");
  });

  it("does not display error class when error prop is false", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
        error={false}
      />
    );
    expect(screen.getByTestId("phone-input")).not.toHaveClass("phone-input-error");
  });

  it("displays helper text when provided", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
        helperText="Please enter a valid phone number"
      />
    );
    expect(screen.getByText("Please enter a valid phone number")).toBeInTheDocument();
  });

  it("does not display helper text when not provided", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(screen.queryByText("Please enter a valid phone number")).not.toBeInTheDocument();
  });

  it("handles empty ProValue", () => {
    const fieldWithoutValue = {
      Id: 2,
      ProValue: "",
      Placeholder: "Enter phone",
    };
    render(
      <PhoneNumberInput
        field={fieldWithoutValue}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(screen.getByTestId("phone-input")).toHaveValue("");
  });

  it("handles null ProValue", () => {
    const fieldWithNullValue = {
      Id: 3,
      ProValue: null,
      Placeholder: "Enter phone",
    };
    render(
      <PhoneNumberInput
        field={fieldWithNullValue}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(screen.getByTestId("phone-input")).toHaveValue("");
  });

  it("has correct id attribute based on field.Id", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
      />
    );
    expect(screen.getByTestId("phone-input")).toHaveAttribute("id", "field-1");
  });

  it("renders error helper text with error styling", () => {
    render(
      <PhoneNumberInput
        field={mockField}
        onChange={mockOnChange}
        disabled={false}
        error={true}
        helperText="Invalid phone number"
      />
    );
    expect(screen.getByText("Invalid phone number")).toBeInTheDocument();
  });
});
