import React from "react";
import { render } from "@testing-library/react";
import UsersOverviewClient from "@/app/(private)/dashboard/users/overview/UsersOverviewClient";
import { DataTable } from "@/components/ui/data-table";
import { EntityDetailPanel } from "@/components/dashboard/data-view/EntityDetailSheet";
import { vi, describe, it, expect, beforeEach } from "vitest";

// Stable mock for router
const mockRouter = { push: vi.fn(), refresh: vi.fn() };

// Mock next/navigation
vi.mock("next/navigation", () => ({
  useRouter: () => mockRouter,
  usePathname: () => "/dashboard/users/overview",
  useSearchParams: () => new URLSearchParams(),
}));

// Mock PaginationWithLinks
vi.mock("@/components/ui/pagination-with-links", () => ({
  default: () => <div data-testid="pagination" />,
}));

// Mock DataTable to capture props
vi.mock("@/components/ui/data-table", () => ({
  DataTable: vi.fn(() => <div data-testid="data-table" />),
}));

// Mock EntityDetailPanel
vi.mock("@/components/dashboard/data-view/EntityDetailSheet", () => ({
  EntityDetailPanel: vi.fn(() => <div data-testid="detail-panel" />),
}));

// Mock actions
vi.mock("@/actions/user", () => ({
  getUsers: vi.fn(),
  deleteUser: vi.fn(),
}));

// Mock columns
vi.mock("@/app/(private)/dashboard/users/overview/columns", () => ({
  columns: [],
}));

describe("UsersOverviewClient Referential Stability", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("should maintain stable handlers for DataTable and EntityDetailPanel across re-renders", () => {
    const initialData = {
      total: 1,
      documents: [{ id: 1, firstname: "John", lastname: "Doe", email: "john@doe.com", role: "admin" }]
    };

    const { rerender } = render(
      <UsersOverviewClient
        initialData={initialData as any}
        activePage={1}
        pageSize={10}
      />
    );

    // Get the first render's handlers
    const firstDataTableHandler = vi.mocked(DataTable).mock.calls[0][0].onRowClick;
    const firstPanelDataChangeHandler = vi.mocked(EntityDetailPanel).mock.calls[0][0].onDataChange;
    const firstPanelCancelHandler = vi.mocked(EntityDetailPanel).mock.calls[0][0].onCancel;

    // Trigger a re-render by changing props that shouldn't affect handlers
    rerender(
      <UsersOverviewClient
        initialData={{ ...initialData, total: 2 } as any}
        activePage={1}
        pageSize={10}
      />
    );

    // Get the second render's handlers
    const secondDataTableHandler = vi.mocked(DataTable).mock.calls[1][0].onRowClick;
    const secondPanelDataChangeHandler = vi.mocked(EntityDetailPanel).mock.calls[1][0].onDataChange;
    const secondPanelCancelHandler = vi.mocked(EntityDetailPanel).mock.calls[1][0].onCancel;

    // Verify referential stability
    expect(firstDataTableHandler).toBe(secondDataTableHandler);
    expect(firstPanelDataChangeHandler).toBe(secondPanelDataChangeHandler);
    expect(firstPanelCancelHandler).toBe(secondPanelCancelHandler);

    expect(firstDataTableHandler).toBeDefined();
    expect(firstPanelDataChangeHandler).toBeDefined();
    expect(firstPanelCancelHandler).toBeDefined();
  });
});