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

import { AppBottomNav } from "../app-bottom-nav";
import { Checkbox } from "../checkbox";
import { LoadingIndicator } from "../loading-indicator";
import { PageLoadingFallback } from "../page-loading-fallback";
import { ResponsiveMobileShell } from "../responsive-mobile-shell";

describe("core Tailwind components", () => {
  it("renders LoadingIndicator with accessible status and dynamic sizing", () => {
    const html = renderToStaticMarkup(
      <LoadingIndicator size={24} strokeWidth={2} color="#f00" label="Loading now" />,
    );

    expect(html).toContain('role="status"');
    expect(html).toContain('aria-label="Loading"');
    expect(html).toContain("animate-spin");
    expect(html).toContain("width:24px");
    expect(html).toContain("height:24px");
    expect(html).toContain("border-width:2px");
    expect(html).toContain("border-color:#f00 transparent transparent transparent");
    expect(html).toContain("Loading now");
  });

  it("renders PageLoadingFallback with tone utilities", () => {
    const html = renderToStaticMarkup(
      <PageLoadingFallback background="#111111" tone="dark">
        Loading chat...
      </PageLoadingFallback>,
    );

    expect(html).toContain("grid");
    expect(html).toContain("min-h-[60vh]");
    expect(html).toContain("text-[rgba(255,255,255,0.72)]");
    expect(html).toContain("Loading chat...");
  });

  it("renders Checkbox with checked and labeled states", () => {
    const checkedHtml = renderToStaticMarkup(
      <Checkbox checked onChange={() => undefined} ariaLabel="Accept terms" />,
    );
    const labeledHtml = renderToStaticMarkup(
      <Checkbox checked={false} onChange={() => undefined} label="Keep me signed in" />,
    );

    expect(checkedHtml).toContain('role="checkbox"');
    expect(checkedHtml).toContain('aria-checked="true"');
    expect(checkedHtml).toContain('aria-label="Accept terms"');
    expect(checkedHtml).toContain("size-(--auth-legal-checkbox-size)");
    expect(checkedHtml).toContain(
      "size-(--auth-legal-checkbox-inner-size)",
    );
    expect(labeledHtml).toContain("<label");
    expect(labeledHtml).toContain("Keep me signed in");
    expect(labeledHtml).toContain("gap-(--spacing-sm)");
  });

  it("renders ResponsiveMobileShell with bounded canvas utilities", () => {
    const html = renderToStaticMarkup(
      <ResponsiveMobileShell
        background="#fff"
        outerBackground="#000"
        className="custom-content"
      >
        Content
      </ResponsiveMobileShell>,
    );

    expect(html).toContain("min-h-(--app-viewport-height,100dvh)");
    expect(html).toContain("max-w-(--app-max-width,540px)");
    expect(html).toContain("overflow-x-clip");
    expect(html).toContain("custom-content");
    expect(html).toContain("Content");
  });

  it("renders AppBottomNav themes and active items accessibly", () => {
    const chatHtml = renderToStaticMarkup(
      <AppBottomNav
        activeItem="chat"
        variant="dark"
        onChatClick={() => undefined}
        onPrivateRoomClick={() => undefined}
      />,
    );
    const privateRoomHtml = renderToStaticMarkup(
      <AppBottomNav
        activeItem="privateRoom"
        variant="warm"
        onChatClick={() => undefined}
        onPrivateRoomClick={() => undefined}
      />,
    );

    expect(chatHtml).toContain('aria-label="Primary navigation"');
    expect(chatHtml).toMatch(/class="[^"]*dark[^"]*"/);
    expect(chatHtml).toMatch(
      /<button[^>]*aria-current="page"[^>]*>.*?<span>Chat<\/span>/,
    );
    expect(privateRoomHtml).toMatch(/class="[^"]*warm[^"]*"/);
    expect(privateRoomHtml).toMatch(
      /<button[^>]*aria-current="page"[^>]*>.*?<span>Elio Private room<\/span>/,
    );
    expect(chatHtml).toContain('data-analytics-key="navigation.chat"');
    expect(privateRoomHtml).toContain(
      'data-analytics-key="navigation.private_room"',
    );
  });
});
