import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import TeamChatPage from "@/app/(private)/dashboard/team/chat/page";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { useChatStore } from "@/hooks/useChatStore";
import { useAuthStore } from "@/hooks/useAuthStore";
import { usePresenceStore } from "@/hooks/usePresenceStore";
import { useIsMobile } from "@/hooks/useMobile";

// Mock stores
vi.mock("@/hooks/useChatStore", () => ({
  useChatStore: vi.fn(),
}));

vi.mock("@/hooks/useAuthStore", () => ({
  useAuthStore: vi.fn(),
}));

vi.mock("@/hooks/usePresenceStore", () => ({
  usePresenceStore: vi.fn(),
}));

vi.mock("@/hooks/useMobile", () => ({
  useIsMobile: vi.fn(),
}));

// Mock components that might be problematic
vi.mock("@/components/dashboard/ChatMessages", () => ({
  ChatMessages: () => <div data-testid="chat-messages">Chat Messages</div>,
}));

vi.mock("@/components/dashboard/ChatInput", () => ({
  ChatInput: () => <div data-testid="chat-input">Chat Input</div>,
}));

describe("TeamChatPage", () => {
  const mockFetchRooms = vi.fn();
  const mockFetchMessages = vi.fn();
  const mockSetupSSE = vi.fn().mockReturnValue(() => {});
  const mockSetActiveRoom = vi.fn();

  const defaultChatStore = {
    rooms: [
      { id: "1", name: "General", type: "group" },
      { id: "2", name: "Direct", type: "direct" },
    ],
    activeRoomId: "1",
    fetchRooms: mockFetchRooms,
    fetchMessages: mockFetchMessages,
    setupSSE: mockSetupSSE,
    setActiveRoom: mockSetActiveRoom,
  };

  const defaultAuthStore = {
    user: { id: "user1", name: "Test User", email: "test@example.com" },
    login: vi.fn(),
  };

  const defaultPresenceStore = {
    presenceData: {
      users: [
        {
          id: "user1",
          name: "Test User",
          email: "test@example.com",
          image: null,
        },
        {
          id: "user2",
          name: "Other User",
          email: "other@example.com",
          image: null,
        },
      ],
    },
    fetchPresenceData: vi.fn(),
  };

  beforeEach(() => {
    vi.clearAllMocks();
    vi.mocked(useChatStore).mockReturnValue(defaultChatStore as any);
    vi.mocked(useAuthStore).mockReturnValue(defaultAuthStore as any);
    vi.mocked(usePresenceStore).mockReturnValue(defaultPresenceStore as any);
    vi.mocked(useIsMobile).mockReturnValue(false);
  });

  it("renders the chat page correctly", () => {
    render(<TeamChatPage />);
    expect(screen.getByText("Channels")).toBeInTheDocument();
    // Check for "General" in the sidebar
    expect(screen.getAllByText("General")[0]).toBeInTheDocument();
    expect(screen.getByText("Direct")).toBeInTheDocument();
  });

  it("shows group name input when multiple users are selected and creates a group", async () => {
    const mockCreateRoom = vi.fn().mockResolvedValue("new-room-id");
    vi.mocked(useChatStore).mockReturnValue({
      ...defaultChatStore,
      createRoom: mockCreateRoom,
    } as any);

    vi.mocked(usePresenceStore).mockReturnValue({
      presenceData: {
        users: [
          {
            id: "user1",
            name: "Test User",
            email: "test@example.com",
            image: null,
          },
          {
            id: "user2",
            name: "Other User",
            email: "other@example.com",
            image: null,
          },
          {
            id: "user3",
            name: "Third User",
            email: "third@example.com",
            image: null,
          },
        ],
      },
      fetchPresenceData: vi.fn(),
    } as any);

    render(<TeamChatPage />);

    // Switch to users view
    const plusButton = screen
      .getAllByRole("button")
      .find((b) => b.querySelector("svg.lucide-plus"));
    fireEvent.click(plusButton!);

    await waitFor(() => {
      expect(screen.getByText("Other User")).toBeInTheDocument();
    });

    // Initially group name input should not be visible
    expect(
      screen.queryByPlaceholderText(/Gruppenname/i),
    ).not.toBeInTheDocument();

    // Select first user (Other User)
    const otherUserButton = screen.getByText("Other User").closest("button");
    fireEvent.click(otherUserButton!);

    // Still not visible for 1 user
    expect(
      screen.queryByPlaceholderText(/Gruppenname/i),
    ).not.toBeInTheDocument();

    // Select second user (Third User)
    const thirdUserButton = screen.getByText("Third User").closest("button");
    fireEvent.click(thirdUserButton!);

    // Now group name input should be visible
    const groupNameInput = screen.getByPlaceholderText(/Gruppenname/i);
    expect(groupNameInput).toBeInTheDocument();

    fireEvent.change(groupNameInput, { target: { value: "Project X" } });

    // Click "Gruppe erstellen"
    const createButton = screen.getByText("Gruppe erstellen");
    fireEvent.click(createButton);

    expect(mockCreateRoom).toHaveBeenCalledWith({
      name: "Project X",
      type: "group",
      participantIds: ["user2", "user3"],
    });
  });

  it("toggles sidebar on mobile", () => {
    vi.mocked(useIsMobile).mockReturnValue(true);
    render(<TeamChatPage />);

    // On mobile, the Menu button should be visible in the header
    const buttons = screen.getAllByRole("button");
    const menuButton = buttons.find((b) => b.querySelector("svg.lucide-menu"));
    expect(menuButton).toBeDefined();
  });
});