import { screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { renderWithProviders } from "../utils/testHelpers";
import { TabloPage } from "./tablo";

vi.mock("../hooks/tablos", () => ({
  useTablosList: () => ({
    data: [
      {
        id: "test-tablo-id",
        name: "Test Tablo",
        color: "bg-blue-500",
        image: null,
        created_at: "2024-01-01T00:00:00Z",
        deleted_at: null,
        position: 0,
        status: "todo",
        user_id: "test-user-id",
        is_admin: true,
        access_level: "admin",
      },
    ],
    isLoading: false,
    error: null,
  }),
  useCreateTablo: () => ({
    mutate: vi.fn(),
  }),
  useUpdateTablo: () => ({
    mutate: vi.fn(),
  }),
  useDeleteTablo: () => ({
    mutate: vi.fn(),
  }),
  useCanCreateTablo: () => true,
  useTabloMembers: () => ({
    data: [],
    isLoading: false,
  }),
}));

vi.mock("../hooks/tabloData", () => ({
  useTabloData: () => ({
    data: [],
    isLoading: false,
  }),
}));

vi.mock("../providers/UserStoreProvider", () => ({
  useUser: () => ({
    id: "test-user-id",
    name: "Test User",
  }),
  useIsReadOnlyUser: () => false,
  TestUserStoreProvider: ({ children }: { children: React.ReactNode }) => children,
}));

describe("TabloPage", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders without crashing", () => {
    const { container } = renderWithProviders(<TabloPage />, {
      route: "/tablos/test-tablo-id",
      path: "/tablos/:tabloId",
    });
    expect(container).toBeInTheDocument();
  });

  it("displays tablo name", () => {
    renderWithProviders(<TabloPage />, {
      route: "/tablos/test-tablo-id",
      path: "/tablos/:tabloId",
    });

    expect(screen.getByText("Test Tablo")).toBeInTheDocument();
  });

  it.skip("renders data grid for tablo", () => {
    renderWithProviders(<TabloPage />, {
      route: "/tablos/test-tablo-id",
      path: "/tablos/:tabloId",
    });

    // AG Grid should be rendered (look for grid container)
    const gridContainer = document.querySelector(".ag-root-wrapper");
    expect(gridContainer).toBeInTheDocument();
  });
});

describe("TabloPage - Loading State", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  // it("shows loading state when tablo is being fetched", () => {
  //   vi.mocked(vi.importMock("../hooks/tablos")).useTablo = () => ({
  //     tablo: null,
  //     isLoading: true,
  //     error: null,
  //   });

  //   vi.doMock("../hooks/tablos", () => ({
  //     useTablo: () => ({
  //       tablo: null,
  //       isLoading: true,
  //       error: null,
  //     }),
  //     useTablosList: () => ({
  //       data: [],
  //     }),
  //   }));

  //   renderWithProviders(<TabloPage />);

  //   expect(screen.getByText(/pages:tablo.loading/i)).toBeInTheDocument();
  // });
});

describe("TabloPage - Error State", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  // it("shows error message when tablo cannot be loaded", () => {
  //   vi.mocked(vi.importMock("../hooks/tablos")).useTablo = () => ({
  //     tablo: null,
  //     isLoading: false,
  //     error: new Error("Tablo not found"),
  //   });

  //   vi.doMock("../hooks/tablos", () => ({
  //     useTablo: () => ({
  //       tablo: null,
  //       isLoading: false,
  //       error: new Error("Tablo not found"),
  //     }),
  //     useTablosList: () => ({
  //       data: [],
  //     }),
  //   }));

  //   renderWithProviders(<TabloPage />);

  //   expect(screen.getByText(/pages:tablo.error/i)).toBeInTheDocument();
  // });
});
