import { fireEvent, render, screen } from "@testing-library/react";
import { Channel } from "stream-chat";
import { describe, expect, it, vi } from "vitest";
import { ChannelPreview } from "./ChannelPreview";

// Mock ChannelBadge
vi.mock("./ChannelBadge", () => ({
  ChannelBadge: ({ displayTitle, isOnline }: { displayTitle?: string; isOnline: boolean }) => (
    <div data-testid="channel-badge">
      {displayTitle}-{isOnline ? "online" : "offline"}
    </div>
  ),
}));

describe("ChannelPreview", () => {
  const mockChannel = {
    id: "channel-1",
    data: {
      created_at: new Date("2024-01-01").toISOString(),
      config: {
        name: "Test Channel",
      },
    },
    state: {
      members: {},
    },
  } as unknown as Channel;

  const mockTablo = {
    id: "tablo-1",
    name: "Test Tablo",
    color: "bg-blue-500",
    user_id: "user-id",
    access_level: "admin",
    is_admin: true,
    created_at: "2024-01-01T00:00:00Z",
    deleted_at: "2024-01-01T00:00:00Z",
    position: 0,
    status: "active",
    image: null,
  };

  const defaultProps = {
    channel: mockChannel,
    tablo: mockTablo,
    displayTitle: "Test Channel",
  };

  it("renders without crashing", () => {
    render(<ChannelPreview {...defaultProps} />);
    expect(screen.getByText("Test Channel")).toBeInTheDocument();
  });

  it("displays channel title", () => {
    render(<ChannelPreview {...defaultProps} />);
    expect(screen.getByText("Test Channel")).toBeInTheDocument();
  });

  it("renders ChannelBadge component", () => {
    render(<ChannelPreview {...defaultProps} />);
    expect(screen.getByTestId("channel-badge")).toBeInTheDocument();
  });

  it("shows unread count badge when unreadCount > 0", () => {
    render(<ChannelPreview {...defaultProps} unreadCount={5} />);
    expect(screen.getByText("5")).toBeInTheDocument();
  });

  it("shows 99+ for unread counts over 99", () => {
    render(<ChannelPreview {...defaultProps} unreadCount={150} />);
    expect(screen.getByText("99+")).toBeInTheDocument();
  });

  it("does not show unread badge when count is 0", () => {
    const { container } = render(<ChannelPreview {...defaultProps} unreadCount={0} />);
    expect(container.querySelector(".min-w-\\[20px\\]")).not.toBeInTheDocument();
  });

  it("calls setActiveChannel when clicked", () => {
    const setActiveChannel = vi.fn();
    render(<ChannelPreview {...defaultProps} setActiveChannel={setActiveChannel} />);
    fireEvent.click(screen.getByText("Test Channel"));
    expect(setActiveChannel).toHaveBeenCalledWith(mockChannel);
  });

  it("highlights active channel", () => {
    const { container } = render(<ChannelPreview {...defaultProps} activeChannel={mockChannel} />);
    expect(container.querySelector(".bg-purple-50")).toBeInTheDocument();
  });

  it("displays latest message preview", () => {
    render(<ChannelPreview {...defaultProps} latestMessagePreview="Hello world" />);
    expect(screen.getByText("Hello world")).toBeInTheDocument();
  });

  it("applies custom className", () => {
    const { container } = render(<ChannelPreview {...defaultProps} className="custom-class" />);
    expect(container.querySelector(".custom-class")).toBeInTheDocument();
  });

  it("shows active indicator for active channel", () => {
    const { container } = render(<ChannelPreview {...defaultProps} activeChannel={mockChannel} />);
    expect(container.querySelector(".absolute.left-0.top-0.bottom-0.w-1")).toBeInTheDocument();
  });
});
