// @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 { PartiesGrid } from "./PartiesGrid";
import type { RemitDetail } from "@/hooks/useRemitDetail";

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("PartiesGrid", () => {
  it("renders_payer_and_payee_cards", () => {
    const sample: RemitDetail = {
      id: "REM-1",
      claimId: "CLM-1",
      payerClaimControlNumber: "PCN-1",
      payerName: "Medicaid",
      paidAmount: 100,
      adjustmentAmount: 0,
      receivedDate: "2026-01-15T00:00:00Z",
      checkNumber: "EFT-1",
      status: "received",
      payer: {
        name: "Colorado Medicaid",
        id: "SKCO0",
        address: {
          line1: "100 Insurance Way",
          city: "Denver",
          state: "CO",
          zip: "80202",
        },
      },
      payee: {
        name: "TOC, Inc.",
        npi: "1881068062",
        address: {
          line1: "200 Clinic Rd",
          city: "Boulder",
          state: "CO",
          zip: "80301",
        },
      },
    };

    const { container, unmount } = renderIntoContainer(
      <PartiesGrid parties={sample} fallbackName={sample.payerName} />
    );

    // Payer card carries the payer name + id + address.
    const payerCard = container.querySelector('[data-testid="party-payer"]');
    expect(payerCard).not.toBeNull();
    expect(payerCard?.textContent).toContain("Colorado Medicaid");
    expect(payerCard?.textContent).toContain("SKCO0");
    expect(payerCard?.textContent).toContain("100 Insurance Way");

    // Payee card carries the payee name + NPI + address.
    const payeeCard = container.querySelector('[data-testid="party-payee"]');
    expect(payeeCard).not.toBeNull();
    expect(payeeCard?.textContent).toContain("TOC, Inc.");
    expect(payeeCard?.textContent).toContain("1881068062");
    expect(payeeCard?.textContent).toContain("200 Clinic Rd");

    unmount();
  });

  it("falls_back_to_payerName_and_pcn_when_payer_block_missing", () => {
    // The current backend doesn't populate `payer`/`payee` blocks on
    // the detail endpoint. The grid must still render useful cards
    // using the remit's `payerName`, `payerClaimControlNumber`, and
    // `claimId` fields.
    const sample: RemitDetail = {
      id: "REM-1",
      claimId: "CLM-1",
      payerClaimControlNumber: "PCN-1",
      payerName: "Medicaid",
      paidAmount: 100,
      adjustmentAmount: 0,
      receivedDate: "2026-01-15T00:00:00Z",
      checkNumber: "",
      status: "received",
      payer: null,
      payee: null,
    };

    const { container, unmount } = renderIntoContainer(
      <PartiesGrid parties={sample} fallbackName={sample.payerName} />
    );

    const payerCard = container.querySelector('[data-testid="party-payer"]');
    // The payer card uses the remit's payerName (fallback) and the
    // PCN is shown as identity.
    expect(payerCard?.textContent).toContain("Medicaid");
    expect(payerCard?.textContent).toContain("PCN PCN-1");

    const payeeCard = container.querySelector('[data-testid="party-payee"]');
    // The payee card has no NPI in this shape → "No NPI on file".
    expect(payeeCard?.textContent).toContain("No NPI on file");

    unmount();
  });
});
