import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import AddService from "@/apps/new-ui/pages/AddService/AddService";
import { useAddUserService } from "@/apps/new-ui/services/Service";

// Mock mutation
jest.mock("@/apps/new-ui/services/Service", () => ({
  useAddUserService: jest.fn(),
}));

// Mock AddServiceCost
jest.mock(
  "@/apps/new-ui/components/AppointmentComponents/AddServiceCost",
  () => (props: any) => (
    <input
      data-testid="service-cost"
      onChange={(e) => props.setCost(e.target.value)}
    />
  )
);

// Mock time picker
jest.mock(
  "@/apps/new-ui/components/MobilePicker/MobileTimePickerCustomizeService",
  () => (props: any) => (
    <input
      data-testid="time-picker"
      value={props.value}
      onChange={(e) => props.onChange(e.target.value)}
    />
  )
);

// Mock emoji picker (نسخه اصلاح‌شده)
jest.mock("emoji-picker-react", () => ({
  __esModule: true,
  EmojiStyle: {},
  default: ({ onEmojiClick }: any) => (
    <button
      data-testid="emoji-select"
      onClick={() => onEmojiClick({ emoji: "🔥" })}
    >
      mock-emoji
    </button>
  ),
}));

describe("AddService Component", () => {
  let mockMutate: jest.Mock;

  beforeEach(() => {
    mockMutate = jest.fn().mockResolvedValue({});
    (useAddUserService as jest.Mock).mockReturnValue({
      mutateAsync: mockMutate,
    });

    localStorage.clear();
  });

  const setup = () => {
    const onClick = jest.fn();
    render(<AddService onclick={onClick} />);
    return { onClick };
  };

  test("enables save when all fields filled", () => {
    setup();

    const titleInput = screen.getAllByRole("textbox")[0]; // عنوان خدمت
    const costInput = screen.getByTestId("service-cost");
    const timePicker = screen.getByTestId("time-picker");

    fireEvent.change(titleInput, { target: { value: "کات" } });
    fireEvent.change(costInput, { target: { value: "20000" } });
    fireEvent.change(timePicker, { target: { value: "00:45" } });

    expect(screen.getByText("ذخیره")).not.toBeDisabled();
  });

  test("selecting emoji works", () => {
    setup();

    fireEvent.click(screen.getByText("افزودن ایموجی"));
    fireEvent.click(screen.getByTestId("emoji-select"));

    expect(screen.getByText("🔥")).toBeInTheDocument();
  });

  test("should save service and trigger mutation", async () => {
    const { onClick } = setup();

    localStorage.setItem("addServiceCost", "200000");

    const titleInput = screen.getAllByRole("textbox")[0];
    const costInput = screen.getByTestId("service-cost");
    const timePicker = screen.getByTestId("time-picker");

    fireEvent.change(titleInput, { target: { value: "خدمت تست" } });
    fireEvent.change(costInput, { target: { value: "200000" } });
    fireEvent.change(timePicker, { target: { value: "00:45" } });

    fireEvent.click(screen.getByText("افزودن ایموجی"));
    fireEvent.click(screen.getByTestId("emoji-select"));

    fireEvent.click(screen.getByText("ذخیره"));

    await waitFor(() => {
      expect(mockMutate).toHaveBeenCalledWith({
        service: "خدمت تست",
        emoji: "🔥",
        price: 200000,
        time: "00:45",
      });
    });

    expect(onClick).toHaveBeenCalled();
  });
});