import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import TeamChatWidget from "@/components/dashboard/TeamChatWidget";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { useChatWidgetStore } from "@/hooks/useChatWidgetStore";
import { TooltipProvider } from "@/components/ui/tooltip";

vi.mock("@/components/dashboard/ChatWidget", () => ({
  ChatWidget: () => <div data-testid="chat-widget" />
}));

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

describe("TeamChatWidget Accessibility", () => {
  const mockToggleMinimized = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders with unread messages", async () => {
    vi.mocked(useChatWidgetStore).mockReturnValue({
      isMinimized: true,
      toggleMinimized: mockToggleMinimized,
      unreadCount: 5,
    } as any);

    render(<TooltipProvider><TeamChatWidget /></TooltipProvider>);
    const button = screen.getByRole("button", { name: /Open chat \(5 unread messages\)/i });
    expect(button).toBeInTheDocument();
  });

  it("renders with correct tooltip when expanded", async () => {
    vi.mocked(useChatWidgetStore).mockReturnValue({
      isMinimized: false,
      toggleMinimized: mockToggleMinimized,
      unreadCount: 0,
    } as any);

    render(<TooltipProvider><TeamChatWidget /></TooltipProvider>);
    const button = screen.getByRole("button", { name: /Close team chat/i });
    expect(button).toBeInTheDocument();
    fireEvent.focus(button);
    await waitFor(() => {
      const tooltips = screen.queryAllByText("Close");
      expect(tooltips.length).toBeGreaterThan(0);
    });
  });
});