import { fireEvent, screen, waitFor } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { renderWithProviders } from "../utils/testHelpers";
import NotesPage from "./notes";

const mockCreateNote = vi.fn();
const mockUpdateNote = vi.fn();
const mockDeleteNote = vi.fn();
const mockUpdateSharing = vi.fn();

vi.mock("react-i18next", () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
}));

vi.mock("../hooks/notes", () => ({
  useNotes: () => ({
    notes: [
      { id: "note-1", title: "Test Note 1", content: "Content 1", created_at: "2023-01-01" },
      { id: "note-2", title: "Test Note 2", content: "Content 2", created_at: "2023-01-02" },
    ],
    isLoading: false,
  }),
  useNote: () => ({
    note: null,
    isLoading: false,
  }),
  useCreateNote: () => ({
    mutate: mockCreateNote,
    isPending: false,
  }),
  useUpdateNote: () => ({
    mutate: mockUpdateNote,
    isPending: false,
  }),
  useDeleteNote: () => ({
    mutate: mockDeleteNote,
    isPending: false,
  }),
  useNoteSharing: () => ({
    isPublic: false,
    isSharedWithAllTablos: false,
    isLoading: false,
  }),
  useUpdateNoteSharing: () => ({
    mutate: mockUpdateSharing,
    isPending: false,
  }),
}));

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

vi.mock("@xtablo/shared", async () => {
  const actual = await vi.importActual("@xtablo/shared");
  return {
    ...actual,
    toast: {
      add: vi.fn(),
    },
  };
});

describe.skip("NotesPage - Create Mode", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders without crashing", () => {
    const { container } = renderWithProviders(<NotesPage mode="create" />);
    expect(container).toBeInTheDocument();
  });

  it("displays page title", () => {
    renderWithProviders(<NotesPage mode="create" />);

    expect(screen.getByText(/notes:title/i)).toBeInTheDocument();
  });

  it("renders notes sidebar with list of notes", () => {
    renderWithProviders(<NotesPage mode="create" />);

    expect(screen.getByText("Test Note 1")).toBeInTheDocument();
    expect(screen.getByText("Test Note 2")).toBeInTheDocument();
  });

  it("renders new note button", () => {
    renderWithProviders(<NotesPage mode="create" />);

    const newNoteButtons = screen.getAllByRole("button", { name: /notes:newNote/i });
    expect(newNoteButtons.length).toBeGreaterThan(0);
  });

  it("has title input field", () => {
    renderWithProviders(<NotesPage mode="create" />);

    expect(screen.getByPlaceholderText(/notes:titlePlaceholder/i)).toBeInTheDocument();
  });

  it("updates title input on change", () => {
    renderWithProviders(<NotesPage mode="create" />);

    const titleInput = screen.getByPlaceholderText(/notes:titlePlaceholder/i) as HTMLInputElement;
    fireEvent.change(titleInput, { target: { value: "My New Note" } });

    expect(titleInput.value).toBe("My New Note");
  });

  it("renders save button", () => {
    renderWithProviders(<NotesPage mode="create" />);

    expect(screen.getByRole("button", { name: /notes:save/i })).toBeInTheDocument();
  });

  it("calls createNote when save button is clicked", async () => {
    renderWithProviders(<NotesPage mode="create" />);

    const titleInput = screen.getByPlaceholderText(/notes:titlePlaceholder/i);
    fireEvent.change(titleInput, { target: { value: "My New Note" } });

    const saveButton = screen.getByRole("button", { name: /notes:save/i });
    fireEvent.click(saveButton);

    await waitFor(() => {
      expect(mockCreateNote).toHaveBeenCalled();
    });
  });
});

describe.skip("NotesPage - Edit Mode", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders in edit mode", () => {
    const { container } = renderWithProviders(<NotesPage mode="edit" />);
    expect(container).toBeInTheDocument();
  });

  // Note: Testing delete button visibility in edit mode with a specific noteId would require
  // re-mocking useParams with different values, which is complex with module-level mocks.
});

// Note: Testing empty state and loading state would require re-mocking the hooks with different values.
// The current test suite already covers the main happy path with notes present.
// Additional state testing is better handled with integration tests.

describe.skip("NotesPage - Sidebar Toggle", () => {
  it("has sidebar toggle button", () => {
    renderWithProviders(<NotesPage mode="create" />);

    // Sidebar should be visible by default, look for collapse button
    const toggleButtons = screen.getAllByRole("button");
    expect(toggleButtons.length).toBeGreaterThan(0);
  });
});
