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

const mutateUpdateTablo = vi.fn();
const mutateUpdateTask = vi.fn();

const tablosData = [
  {
    id: "tablo-1",
    name: "Test Tablo",
    color: "bg-blue-500",
    image: null,
    created_at: "2026-01-01T00:00:00.000Z",
    deleted_at: null,
    position: 0,
    status: "todo",
    user_id: "user-1",
    is_admin: true,
    access_level: "admin",
  },
];

const layoutData: unknown = {
  version: 1,
  leftZone: ["myTasks", "description"],
  rightZone: ["files", "info"],
};

vi.mock("../hooks/channel", () => ({
  useTabloDiscussionUnread: () => ({
    hasUnread: false,
  }),
}));

vi.mock("../hooks/tablos", () => ({
  useTablosList: () => ({
    data: tablosData,
    isLoading: false,
  }),
  useTabloMembers: () => ({
    data: [],
  }),
  useTabloOverviewLayout: () => ({
    data: layoutData,
  }),
  useUpdateTablo: () => ({
    mutate: mutateUpdateTablo,
  }),
}));

vi.mock("../hooks/tablo_invites", () => ({
  usePendingTabloInvitesByTablo: () => ({
    data: [],
  }),
  useCancelTabloInvite: () => ({
    mutate: vi.fn(),
    isPending: false,
  }),
}));

vi.mock("../hooks/invite", () => ({
  useInviteUser: () => ({
    mutate: vi.fn(),
    isPending: false,
  }),
}));

vi.mock("../hooks/tasks", () => ({
  useAllTasks: () => ({
    data: [
      {
        id: "task-1",
        tablo_id: "tablo-1",
        assignee_id: "user-1",
        title: "Task A",
        status: "todo",
      },
    ],
  }),
  useTabloEtapes: () => ({
    data: [],
  }),
  useUpdateTask: () => ({
    mutate: mutateUpdateTask,
  }),
  useTask: () => ({
    data: null,
  }),
  useCreateEtape: () => ({
    mutateAsync: vi.fn(),
    isPending: false,
  }),
  useCreateTask: () => ({
    mutate: vi.fn(),
  }),
}));

vi.mock("../hooks/tablo_data", () => ({
  useTabloFileNames: () => ({
    data: {
      fileNames: [],
    },
  }),
}));

vi.mock("../providers/UserStoreProvider", async (importOriginal) => {
  const actual = await importOriginal<typeof import("../providers/UserStoreProvider")>();
  return {
    ...actual,
    useUser: () => ({
      id: "user-1",
      name: "Test User",
      avatar_url: null,
    }),
  };
});

describe("TabloDetailsPage overview layout", () => {
  it("renders overview cards in persisted left-zone order", () => {
    renderWithProviders(<TabloDetailsPage />, {
      route: "/tablos/tablo-1",
      path: "/tablos/:tabloId",
    });

    const tasksHeading = screen.getByText("Mes tâches");
    const descriptionHeading = screen.getByText("Description du projet");

    expect(tasksHeading.compareDocumentPosition(descriptionHeading)).toBe(
      Node.DOCUMENT_POSITION_FOLLOWING
    );
  });

  it("shows layout edit toggle for admin users", () => {
    renderWithProviders(<TabloDetailsPage />, {
      route: "/tablos/tablo-1",
      path: "/tablos/:tabloId",
    });

    expect(screen.getByRole("button", { name: "Modifier la mise en page" })).toBeInTheDocument();
  });
});
