import LoyaltyCardListItem from "@/apps/new-ui/pages/(loyalty)/loyalty-cards/+components/LoyaltyCardListItem";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";

jest.mock("@/apps/new-ui/pages/CustomerClub/index.css", () => ({}));

jest.mock("@/utils/date-time", () => ({
  formatPersianDate: jest.fn(() => "1402/01/15"),
}));

jest.mock("../src/apps/new-ui/Utils/env.ts", () => ({
  ENV: { API_URL: "https://api.test" },
}));

// Mock images
jest.mock(
  "../../../../assets/loyalty-cards/cosmetic1.png",
  () => "cosmetic1.png",
);
jest.mock(
  "../../../../assets/loyalty-cards/cosmetic2.png",
  () => "cosmetic2.png",
);
jest.mock(
  "../../../../assets/loyalty-cards/cosmetic3.png",
  () => "cosmetic3.png",
);
jest.mock(
  "../../../../assets/loyalty-cards/cosmetic4.png",
  () => "cosmetic4.png",
);
jest.mock("../../../../assets/profilePhoto.svg", () => "avatar.svg");

jest.mock("@/apps/new-ui/constant/CustomerTypes", () => ({
  CUSTOMER_TYPES: [
    { status: "VIP", icon: "vip.png" },
    { status: "NORMAL", icon: "normal.png" },
  ],
}));

const renderUI = (data: any, handlers: any) =>
  render(
    <BrowserRouter>
      <LoyaltyCardListItem {...handlers} data={data} />
    </BrowserRouter>,
  );

describe("LoyaltyCardListItem", () => {
  const baseData = {
    id: 55,
    customer_name: "علی رضایی",
    customer_phone_number: "09120000000",
    card_type: "1",
    creation_time: "2024-02-10 12:00",
    link: "https://example.com/share/55",
    description_of_discount: "20 درصد تخفیف",
    predicted_number_of_visits: 12,
    primary_number_of_visits: 3,
    extera_description: "توضیحات تست",
  };

  const handlers = {
    deleteLoyaltyCardHandler: jest.fn(),
    shareLinkHandler: jest.fn(),
    deletePending: false,
  };

  test("renders basic loyalty card info", async () => {
    renderUI(baseData, handlers);

    await waitFor(() => {
      expect(screen.getByText("کارت وفاداری")).toBeInTheDocument();
    });
  });

  test("fetches customer profile picture and renders medal", async () => {
    renderUI(baseData, handlers);

    await waitFor(() => {
      const img = screen.getByAltText("avatar");
      expect(img).toBeInTheDocument();
    });
  });

  // test("calls delete handler when X clicked", () => {
  //   renderUI(baseData, handlers);

  //   const xIcon = screen.getByText("کارت وفاداری").previousElementSibling;
  //   if (xIcon) fireEvent.click(xIcon);

  //   expect(handlers.deleteLoyaltyCardHandler).toHaveBeenCalledWith(55);
  // });

  test("calls delete handler when X clicked", () => {
    renderUI(baseData, handlers);

    // DeleteButton is after the "کارت وفاداری" text, find it by its container
    const deleteBtn = screen
      .getByText("کارت وفاداری")
      .closest("div")!
      .querySelector("button");

    if (deleteBtn) fireEvent.click(deleteBtn);

    expect(handlers.deleteLoyaltyCardHandler).toHaveBeenCalledWith(55);
  });

  test("toggles accordion on click", () => {
    renderUI(baseData, handlers);

    const moreBtn = screen.getByText("بیشتر");
    fireEvent.click(moreBtn);
    expect(screen.getByText("جایزه")).toBeInTheDocument();

    const lessBtn = screen.getByText("کمتر");
    fireEvent.click(lessBtn);
    expect(screen.queryByText("جایزه")).not.toBeInTheDocument();
  });
});