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

const mockSetActiveChannel = vi.fn();

vi.mock("../hooks/channel", () => ({
  useChannelFromUrl: () => ({
    channel: null,
    isChannelInUrl: false,
  }),
}));

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

vi.mock("../providers/ChatProvider", () => ({
  useChatClient: () => null,
  useChatContext: () => ({
    client: { id: "test-client" },
    channel: null,
    setActiveChannel: mockSetActiveChannel,
  }),
}));

vi.mock("stream-chat-react", () => ({
  Chat: ({ children }: { children: React.ReactNode }) => <div data-testid="chat">{children}</div>,
  ChannelList: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="channel-list">{children}</div>
  ),
  Channel: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="channel">{children}</div>
  ),
  ChannelHeader: () => <div data-testid="channel-header">Header</div>,
  MessageList: () => <div data-testid="message-list">Messages</div>,
  MessageInput: () => <div data-testid="message-input">Input</div>,
  Window: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="window">{children}</div>
  ),
  useChannelStateContext: () => ({ channel: null }),
  useCreateChatClient: () => null,
  useChatContext: () => ({
    client: { id: "test-client" },
    channel: null,
    setActiveChannel: mockSetActiveChannel,
  }),
}));

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

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

  it("renders channel list", () => {
    renderWithProviders(<ChatPage />);

    expect(screen.getByTestId("channel-list")).toBeInTheDocument();
  });

  it("renders channel window", () => {
    renderWithProviders(<ChatPage />);

    expect(screen.getByTestId("channel")).toBeInTheDocument();
    expect(screen.getByTestId("window")).toBeInTheDocument();
  });

  it("renders message list and input", () => {
    renderWithProviders(<ChatPage />);

    expect(screen.getByTestId("message-list")).toBeInTheDocument();
    expect(screen.getByTestId("message-input")).toBeInTheDocument();
  });

  it("applies correct filters for channel list", () => {
    renderWithProviders(<ChatPage />);

    // ChannelList should be rendered with proper filters
    expect(screen.getByTestId("channel-list")).toBeInTheDocument();
  });
});

// Note: Testing channel from URL would require re-mocking the hook with different values
// This is better tested with integration tests or by testing the hook separately.

describe("ChatPage - Channel List Toggle", () => {
  it("starts with channel list expanded when no channel in URL", () => {
    renderWithProviders(<ChatPage />);

    const channelListContainer = screen.getByTestId("channel-list").parentElement;
    expect(channelListContainer?.className).toContain("w-80");
  });

  it("has collapsible channel list", () => {
    renderWithProviders(<ChatPage />);

    const channelListContainer = screen.getByTestId("channel-list").parentElement;
    expect(channelListContainer).toBeInTheDocument();
  });
});
