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

vi.mock("../hooks/useChat", () => ({
  useChat: () => ({
    messages: [],
    sendMessage: vi.fn(),
    sendTyping: vi.fn(),
    isConnected: false,
    typingUsers: [],
    onlineUsers: [],
    loadMoreMessages: vi.fn(),
    hasMoreMessages: false,
    markAsRead: vi.fn(),
  }),
}));

vi.mock("../hooks/useChatUnread", () => ({
  useChatUnread: () => ({
    unreadCounts: [],
    getUnreadCount: () => 0,
    hasUnread: () => false,
  }),
}));

vi.mock("../hooks/tablos", () => ({
  useTablosList: () => ({
    data: [
      { id: "tablo-1", name: "Test Tablo 1" },
      { id: "tablo-2", name: "Test Tablo 2" },
    ],
  }),
  useTabloMembers: () => ({ data: [] }),
}));

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

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

  it("renders the discussions heading", () => {
    renderWithProviders(<ChatPage />);
    expect(screen.getByText("Discussions")).toBeInTheDocument();
  });

  it("renders channel previews for each tablo", () => {
    renderWithProviders(<ChatPage />);
    expect(screen.getByText("Test Tablo 1")).toBeInTheDocument();
    expect(screen.getByText("Test Tablo 2")).toBeInTheDocument();
  });

  it("shows empty state when no channel is selected", () => {
    renderWithProviders(<ChatPage />);
    expect(screen.getByText("Select a conversation to start chatting")).toBeInTheDocument();
  });
});

describe("ChatPage - Channel List Toggle", () => {
  it("starts with channel list expanded when no channel in URL", () => {
    renderWithProviders(<ChatPage />);
    // The sidebar should be visible (w-80)
    const heading = screen.getByText("Discussions");
    expect(heading).toBeInTheDocument();
  });
});
