// @vitest-environment happy-dom
(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 { FinancialSummaryCard } from "./FinancialSummaryCard";
import type { RemitDetail } from "@/hooks/useRemitDetail";

const SAMPLE: RemitDetail = {
  id: "REM-1",
  claimId: "CLM-1",
  payerName: "Medicaid",
  paidAmount: 100.0,
  adjustmentAmount: 25.0,
  receivedDate: "2026-01-15T00:00:00Z",
  checkNumber: "EFT-12345",
  status: "received",
  paymentMethod: "EFT",
  paymentDate: "2026-01-14",
};

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("FinancialSummaryCard", () => {
  it("renders_paid_amount_adjustment_method_date_check", () => {
    const { container, unmount } = renderIntoContainer(
      <FinancialSummaryCard remit={SAMPLE} />
    );

    // Paid amount headline.
    const paid = container.querySelector('[data-testid="summary-paid"]');
    expect(paid?.textContent).toContain("100");

    // Adjustment amount headline — present when non-zero.
    const adjustment = container.querySelector(
      '[data-testid="summary-adjustment"]'
    );
    expect(adjustment?.textContent).toContain("25");

    // Supporting rows.
    expect(container.querySelector('[data-testid="summary-method"]')?.textContent)
      .toContain("EFT");
    expect(
      container.querySelector('[data-testid="summary-payment-date"]')?.textContent
    ).toBeTruthy();
    expect(
      container.querySelector('[data-testid="summary-check-number"]')?.textContent
    ).toContain("EFT-12345");

    unmount();
  });

  it("renders_emdash_for_missing_payment_method_and_check_number", () => {
    const { container, unmount } = renderIntoContainer(
      <FinancialSummaryCard
        remit={{
          ...SAMPLE,
          paymentMethod: null,
          checkNumber: "",
          paymentDate: null,
        }}
      />
    );

    // Optional fields gracefully degrade to "—".
    expect(
      container.querySelector('[data-testid="summary-method"]')?.textContent
    ).toContain("—");
    expect(
      container.querySelector('[data-testid="summary-check-number"]')?.textContent
    ).toContain("—");

    unmount();
  });

  it("adjustment_amount_renders_emdash_when_zero", () => {
    const { container, unmount } = renderIntoContainer(
      <FinancialSummaryCard
        remit={{ ...SAMPLE, adjustmentAmount: 0 }}
      />
    );

    // Zero adjustments don't deserve a dollar figure — em-dash is the
    // project's idiomatic "nothing here" marker. The summary card
    // nests the label + value in two spans; we check the value span
    // specifically (the second child of the headline block) so the
    // assertion isn't polluted by the eyebrow label.
    const adjustment = container.querySelector(
      '[data-testid="summary-adjustment"]'
    );
    const spans = adjustment?.querySelectorAll("span");
    // [label, value]
    const valueText = spans?.[1]?.textContent?.trim();
    expect(valueText).toBe("—");

    unmount();
  });
});
