// @vitest-environment happy-dom
// RemitDrawerSkeleton is a pure presentational component with no
// dependencies on React Query. The `QueryClientProvider` wrapper is
// only here to keep the test convention uniform with the rest of the
// drawer's tests.
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;

import React, { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { describe, expect, it } from "vitest";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RemitDrawerSkeleton } from "./RemitDrawerSkeleton";

function renderIntoContainer(element: React.ReactElement): {
  container: HTMLDivElement;
  unmount: () => void;
} {
  const container = document.createElement("div");
  document.body.appendChild(container);
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  const root: Root = createRoot(container);
  act(() => {
    root.render(
      React.createElement(QueryClientProvider, { client: qc }, element)
    );
  });
  return {
    container,
    unmount: () => {
      act(() => root.unmount());
      container.remove();
    },
  };
}

describe("RemitDrawerSkeleton", () => {
  it("renders_all_section_primitives", () => {
    // The skeleton mirrors the drawer's section structure so the
    // layout doesn't jump when real data arrives. Each section gets a
    // labelled testid primitive.
    const { container, unmount } = renderIntoContainer(<RemitDrawerSkeleton />);

    expect(
      container.querySelector('[data-testid="skeleton-header"]')
    ).not.toBeNull();
    expect(
      container.querySelector('[data-testid="skeleton-financial"]')
    ).not.toBeNull();
    expect(
      container.querySelector('[data-testid="skeleton-parties-1"]')
    ).not.toBeNull();
    expect(
      container.querySelector('[data-testid="skeleton-parties-2"]')
    ).not.toBeNull();
    expect(
      container.querySelector('[data-testid="skeleton-claims-1"]')
    ).not.toBeNull();
    expect(
      container.querySelector('[data-testid="skeleton-claims-2"]')
    ).not.toBeNull();
    expect(
      container.querySelector('[data-testid="skeleton-claims-3"]')
    ).not.toBeNull();
    expect(
      container.querySelector('[data-testid="skeleton-cas"]')
    ).not.toBeNull();

    unmount();
  });

  it("header_band_is_taller_than_secondary_rows", () => {
    const { container, unmount } = renderIntoContainer(<RemitDrawerSkeleton />);

    const header = container.querySelector('[data-testid="skeleton-header"]') as HTMLElement;
    const financial = container.querySelector(
      '[data-testid="skeleton-financial"]'
    ) as HTMLElement;

    const headerHeight = Number(header.style.height.replace("px", ""));
    const financialHeight = Number(financial.style.height.replace("px", ""));

    // Header hosts the remit id + status + close button — visibly
    // taller than the financial summary card's secondary row.
    expect(headerHeight).toBeGreaterThan(0);
    expect(headerHeight).toBeLessThanOrEqual(financialHeight);

    unmount();
  });

  it("no_props_required", () => {
    expect(() => {
      const { unmount } = renderIntoContainer(<RemitDrawerSkeleton />);
      unmount();
    }).not.toThrow();
  });
});
