import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";

import { BackButton } from "../back-button";
import { CharacterAvatar } from "../character-avatar";
import { UserMessageAvatar } from "../user-message-avatar";

describe("shared Tailwind components", () => {
  it("renders BackButton link and action variants with Tailwind classes", () => {
    const linkHtml = renderToStaticMarkup(
      <BackButton href="/chat" variant="soft" ariaLabel="Back to chat" />,
    );
    const actionHtml = renderToStaticMarkup(
      <BackButton onClick={() => undefined} variant="ghost" />,
    );
    const darkHtml = renderToStaticMarkup(
      <BackButton
        href="/splash"
        variant="dark"
        ariaLabel="Back to home"
        analyticsKey="chat.back_to_home"
      />,
    );
    const unstyledHtml = renderToStaticMarkup(
      <BackButton
        onClick={() => undefined}
        variant="unstyled"
        className="custom-back"
      />,
    );

    expect(linkHtml).toContain('href="/chat"');
    expect(linkHtml).toContain('aria-label="Back to chat"');
    expect(linkHtml).toContain("inline-flex");
    expect(linkHtml).toContain("size-(--responsive-icon-button-size,42px)");
    expect(linkHtml).toContain("hover:bg-white");
    expect(actionHtml).toContain("<button");
    expect(actionHtml).toContain("size-8");
    expect(actionHtml).toContain("hover:opacity-70");
    expect(darkHtml).toContain('href="/splash"');
    expect(darkHtml).toContain('aria-label="Back to home"');
    expect(darkHtml).toContain('data-analytics-key="chat.back_to_home"');
    expect(darkHtml).toContain("bg-[rgba(13,11,20,0.7)]");
    expect(darkHtml).toContain("text-white");
    expect(unstyledHtml).toContain("custom-back");
    expect(unstyledHtml).not.toContain("size-8");
  });

  it("renders CharacterAvatar with dynamic sizing and image utilities", () => {
    const html = renderToStaticMarkup(
      <CharacterAvatar
        src="/images/avatar/maya.png"
        alt="Maya Tan"
        size={48}
        imageSize={96}
        className="custom-avatar"
      />,
    );

    expect(html).toContain("inline-flex");
    expect(html).toContain("custom-avatar");
    expect(html).toContain("width:48px");
    expect(html).toContain("height:48px");
    expect(html).toContain("size-full object-cover");
    expect(html).toContain("%2Fimages%2Favatar%2Fmaya.png");
  });

  it("renders UserMessageAvatar custom and fallback images", () => {
    const userHtml = renderToStaticMarkup(
      <UserMessageAvatar avatarUrl="/avatar.png" size="3rem" />,
    );
    const guestHtml = renderToStaticMarkup(<UserMessageAvatar />);

    expect(userHtml).toContain('aria-label="User avatar"');
    expect(userHtml).toContain("width:3rem");
    expect(userHtml).toContain("height:3rem");
    expect(userHtml).toContain("size-full object-cover");
    expect(userHtml).toContain("%2Favatar.png");
    expect(guestHtml).toContain('aria-label="Guest avatar"');
    expect(guestHtml).toContain("%2Fimages%2Favatar%2Fplaceholder.png");
  });
});