import { render, renderHook, act } from "@testing-library/react";
import React, { useEffect, useRef } from "react";
import { vi, describe, it, expect, beforeEach } from "vitest";
import { useCartStore } from "@/hooks/useCartStore";

// Helper component that tracks renders
const RenderTracker = ({ selector }: { selector: (state: any) => any }) => {
  const renderCount = useRef(0);
  const selectedState = useCartStore(selector);

  renderCount.current += 1;

  return <div data-testid="render-count">{renderCount.current}</div>;
};

describe("Selective Zustand Selectors Performance", () => {
  beforeEach(() => {
    // Reset the store before each test
    act(() => {
      useCartStore.getState().clearCart();
      useCartStore.setState({ isOpen: false });
    });
  });

  it("should NOT re-render when unrelated state (isOpen) changes if only items are selected", () => {
    const { getByTestId, rerender } = render(
      <RenderTracker selector={(state) => state.items} />
    );

    const initialRenderCount = parseInt(getByTestId("render-count").textContent || "0");

    // Change unrelated state
    act(() => {
      useCartStore.setState({ isOpen: true });
    });

    const countAfterUnrelatedChange = parseInt(getByTestId("render-count").textContent || "0");

    // It might render once more due to act/state update, but let's see.
    // In a perfectly optimized scenario, countAfterUnrelatedChange should be equal to initialRenderCount.
    // Zustand with selective selectors should prevent the re-render.
    expect(countAfterUnrelatedChange).toBe(initialRenderCount);
  });

  it("should re-render when selected state (items) changes", () => {
    const { getByTestId } = render(
      <RenderTracker selector={(state) => state.items} />
    );

    const initialRenderCount = parseInt(getByTestId("render-count").textContent || "0");

    // Change related state
    act(() => {
      useCartStore.getState().addToCart({
        id: "1",
        name: "Test",
        price: 10,
        quantity: 1,
        image: "/test.jpg"
      });
    });

    const countAfterRelatedChange = parseInt(getByTestId("render-count").textContent || "0");

    expect(countAfterRelatedChange).toBeGreaterThan(initialRenderCount);
  });

  it("should NOT re-render when items change if only addToCart action is selected", () => {
    const { getByTestId } = render(
      <RenderTracker selector={(state) => state.addToCart} />
    );

    const initialRenderCount = parseInt(getByTestId("render-count").textContent || "0");

    // Change items (which shouldn't affect the stable addToCart function)
    act(() => {
      useCartStore.getState().addToCart({
        id: "1",
        name: "Test",
        price: 10,
        quantity: 1,
        image: "/test.jpg"
      });
    });

    const countAfterChange = parseInt(getByTestId("render-count").textContent || "0");

    // Action functions in Zustand are stable
    expect(countAfterChange).toBe(initialRenderCount);
  });
});