import React from "react";
import { render, screen } from "@testing-library/react";
import { PresenceIndicator } from "@/components/dashboard/PresenceIndicator";
import { OnlineUsersList } from "@/components/dashboard/OnlineUsersList";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { usePresenceStore } from "@/hooks/usePresenceStore";

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

describe("Presence Components", () => {
  const mockFetchPresenceData = vi.fn();
  const mockUpdatePresence = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
    vi.mocked(usePresenceStore).mockReturnValue({
      presenceData: { users: [] },
      loading: false,
      fetchPresenceData: mockFetchPresenceData,
      updatePresence: mockUpdatePresence,
    } as any);
  });

  describe("PresenceIndicator", () => {
    it("renders the number of online users", () => {
      vi.mocked(usePresenceStore).mockReturnValue({
        presenceData: {
          users: [
            { id: "1", name: "User 1", status: "online" },
            { id: "2", name: "User 2", status: "online" },
          ],
        },
        loading: false,
        fetchPresenceData: mockFetchPresenceData,
        updatePresence: mockUpdatePresence,
      } as any);

      render(<PresenceIndicator />);
      expect(screen.getByText(/2/)).toBeInTheDocument();
      expect(screen.getByText(/online/i)).toBeInTheDocument();
    });

    it("renders zero if no users are online", () => {
      render(<PresenceIndicator />);
      expect(screen.getByText(/0/)).toBeInTheDocument();
    });
  });

  describe("OnlineUsersList", () => {
    it("renders a list of online user names", () => {
      vi.mocked(usePresenceStore).mockReturnValue({
        presenceData: {
          users: [
            { id: "1", name: "Alice" },
            { id: "2", name: "Bob" },
          ],
        },
        loading: false,
        fetchPresenceData: mockFetchPresenceData,
        updatePresence: mockUpdatePresence,
      } as any);

      render(<OnlineUsersList />);
      expect(screen.getByText("Alice")).toBeInTheDocument();
      expect(screen.getByText("Bob")).toBeInTheDocument();
    });

    it("renders an empty state message if no users are online", () => {
      render(<OnlineUsersList />);
      expect(screen.getByText(/No other users online/i)).toBeInTheDocument();
    });
  });
});