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

import { SplashBackground } from "../splash-background";
import { SplashButton } from "../splash-button";
import { SplashContent } from "../splash-content";
import { SplashLogo } from "../splash-logo";

const authStateMock = vi.hoisted(() => ({
  value: {
    authPanelMode: "facebook",
    isLoading: false,
    errorMessage: null,
    loginStatus: "notLoggedIn",
    hasInitialized: true,
  },
}));

vi.mock("@/stores/auth/auth-context", () => ({
  useAuthState: () => authStateMock.value,
}));

describe("splash Tailwind components", () => {
  it("renders SplashLogo with Tailwind wrapper and image classes", () => {
    const html = renderToStaticMarkup(<SplashLogo />);

    expect(html).toContain("z-2");
    expect(html).toContain("inline-flex");
    expect(html).toContain("block h-auto w-auto");
    expect(html).toContain("%2Fimages%2Fsplash%2Fic-logo-home.png");
  });

  it("renders SplashBackground with Tailwind fill image classes", () => {
    const html = renderToStaticMarkup(<SplashBackground />);

    expect(html).toContain("absolute");
    expect(html).toContain("bg-sidebar-background");
    expect(html).toContain("object-cover");
    expect(html).toContain("%2Fimages%2Fsplash%2Fpic-bg-home.png");
  });

  it("renders SplashContent with Tailwind typography classes", () => {
    const html = renderToStaticMarkup(<SplashContent />);

    expect(html).toContain("flex flex-col gap-md");
    expect(html).toContain("font-(family-name:--font-athelas)");
    expect(html).toContain("whitespace-pre-line");
    expect(html).toContain("Welcome to my secret hideout");
  });

  it("renders SplashButton ready and loading states", () => {
    authStateMock.value = {
      ...authStateMock.value,
      hasInitialized: true,
      isLoading: false,
    };
    const readyHtml = renderToStaticMarkup(
      <SplashButton onStartChat={() => undefined} />,
    );

    authStateMock.value = {
      ...authStateMock.value,
      hasInitialized: false,
      isLoading: false,
    };
    const loadingHtml = renderToStaticMarkup(
      <SplashButton onStartChat={() => undefined} />,
    );

    expect(readyHtml).toContain("z-2");
    expect(readyHtml).toContain("max-w-120");
    expect(readyHtml).toContain("bg-[linear-gradient(to_right");
    expect(readyHtml).toContain("active:enabled:scale-96");
    expect(readyHtml).toContain("active:enabled:brightness-90");
    expect(readyHtml).toContain("touch-manipulation");
    expect(readyHtml).toContain("Start Chatting");
    expect(loadingHtml).toContain("disabled");
    expect(loadingHtml).toContain("animate-spin");
  });
});