// @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, vi } from "vitest";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RemitDrawerHeader } from "./RemitDrawerHeader";
import type { RemitDetail } from "@/hooks/useRemitDetail";

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

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("RemitDrawerHeader", () => {
  it("renders_remit_id_status_paid_amount_close_and_raw_link", () => {
    const onClose = vi.fn();
    const { container, unmount } = renderIntoContainer(
      <RemitDrawerHeader remit={SAMPLE} onClose={onClose} />
    );

    // Remit id surfaced in the mono ID slot.
    const idEl = container.querySelector('[data-testid="header-id"]');
    expect(idEl?.textContent).toBe("REM-1");

    // Status badge carries the status text.
    const statusEl = container.querySelector('[data-testid="header-status"]');
    expect(statusEl?.textContent?.toLowerCase()).toContain("received");

    // Paid amount is rendered (usdPrecise → $100.00).
    const paidEl = container.querySelector('[data-testid="header-paid"]');
    expect(paidEl?.textContent).toContain("100");

    // Raw 835 link points at the per-id raw endpoint and opens in a
    // new tab. The href must encode the id so the backend route
    // resolves cleanly.
    const rawLink = container.querySelector(
      '[data-testid="header-raw-link"]'
    ) as HTMLAnchorElement | null;
    expect(rawLink).not.toBeNull();
    expect(rawLink?.getAttribute("href")).toBe("/api/remittances/REM-1/raw");
    expect(rawLink?.getAttribute("target")).toBe("_blank");

    // Close button fires onClose.
    const closeBtn = container.querySelector(
      '[data-testid="header-close"]'
    ) as HTMLButtonElement | null;
    expect(closeBtn).not.toBeNull();
    expect(onClose).not.toHaveBeenCalled();
    act(() => {
      closeBtn?.click();
    });
    expect(onClose).toHaveBeenCalledTimes(1);

    unmount();
  });

  it("maps_reconciled_status_to_success_variant", () => {
    const onClose = vi.fn();
    const { container, unmount } = renderIntoContainer(
      <RemitDrawerHeader
        remit={{ ...SAMPLE, status: "reconciled" }}
        onClose={onClose}
      />
    );

    // The Badge primitive renders a div with a class name that
    // encodes the variant; success variant renders the green pill.
    const statusEl = container.querySelector('[data-testid="header-status"]');
    const text = (statusEl?.textContent ?? "").toLowerCase();
    expect(text).toContain("reconciled");
    // bg-[hsl(var(--success)/0.15)] is the success variant's class
    // marker per the badge CVA in `src/components/ui/badge.tsx`.
    const cls = statusEl?.getAttribute("class") ?? "";
    expect(cls).toMatch(/success/);

    unmount();
  });
});
