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

const mockRouter = { push: vi.fn(), refresh: vi.fn() };

// Mock next/navigation
vi.mock("next/navigation", () => ({
  useRouter: () => mockRouter,
  usePathname: () => "/dashboard/eu-responsible-persons/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/settings", () => ({
  getResponsiblePersons: vi.fn(),
  deleteEuResponsiblePerson: vi.fn(),
}));

// Mock columns
vi.mock("@/app/(private)/dashboard/eu-responsible-persons/overview/columns", () => ({
  columns: [],
  getColumns: vi.fn(() => []),
}));

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

  it("should maintain stable handlers for DataTable and EntityDetailPanel across re-renders", () => {
    const initialData = {
      total: 1,
      documents: [{ id: 1, company_name: "RP 1" }]
    };

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

    // Capture handlers from first render
    const firstDataTableHandler = vi.mocked(DataTable).mock.calls[0][0].onRowClick;
    const firstPanelDataChangeHandler = (vi.mocked(EntityDetailPanel).mock.calls[0][0] as any).onDataChange;
    const firstPanelCancelHandler = (vi.mocked(EntityDetailPanel).mock.calls[0][0] as any).onCancel;

    // Trigger a re-render
    rerender(
      <EuResponsiblePersonsOverviewClient
        initialData={{ ...initialData, total: 2 } as any}
        page={1}
        pageSize={10}
      />
    );

    // Capture handlers from second render
    const secondDataTableHandler = vi.mocked(DataTable).mock.calls[1][0].onRowClick;
    const secondPanelDataChangeHandler = (vi.mocked(EntityDetailPanel).mock.calls[1][0] as any).onDataChange;
    const secondPanelCancelHandler = (vi.mocked(EntityDetailPanel).mock.calls[1][0] as any).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();
  });
});