import React from "react";
import { render } from "@testing-library/react";
import TaxClassesOverviewClient from "@/app/(private)/dashboard/tax-classes/overview/TaxClassesOverviewClient";
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/tax-classes/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/catalog", () => ({
  getTaxClasses: vi.fn(),
  deleteTaxClass: vi.fn(),
}));

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

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

  it("should maintain stable handlers for DataTable and EntityDetailPanel across re-renders", () => {
    const initialData = {
      success: true,
      data: {
        total: 1,
        documents: [{ id: 1, name: "VAT 19%", percentage: 19 }]
      }
    };

    const { rerender } = render(
      <TaxClassesOverviewClient
        initialData={initialData as any}
        page={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(
      <TaxClassesOverviewClient
        initialData={{ ...initialData, data: { ...initialData.data, total: 2 } } as any}
        page={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();
  });
});