import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { ChannelBadge } from "./ChannelBadge";

describe("ChannelBadge", () => {
  it("renders without crashing", () => {
    const { container } = render(
      <ChannelBadge tablo={null} displayTitle="Test" isOnline={false} />
    );
    expect(container.firstChild).toBeInTheDocument();
  });

  it("displays initials from tablo name", () => {
    const tablo = {
      name: "Project Alpha",
      color: "bg-blue-500",
      id: "test-id",
      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 { container } = render(
      <ChannelBadge tablo={tablo} displayTitle="Test" isOnline={false} />
    );
    expect(container).toHaveTextContent("P");
  });

  it("displays initials from displayTitle when tablo is null", () => {
    const { container } = render(
      <ChannelBadge tablo={null} displayTitle="MyChannel" isOnline={false} />
    );
    expect(container).toHaveTextContent("M");
  });

  it("displays default initial 'C' when no names provided", () => {
    const { container } = render(
      <ChannelBadge tablo={null} displayTitle={undefined} isOnline={false} />
    );
    expect(container).toHaveTextContent("C");
  });

  it("shows online indicator when isOnline is true", () => {
    const { container } = render(<ChannelBadge tablo={null} displayTitle="Test" isOnline={true} />);
    const onlineIndicator = container.querySelector(".bg-green-500");
    expect(onlineIndicator).toBeInTheDocument();
  });

  it("does not show online indicator when isOnline is false", () => {
    const { container } = render(
      <ChannelBadge tablo={null} displayTitle="Test" isOnline={false} />
    );
    const onlineIndicator = container.querySelector(".bg-green-500");
    expect(onlineIndicator).not.toBeInTheDocument();
  });

  it("applies tablo color class when provided", () => {
    const tablo = {
      name: "Test",
      color: "bg-purple-500",
      id: "test-id",
      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 { container } = render(
      <ChannelBadge tablo={tablo} displayTitle="Test" isOnline={false} />
    );
    const badge = container.querySelector(".bg-purple-500");
    expect(badge).toBeInTheDocument();
  });
});
