import { render, screen, fireEvent, act } from "@testing-library/react";
import { CategoryVisualizer } from "@/app/(private)/dashboard/categories/overview/CategoryVisualizer";
import { vi, describe, it, expect, beforeEach } from "vitest";
import React from "react";

// Mock CategoryDiagram as it's not the focus of this test and uses heavy libs
vi.mock("./CategoryDiagram", () => ({
  CategoryDiagram: () => <div data-testid="category-diagram" />
}));

describe("CategoryVisualizer Performance", () => {
  beforeEach(() => {
    vi.clearAllMocks();
    vi.useFakeTimers();
  });

  const generateDeepTree = (count: number) => {
    const categories = [];
    for (let i = 1; i <= count; i++) {
      categories.push({
        id: String(i),
        name: `Category ${i}`,
        parent_id: i === 1 ? null : String(i - 1),
      });
    }
    return categories;
  };

  it("should handle searching in a large deep tree", async () => {
    const categories = generateDeepTree(200); // Reduced from 1000 to avoid JSDOM timeout

    render(<CategoryVisualizer categories={categories} />);

    const searchInput = screen.getByPlaceholderText("Suchen...");

    await act(async () => {
      fireEvent.change(searchInput, { target: { value: "Category 200" } });
    });

    // Advance timers for debounce
    await act(async () => {
      vi.advanceTimersByTime(250);
    });

    // Verify it found the node
    expect(screen.getByText("Category 200")).toBeDefined();
  });

  it("should not re-render when props are the same", async () => {
    const categories = generateDeepTree(10);
    let renderCount = 0;

    const TestWrapper = ({ categories }: any) => {
      renderCount++;
      return <CategoryVisualizer categories={categories} />;
    };

    const { rerender } = render(<TestWrapper categories={categories} />);
    expect(renderCount).toBe(1);

    // Rerender with same categories
    rerender(<TestWrapper categories={categories} />);
    expect(renderCount).toBe(2);
  });
});